JQ基础总结 - 爱码网

JQ 基础教程

01JQ 选择器

$(\'p\') //元素选择器 
$(\'#id\') //id选择器 
$(\'.class\') //类选择器 
$ (\'*\') //选取全部元素 
$ (\'this\') // 获取当前元素

02JQ 事件

$(\'#id\').click(); // 点击事件 
$(\'#id\').mouseenter() // 鼠标事件
$(\'#id\').keypress() // 键盘事件
$(\'#id\').submit() // 表单事件
$(\'#id\').load() // 文档事件

03JQ 显示隐藏

hide()&&show()

$(\'#id\').click(function(){
	$(\'.class\').hide(1000);
	$(\'.class\').show(1000);
})

toggle()

$(\'#id\').click(function(){
	$(\'.class\').toggle(1000);
})

淡入淡出

fadeIn() 淡入
fadeOut() 淡出
fadeToggle() 淡入淡出
fadeTo() 元素变透明

$(\'#id\').click(function(){
	$(\'.class\').fadeIn();
	$(\'.class\').fadeIn("slow");
	$(\'.class\').fadeIn(1000);
	
	$("#div1").fadeOut();
	$("#div2").fadeOut("slow");
	$("#div3").fadeOut(3000);
	
	$("#div1").fadeToggle();
	$("#div2").fadeToggle("slow");
	$("#div3").fadeToggle(3000);
})

JQ滑动

slideDown() 下拉滑动
slideUp() 上滑
slideToggle()

$(\'#id\').click(function(){
	$(\'.clss\').slideDown(1000);
	$(\'.clss1\').slideUp(1000);
	$(\'.clss2\').slideToggle(1000)
})

JQ动画animate()

// 动画
$(\'#id\').click(function(){
	$(\'.class\').animate(
	 {
		  left:\'250px\',
		  opacity:\'0.5\',
	      height:\'150px\',
		  width:\'150px\'
	 }
	);
	var divBox = $(\'#div\');
	divBox.animate({height:150px,opacity:\'0.4\'});
	divBox.animate({width:350px,opacity:\'1.4\'});
})
// 停止动画 
$(\'#button\').click(function(){
	$(\'.divBoxLer\').stop();
	// stop() 可以添加两个参数 来控制动画的执行
})

JQ动画链

$(\'#id\').click(function(){
	$(\'.clss\').css(\'width:150px\').slideDown(1000).slideUp(2000);
})

04JQ DOM操作

获取返回内容

		$(document).ready(function(){
			 $(\'#id\').click( function(){
				 var textData = $(\'.p\').text("Hello world!");
				 var textHtml = $(\'.PL\').html("Hello world!");
				 console.log(taxtData);
				 console.log(textHtml);
			 })
		})

获取表单的值

        $(document).ready(function(){
			$(\'#button\').click(function(){
			 var formData = $(\'#name\').val("Hello world!");
			 console.log(formData,\'数据\')
			})
		})

获取属性

$(document).ready(function(){
  $("button").click(function(){
    alert($("#runoob").attr("href",\'Hello world!\'));
  });
});

05JQ 添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

	$(document).ready( function(){
			$(\'#button\').click( function(){
				$(\'.p\').append(\'添加在p标签尾部的新内容\');
				$(\'.p\').prepend(\'添加在p标签开头的新内容\');
				
				var text = $(\'<li></li>\').html(\'添加内容\')
				$(\'#ul .li\').after(text)
				$(\'#ul .li\').before(text)
			})
		})

06JQ 删除元素

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

	$(document).ready( function(){
		$(\'#button\').click(){
			$(\'.class\').remove();
			$(\'.class\').empty();
		}
		})

07JQ 操作CSS

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性


$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
	$("h1,h2,p").removeClass("blue");
	$("h1,h2,p").toggleClass("blue");
	$("h1,h2,p").css("background-color");
  });
});

08JQ 操作尺寸

width() 返回元素的宽度
height() 返回元素的高度
innerWidth() 元素的宽度（包括内边距）
innerHeight() 元素的高度（包括内边距）
outerWidth() 元素的宽度（包括内边距和边框）
outerHeight() 元素的高度（包括内边距和边框）

09JQ 异步交互

load()方法

$(selector).load(URL,data,callback);

        $(document).ready( function(){
			$(\'#button\').click(function(){
				$(\'.form\').load(\'./api/newData.txt\')
			})
		})

$.get() 方法

$.get(URL,callback);

        $(document).ready( function(){
			$(\'#button\').click(function(){
				$.get(\'URL\',function(data,status){
					console.log(data,\'数据\')
				})
			})
		})

$.post() 方法

$.post(URL,data,callback);

        $(document).ready( function(){
			$(\'#button\').click(function(){
				$.post(\'url\',{
					name:\'name\',
					url:\'url\',
					},
					function(data,status){
						console.log(data,\'数据\')
					}
				)
			})
		})