码迷,mamicode.com
首页 > Web开发 > 详细

Jquery学习----选择器

时间:2018-05-22 23:50:15      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:cto   round   颜色   选择器   div   yellow   基本选择器   cti   背景   

 
学习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学习----选择器

标签:cto   round   颜色   选择器   div   yellow   基本选择器   cti   背景   

原文地址:https://www.cnblogs.com/lixianfu5005/p/9074264.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!