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>