二次学习JQuery 选择器&选择集过滤&转移
Posted ZSYL
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了二次学习JQuery 选择器&选择集过滤&转移相关的知识，希望对你有一定的参考价值。
JQuery 选择器
jQuery选择器
1. jQuery选择器的介绍
jquery选择器就是快速选择标签元素，获取标签的，选择规则和css样式一样。
2. jQuery选择器的种类
1. 标签选择器
2. 类选择器
3. id选择器
4. 层级选择器
5. 属性选择器
示例代码:
$('#myId') //选择id为myId的标签
$('.myClass') // 选择class为myClass的标签
$('li') //选择所有的li标签
$('#ul1 li span') //选择id为ul1标签下的所有li标签下的span标签
$('input[name=first]') // 选择name属性等于first的input标签
说 明:
可以使用length属性来判断标签是否选择成功, 如果length大于0表示选择成功，否则选择失败。
$(function()
result = $("div").length;
alert(result);
);
3. 小结
- jQuery选择器就是选择标签的
- 标签选择器是 根据标签名来选择标签
- 类选择器是 根据类名来选择标签
- id选择器是 根据id来选择标签
- 层级选择器是 根据层级关系来选择标签
- 属性选择器是 根据属性名来选择标签
4. 笔记
// 获取标签对象
var $p = $("p");
// 获取标签列表的长度
alert($p.length)
// 通过JQ设置标签样式
$p.css("color":"red");
// 类选择器
var $div = $(".div1");
alert($div.length)
// 属性选择器
var $input = $("input[type=text]");
alert($input.length)
5. 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function()
// 获取标签对象
var $p = $("p");
// alert($p.length);
// 通过jquery设置标签的样式
$p.css("color": "red");
// var $div = $(".div1");
// alert($div.length);
// var $div1 = $("#box1");
// alert($div1.length);
// var h1 = $("div h1");
// alert(h1.length);
// 属性选择器，先根据标签选择html标签，然后再根据属性值进行过滤标签
var $input = $("input[type=text]");
alert($input.length)
// 结论： jquery选择器获取标签，和css选择器匹配标签的方式一样
);
</script>
</head>
<body>
<p>hello</p>
<p>hello</p>
<div class="div1">哈哈</div>
<div id="box1">嘻嘻</div>
<div>
<h1>哈哈</h1>
</div>
<input type="text">
<input type="button">
</body>
</html>
选择集过滤
学习目标
- 能够使用选择器进行标签过滤
1. 选择集过滤的介
选择集过滤就是在选择标签的集合里面过滤自己需要的标签
2. 选择集过滤的操作
- has(选择器名称)方法，表示选取包含指定选择器的标签
- eq(索引)方法，表示选取指定索引的标签
has 方法的示例代码:
<script>
$(function()
// has方法的使用
var $div = $("div").has("#mytext");
// 设置样式
$div.css("background":"red");
);
</script>
<div>
这是第一个div
<input type="text" id="mytext">
</div>
<div>
这是第二个div
<input type="text">
<input type="button">
</div>
eq 方法的示例代码:
<script>
$(function()
// has方法的使用
var $div = $("div").has("#mytext");
// 设置样式
$div.css("background":"red");
// eq方法的使用
var $div = $("div").eq(1);
// 设置样式
$div.css("background":"yellow");
);
</script>
<div>
这是第一个div
<input type="text" id="mytext">
</div>
<div>
这是第二个div
<input type="text">
<input type="button">
</div>
3. 小结
- 选择集过滤可以使用has方法和eq方法来完成
- jquery给标签设置样式使用css方法
4. 笔记
<script>
$(function()
// 通过JQ获取选择器获取HTML标签
var $divs = $("div");
// 获取包含有指定选择器的父标签
$div.has("p")
);
</script>
$divs.eq(1).css：根据下标选择指定的标签- 选择集过滤就是在选中的集合标签里面，根据需要过滤出来自己想要的标签
5. 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function()
// 通过jquery选择器获取html的标签
var $divs = $("div");
// 获取包含有指定选择器的父标签
$divs.has(".pname").css("background":"red");
// 根据下标选择指定的标签
$divs.eq(1).css("background":"blue");
// 选择集过滤就是在选中的集合标签里面，根据需要过滤出来自己想要的标签
);
</script>
</head>
<body>
<div>
<p class="pname">哈哈</p>
</div>
<div>
<input type="button" value="按钮">
</div>
</body>
</html>
选择集转移
1. 选择集转移介绍
选择集转移就是以选择的标签为参照，然后获取转移后的标签
2. 选择集转移操作
$('#box').prev();表示选择id是box元素的上一个的同级元素$('#box').prevAll();表示选择id是box元素的上面所有的同级元素$('#box').next();表示选择id是box元素的下一个的同级元素$('#box').nextAll();表示选择id是box元素的下面所有的同级元素$('#box').parent();表示选择id是box元素的父元素$('#box').children();表示选择id是box元素的所有子元素$('#box').siblings();表示选择id是box元素的其它同级元素$('#box').find('.myClass');表示选择id是box元素的class等于myClass的元素
选择集转移的示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <style>
.box
text-decoration:
text-indent:
</style> -->
<script src="js/jquery-1.12.4.min.js"></script>
<!-- 选择集转移: 根据指定标签为参照物，选中其它标签，这种操作叫做选择集转移 -->
<script>
$(function()
// 获取div，并把div作为参照物，获取其它标签
var $div = $("#box1")
// css 参数是一个js对象，js对象和python里面字典很类似
// 属性名和css里面的属性名保存一致
// 选择上一个同级标签
$div.prev().css("color": "red", "font-size": "25px");
// 选择上面所有的同级标签
$div.prevAll().css("text-indent": "50px");
// 选择下一个同级标签
$div.next().css("color": "green");
// 选择下面所有的同级标签
$div.nextAll().css("text-indent": "50px")
// 选择同级的其它标签
$div.siblings().css("text-decoration":"underline");
// 选择父标签
$div.parent().css("background": "gray");
// 获取所有的子标签
$div.children().css("color": "red");
// 查找指定的子标签
$div.find(".sp1").css("color": "green")
)
</script>
</head>
<body>
<div>
<h3>三级标题</h3>
<p>哈哈哈</p>
<div id="box1"><span>我是</span>一个<span class="sp1">div</span>标签</div>
<h3>三级标题</h3>
<p>哈哈哈</p>
</div>
</body>
</html>
3. 总结
-
选择集转移：根据指定标签为参照物，选中其他标签，这种操作叫选择集转移
-
$div.prev()：选择上一级标签 -
$div.prevAll(): 选择上面所有的同级标签 -
$div.next(): 选择下一个同级标签 -
$div.next(): 选择下一个同级标签 -
$div.nextAll(): 选择下面所有的同级标签 -
$div.siblings(): 选择同级的其它标签 -
$div.parent(): 选择父标签 -
$div.children(): 获取所有的子标签 -
$div.find: 查找指定的子标签
加油!
感谢!
努力!
以上是关于二次学习JQuery 选择器&选择集过滤&转移的主要内容，如果未能解决你的问题，请参考以下文章
EasyClick Html UI 第十八节 jQuery选择集过滤
JQuery选择器学习整理(基本选择器，层级选择器，伪类选择器，属性过滤，内容过滤，可见性过滤，范围选择器，排除选择器)
深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器