【原】全新web前端开发教程之Jquery选择器

明辉馆藏 2022-01-04

展开全文

和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的方式供我们查找|定位元素，称为jQuery选择器，选择器可以说是最考验一个人 jQuery 功力的地方，通俗的讲, Selector 选择器就是"一个表示特殊语意的字符串"。只要把选择器字符串传入上面的方法中就能够选择不同的Dom 对象并且以 jQuery 包装集的形式返回。

jQuery 选择器按照功能主要分为"选择"和"过滤"。并且是配合使用的，具体分类如下。基础选择器掌握即可 ,其他用到再查阅。

1、基础选择器

<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">
// id选择器console.log("======id====");
var idSelecter = $('#mydiv1');
console.log(idSelecter.html());
console.log(idSelecter.text());
// 元素选择器console.log("======name====");
var nameSe = $('div'); // 有多个div元素nameSe.each(function(){
// this是dom对象，$(this)是jquery对象console.log($(this).text());
});
// 类选择器，classconsole.log("======class====");
var classSe = $('.blue'); // 有多个class=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>

2、层次选择器

<!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># 本文是java入门到架构师全套教程之jQuery教程课件部分，如需全套资料和教程请加V：xiaole888899999

3、表单选择器

<!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]);console.log($(this)[0].tagName);
})
console.log("------+++++++++++++++++++++--------")
// 获取 textconsole.log("text-->" + $(":text").length); // 1// 获取 passwordconsole.log("password-->" + $(":password").length); // 1// 获取radioconsole.log("radio-->" + $(":radio").length); // 2// 获取checkboxconsole.log("checkbox-->" + $(":checkbox").length); // 3// 获取fileconsole.log("file-->" + $(":file").length); // 1// 获取按钮console.log("button-->" + $(":button").length); // 2// 获取submit按钮console.log("submit-->" + $(":submit").length); // 1// 获取image按钮console.log("image-->" + $(":image").length); // 1// 获取reset按钮console.log("reset-->" + $(":reset").length); // 1return false;
}</script>## 本文是java入门到架构师全套教程之jQuery教程课件部分，如需全套资料和教程请加V：xiaole888899999