[jQuery学习系列一]1-选择器与DOM对象

前言:

好久没有更新博客了, 最近想复习下之前学过的JS的相关内容, 也算是自己的一种总结. 知识长时间不用就会忘记, 多学多记多用!!

下面的程序都可以在下面的网站进行在线调试:
http://www.365mini.com/diy.php?f=jquery
使用时记得勾选JS库文件,最上面空格写入html代码, 下面一个写入JS代码,右上格子添加css代码, 如下图:
[jQuery学习系列一]1-选择器与DOM对象

如果感兴趣的话这里还有几个比较好的在线编辑JS的网站: jsbin.com; jsfiddle.net; codepen.io; runjs

1, Jquery选择器
1.1,JQuery有三种选择器　
(1)元素选择
$('p') --选择html中所有p元素标签
$('div') --选择html中所有的div元素标签

(2)id选择器
$('#A') -- 选择html文档中所有id = A的元素

(3)class选择器
$('.color') --选择html文档中所有class = color的元素

1.2,JavaScript的延迟加载

$().ready(function() {
　　$("p").addClass("aa");
})

通知我们文档已经加载完毕的函数就是 $(document).ready(); 文档加载完毕后，立即执行，且只执行一次.
延迟执行的几种写法:

//标准写法

$(document).ready(function () {

});

//简写

$().ready(function() {

});

//简写

$(function() {

});

另查看$(document).ready()在html中的执行顺序:

 1 <head>
 2     <title></title>
 3     <script type="text/javascript">
 4         $(document).ready(function () {
 5             alert("0");
 6         });        
 7     </script>
 8     <script src="Js/jquery.js" type="text/javascript"></script>
 9     <script type="text/javascript">
10         $(document).ready(function () {
11             alert("1");
12         });        
13     </script>
14     <script src="Js/JScript.js" type="text/javascript"></script> <!-- alert("2"); -->
15     <script src="Js/JScript1.js" type="text/javascript"></script> <!-- alert("3");-->
16     <script type="text/javascript">
17         $(document).ready(function () {
18             alert("4");
19         });        
20     </script>
21 </head>
22 
23 //JScript.js
24 $(document).ready(function () {
25     alert("2");
26 });
27 
28 //JScript1.js
29 $(document).ready(function () {
30     alert("3");
31 });

结果: 先后弹出的是 1，2，3，4。至于0 为什么没有弹出(这个例子用上面提到的在线网站无法验证, 因为那个网站提前会将JS引入)，因为在alert("0")的时候，jquery库还没引入进来。

另外这里还需说明的一点是与window.onload()的区别:
$(document).ready(function () {});是在页面加载完所有DOM节点文档结构后开始执行;
window.onload()则是在页面加载完所有资源后才开始执行。
也就是说window.onload()要等到所有图片，外链资源都加载完后才开始执行，也因此window.onload只允许定义一个（实际是可以定义多个，但只有最后一个有效，相当于前面会被覆盖掉），
而 $(document).ready(function () {});可以允许定义多个，并且按照定义的先后顺序先后执行。

1.3, 对css的操作
参考自: http://www.365mini.com/page/jquery-addclass.htm

(1)addClass()
addClass()会为当前jQuery对象所匹配的每一个元素添加指定的css类名。
如果我们需要删除元素上的css类名，你可以使用removeClass()函数。
以下面这段html代码为例:

<div id="n1">
    <p id="n2" class="demo test">CoddingMan</p>
    <p id="n3" class="foo">jQuery编程测试</p>
</div>

我们编写如下jQuery代码：

　function w( html ){
　　document.body.innerHTML += "<br/>" + html;
　}

var $n2 = $("#n2");
// 为n2添加一个css类名
$n2.addClass("newOne");
document.writeln( $n2.attr("class") );
var $n3 = $("#n3");
// 为n3添加3个css类名
$n3.addClass("test class1 class2");
document.writeln( $n3.attr("class") );

// 为所有p标签添加css类名"item-index"，这里的index表示当前元素在所有匹配元素中的索引
$("p").addClass( function(index){
    // 函数内的this表示当前DOM元素
    return "item-" + index;
} );

document.writeln( $("#n2").attr("class") ); 
document.writeln( $("#n3").attr("class") );

　.newOne {
　　color: blue;
　}

用在线编辑器运行一下代码是否和你想象的一样呢? 下面看下运行后的截图:
[jQuery学习系列一]1-选择器与DOM对象
(2) removeClass()
由于篇幅限制,下面开始代码都会收缩处理.
removeClass()函数用于移除当前jQuery对象所匹配的每一个元素上指定的css类名。

<p id="n2" class="demo test item-1">CodePlayer</p>

var $n2 = $("#n2");
// 移除n2上的一个css类名
$n2.removeClass("demo");

(3) toggleClass()
toggleClass()函数用于切换当前jQuery对象所匹配的每一个元素上指定的css类名。
所谓"切换"，就是如果该元素上已存在指定的类名，则移除掉；如果不存在，则添加该类名。

<p id="n2" class="demo test">CodePlayer</p>

var $n2 = $("#n2");
// 切换n2上的一个css类名(当前有"demo"，切换后无"demo")
$n2.toggleClass("demo");

1.4, 多种html元素的选择, 自定义选择 (实用且重要)

(1) 选择包含某段文字的元素
$("div:contains("text")")

(2) 选择html文档中的奇偶div元素
$("div:odd"); //奇数
$("div:even"); //偶数

(3)指定标签第N个元素
$("div:eq(3)"); //第四个元素, 记住下标从0开始

(4)属性选择
$("input[id=xx]") //属性id
$("input[name=xx]") //属性name
$("input[type=xx]") //属性type

以下面html代码片段为例:

<div id="n1">
    <div id="n2">
            <span id="n3">张三</span>
            <span id="n4">CodePlayer</span>
    </div>
    <div id="n5">
        <span id="n6">CodePlayer</span>
    </div>
    <div id="n7">
        CodePlayer
    </div>
</div>

View Code