JQuery选择器

Posted ljbguanli

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery选择器相关的知识，希望对你有一定的参考价值。

JQuery选择器

　　　　通过一个样例来分辨这些选择器，首先做一个初始的页面：

1、html

复制代码
 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>选择器</title>
 6     <script type="text/javascript" src="../JQuery库文件/jquery-1.12.1.min.js"></script>
 7     <style type="text/css">
 8         div,span,p{
 9             width: 140px;
10             height: 140px;
11             margin: 5px;
12             background: #aaa;
13             border: #000 1px solid;
14             float: left;
15             font-size: 17px;
16             font-family: Verdana;
17         }
18         div.mini {
19             width: 55px;
20             height: 55px;
21             background-color: #aaa;
22             font-size: 12px;
23         }
24         div.hide{
25             display: none;
26         }
27     </style>
28     <script type="text/javascript">
29         //给id为mover的元素加入动画.
30         $("document").ready(function(){
31             function  animateIt() {
32                 $("#mover").slideToggle("slow", animateIt);
33             }
34             animateIt();
35         })
36     </script>
37     
38 </head>
39 <body>
40     <div class="one" id="one">
41         id为one,class为one的div
42         <div class="mini">class为mini</div>
43     </div>
44 
45     <div class="one" id="two" title="test">
46         id为two,class为one,title为text的div
47         <div class="mini" title="other">class为mini,title为other</div>
48         <div class="mini" title="test">class为mini,title为test</div>
49     </div>
50 
51     <div class="one">
52         <div class="mini">class为mini</div>
53         <div class="mini">class为mini</div>
54         <div class="mini">class为mini</div>
55         <div class="mini"></div>
56     </div>
57 
58     <div class="one">
59         <div class="mini">class为mini</div>
60         <div class="mini">class为mini</div>
61         <div class="mini">class为mini</div>
62         <div class="mini" title="tesst">class为mini,title为tesst</div>
63     </div>
64 
65     <div style="display: none" class="none">
66         style的diaplay为none的div
67     </div>
68 
69     <div class="hide">class为hide的div</div>
70 
71     <div>
72        包括input的type为“hidden”的div
73        <input type="hidden" size="8">
74     </div>
75 
76     <span id="mover">正在运行动画的span元素</span>
77 </body>
78 </html>
复制代码

 

2、初始效果

 

一、基本选择器


1、ID选择器

　　eg：改变id为one的元素的背景颜色

首先在<head>处引入JQuery库文件：

<script type="text/javascript" src="../JQuery库文件/jquery-1.12.1.min.js"></script>

然后编辑JQuery代码：

1 <!--编写JQuery代码-->
2     <script type="text/javascript">
3         $("document").ready(function(){
4             $("#one").css("background-color","#bbffaa");    //改变id为one的元素的背景颜色
5         })
6     </script>

效果图：

！

！

！

全部 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){


);

}

这是为了防止文档在全然载入（就绪）之前执行 jQuery 代码。假设在文档没有全然载入之前就执行函数，操作可能失败。！

！

！


2、类选择器

1 <!--编写JQuery代码-->
2     <script type="text/javascript">
3         $("document").ready(function(){
4             $(".mini").css("background-color","#bbffaa");    //改变class为mini的全部元素的背景颜色
5         })
6     </script>

效果：


3、标签选择器

将代码的关键语句改为：

 $("div").css("background-color","#bbffaa");    //改变元素名是div的全部元素的背景颜色

效果图：


4、通配选择符

 $("*").css("background-color","#bbffaa");    //改变全部元素的背景颜色

效果图：


5、群组选择器

　　eg：改变全部<span>元素和id为two的元素的背景颜色

 $("span,#two").css("background-color","#bbffaa");    //改变全部<span>元素和id为two的元素的背景颜色

效果图：

二、层次选择器

VSCode自定义代码片段——CSS选择器

jQ选择器学习片段（JavaScript 部分对应）

VSCode自定义代码片段6——CSS选择器

JQuery02

Android - 片段中的联系人选择器

jQuery 核心函数