jQuery选择器及选择器及jQuery基本操作基本操作
吐血整理,如有错误,欢迎指出,感激不尽吐血整理,如有错误,欢迎指出,感激不尽~
目录目录1. jq选择器2. 属性操作3. Class操作4. 样式操作5. 内容操作6. 尺寸操作
1. jq选择器选择器
jq的选择器,就是在执行jq函数时传参
是用来获取DOM元素的方法,通过下标可以获取其中某一个DOM元素
$ 函数不管使用选择器选中了几个元素,$函数的返回值都是一个对象(伪数组)
jq选择器是jq最核心的内容,大大简化的了DOM对象的查询
css1-css3的选择器,都可以当做$函数的参数,如下:
Id选择器: $("#box");
Class选择器: $(".box");
标签选择器: $("span");
通配符选择器: $("*");
包含选择器: $("#box p");
子选择器: $("#box>p");
群组选择器: $("#box,.cont,p");
属性选择器: $("input[type=button]");
还有一些特殊的选择器,如下:
$("#box:first");
$("#box:last");
$("#box:eq(3)");
$("#box:odd");
$("#box:even");
及jq的筛选器(对选择器获取到的一组标签对象进行筛选,便于链式编程),如下:
.first(): 匹配第一个
.last(): 匹配最后一个
.eq(): 匹配指定下标
.find(): 匹配指定的后代元素
.children(): 匹配指定的子元素
.prev(): 匹配上一个兄弟
.prevAll(): 匹配上面所有的兄弟
.next(): 匹配下一个兄弟
.nextAll(): 匹配下面所有兄弟
.siblings(): 匹配所有兄弟,不管上下
.parent(): 匹配直接父级
.parents(): 匹配所有父级
.end(): 匹配链式编程选择器的上一级
jq的$函数类似于原生就是document.querySelectorAll()
实际上先有jq,然后原生js才有了querySelectorAll()
原生js的DOM对象和jq的DOM对象的转换方式:
// 原生js转jq
$(原生DOM对象);
// jq转原生js
jqDOM对象[0];
jq选择器的使用方法如下,部分举例,希望大家可以举一反三哦~~
// 属性
$("input[abc=hello][qwe]").css("background","red");
// 包含:后代
$(".msg h2").css("background","red");
// 群组:
$("#box,.cont,span").css("background","red");
// 包含:子
$(".msg>h2").css("background","red");
// 下一个兄弟
$(".msg+span").css("background","red");
// 下面所有兄弟
$(".msg~span").css("background","red");
// 指定索引,从0开始