jQuery-选择器大全

一、jQuery简介

jQuery是一个优秀的javascrip库,它以写更少的代码、做更多的事情为宗旨。jQuery是一个快速、简洁的javascript库,使用户能够方便地遍历HTML Documents、操作DOM、处理事件、实现动画效果和提供Ajax交互,此外jQuery兼容CSS3.0及各种浏览器。

老规矩,喏给你图

jQuery-选择器大全_第1张图片
选择器.png

首先,我们先要学习如何获取节点,然后才能更好的去操作我们的页面。
但是我们需要注意的是jq和js还是有区别的、

DOM节点:通过原生js获的DOM对象(DOM树上的节点)
jquery节点:通过jquery选择器获得的是jQuery对象

jQuery对象只能使用jQuery中封装的方法,不能使用DOM对象的方法,同理,DOM对象只能使用DOM的方法不能使用jQuery中封装的方法。

但是:两种选择器之间是可以相互转换的

DOM对象转换成JQ对象: $(DOM对象)
JQ对象转换成DOM对象:(注意:下标是从1开始的)
第一种方法:jQuery对象[index]
第二种方法:jQuery对象.get(index)
好了,直接开始学习挑选我们的选择器吧!

二、基本选择器

2.1通过id名获取元素节点: $("#id)
2.2通过class名获取元素节点:$(".class名")
2.3通过元素标签获取元素节点:$("标签名")
2.4群组选择器:$("选择器1,选择器2")

注意:中间用逗号分割

2.5通配符选择器:$(" * ")
2.6后代选择器:$("list li")

注意:中间用空格分割

2.7子元素选择器:$("#list>li")

注意:中间用>分割

2.8紧邻的同辈选择器 (忽略空白文本节点)

$("#first+");
$("#first++");
$("#first+++");

2.9紧临的后面的同辈选择器$("#first~")

~后面加标签名。可以获取到相邻的后面的所有此标签名的同辈选择器

三、表单元素选择器

重要!!!冒号前面一定要空格

jQuery-选择器大全_第2张图片
根据此图理解下面内容.jpg
3.1 :input 获取表单中所有的input select textarea元素

console.log($("#f1 :input"));

3.2 :text获取单行输入框

console.log($("#f1 :text"));

3.3 :password

console.log($("#f1 :password"));

3.4 :radio

console.log($("#f1 :radio"));

3.5 :checkbox

console.log($("#f1 :checkbox"));

3.6 :file

console.log($("#f1 :file"));

3.7 :image

console.log($("#f1 :image"));

3.8 :hidden

console.log($("#f1 :hidden"));

3.9 :submit

console.log($("#f1 :submit"));

3.10 :reset

console.log($("#f1 :reset"));

3.11 :button

console.log($("#f1 :button"));

四、过滤选择器

注意:过滤选择器要和其他选择器搭配使用
基本过滤选择器:根据下标来过滤

4.1 :first 在匹配的所有li的集合中选取第一个元素

console.log($("li:first"));

4.2 :last 在匹配的所有li的集合中选取最后一个元素

console.log($("li:last"));

4.3 :eq(index) 下标从0开始

console.log($("li:eq(2)))//第三个li

4.4 :gt(dinex) 下标大于index gt:great that

console.log($("li:gt(2)"));

4.5 :lt(dinex) 下标小于index lt: little that

console.log($("li:lt(2)"));

4.6 :odd 奇数

console.log($("li:odd"));

4.7 :even 偶数

console.log($("li:even"));

4.8 :not(指定选择器) 去除与指定选择器匹配的元素

console.log($("li:not(#li2)"));

4.9 :header() 获取到标题元素的集合

$(":header").css("backgroundColor","red");

4.10 :animated 匹配正在执行动画的元素

五、内容过滤选择器

5.1 :contains(指定文本值) 查找所有的包含指定文本值的元素

重要:面试实例

查找出页面中所有包含“招聘”二字的div,把招聘高亮显示
var num = $("div:contains(招聘)") 
for( var i = 0; i招聘");
}
5.2 :has(selector)
//查找所有包含指定选择器的子元素的元素
console.log($("div:has(p)"));
//筛选出含有class为text的子元素的div
console.log($("div:has(.text)"));
5.3 :empty 删选出空元素
5.4 :parent 筛选出非空元素

六、属性过滤选择器

6.1[attr]筛选出含有指定属性的元素
//筛选出含有placeholder属性的元素
console.log($("input[placeholder]"));
6.2 [attr=value]筛选出含有指定属性值的元素

console.log($("input[type=checkbox]"))

6.3 [attr!=value]筛选出属性值不等于指定值的元素

console.log($("input[type!=checkbox]"))

6.4 [attr^=value]筛选出属性值以指定值开头的

$("[class^=banner]").css({"background-color":"red","height":"100px"})

6.5 [attr$=value]筛选出属性值以指定值结尾的
$("[class$=div]").css('background-color','green');
$("[class$=div]").css('height','50px');
$("[class$=div]").css('width','50px');
6.6 [attr*=value]筛选出属性值包含指定值的元素

$("[placeholder*=密码]").css('background-color','red');

6.7 [attr1] [attr2]... [attrN]筛选多个指定属性的元素

$("input[type][placeholder]").css('background-color','pink');

七、子元素过滤选择器

**
注意:子元素过滤选择器
需要在前一个selector与子元素过滤选择器之间加上空格**

7.1 :first-child

console.log($("#big_div div:first-child"));

7.2 :last-child

console.log($("#big_div div:last-child"));

7.3 :nth-child(num|表达式|even|odd) 下标从1开始

$("tbody tr:nth-child(2n)").css("background","orange");

7.4 :nth-last-child(num|表达式|even|odd) 倒数

$("tr :nth-last-child(2)").css("background","blue");

八、可见性选择器

8.1 :hidden
 console.log( $("div:hidden"));
 var div1=$("div:hidden")[0];
 var div2=$("div:hidden")[1];
 var div3=$("div:visible")[0];
 var div4=$("div:visible")[1];
 var div5=$("div:visible")[2];
var jsbtn = document.getElementById("but");
jsbtn.onclick=function(){
    div1.style.display="block";
    div2.style.display="block";
    div3.style.display="none";
    div4.style.display="none";
    div5.style.display="none";
}
8.2 :visible

console.log( $("div:visible"));

九、表单属性过滤选择器

9.1 :enabled 可用的

console.log($(":text:enabled"));

9.2 :disabled 不可用的

console.log($(":text:disabled"));

9.3 :checked 选中的(单选框 多选框)

console.log($(":input:checked"));

9.4 :selected 选中的(下拉列表)

console.log($("option:selected"));
看吧,jquery的选择器是不是比js的选择器简单多了,一个$符号解决了多少问题,果然,通行货币的用处就是多,累不累,文章的末尾给大家讲一个笑话吧,爱笑的小孩,运气都不会太差!


小张墨问:“爸爸,这个楼为什么叫逸夫楼?”
“哦,那是以邵逸夫先生的名字命名的,邵逸夫先生捐了很多教学楼,非常了不起。”
“爸爸也了不起!你看,新加坡国立大学,瑞士国立大学,国立牛津大学,国立清华大学...”

喜欢就赞咯~

你可能感兴趣的:(jQuery-选择器大全)