1.filter() not() 过滤
filter : 过滤 选择
not : filter的反义词 不选择
<div class="box1">11111</div> <div class="box2">22222</div> <script> $(function(){ $('div').filter('.box1').css('background','red'); //设置的是box1 $('div').not('.box1').css('background','blue'); //设置的不是box1而是box2 }); </script>
2.has() 包含
<div>div1<span class="box">span</span></div> <div class="box">div2</div> <script> $(function(){ //filter针对的是当前元素，has()z针对的是当前元素里面的元素 $('div').has('span').css('background','red'); //第一个变红色 $('div').has('.box').css('background','red'); //第一个变红色 $('div').filter('.box').css('background','red'); //第二个变红色 }); </script>
3.next() 下一个 prev()上一个
<h1>标题标题标题</h1> <p>111</p> <div>222</div> <script> $(function () { $('h1').next().css('background','red'); $('p').prev().css('background','blue'); }) </script>
4.find() eq()查找
<div> <h3>h3</h3> <h2>h2</h2> <h3>h3</h3> <h3>h3</h3> <h2>h2</h2> <h2>h2</h2> </div> <h2>h2</h2> <script> $(function(){ $('div').find('h3').css('background','blue'); $('div').find('h2').eq(0).css('background','red'); }); </script>
5. index() 索引就是当前元素在所有兄弟节点中的位置
<ul> <li>11</li> <li>22</li> <li class="three">33</li> <li>44</li> <li>55</li> </ul> <script> $(function () { alert($('.three').index()); //弹出来是2 }) </script>
6.addClass()添加样式 removeClass 移除样式
7.width() //width
innerWidth() //width + padding
outerWidth() //width + padding + border
outerWidth(true) //width + padding + border + margin
<div>div</div> div{ width:100px; height:100px; background:red; padding:10px; border:10px blue solid; margin:10px;} <script> $(function(){ alert( $('div').width() ); //width 100 alert( $('div').innerWidth() ); //width + padding 120 alert( $('div').outerWidth() ); //width + padding + border 140 alert( $('div').outerWidth(true) ); //width + padding + border + margin 160 }); </script>
8.insertBefore()把一个节点添加到一个指定节点的前面; insertAfter()把一个节点添加到一个指定节点的后面(外部的前面或后面)
appendTo相当于原生的appendChild appendTo把一个节点添加到一个指定节点内部的最后面
prependTo相当于原生的 appendTo把一个节点添加到一个指定节点内部的最前面
<html> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <script> $(function(){ $('span').insertBefore($('div')); }) </script> </head> <body> <div>div</div> <span>span</span> </body> </html>
span标签被剪切到div标签前面
<html> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <script> $(function(){ $('div').insertAfter($('span')); }) </script> </head> <body> <div>div</div> <span>span</span> </body> </html>
div标签被剪切到span标签前面
<html> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <script> $(function(){ $('div').appendTo($('span')); }) </script> </head> <body> <div>div</div> <span>span</span> </body> </html>
把div标签剪切放到span标签里面的最后面
<html> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <script> $(function(){ $('div').prependTo($('span')); }) </script> </head> <body> <div>div</div> <span>span</span> </body> </html>
把div标签剪切放到span标签里面的最前面
<html> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <script> $(function(){ //$('span').insertBefore('div');//把span标签剪切到div标签的前面 //$('div').before($('span'));//div的标签前面是span //区别 ：后续操作变了 //$('span').insertBefore( $('div') ).css('background','red');//span变成红色 //$('div').before( $('span') ).css('background','red');//div变成红色 }) </script> </head> <body> <div>div上</div> <span>span下</span> </body> </html>
insertBefore insertAfter appendTo prependTo和before after append prepend 都可以把标签调换到一样的位置，但是后续操作加样式却不一样了
9.remove()删除节点
$('div').remove()
<div></div>
<span><span>
div标签被删掉
10.指定元素的一个或多个事件绑定事件处理函数
要删除通过on()绑定的事件，请使用off()函数。如果要附加一个事件，只执行一次，然后删除自己，请使用one()函数。从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <script> $(function(){ /*$('div').click(function(){ alert(123); });*/ /*$('div').on('click',function(){ alert(123); });*/ /*$('div').on('click mouseover',function(){ alert(123); });*/ $('div').on({ 'click' : function(){ alert(123); }, 'mouseover' : function(){ alert(456); } }); }); </script> </head> <body> <div>div</div> <span>span</span> </body> </html>
11.scrollTop()滚动条相对于其顶部的偏移。
<html> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <script> $(function(){ $(document).click(function(){ alert($(window).scrollTop()); }); }); </script> </head> <body style="height:2000px"> 内容内容内容内容内容内容内容内容内容内容内容内容内容内容 </body> </html>
滚动条垂直位置和滚动区隐藏区域的顶部高度像素值是相同的。如果滚动条是在最顶部，或者这个元素没有可滚动的，那么这个数字是0。