Jquery学习----选择器

学习Jquery选择器之后，可以发现与css的选择器几乎相同，可能也就是最新的css选择器还不能在jquery中实现，但那都很少用。

下面是Jquery中常见的选择器：

一、基本选择器

$("div").css("background-color", "red");//表示对所有的div增加背景颜色--红色。

$(".divClass").css("background", "gray");//表示对所有class为'divClass'的元素设置背景色--灰色

二、层次选择器

//下面这两个都是表示紧邻的下一个同辈元素。如果.spanclass代表span，则后面同辈元素也必须是span
$(".spanclass+span").css("color", "blue").css("font-size", 33);
$(".spanclass").next().next().css("color", "blue").css("font-size", 33);

//下面这两个表示所有的后面的同辈元素
$(".spanclass~span").css("color", "blue").css("font-size", 33);
$(".spanclass").nextAll().css("color", "blue").css("font-size", 33);

//下面这个表示与其同辈的无论前后的span，不包括本身

$(".spanclass").siblings("span").css("color", "blue").css("font-size", 33);

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5 <meta charset="UTF-8">
 6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 <title>Document</title>
 9 
10 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
11 <style>
12 div {
13 border: 1px solid blue;
14 width: 200px;
15 height: 250px;
16 }
17 </style>
18 
19 </head>
20 
21 <body>
22 
23 <h1><span>Jquery Selector Test子代</span></h1>
24 <h1>
25 <p>aaaaa<span>wo在span中是子代的子代</span></p>
26 </h1>
27 <div style="float:left">我是div1</div>
28 <div class="divClass" style="float:left"><span class="spanclass">我是div2</span><span>紧跟的部分哈哈</span><span>紧跟的部分哈哈</span></div>
29 <div style="float:left"><span>我是div3</span></div>
30 <div style="float:left"><span>我是div4</span></div>
31 <div style="float:right"><span>我是div5</span></div>
32 <div style="clear:both"></div>
33 <div class="divClass">我是div6</div>
34 
35 
36 
37 <script>
38 //写法一：dom加载完就执行内部
39 $(document).ready(function() {
40 //dom加载完就执行的部分
41 $("div").css("background-color", "red");
42 
43 })
44 
45 //写法二：dom加载完就执行内部简写
46 $(function() {
47 $("div").css("background-color", "yellow");
48 
49 })
50 //Jquery可以无限次的写dom加载完之后执行的方法，不同于window.onload,只能写一次
51 $(function() {
52 $(".divClass").css("background", "gray");
53 })
54 
55 /* $(function() {
56 $("span,.divClass").css("color", "red").css("font-size", 20);
57 }) */
58 //$("h1 span").css("color", "blue"); //这个是h1下所有的子代，孙子辈也可以
59 //$("h1>span").css("color", "blue"); //这个是h1下第一子代，孙子不可以
60 //下面这两个都是表示紧邻的下一个同辈元素。如果.spanclass代表span，则后面同辈元素也必须是span
61 //$(".spanclass+span").css("color", "blue").css("font-size", 33);
62 // $(".spanclass").next().next().css("color", "blue").css("font-size", 33);
63 //下面这两个表示所有的后面的同辈元素
64 //$(".spanclass~span").css("color", "blue").css("font-size", 33);
65 $(".spanclass").nextAll().css("color", "blue").css("font-size", 33);

//下面这个表示与其同辈的无论前后的span，不包括本身

$(".spanclass").siblings("span").css("color", "blue").css("font-size", 33);

66 </script>
67 
68 </body>
69 
70 </html>

Jquery学习----选择器

猜你喜欢