jQuery选择器
Posted 爽走不解释
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery选择器相关的知识，希望对你有一定的参考价值。
我们学习有关如何选取 html 元素，关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。
先来看一些jQuery选择器的介绍：
什么是jQuery选择器？
选择器，就是用一种方式把你想要的那一个元素选中。把这个元素选中了，你才能对它进行各种操作。
jQuery 选择器和 CSS 选择器几乎完全一样，我们在接下来的学习中应该多对比一下这两者，这样学习速度可以提高很多。
在 javascript 中，如果想要选取元素，只能使用 getElementById()、getElementsByTagName()、getElementsByClassName() 等方法来获取。
这些方法的功能有限，并且名字“又长又臭”
而 jQuery 选择器完全继承了 CSS 选择器的风格，极大地方便了我们的开发。因为它不仅语法简单，而且功能也非常强大。
jQuery 选择器有两类：一类是“基础选择器”，另一类是“伪类选择器”
jQuery选择器优势
简单来所介绍以下几个：
- 代码更简单
- 支持CSS1到CSS3选择器
- 完善的机制处理
jQuery选择器分类
分类基本如下：
通过CSS选择器选取元素
- 基本选择器
- 层次选择器
- 属性选择器
通过过滤选择器选择元素
- 基本过滤选择器
- 可见性过滤选择器
这些类别呢又可以分为具体的子类别
基本选择器
基本选择器包括
- 标签选择器、
- 类选择器、
- ID选择器、
- 并集选择器、
- 全局选择器、
一、标签选择器
标签选择器根据给定的标签名匹配元素
代码示例：
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function()
$("button").click(function()
$("p").hide();
);
);
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我隐藏p标签段落</button>
</body>
二、类选择器
类选择器根据给定的class匹配元素
代码示例：
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function()
$("button").click(function()
$(".test").css("background":"#efefef","padding":"5px");
);
);
</script>
</head>
<body>
<h2 class="test">这是一个标题</h2>
<button>点我改变样式</button>
</body>
三、ID选择器
ID选择器根据给定的id匹配元素
代码示例：
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function()
$("button").click(function()
$("#test").css("color","#083499");
);
);
</script>
</head>
<body>
<h2 id="test">这是一个标题</h2>
<button>点我改变颜色</button>
</body>
四、全局选择器
全局选择器可以获取所有元素
代码示例：
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function()
$("button").click(function()
$("*").hide();
);
);
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是另一个段落。</p>
<button>点我隐藏所以</button>
</body>
五、并集选择器
并集选择器用来合并元素集合
<body>
<div id="d1">test</div>
<div id="d2" class="cls">前端开发</div><script>
console.log($('#d1 ' ));
console.log($( 'div'));
console.log($( '.cls'));
//通配符选择器–儿配所有
console.log($('*'));
//组合选择器–多个选择器之间使用逗号分隔(并集)
console.log($('#d1，.cls'));
//组合选择器–多个选择器之间没有任何分隔(交集)
console.log($('#d2.cls'));
</script>
</body>
层次选择器
层次选择器通过DOM 元素之间的层次关系来获取元素
层次选择器包括
- 后代选择器
- 子选择器
- 相邻元素选择器
- 同辈元素选择器
直接来看代码：
<body>
<div id="parent">
<div id="child">
<div id="d6"></div>
<div id="d1"></div>
<div id="d2"></div>
<div id="d4"></div>
<div id="d5"></div>
</div>
<div id="child2">
<div id="d3"></div>
</div>
</div><script>
console.log($('#parent div'));
//父子选择器
console.log($('#parent>div'));
//指定元素的下一个相邻兄弟元素
console.log($('#d1+div'));
//指定元素的后面所有的兄弟元素
console.log($('#d1~div'));
// siblings()方法–获取指定元素所有的兄弟元素(前面+后面)
console.log($('#d1').siblings('div'));
</script>
</body>
属性选择器
属性选择器通过HTML元素的属性来选择元素
代码示例：
<body>
<div id="username" name="d1" class="mydiv"></div>
<div id="password" name="d2" class="mycls"></div>
<div id="d3"></div>
<div class="myd"></div>
<script>
console.log($('div[name]'));
console.log($('div[class=mydiv]'));
//[attr!=value]选择器–包含没有attr属性的元素
console.log($('div[class!=mydiv]'));
console.log($('div[class^=my]'));
//属性过滤选择器组合用法->交集
console.log($('div[name=d1][class^=my]'));
</script>
</body>
可见性过滤选择器
通过元素显示状态来选取元素
代码格式：
$("p:hidden").show();
$("p:visible").hide();
也就是隐藏和显示操作，上面的一些例子中已经用到过了，就不多说了
基本过滤选择器
常用的一些如图，具体例子就不举了 ，用法和上面的都差不多：
更多详情就去参考官方文档哦
以上是关于jQuery选择器的主要内容，如果未能解决你的问题，请参考以下文章