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://www.baidu.com/img/bd_logo1.png"
width="270" height="129" />
<img src="http://www.baidu.com/img/bd_logo1.png"
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://www.baidu.com/img/bd_logo1.png"
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://www.baidu.com/img/bd_logo1.png" 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选择器的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。