1、get( ) 需获取原生元素时使用(应用较少)
<body> <div class = "demo">1</div> <div class = "demo">2</div> <div class = "demo">3</div> <script src = "./jquery.js"></script> <script> //(get 是获取的意思,并且获取的是原生dom) //0 1 2 3 //-1 -2 -3 //null undefined 或不传参 返回[dom,dom,dom] 原生数组 console.log( $('.demo').get() ); </script> </body>
get( ) 方法的源码(原理):
jQuery.prototype.get = function(num){ if (num == null){ return Array.prototype.slice.call(this,0); //一般写简化写法 return [].slice.call(this,0) }else{ if (num >= 0) { return this[num]; }else { return this[num + this.length] } } }
简化写法:
jQuery.prototype.get = function(num){
return num !=null ? (num >= 0 ? this[num] : this[num + this.lenght]) : [].slice.call(this,0);
}
2、eq( )
$('.demo:eq()') = $('.demo').eq() //后者更灵活(jQ的精髓是链式调用) $('.demo').css().eq(0).css() //可分段给样式
3、find( ) (在原有基础上往下查找)
<body> <div class = "wrapper"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <script src = "./jquery.js"></script> <script> //find() 可放置 css selector jquery unique selector dom $() $('.wrapper') .css({position:'relative'}) .find('ul') .css({listStyle:'none'}) .find('li') .css({color:'red'}) </script> </body>
4、.filter( ) 过滤 (在前面的基础上针对选择的东西进行限制)
<body> <div class = "wrapper"> <ul> <li>1</li> <li class = 'demo'>2</li> <li>3</li> <li>4</li> <li class = 'demo'>5</li> </ul> </div> <ul> <li>1</li> <li class = 'demo'>2</li> <li>3</li> <li>4</li> <li class = 'demo'>5</li> </ul> <script src = "./jquery.js"></script> <script> // css selector jquery unique selector $('.wrapper ul').find('ul').filter('.demo') //过滤出第一块div里class为demo的li元素 // function $('.wrapper ul li').filter(function(index,ele){ return index % 2 == 0; }).css({color:'red'}) //index为索引 ele为元素 并且是原生的 //filter 强大在自定义function功能上 </script> </body>
$('.wrapper ul') .find('li') .flter(':odd') .css({color:'red'}) //在Li元素中过滤 (过滤是在前面的基础上进行筛选)
5、not 方法与 filter 方法相反 (fliter 是过滤出符合条件的元素 ,not 是过滤出不符合条件的)
6、has( ) 筛选
<ul> <li> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </li> <li></li> <li></li> <li></li> <li></li> </ul> <script src = "./jquery.js"></script> <script> $('li').has('ul').css() //选出后代元素有ul的li (选择什么元素就先写在$()里) </script> </body>
7、is ( )
<div class="wrapper"> <sapn class="demo">span-1</sapn> <sapn class="demo">span-2</sapn> <p class="demo">p-1</p> <sapn class="demo">span-3</sapn> </div> <script src = "./jquery.js"></script> <script> $('.wrapper .demo').is('span'); //前后有交集就返回true </script>
is应用:
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script src = "./jquery.js"></script> <script> $('ul').click(function(e){ if ( $(e.target).is('li') ){ alter( $(e.target).text() ) }eles{ alter( $(this.target).text() ) } }) //点击ul显示全部文本 点击li显示各自文本 </script>
8、add( ) 集中操作
<div class = "wrapper"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <script src = "./jquery.js"></script> <script> $('.wrapper').add('ul').css() //可以把不相关的元素集中在一起操作 </script>
9、end( ) 回退操作
<div class = "wrapper"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <script src = "./jquery.js"></script> <script> $('.wrapper') .css({position:'relative'}) .find('ul') .css({position:'absolute'}) .end() .css({position:'absolute'}) //end 回退到ul的prevobject指向的wrapper </script>