JQuery选择器用法详解

JQuery选择器用法详解

目录

一、基本选择器

二、层次选择器

三、表单选择器

四、属性选择器

一、基本选择器

id选择器

元素名称选择器

类选择器

选择所有元素

组合选择器

<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .blue{ background: blue; } </style> <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="mydiv1">id选择器1<span>span中的内容</span></div> <div id="mydiv2" class="blue">元素选择器</div> <span class="blue">样式选择器</span> <script type="text/javascript"> //1.id选择器 var mydiv1 = $("#mydiv1"); console.log(mydiv1); //2.元素名称选择器 var divs = $("div"); console.log(divs); //3.类选择器 var clsz = $(".blue"); console.log(clsz); //4.选择所有元素 var all = $("*"); console.log(all); //5.组合选择器,是或的关系,同时选中元素 var fz = $("div,.blue,#mydiv1"); console.log(fz); </script> </body> </html> 二、层次选择器 后代选择器子代选择器相邻选择器:

选择css类为blue的下一个img元素,因为JS代码从上向下执行同辈选择器

选择css类为blue的之后的img元素,因为JS代码从上向下执行

<html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> .testColor{ background: green; } .gray{ background: gray; } </style> </head> <body> <div id="parent">层次择器 <div id="child" class="testColor">父选择器 <div class="gray">子选择器 <img src="http://huoche.7234.cn/images/jb51/fupsouyc5cv.webp" width="270" height="129" /> <img src="http://huoche.7234.cn/images/jb51/fupsouyc5cv.webp" width="270" height="129" /> </div> <div> 选择器2<div>选择器2中的div</div> </div> <div>新div1</div> <div>新div2</div> </div> <script type="text/javascript"> //后代选择器 var hd = $("#child div"); console.log(hd); //子代选择器 var zd = $("#child > div"); console.log(zd); //相邻选择器 var xl = $(".gray + div"); console.log(xl); //同辈选择器,同一个层级 var tb = $(".gray ~ div"); console.log(tb); </script> </body> </html> 三、表单选择器

属性选择器

表单选择器

文本框选择器

密码框选择器

单/复选框选择器

提交按钮选择器

图像域选择器

按钮选择器

文件域选择器

<html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!-- 属性选择器 $("[属性]")获取到当前页面有这个属性的元素 $("[属性='属性值']") 获取到当前页面有这个属性并且值等于属性值的元素 表单选择器 :input查找所有的表单元素:$(":input"); <br />注意:会匹配所有的input、textarea、select和button元素。 文本框选择器:text查找所有文本框:$(":text") 密码框选择器:password查找所有密码框:$(":password") 单选按钮选择器:radio查找所有单选按钮:$(":radio") 复选框选择器:checkbox查找所有复选框:$(":checkbox") 提交按钮选择器:submit查找所有提交按钮:$(":submit") 图像域选择器:image查找所有图像域:$(":image") 重置按钮选择器 :reset查找所有重置按钮:$(":reset") 按钮选择器 :button查找所有按钮:$(":button") 文件域选择器:file查找所有文件域:$(":file") --> <form id='myform' name="myform" method="post"> <input type="hidden" name="uno" value="9999" disabled="disabled"/> 姓名:<input type="text" id="uname" name="uname" /><br /> 密码:<input type="password" id="upwd" name="upwd" value="123456" /><br /> 年龄:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩 <input type="radio" name="uage" value="1" abc="123"/>你懂得 <br /> 爱好:<input type="checkbox" name="ufav" checked="checked" abc="456" value="篮球"/>篮球 <input type="checkbox" name="ufav" value="爬床"/>爬床 <input type="checkbox" name="ufav" value="代码"/>代码<br /> 来自:<select id="ufrom" name="ufrom"> <option value="-1" selected="selected">请选择</option> <option value="0">北京</option> <option value="1">上海</option> </select><br /> 简介:<textarea rows="10" cols="30" name="uintro"></textarea><br /> 头像:<input type="file" /><br /> <input type="image" src="http://huoche.7234.cn/images/jb51/fupsouyc5cv.webp" width="20" height="20"/> <button type="submit" onclick="return checkForm();">提交</button> <button type="reset" >重置</button> </form> <script type="text/javascript"> //表单选择器 获取所有表单元素,会匹配所有的input、textarea、select和button元素。 var inputs = $(':input'); console.log(inputs); //获取单选 var radios = $(":radio"); console.log(radios); //属性选择器 var favs = $("[selected='selected']"); console.log(favs); var favs = $("[checked='checked']"); console.log(favs); console.log("============="); var favs = $("[checked]"); console.log(favs); var favs = $("[abc='123']"); console.log(favs); </script> </body> </html> 四、属性选择器 <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!-- 属性选择器 $("[属性名]")获取所有设置过指定属性名的元素 $("[属性名='属性值']") 获取所有设置过指定属性名等于指定属性值的元素 过滤选择器 $(":eq(index)") 匹配元素的指定下标的元素 (下标从0开始) .eq(index) $(":gt(index)")匹配元素下标大于指定值元素 (下标从0开始).gt(index) $(":odd")匹配奇数下标 $(":even")匹配偶数下标 $(":checked")匹配元素被选中 --> <form id='myform' name="myform" method="post"> <input type="hidden" name="uno" value="9999" disabled="disabled"/> 姓名:<input type="text" id="uname" name="uname" /><br /> 密码:<input type="password" id="upwd" name="upwd" value="123456" /><br /> 年龄:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩 <input type="radio" name="uage" value="1"/>你懂得 <br /> 爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球 <input type="checkbox" name="ufav" value="爬床"/>爬床 <input type="checkbox" name="ufav" value="代码"/>代码<br /> 来自:<select id="ufrom" name="ufrom"> <option value="-1" selected="selected">请选择</option> <option value="0">北京</option> <option value="1">上海</option> </select><br /> 简介:<textarea rows="10" cols="30" name="uintro"></textarea><br /> 头像:<input type="file" /><br /> <input type="image" src="http://huoche.7234.cn/images/jb51/fupsouyc5cv.webp" width="20" height="20"/> <button type="submit" onclick="return checkForm();">提交</button> <button type="reset" >重置</button> </form> <script type="text/javascript"> // $(":eq(index)") 匹配元素的指定下标的元素 (下标从0开始) .eq(index) console.log($(":eq(0)")); console.log($(":eq(1)")); console.log($(":eq(2)")); console.log($(":eq(3)")); console.log($(":eq(4)")); console.log($(":eq(5)")); console.log($(":eq(6)")); console.log($(":eq(7)")); console.log($(":eq(8)")); console.log("============"); //$(":gt(index)")匹配元素下标大于指定值元素 (下标从0开始).gt(index) console.log("==大于5==="); console.log($(":gt(5)")); //$(":g=lt(index)")匹配元素下标小于指定值元素 (下标从0开始).lt(index) console.log("==小于5==="); console.log($(":lt(5)")); //$(":odd")匹配奇数下标 console.log($(":odd")); // $(":even")匹配偶数下标 console.log($(":even")); //$(":checked")匹配元素被选中,包含的有option和input标签 console.log($(":checked")); </script> </body> </html>

到此这篇关于JQuery选择器的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持易知道(ezd.cc)。

推荐阅读