如何使用jQuery
使用jQuery只需要在页面的<head>引入jQuery文件即可：
1 <html> 2 <head> 3 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 4 ... 5 </head> 6 <body> 7 ... 8 </body> 9 </html>
$符号
$是著名的jQuery符号。实际上，jQuery把所有功能全部封装在一个全局变量jQuery中，而$也是一个合法的变量名，它是变量jQuery的别名
选择器
按id查找
1 // 查找<div id="abc">: 2 var div = $('#abc');
注意：#abc以#开头，返回的对象为jQuery对象，如果id为abc的div不存在，返回[]
jQuery对象与DOM对象的相互转化
1 var div = $('#abc'); // jQuery对象 2 var divDom = div.get(0); // 假设存在div，获取第1个DOM元素 3 var another = $(divDom); // 重新把DOM包装为jQuery对象
按tag查找
按tag查找只需要写上tag的名称就行。
1 var ps = $('p'); // 返回所有<p>节点 2 ps.length; // 数一数页面有多少个<p>节点
按class查找
按class查找需要在class名称前加上一个.
1 var a = $('.red'); // 所有节点包含`class="red"`都将返回 2 // 例如: 3 // <div class="red">...</div> 4 // <p class="green red">...</p>
通常很多节点有多个class，我们可以查找同时包含red和green的节点
1 var a = $('.red.green'); // 注意没有空格！ 2 // 符合条件的节点： 3 // <div class="red green">...</div> 4 // <div class="blue green red">...</div>
按属性查找
比如在一个表单中按属性查找
1 var email = $('[name=email]'); // 找出<??? name="email"> 2 var passwordInput = $('[type=password]'); // 找出<??? type="password"> 3 var a = $('[items="A B"]'); // 找出<??? items="A B">
组合查找
组合查找就是把上述的简单选择器组合起来使用。
1 var emailInput = $('input[name=email]'); // 不会找出<div name="email">
同样的，根据tag和class来组合查找也很常见：
1 var tr = $('tr.red'); // 找出<tr class="red ...">...</tr>
层级查找
在给定的祖先元素下匹配所有的后代元素
1 $('#i10 a') 子子孙孙 2 $('#i10>a') 儿子
筛选
1 <div> 2 <a>asdf</a> 3 <a>asdf</a> 4 <a id='i1'>asdf</a> 5 <a>asdf</a> 6 <a id='ii1'>asdf</a> 7 <a>asdf</a> 8 </div> 9 10 $('#i1').next() 当前元素的下一个兄弟标签 11 $('#i1').nextAll() 当前元素的下面所有兄弟标签 12 $('#i1').nextUntil('#ii1') 当前元素的下面到id=ii1之前的所有标签 13 14 $('#i1').prev() 当前元素的上一个兄弟标签 15 $('#i1').prevAll() 当前元素的上面所有兄弟标签 16 $('#i1').prevUntil('#ii1') 当前元素的上面到id=ii1之前的所有标签 17 18 $('#i1').parent() 当前元素的父标签 19 $('#i1').parents() 当前元素的所有父辈标表 20 $('#i1').parentsUntil() 当前元素的所有的父辈元素，直到遇到匹配的那个元素为止 21 22 $('#i1').children() 当前元素的所有子标签 23 $('#i1').siblings() 当前元素的所有兄弟标签 24 $('#i1').find() 在当前元素的所有的子标签中寻找特定的标签 25 $('li:eq(1)') 在当前元素中的第一个子标签 26 $('li').eq(1) 同上 27 first() 获取第一个元素 28 last() 获取最后一个元素 29 hasClass(class) 判断该元素是否某个class样式
文本操作
$(..).text() # 取得所有匹配元素的内容。 $(..).text(“<a>1</a>”) # 设置所有匹配元素的内容。 $(..).html() #取得第一个匹配元素的html内容 $(..).html("<a>1</a>") #用于设定HTML内容的值(如果内容为HTML代码则在当前元素下增加一个子标签) $(..).val() #获得匹配元素的当前值(所有具有value属性的标签)。 $(..).val(..) #设置匹配元素的当前值(所有具有value属性的标签)。
样式操作
addclass 为当前元素增加一个类
removeclass 为当前元素删除一个类
toggleclass 当前元素的某个类如果存在（不存在）就删除（添加）。
属性操作
专门用于做自定义属性
$(..).attr("n") 获取n属性的值
$(..).attr("n","v") 设置n属性的值，如果存在则覆盖
$(..).removeattr("n") 移除n属性
专门用于chekbox，radio
$(..).prop("checked") 获取是否被选定，选定返回true，否则返回false
$(..).prop("checked"，true) 设置选定
文档处理
append 向每个匹配的元素内部追加内容。
prepend 向每个匹配的元素内部前置内容。
after 在每个匹配的元素之后插入内容
before 在每个匹配的元素之前插入内容。
1 HTML代码 2 <p>I would like to say: </p> 3 4 jQuery代码 5 $("p").append("<b>Hello</b>"); 6 $("p").prepend("<b>Hello</b>"); 7 $("p").after("<b>Hello</b>"); 8 $("p").before("<b>Hello</b>"); 9 10 结果 11 append：[ <p>I would like to say: <b>Hello</b></p> ] 12 prepend：[ <p><b>Hello</b>I would like to say: </p> ] 13 after：<p>I would like to say: </p><b id="foo">Hello</b> 14 before：[ <b>Hello</b><p>I would like to say: </p> ]
css处理
$("t1").css("样式名称","样式值")
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .container{ 8 padding: 50px; 9 border: 1px solid #dddddd; 10 } 11 .item{ 12 position: relative; 13 30px; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="container"> 19 <div class="item"> 20 <span>赞</span> 21 </div> 22 </div> 23 <div class="container"> 24 <div class="item"> 25 <span>赞</span> 26 </div> 27 </div> 28 <div class="container"> 29 <div class="item"> 30 <span>赞</span> 31 </div> 32 </div> 33 <div class="container"> 34 <div class="item"> 35 <span>赞</span> 36 </div> 37 </div> 38 </body> 39 <script src="jquery-3.3.1.js"></script> 40 <script> 41 42 $(".item").click(function () { 43 append_span(this) 44 }); 45 function append_span(self) { 46 var fontsize=15; 47 var top=0; 48 var right=0; 49 var opacity = 1; 50 var tag=document.createElement("span"); 51 $(tag).text("+1"); 52 $(tag).css("position",'absolute'); 53 $(tag).css("color","green"); 54 $(tag).css("fontSize",fontsize+"px"); 55 $(tag).css("top",top+"px"); 56 $(tag).css("right",right+"px"); 57 $(tag).css("opacity",opacity); 58 $(self).append(tag); 59 60 var obj=setInterval(function () { 61 fontsize=fontsize+10; 62 top=top-10; 63 right=right-10; 64 opacity = opacity-0.1; 65 $(tag).css("fontSize",fontsize+"px"); 66 $(tag).css("top",top+"px"); 67 $(tag).css("right",right+"px"); 68 $(tag).css("opacity",opacity); 69 if (opacity<0){ 70 console.log(1111); 71 clearInterval(obj); 72 $(tag).remove() 73 } 74 },40) 75 } 76 </script>
位置
$(window).scrollTop() 获取窗口滚轮的位置
$(window).scrollTop(0) 设置窗口滚轮的位置
offset().left 指定标签在html中的坐标
offset().top 指定标签在html中的坐标
$('i1').height() # 获取标签的高度 纯高度
$('i1').innerHeight() # 内边距 + 纯高度
$('i1').outerHeight() # 边框 + 纯高度 +内边距
$('i1').outerHeight(true) # 边框 + 纯高度 +内边距+外边距
事件
绑定事件
1 $('.c1').click() 2 $('.c1')..... 3 4 $('.c1').bind('click',function(){}) 5 6 $('.c1').unbind('click',function(){}) 7 8 9 $('.c').delegate('a', 'click', function(){}) 10 $('.c').undelegate('a', 'click', function(){}) 11 12 $('.c1').on('click', function(){}) 13 $('.c1').off('click', function(){}) 14 15 //绑定与解绑的方法必须一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="t1" type="text" />
<input id="a1" type="button" value="添加" />
<ul id="u1">
<li>1</li>
<li>2</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
$('#a1').click(function () {
var v = $('#t1').val();
var temp = "<li>" + v + "</li>";
$('#u1').append(temp);
});
$('ul').delegate('li','click',function () {
var v = $(this).text();
alert(v);
});
// $('ul').on('click','li',function () {
// var v = $(this).text();
// alert(v);
// })
</script>
</body>
</html>
注意：$("必须是最外层父辈元素")
组织事件发生
return false
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <a onclick="return ClickOn()" href="http://www.oldboyedu.com">走你1</a> 9 10 <a id="i1" href="http://www.oldboyedu.com">走你2</a> 11 <script src="jquery-1.12.4.js"></script> 12 <script> 13 function ClickOn() { 14 alert(123); 15 return false; 16 } 17 $('#i1').click(function () { 18 alert(456); 19 return false; 20 }) 21 </script> 22 </body> 23 </html>
jQuery扩展
$.extend 调用方式：$.方法
$.fn.extend 调用方式：$(..).方法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <script src="jquery-1.12.4.js"></script> 10 <script> 11 // jquery扩展 12 $.fn.extend({ 13 "hanyang": function () { 14 return 'db'; 15 } 16 }); 17 var v = $('#i1').hanyang(); 18 alert(v); 19 20 $.extend({ 21 'wangsen': function () { 22 return 'sb'; 23 } 24 }); 25 var v = $.wangsen(); 26 alert(v); 27 </script> 28 29 </body> 30 </html>
当页面框架加载完成之后，自动执行
$(function(){
$(...)
})
防止页面未加载完成，造成事件绑定不及时