正文
jquery接触初级----jquery 选择器
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
css 选择器主要有：元素选择器，ID选择器，类选择器，群组选择器，后代选择器，普通配符选择器等，通过css选择，我们可以很方便的给元素添加样式，使网页看起来更加好看
jquery 选择器也有相似的功能，基本上完全继承了css 样式的风格。
差异：
CSS选择器：查找元素，添加样式；
jquery选择器：查找元素，添加行为；
<!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">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>Document</title>
</head>
<body> <div class="demo">区别css选择器和jquery选择器</div>
<input type="button" value="点击" class="btn"> </body>
</html>
方法一：添加css样式
<style>
.demo {
color: red;
font-size: 30px;
}
</style>
方法二：添加jquery事件，改变css样式
<script>
$(function() {
$(".btn").on("click", function() {
$(".demo").css({
'color': 'red',
"font-size": "30px"
});
});
});
</script>
运行结果： 两者结果相同
css 直接添加样式的结果 点击事件添加 行为（改变css样式）的结果
但是，某些css 选择器样式部分浏览器有差异，而jquery 选择器设置样式，具有很好的浏览器兼容性，都调整好兼容了，直接使用
还是遵循javascript 中的步骤：1.获取元素 ，2.绑定事件，3.执行方法（函数）
下面整理了一下jquery 获取元素选择器的方法，主要有：基本选择器，过来选择器，层次选择器，表单选择器。如下：
例如，html 代码如下：
<!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">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<h3>例子</h3>
<p title="你最喜欢吃的水果">你最喜欢吃的水果？</p>
<ul class="shuiguo">
<li class="attive">梨子</li>
<p class="ss1">骨伤科 </p>
<a href="javascript:;" class="jjj">学校</a>
<p class="ss2">火星 </p>
<p class="ss3"> 毛小方 </p>
<p class="ss4"> 狄仁杰 </p>
<ul class="cc">
<li class="china">中国</li>
<li class="usa">美国</li>
<li class="grema">德国</li>
</ul>
<li class="apple">苹果</li>
<li class="caomei">草莓</li>
<li class="xiangjiao">香蕉</li>
<p class="ss5"> 塔尼亚 </p>
</ul>
</div>
</body>
</html>
添加jquery 行为：jquery基本过滤选择器之------ first 选择器
<script>
$(function() {
$("ul:first").css('background', '#acc');
});
</script>
运行结果：
添加jquery 行为：jquery层级选择器之------ 相邻选择器
<script>
$(function() {
console.log( $("a.jjj + p") );
});
</script>
运行结果：
添加jquery 行为：jquery过滤选择器之------ 内容过滤选择器
<script>
$(function() {
console.log($("li:contains('果')"));
});
</script>
运行结果：
添加jquery 行为：jquery过滤选择器之------ 属性过滤选择器
<script>
$(function() {
$("[class=attive]").css('background', '#acc');
});
</script>
