您的位置：首页 > Web前端 > JQuery

a毛 jquery 学习记 4过滤选择器1

2016-04-07 22:41 519 查看

jquery 学习四(1) 过滤选择器

参考资料：李炎恢老师的视频、w3cschool 、锋利的jquery、

做法跟前面一样，复制前面的文件夹到'4过滤选择器1'中，

index.html页面内容如下：

<body>
<ul id='box'>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ul>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ul>
</body>

1、基本过滤选择器

先了解一下如下表：

dom.js

$(function(){
$('li:first').css('background',"#ccc");        //将列表li的第一个加背景颜色；
$("li:last").css('background',"#ccc");        //将列表li的最后一个加背景颜色；
$("#box li:last").css('background',"#ccc");  //将列表id为box的li的最后一个加背景颜色
$('ul:first li:last').css('background',"#ccc");  //ul第一个,li的最后一个加背景颜色
$('li:not(.pox)').css('background',"#ccc");   //将class不是 pox 的 li元素加背景颜色
   $('li:even').css('background',"#ccc");   //  将 索引是偶数的 li元素添加背景颜色
   $('li:odd').css('background',"#ccc");    // 将 索引是奇数的 li元素添加背景颜色
    $("li:eq(2)").css('background',"#ccc");    //将选中的第3 个li元素添加背景颜色 (注意是以0开始数，所以这里是第3个)
    $("li:eq(-2)").css('background',"#ccc");   //将选中的倒数第2 个li元素添加背景颜色
    $("li:gt(2)").css('background',"#ccc");   //将第3 个li之后的元素添加背景颜色
    $("li:gt(-2)").css('background',"#ccc");   //将倒数第2 个li之后的元素添加背景颜色
$("li:lt(2)").css('background',"#ccc"); //将第2个以上的li元素加背景颜色

$(':header').css('background',"#ccc"); //将标题元素加背景颜色   （h1~h6）

//焦点过滤器，注意：
  $(':focus').css('background',"red");   //当我们直接写这行代码的时候不能变颜色，这是为什么呢
//这是 因为刷新时，焦点不在上面，而我点进去时，触发了一个事件 ， 触发的事件不能激活我们上面的样式
    //所以，必须在网页刷新加载的时候就存在激活状态，它之前加这样一行代码
$('input').get(0).focus();//取出input的DOM元素，默认情况下给它加上焦点
  });

jQuery为最常用的过滤器添加了专用的方法，已达到提高性能和效率的作用；

如first,last,not,eq 测试如下

$(function(){
//  $('li').first().css('background',"#ccc");
//$('li').last().css('background',"#ccc");
// $('li').not('red').css('background',"#ccc");
// $('li').eq(2).css('background',"#ccc");

});

有方法的尽量用方法，这样可提高效率，速度；
2、内容过滤选择器

先了解一下如下表

index.html 修改增加如下代码：

<div> 我的家在黄土高坡 gp</div>
<div> 我的家在山西 sx</div>
<div>  </div>.

dom.js

$(function(){
$('div:contains("gp")').css('background',"#ccc"); //将div下有'gp'内容的增加背景颜色

});

第二个为空的试验了好多次没有出现想要的效果，不知道为什么：代码如下哪位大神可以看出来帮忙纠正一下

$(function(){
$('div:empty').css('background','#ccc').css('height','20px');
});

$(function(){
$('ul:has(.pox)').css('background','#ccc'); //注意，这里是 选择子元素含有 class 是pox 的元素  所以是这样写
});

$(function(){
$('ul:parent').css('background','#ccc');  //将含有子元素的'ul'元素，增加背景颜色
});

jQuery 提供了一个 has()方法来提高:has 过滤器的性能：

$('ul').has('.pox').css('background', '#ccc'); //选择子元素含有 class 是 pox 的元素

jQuery 提供了一个名称和:parent 相似的方法，但这个方法并不是选取含有子元素或文本的元素，而是获取当前元素的父元素，返回的是元素集合。

1、parent();

$(function(){
$('li').parent().css('background','#ccc');  ////选择当前元素的父元素
alert($('li').parent().size());  //查看li有几个父元素
});

2、parents();

$(function(){
$('li').parents().css('background','#ccc');  ////选择当前元素的父元素及祖先元素
alert($('li').parents().size());  //查看li有几个父元素及祖先元素
for(var i = 0; i<$('li').parents().size() ;i++){  //查看他父元素及祖先元素是些啥
alert($('li').parents().get(i));
}
});

3、parentsUntil

$(function(){
$('li').parentsUntil('body').css('background', '#ccc');  //选择当前元素遇到'body'父元素停止
});

3、可见性过滤选择器
先了解一下如下表

$(function(){

$('div:hidden').css('background', '#ccc').show(1000);  //将隐藏的元素，添加背景颜色1秒钟之后慢慢的显示出来
alert($('div:visible').size());
$('div:visible').css('background', '#ccc')
});

$('p:hidden).size(); //元素 p 隐藏的元素

$('p:visible').size(); //元素 p 显示的元素

注意：:hidden 过滤器一般是包含的内容为：CSS 样式为 display:none、input 表单类型为 type="hidden"和 visibility:hidden 的元素。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航