模板网站可以做备案吗,提供手机网站制作公司,江苏网站建设系统方案,重庆网站优化方式jQuery选择器 jQuery基本选择器jquery层次选择器基础过滤选择器内容过滤选择器可见度过滤选择器 选择器是jQuery的核心, 在jQuery中, 对事件处理, 遍历 DOM和Ajax 操作都依赖于选择器jQuery选择器的优点 $(“#id”) 等价于 document.getElementById(“id”);$(“tagName”) 等价… jQuery选择器 jQuery基本选择器jquery层次选择器基础过滤选择器内容过滤选择器可见度过滤选择器 选择器是jQuery的核心, 在jQuery中, 对事件处理, 遍历 DOM和Ajax 操作都依赖于选择器jQuery选择器的优点 $(“#id”) 等价于 document.getElementById(“id”);$(“tagName”) 等价于 document.getElementsByTagName(“tagName”);完善的事件处理机制 应用实例 前端报错的位置 jQuery基本选择器 基本选择器是jQuery中最常用的选择器, 也是最简单的选择器, 它通过id, class和标签名来查找DOM对象
种类用法返回值说明id$(“#myDiv”)单个元素组成的集合直接选择html中的id“myDiv”Element$(“div”)集合元素element翻译过来的意思就是元素, 所有element其实就是html已经定义的标签元素, 比如div, p, a, input等class$(“.myClass”)集合元素直接选择html代码中classmyClass的元素或元素组(因为在同一html中, class是可以存在多个同样的值的)*$(“*”)集合元素匹配所有的元素, 包括, 多用于结合上下文来搜索selector1, selector2… selectorN$(“div, span, p.myClass”)集合元素将每一个选择器匹配到的元素合并后一起返回, 你可以指定任意多个选择器, 并将匹配到的元素合并到集合中, p.myClass是表示匹配元素 p class“myClass”
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascript srcscript/jquery-3.6.0.min.js/scriptscript typetext/javascript$(function () {//1.改变id为one的元素的背景色为yellow$(#btn01).click(function () {$(#one).css(background, yellow);});//2.改变class为mytag的的所有元素的背景色为red$(#btn02).click(function () {$(.mytag).css(background, red);});//3.改变元素名为div的的所有元素的背景色为black$(#btn03).click(function () {$(div).css(background, black);});//4.改变所有元素的背景色为pink$(#btn04).click(function () {$(*).css(background, pink);});//5.改变所有的span元素和id为two, class为mytag 的元素的背景色为blue$(#btn05).click(function () {$(span.c1, #two, .mytag).css(background, blue);});});/script
/head
body
button idbtn01改变id为one的元素的背景色为yellow/button
button idbtn02改变class为mytag的所有元素的背景色为red/button
button idbtn03改变元素名为lt;divgt;的所有元素的背景色为black/button
button idbtn04改变所有元素的背景色为pink/button
button idbtn05改变所有的lt;spangt;元素和id为two, class为mytag 的元素的背景色为blue/button
hr/
div styleheight: 200px; width: 300px; background-color: chartreuse idoneidone/div
div styleheight: 200px; width: 300px; background-color: pink idtwo classmytagidtwo/div
div styleheight: 200px; width: 300px; background-color: blueviolet idthree classmytagidthree/div
div styleheight: 200px; width: 300px; background-color: blue idfour classmytagidfour/div
span stylebackground-color: chartreuse classc1idfive/span
span stylebackground-color: chartreuse classc2idsix/span
/body
/htmljquery层次选择器
如果想要通过DOM元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器
种类用法返回值说明ancestor descendant$(“form input”)集合元素在给定的祖先元素下匹配所有后代元素parent child$(“form input”)集合元素在给定的父元素下匹配所有子元素(注意区分后代元素和子元素)prev next$(“label input”)集合元素匹配所有紧跟在prev元素后的next元素prev ~ siblings$(“form ~ input”)集合元素匹配prev元素之后的所有siblings元素. 注意: 是匹配之后的元素, 不包含该元素在内, 并且匹配的是和prev同级的元素, 其后辈元素不被匹配 注意: (“prev ~ div”)选择器只能选择#prev元素后面的同辈元素; 而jQuery中的siblings方法与位置无关, 只要是同辈节点就可以选取 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript typetext/javascript srcscript/jquery-3.6.0.min.js/scriptscript typetext/javascript$(function () {//1.改变body内所有div元素的背景色为green$(#btn01).click(function () {$(div).css(background-color, green);});//2.改变body内子div元素(第一层级的div)的背景色为red$(#btn02).click(function () {$(body div).css(background, red);});//3.改变id为one的下一个紧接着的div元素(必须是紧跟着)的背景色为yellow$(#btn03).click(function () {$(#one div).css(background, yellow);});//4.示例: 改变id为two的元素后面所有的div元素(满足兄弟元素[处于同一层级]即可)的背景色为brown$(#btn04).click(function () {$(#two ~ div).css(background, brown);});//5.改变id为two的元素的所有兄弟元素[同级元素]中的div元素的背景色为white$(#btn05).click(function () {$(#two).siblings(div).css(background-color, white);});});/script
/head
body
input typebutton value改变body内所有div元素的背景色为green idbtn01/
input typebutton value改变body内子div元素的背景色为red idbtn02/
input typebutton value改变id为one的下一个div元素的背景色为yellow idbtn03/
input typebutton value改变id为two的元素后面所有的兄弟元素(即div元素)的背景色为brown idbtn04/
input typebutton value改变id为two的元素所有div兄弟元素的背景色为white idbtn05/
hr/
div idone classmytag stylebackground-color: darkgray; width: 300px;height: 300px;float: leftdiv idone
/div
div idtwo classmytag stylebackground-color: darkgray; width: 300px;height: 300px;float: leftdiv idtwodiv idtwo01 stylebackground-color: lightpink; width: 100px;height: 100px;id two01/divdiv idtwo02 stylebackground-color: lightpink; width: 100px;height: 100px;id two02/div
/div
div idthree classmytag stylebackground-color: darkgray; width: 300px;height: 300px;float: leftdiv idthreediv idthree01 stylebackground-color: lightpink; width: 100px;height: 100px;id three01/div
/div
/body
/html基础过滤选择器
基础过滤选择器介绍:
种类用法返回值说明:first$(“tr:first”)单个元素组成的集合匹配找到的第一个元素:last$(“tr:last”)集合元素匹配找到的最后一个元素:not(selector)$(“input:not(:checked)”)集合元素去除所有与给定选择器匹配的元素, 意思是没有被选中的input(当 input type“checkbox”):even$(“tr:even”)集合元素匹配所有索引值为偶数的元素, 从0开始计数.js的数组都是从0开始计数的, 例如要选择table的行, 因为是从0开始计数, 所以table中的第一个tr就为偶数0:odd$(“tr:odd”)集合元素匹配所有索引值为奇数的元素, 从0开始计数:eq(index)$(“tr:eq(0)”)集合元素匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素, 括号里面的是索引值, 不是元素排放数:gt(index)$(“tr:gt(0)”)集合元素匹配所有大于给定索引值的元素:lt(index)$(“tr:lt(0)”)集合元素匹配所有小于给定索引值的元素:header$(“:header”).css(“background”, “red”)集合元素匹配所有h1, h2, h3之类的标题元素, 这个是专门用来获取h1, h2这样的元素:animated集合元素匹配所有正在执行动画效果的元素
!DOCTYPE html
html langen
headmeta charsetUTF-8title基础过滤选择器/titlescript typetext/javascript srcscript/jquery-3.6.0.min.js/scriptscript typetext/javascript$(function () {$(#btn01).click(function () {//1.改变第一个div元素的背景色为green$(div:first).css(background, green);$(div:eq(0)).css(background, green);});$(#btn02).click(function () {//2.改变最后一个div元素的背景色为red//所谓最后一个是指从上到下, 从外层到内层的最后一个$(div:last).css(background, red);});$(#btn03).click(function () {//3.改变class不为myTag的所有div元素的背景色为yellow$(div:not(.myTag)).css(background, yellow);});$(#btn04).click(function () {//4.改变索引值为偶数的div元素的背景色为brown//冒号:可以理解为过滤$(div:even).css(background, brown);});$(#btn05).click(function () {//5.改变索引值为奇数的div元素的背景色为blue$(div:odd).css(background, blue);});$(#btn06).click(function () {//6.改变索引值大于3的div元素的背景色为white$(div:gt(3)).css(background, white);});$(#btn07).click(function () {//7.改变索引值等于3的div元素的背景色为pink$(div:eq(3)).css(background, pink);});$(#btn08).click(function () {//8.改变索引值小于3的div元素的背景色为gray$(div:lt(3)).css(background, gray);});$(#btn09).click(function () {//9.改变所有的标题元素背景色为purple$(:header).css(background, purple);});})/script
/headbody
input typebutton value改变第一个div元素的背景色为green idbtn01/
input typebutton value改变最后一个div元素的背景色为red idbtn02/
input typebutton value改变class不为myTag的所有div元素的背景色为yellow idbtn03/
input typebutton value改变索引值为偶数的div元素的背景色为brown idbtn04/
input typebutton value改变索引值为奇数的div元素的背景色为blue idbtn05/
input typebutton value改变索引值大于3的div元素的背景色为white idbtn06/
input typebutton value改变索引值等于3的div元素的背景色为pink idbtn07/
input typebutton value改变索引值小于3的div元素的背景色为gray idbtn08/
input typebutton value改变所有的标题元素背景色为purple idbtn09/
hr/
hr/
div idone classmyTag stylebackground-color: darkgray; width: 300px;height: 300px;float: leftdiv idone
/div
div idtwo classmyTag stylebackground-color: darkgray; width: 300px;height: 300px;float: leftdiv idtwodiv idtwo01 classyourTag stylebackground-color: lightpink; width: 100px;height: 100px;id two01/divdiv idtwo02 classyourTag stylebackground-color: lightpink; width: 100px;height: 100px;id two02/div
/div
div idthree classmyTag stylebackground-color: darkgray; width: 300px;height: 300px;float: leftdiv idthreediv idthree01 classyourTag stylebackground-color: lightpink; width: 100px;height: 100px;id three01/div
/div
h1标题一/h1
h2标题二/h2
h3标题三/h3
/body
/html内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
种类用法返回值说明:contains(text)$(“div:contains(‘John’)”)集合元素匹配包含给定文本的元素, 这个选择器比较有用, 当我们要选择的不是dom标签元素时, 它就派上用场了, 它的作用是查找被标签围起来的文本内容是否符合指定的内容的(子元素包含也算):empty$(“td:empty”)集合元素匹配所有不包含子元素或者文本的空元素:has(selector)$(“div:has( p)”).addClass(“test”)集合元素匹配含有选择器所匹配的元素的元素. 给所有包含p元素的div标签加上class“test”:parent$(“td:parent”)集合元素匹配包含子元素或者文本的元素, 注意: 这里是:parent, 不是.parent, 与:empty含义相反
!DOCTYPE html
html langen
headmeta charsetUTF-8title内容过滤选择器/titlestylediv {background-color: darkgray;width: 300px;height: 300px;float: left;}div div {background-color: lightpink;width: 100px;height: 100px;}/stylescript typetext/javascript srcscript/jquery-3.6.0.min.js/scriptscript typetext/javascript$(function () {$(#btn01).click(function () {//1.改变含有文本 di 的div元素的背景色为green//子div含有文本di, 父div也会被选中$(div:contains(di)).css(background, green);});$(#btn02).click(function () {//2.改变不包含子元素或文本的div元素的背景色为red$(div:empty).css(background, red)});$(#btn03).click(function () {//这个写法是选择有classyourTag的div$(div.yourTag).css(background, yellow);//3.改变含有class为yourTag元素的所有div元素的背景色为yellow//这个写法是选择有classyourTag的div的父元素(div)// $(div:has(.yourTag)).css(background, yellow);});$(#btn04).click(function () {//4.改变含有子元素(或者文本元素)的所有div元素的背景色为brown$(div:parent).css(background, brown);});$(#btn05).click(function () {//5.改变不含有文本 di 的div元素的背景色为blue$(div:not(:contains(di))).css(background, blue);});})/script
/head
body
input typebutton value改变含有文本 di 的div元素的背景色为green idbtn01/
input typebutton value改变不包含子元素或文本的div元素的背景色为red idbtn02/
input typebutton value改变含有class为yourTag的所有div元素的背景色为yellow idbtn03/
input typebutton value改变含有子元素(或者文本元素)的所有div元素的背景色为brown idbtn04/
input typebutton value改变不含有文本 di 的div元素的背景色为blue idbtn05/
hr/
hr/
div idone classmyTagdiv idone01 classyourTagdiv idone01/div
/div
div idtwo classmyTagdiv idtwodiv idtwo01 classyourTagid two01/divdiv idtwo02 classyourTagid two02/div
/div
div idthree classmyTagdiv idthreediv idthree01 classyourTagid three01/div
/div
div idfour classmyTagXXXXXXXXXXXX
/div
div idfive classmyTag/div
div idmover classyourTag执行动画
/div
/body
/html可见度过滤选择器
可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素
种类用法返回值说明:hidden$(“input:hidden”)集合元素匹配所有的不可见元素, input元素的type属性为hidden会被匹配到, css中display:none和input typehidden都会被匹配到:visible$(“tr:visible”)集合元素匹配所有的可见元素
!DOCTYPE html
html langen
headmeta charsetUTF-8title可见度过滤选择器/titlestyle.visible {display: none;}/stylescript typetext/javascript srcscript/jquery-3.6.0.min.js/scriptscript typetext/javascript$(function () {$(#btn01).click(function () {//1.改变所有可见的div元素的背景色为green$(div:visible).css(background, green);});$(#btn02).click(function () {//2.选取所有不可见的div元素, 利用jQuery中的show()方法将它们显示出来, 并设置背景色为red$(div:hidden).css(background, red);$(div:hidden).show();});$(#btn03).click(function () {//1.先得到所有隐藏的input元素// $input是一个jquery对象, 而且是数组对象var $inputs $(input:hidden);//2.遍历//方式1 - for循环for (var i 0; i $inputs.length; i) {//这里input就是一个dom对象var input $inputs[i];alert(值是 input.value);}//方式2 - jquery each() 可以实现数组遍历//说明://(1)each方法遍历时, 会将 $inputs数组的元素取出,// 传给function() {} - this$inputs.each(function () {//这里可以使用this获取每次遍历的对象//this对象是一个dom对象console.log(值(dom方式)是 this.value);//也可以将this转成jquery对象, 使用jquery方法取值console.log(值(jquery方式)是 $(this).val());});});})/script
/head
body
input typebutton value改变所有可见的div元素的背景色为green idbtn01/
input typebutton value选取所有不可见的div元素, 利用jQuery中的show()方法将它们显示出来, 并设置背景色为redidbtn02/
input typebutton value选取所有的文本隐藏域, 并打印它们的值 idbtn03/
input typebutton value改变含有子元素(或者文本元素)的所有div元素的背景色为brown idbtn04/
input typebutton value改变不含有文本 di 的div元素的背景色为blue idbtn05/
hr/
input typehidden valuehidden1/
input typehidden valuehidden2/
input typehidden valuehidden3/
input typehidden valuehidden4/
hr/
div idone classvisible stylebackground-color: darkgray; width: 300px;height: 300px;float: leftdiv idone
/div
div idtwo classvisible stylebackground-color: darkgray; width: 300px;height: 300px;float: leftdiv idtwo
/div
div idthree classhidden stylebackground-color: darkgray; width: 300px;height: 300px;float: leftdiv idthree
/div
/body
/html
