1.jQuery中的基本选择器介绍

#id　　 id选择器，通过id获取元素
element　　标签选择器，通过标签名称获取选择器
.class类选择器　通过class值获取元素
s1,s2,...　　多选择器，将多个选择器的结果添加在一个数组中
*　　所有

2.代码演示

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5  <title>01-基本选择器.html</title>
 6  <!--   引入jQuery -->
 7  <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
 8  <script src="./script/assist.js" type="text/javascript"></script>
 9  <link rel="stylesheet" type="text/css" href="./css/style.css" />
10  <script type="text/javascript">
11  $(document).ready(function(){
12 // <input type="button" value="选择 id为 one 的元素." id="btn1"/>
13      $("#btn1").click(function(){
14          $("#one").css("background-color","red");
15      });
16 // <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
17      $("#btn2").click(function(){
18          $(".mini").css("background-color","red");
19      });
20 // <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
21      $("#btn3").click(function(){
22          $("div").css("background-color","red");
23      });
24 // <input type="button" value="选择 所有的元素." id="btn4"/>
25      $("#btn4").click(function(){
26          $("*").css("background-color","red");
27      });
28 // <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
29      $("#btn5").click(function(){
30          $("span,#two").css("background-color","red");
31      });
32  });
33   </script>
34 </head>
35 <body>
36   <button id="reset">手动重置页面元素</button>
37   <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
38  <h3>基本选择器.</h3>
39
40  <!-- 控制按钮 -->
41   <input type="button" value="选择 id为 one 的元素." id="btn1"/>
42   <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
43   <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
44   <input type="button" value="选择 所有的元素." id="btn4"/>
45   <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
46
47   <br /><br />
48
49    <!-- 测试的元素 -->
50   <div class="one" id="one" >
51  id为one,class为one的div
52       <div class="mini">class为mini</div>
53   </div>
54
55     <div class="one"  id="two" title="test" >
56      id为two,class为one,title为test的div.
57       <div class="mini"  title="other">class为mini,title为other</div>
58       <div class="mini"  title="test">class为mini,title为test</div>
59   </div>
60
61   <div class="one">
62       <div class="mini">class为mini</div>
63       <div class="mini">class为mini</div>
64       <div class="mini">class为mini</div>
65       <div class="mini"></div>
66   </div>
67
68
69
70   <div class="one">
71       <div class="mini">class为mini</div>
72       <div class="mini">class为mini</div>
73       <div class="mini">class为mini</div>
74       <div class="mini"  title="tesst">class为mini,title为tesst</div>
75   </div>
76
77
78   <div style="display:none;"  class="none">style的display为"none"的div</div>
79
80   <div class="hide">class为"hide"的div</div>
81
82   <div>
83   包含input的type为"hidden"的div<input type="hidden" size="8"/>
84   </div>
85
86
87   <span id="mover">正在执行动画的span元素.</span>
88
89 </body>
90 </html>

html页面的加载是自上而下的，因此如果将script代码卸载页面头部会出现，script代码无效的问题，解决办法有以下两种：

1.javascript中

1 window.onload = function(){
2    //你的代码
3  }

2.jQuery中

1  $(document).ready(function(){
2     //你的代码
3  });

以上两种代码都是指在页面加载完毕之后才会执行其中的script代码，但也有细微的区别

window.onload必须等到网页中所有的内容加载完成后（包括图片），才能执行；$(document).ready()网页中所有的DOM结构绘制完毕后就执行，可能DOM元素关联的东西还没有加载完成。
window.onload不能同时编写几个，如果编写了，最后一个有效；$(document).ready()可以同时编写几个，全部有效。
window.onload无简写；$(document).ready(function(){});可以简写为$(function(){});。

转载于:https://www.cnblogs.com/jxxblogs/p/9537927.html

jQuery--基本选择器相关推荐

jQuery的选择器（一）
2019独角兽企业重金招聘Python工程师标准>>> jQuery选择器完全继承CSS风格,jQuery 选择器允许对 HTML 元素组或单个元素进行操作. jQuery的选择器包 ...
jQuery css()选择器使用说明
css选择器只是jquery中的一个功能罢了,下面我来给各位朋友详细介绍jQuery css()选择器使用方法与说明详解,有需要了解学习的同学可参考. CSS操作有一个重要的方法:CSS() CSS( ...
jQuery 基础选择器/层级选择器/隐式迭代
jQuery 选择器 jQuery 层级选择器隐式迭代(重要) <!DOCTYPE html> <html lang="en"><head>& ...
java与jquery的选择器区别_JQuery选择器
原标题:JQuery选择器声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权:凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记. JQuery 介绍: 用于搜索H ...
JQuery简介选择器
JQuery简介&选择器文章目录 JQuery简介&选择器一.jquery介绍二.jquery加载三.jquery选择器 1.id选择器 2.类选择器 3.元素选择器 4.全选 ...
第70天：jQuery基本选择器（一）
一.jQuery基本选择器 jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发 jQuery能做的javascipt都能做到,而javascri ...
jquery下选择器整理
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...
[jQuery] 说说看jQuery的选择器有哪些？
[jQuery] 说说看jQuery的选择器有哪些? 1.基本选择器: #id .element ..class .* .selector1... 2.层次选择器: ancestor descenda ...
jQuery学习--选择器的使用
jQuery基本选择器 1. jQuery的ready事件 -> js的onload 2. 选择器的使用 1. jQuery的ready事件 -> js的onload 大多是第一种,匿名函 ...
浅谈jQuery的选择器
jQuery的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("A B") 查找A元素下面的所有子节点,包括非直接子节点 $("A>B") ...

jQuery--基本选择器

1.jQuery中的基本选择器介绍

2.代码演示

1.javascript中

2.jQuery中

jQuery--基本选择器相关推荐

最新文章

热门文章