如需要跟多资料请点击下方图片⬇（扫码加好友→备注66，不备注拒绝添加哦）
Jquery选择器
和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的方式供我们查找|定位元素，称为jQuery选择器，选择器可以说是最考验一个人 jQuery 功力的地方，通俗的讲, Selector 选择器就是"一个表示特殊语意的字符串"。 只要把选择器字符串传入上面的方法中就能够选择不同的Dom 对象并且以 jQuery 包装集的形式返回。
jQuery 选择器按照功能主要分为"选择"和"过滤"。 并且是配合使用的，具体分类如下。基础选择器掌握即可 ,其他用到再查阅。
基础选择器
选择器名称举例
id选择器#id$("#testDiv")选择id为testDiv的元素元素名称选择器element$(“div”)选择所有div元素类选择器.class$(".blue")选择所有class=blue的元素选择所有元素*$("*")选择页面所有元素组合选择器selector1,selector2,selectorN$("#testDiv,span,.blue")同时选中多个选择器匹配的元素
<style type="text/css">
.blue{
background: blue;
}
</style>
<body>
<div id="mydiv1">id选择器1
<span>span中的内容
</span></div>
<div id="mydiv2" class="blue">元素选择器
</div>
<span class="blue">样式选择器
</span>
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
console.log("======id====");
var idSelecter = $('#mydiv1');
console.log(idSelecter.html());
console.log(idSelecter.text());
console.log("======name====");
var nameSe = $('div');
nameSe.each(function(){
console.log($(this).text());
});
console.log("======class====");
var classSe = $('.blue');
classSe.each(function(){
console.log($(this).text());
});
console.log("======所有元素====");
var all = $("*");
console.log(all.length);
console.log("======组合====");
var unionSe = $('span, .blue,div');
unionSe.each(function(){
console.log($(this).text());
});
</script>
层次选择器
选择器名称举例
后代选择器ancestor descendant$("#parent div")选择id为parent的元素的所有div元素子代选择器parent > child$("#parent>div")选择id为parent的直接div子元素相邻选择器prev + next$(".blue + img")选择css类为blue的下一个img元素同辈选择器prev ~ sibling$(".blue ~ img")选择css类为blue的之后的img元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层次选择器
</title>
<script src="js/jquery-3.4.1.js" type="text/javascript"></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">子选择器
</div>
<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>
</body>
<script type="text/javascript">
console.log("=========后代选择器-选择所有后代=====");
var ancestorS = $('#parent div');
ancestorS.each(function(){
console.log($(this).text());
});
console.log("=========子代选择器-选择儿子辈=====");
var child = $('#parent>div');
child.each(function(){
console.log($(this).text());
});
console.log("=========相邻选择器=====");
var pre_next = $(".gray + img");
console.log(pre_next.length);
console.log("=========同辈选择器,其后，（弟弟）=====");
var pre_siblings = $(".gray ~ img");
console.log(pre_siblings.length);
</script>
</html>
表单选择器
Forms名称举例
表单选择器:input查找所有的input元素：$(":input")；注意：会匹配所有的input、textarea、select和button元素。文本框选择器:text查找所有文本框：$(":text")密码框选择器:password查找所有密码框：$(":password")单选按钮选择器:radio查找所有单选按钮：$(":radio")复选框选择器:checkbox查找所有复选框：$(":checkbox")提交按钮选择器:submit查找所有提交按钮：$(":submit")图像域选择器:image查找所有图像域：$(":image")重置按钮选择器:reset查找所有重置按钮：$(":reset")按钮选择器:button查找所有按钮：$(":button")文件域选择器:file查找所有文件域：$(":file")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单验证
</title>
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
</head>
<body>
<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>
</body>
</html>
<script type="text/javascript">
function checkForm(){
$(":input").each(function(){
console.log($(this)[0].tagName);
})
console.log("------+++++++++++++++++++++--------")
console.log("text-->" + $(":text").length);
console.log("password-->" + $(":password").length);
console.log("radio-->" + $(":radio").length);
console.log("checkbox-->" + $(":checkbox").length);
console.log("file-->" + $(":file").length);
console.log("button-->" + $(":button").length);
console.log("submit-->" + $(":submit").length);
console.log("image-->" + $(":image").length);
console.log("reset-->" + $(":reset").length);
return false;
}
</script>
文章持续更新，可以微信搜索「 云璈公子 」阅读，回复【资料】【面试】【简历】有我准备的一线大厂面试资料和简历模板，同时我的GitHub https://github.com/1170300826/JavaInterview 有互联网一线大厂面试指南。
