锋利的jQuery第2版学习笔记1~3章

Posted 2020-07-02 平凡世界平凡人

第1章，认识jQuery

目前流行的javascript库

Prototype（http://www.prototypejs.org），成型早，面向对象的思想把握不到位，导致结构松散

Dojo（http://dojotoolkit.org），学习曲线陡，文档不全，最严重的是API不稳定

YUI（http://developer.yahoo.com/yui/）

Ext JS（http://www.extjs.com），侧重界面，比较臃肿，用于商业用途需要付费

MooTools（http://mootools.net/）

jQuery（http://jquery.com）

jQuery优势

1、轻量级

2、强大的选择器

3、出色的DOM操作

4、可靠的事件处理机制

5、完善的Ajax

6、不污染顶级变量

7、出色的浏览器兼容性，支持IE6.0+、Firefox3.6+、Safari5.0+、Opera、Chrome

8、链式操作方式

9、隐式迭代

10、行为层与结构层的分离

11、丰富的插件支持

12、完善的文档

13、开源

jQuery代码的编写

在jQuery库中，$就是就jQuery的一个简写形式，$("#foo")和jQuery("#foo")是等价的

规范：

1、对于同一个对象不超过3个操作的，可以直接写在一行

2、对于同一个对象的较多操作，建议每行写一个操作

3、对于多个对象的少量操作，可以每个对象写一行，涉及子元素的，可以考虑缩进

建议：jQuery对象使用$开头，例：var $variable = jQuery对象，var variable= DOM对象

jQuery对象和DOM对象的相互转换

1、jQuery对象转成DOM对象

jQuery对象不能使用DOM中的方法，jQuery提供了两种方法将jQuery对象转成DOM对象，即使用[index]和get(index)

（1）jQuery对象是一个类似数组的对象，可以通过[index]得到相应DOM对象

var $cr = $("#cr");     //jQuery对象
var cr = $cr[0];          //DOM对象

（2）通过get(index)得到

var $cr = $("#cr");     //jQuery对象
var cr = $cr.get(0);     //DOM对象

2、DOM对象转成jQuery对象

只需要使用$()将DOM对象包装起来即可得到jQuery对象

var cr = document.getElementById("cr");          //DOM对象
var $cr = $(cr);                                 //jQuery对象

注：DOM对象只能使用DOM方法，jQuery对象只能使用jQuery的方法

注：平时用到的jQuery对象都是通过$()函数制造出来的，$()就是一个jQuery对象制造工厂，也可以使用jQuery()函数，因为$和加jQuery等价

解决jQuery和其它库的冲突

注：默认情况下，jQuery用$作为自身的快捷方式

1、jQuery库在其他库之后导入

（1）在其他库和jQuery库加载完毕之后，可以在任何时候调用jQuery.noConflict()函数将变量$的控制权移交其他的JavaScript库

例：

<!-- 引入prototype库 -->
<script type="text/javascript" src="lib/prototype.js"></script>
<!-- 引入jQuery库 -->
<script type="text/javascript" src="lib/jQuery.js"></script>
<script type="text/javascript">
    jQuery.noConflict();    //将变量$的控制权移交给prototype.js
    jQuery(function(){      //使用jQuery
        jQuery("p").click(function(){
            alert(jQuery(this).text());
        });
    });
    $(‘pp‘).style.display = ‘none‘; //使用prototype.js隐藏元素
</script>

（2）想确保jQuery不与其他库冲突，又想自定义快捷方式：

<script type="text/javascript">
    var $j = jQuery.noConflict();   //自定义快捷方式
    $j(function(){                  //使用jQuery，利用自定义快捷方式  $j
        $j("p").click(function(){
            alert.($j(this).text());
        });
    });
    $(‘pp‘).style.display = ‘none‘; //使用prototype.js隐藏元素
</script>

（3）若不想自定义备用名称，又想使用$，还希望不冲突

<1>

<script type="text/javascript">
    jQuery.noConflict();                 //将变量$的控制权移交给prototype.js
    jQuery(function($){                  //使用jQuery设定页面加载时执行的函数
        $("p").click(function(){         //函数内部继续使用$()
            alert.($(this).text());
        });
    });
    $(‘pp‘).style.display = ‘none‘;      //使用prototype.js隐藏元素
</script>

<2>

<script type="text/javascript">
    jQuery.noConflict();                 //将变量$的控制权移交给prototype.js
    (function($){                        //定义匿名函数
        $(function(){                    //匿名函数内部的$均为jQuery
            $("p").click(function(){
                alert.($(this).text());
            });
        });
    })(jQuery);                          //执行匿名函数且传递实参jQuery
    $(‘pp‘).style.display = ‘none‘;      //使用prototype.js隐藏元素
</script>

2、jQuery在其他库之前导入

直接使用jQuery而非$来做jQuery的工作，$()方法作为其他库的快捷方式，无需调用jQuery.noConflict()方法

第2章，jQuery选择器

jQuery选择器的优势

1、简洁的写法

使用$("#ID")代替document.getElementById()，使用$("tagName")代替document.getElementsByTagName()函数

2、支持CSS1到CSS3选择器

3、完善的处理机制，即，使用jQuery获取不存在的元素也不会报错

注：$("#tt")获取的永远是对象，即使网页上没有元素，因此当要使用jQuery检查某个元素在网页上是否存在，不能使用如下代码：

if($("#tt")){   /* do something */   }

应根据获取的元素长度来判断：

if($("#tt").length > 0){   /* do something */   }

或转换成DOM对象：

if($("#tt")[0]){   /* do something */   }

基本选择器

选择器	描述	返回	示例
#id	根据给定id匹配一个元素	单个元素	$("#test")选取id为test的元素
.class	根据给定类名匹配元素	集合元素	$(".test")选取所有class为test的元素
element	根据给定元素名匹配元素	集合元素	$("p")
*	匹配所有元素	集合元素	$("*")
selector1,selector2...	将每个选择器匹配到的元素合并后一起返回	集合元素	$("div,span,p.myClass")

 

层次选择器

选择器	描述	返回	示例
$("ancestor descendant")	选取ancestor元素里所有descendant（后代）元素	集合元素	$("div span")选取div里所有span元素
$("parent>child")	与CSS的子选择器一样	集合元素	$("div>span")
$("prev+next")	与CSS的相邻同胞选择器一样	集合元素	$(".one+div")
$("prev~sibling")	与CSS的通用的同胞组合选择器一样	集合元素	$("#two~div")

可以使用next()方法代替$(‘prev+next‘)

$(".one+div");  ==> $(".one").next("div");

使用nextAll()代替$(‘#prev~sibling")

$("#prev~div"); ==> $("#prev").nextAll("div");

基本过滤选择器

选择器	描述	返回	示例
:first	选取第一个元素	单个元素	$("div:first")选取所有<div>元素中第1个<div>元素
:last	选取最后一个元素	单个元素	$("div:last")解释类似:first
:not(selector)	去除所有与给定选择器匹配的元素	集合元素	$("input:not(.myClass)")
:even	选取索引是偶数的元素，索引从0开始	集合元素	$("input:even")
:odd	选取索引是奇数的元素，索引从0开始	集合元素	$("input:odd")
:eq(index)	选取索引是index的元素，index从0开始	单个元素	$("input:eq(1)")
:gt(index)	选取索引大于index的元素，index从0开始	集合元素	$("input:gt(1)")
:lt(index)	选取索引小于index的元素，index从0开始	集合元素	$("input:lt(1)")
:header	选取所有标题元素，例h1，h2	集合元素	$(":header")
:animated	选取正在执行动画的元素	集合元素	$("div:animated")
:focus	选取获得焦点的元素	集合元素	$(":focus")

 

内容过滤选择器

选择器	描述	返回	示例
:contains(text)	选取含有文本内容为“text”的元素	集合元素	$("div:contains(‘me‘)")选取所有含有文本"me"的div元素
:empty	选取不包含子元素或文本的空元素	集合元素	$("div:empty")
:has(selector)	选取含有选择器所匹配的元素的元素	集合元素	$("div:has(p)")选取含有p元素的div元素
:parent	选取含有子元素或文本元素的元素	集合元素	$("div:parent")

 

可见性过滤选择器

选择器	描述	返回	示例
:hidden	选取所有不可见元素	集合元素	$(":hidden")选取所有不可见元素
:visible	选取所有可见元素	集合元素	$("div:visible")选取可见的div元素

 

属性过滤选择器

选择器	描述	返回	示例
[attribute]	选择拥有此属性的元素	集合元素	$("div[id]")选取拥有id属性的div元素
[attribute=value]	选择拥有属性值为value的元素	集合元素	$("div[title=test]")
[attribute!=value]	选择属性值不等于value的元素	集合元素	$("div[title!=test]"),没有属性title的元素也会被选取
[attribute^=value]	选择属性值以value开始的元素	集合元素	$("div[title^=test]")
[attribute$=value]	选择属性值以value结束的元素	集合元素	$("div[title$=test]")
[attribute*=value]	选择属性值含有value的元素	集合元素	$("div[title*=test]")
[attribute|=value]	选择属性等于给定字符串或以该字符串为前缀（该字符串后 跟一个连字符‘-’）的元素	集合元素	$("div[title|="en"]")选取title属性等于en 或以en为前缀的元素
[attribute~=value]	选取属性用空格分隔的值中包含一个给定值的元素	集合元素	$("div[title~="uk"]")
[attribute1] [attribute2] ...	用属性选择器合并成复合选择器，满足多个条件，缩小范围	集合元素	$("div[id][title$="test"]")选取拥有属性 id并且属性title以"test"结束的div元素

 

子元素过滤选择器

选择器	描述	返回	示例
:nth-child(index/even /odd/equatioin)	选取每个父元素下第index个子元素或奇偶元素， index从1开始	集合元素	将为每一个父元素匹配子元素
:first-child	选取每个父元素的第一个子元素	集合元素	将为每一个父元素匹配子元素
:last-child	选取每个父元素的最后一个子元素	集合元素	将为每一个父元素匹配子元素
:only-child	若某个元素是其父元素唯一的子元素，则被匹配	集合元素	$("ul li:only-child")在<ul>中选取是唯一 子元素的<li>元素

:nth-child()选择器功能如下：

1、:nth-child(even)选择索引是偶数的元素

2、:nth-child(2)选择索引是2的元素

3、:nth-child(3n+1)选择索引是（3n+1）的元素，n从1开始

表单对象属性过滤选择器

选择器	描述	返回	示例
:enabled	选取所有可用元素	集合元素	$("#form1 :enabled")
:disabled	选取所有不可用元素	集合元素	$("#form1 :disabled")
:checked	选取所有被选中元素，单选，复选	集合元素	$("input:checked")
:selected	选取所有被选中选项元素，下来列表	集合元素	$("select option:selected")
:input	选取所有<input><textarea><select><button>	集合元素	$(":input")
:text	选取所有单行文本框	集合元素	$(":text")
:password	选取所有密码框	集合元素	$(":password")
:radio	选取所有单选框	集合元素	$(":radio")
:checkbox	选取所有复选框	集合元素	$(":checkbox")
:submit	选取所有提交按钮	集合元素	$(":submit")
:image	选取所有图像按钮	集合元素	$(":image")
:reset	选取重置按钮	集合元素	$(":reset")
:button	选取所有按钮	集合元素	$(":button")
:file	选取所有上传域	集合元素	$(":file")
:hidden	选取所有不可见元素	集合元素	$(":hidden")

选择器中的注意事项

1、选择器中含有"."，"#"，"("，"]"等特殊符号，需要转义，例：$("#id\\#b")

2、属性选择器中的@符号需要去掉

第3章，jQuery中的DOM操作

DOM操作分类

1、DOM Core（核心）

2、html-DOM

3、CSS-DOM

jQuery中的DOM操作

1、查找节点

（1）查找元素节点，使用选择器

（2）查找属性节点，再找到元素之后，可以使用attr()方法获取元素属性

2、创建节点

（1）创建元素节点

使用工厂函数$()来完成，$(html)，根据传入的HTML标记字符串，创建一个DOM对象，并转成jQuery对象返回

例：$("<li></li>")

（2）创建文本节点，与（1）类似，将文本内容一起包含在HTML标记字符串中

（3）创建属性节点，与（1）类似，将节点属性一起包含在HTML标记字符串中

3、插入节点

方法	描述	示例
append()	向每个匹配的元素内部追加内容	<p>我想说：</p> $("p").append("<b>你好</b>"); <p>我想说：<b>你好</b></p>
appendTo()	将所有匹配元素追加到指定元素中，与append方法颠倒	<p>我想说：</p> $("<b>你好</b>").appendTo("p"); <p>我想说：<b>你好</b></p>
prepend()	向每个元素内部前置内容	<p>我想说：</p> $("p").prepend("<b>你好</b>"); <p><b>你好</b>我想说：</p>
prependTo()	将所有匹配元素前置到指定元素中，与prependTo方法颠倒	<p>我想说：</p> $("p").prependTo("<b>你好</b>"); <p><b>你好</b>我想说：</p>
after()	在每个匹配元素之后插入内容	<p>我想说：</p> $("p").after("<b>你好</b>"); <p>我想说：</p><b>你好</b>
insertAfter()	将所有匹配元素插入到指定元素之后	<p>我想说：</p> $("<b>你好</b>  ").insertAfter("p"); <p>我想说：</p><b>你好</b>
before()	在每个匹配的元素之前插入内容	<p>我想说：</p> $("p").before("<b>你好</b>"); <b>你好</b> <p>我想说：</p>
insertBefore()	将所有匹配元素插入到指定元素之前	<p>我想说：</p> $("<b>你好</b>  ").insertBefore("p"); <b>你好</b> <p>我想说：</p>

这些方法不只能将新建节点插入到文档中，也能移动原有节点

4、删除节点

（1）remove方法

删除节点，及所有后代节点，并清除绑定的事件、附加的数据，返回被删除节点的引用，在之后可以继续使用

$("ul li:eq(1)").remove();

也可以通过传递参数来选择性删除：

$("ul li").remove("li[title!=test]");

（2）datach方法

与remove一样，但不会清除绑定的事件、附加的数据

（3）empty方法

并不能算是删除节点，而是清空节点，清空指定元素的所有后代节点

5、复制节点

使用clone方法，使用参数true可以同时复制元素所绑定事件

6、替换节点

replaceWith()和replaceAll()

$("p").replaceWith("<strong>hello</strong>");
$("<strong>hello</strong>").replaceAll("p");

以上两句是一样的效果

注：元素绑定事件一样会被清掉

7、包裹节点

使用wrap()方法

<strong>hello</strong>

$("strong").wrap("<b></b>");     //用b标签把strong元素包裹起来

<b><strong>hello</strong></b>

wrapAll()和wrapInner()

（1）wrapAll

将所有匹配元素用一个元素来包裹，与wrap不同，wrap是将所有匹配元素单独包裹：

<strong>hello</strong>
<strong>hello</strong>

$("strong").wrap("<b></b>");

<b><strong>hello</strong></b>
<b><strong>hello</strong></b>

而使用wrapAll之后：

<b>
<strong>hello</strong>
<strong>hello</strong>
</b>

注：若被包裹元素之间有其他元素，则其他元素会被放到包裹元素之后

（2）wrapInner方法

该方法将每一个匹配的元素的子内容用其他结构化标记包裹起来：

<strong>hello</strong>

$("strong").wrapInner("<b></b>");

<strong><b>hello</b></strong>

8、属性操作

（1）获取和设置属性

使用attr()方法

获取属性

var $p = $("p");
var p_txt = $p.attr("title");

设置属性

$("p").attr("title","value");     //用于设置单个属性
$("p").attr({"title":"you title","name":"you name"});     //用于设置多个属性，使用对象传递

（2）删除属性

使用removeAttr()方法

$("p").removeAttr("title");

9、样式操作

（1）获取和设置样式

使用attr()方法

（2）追加样式

使用addClass()方法

$("p").addClass("another");

（3）移除样式

使用removeClass

参数为要移除的class名，不带参数则把所有class移除

（4）切换样式

toggle()方法

$toggleBtn.toggle(function(){
     //代码1
},function(){
     //代码2
});

toggle的作用是，交替执行代码1和代码2，主要是用于控制行为上的重复切换

toggleClass()方法

用于控制样式上的切换，类名存在则删除，不存在则添加

$("p").toggleClass("another");

（5）判断是否含有某个样式

hasClass()方法用于判断是否含有某个class，有返回true，没有返回false

10、设置和获取HTML、文本和值

（1）html()方法，可用于XHTML，不可用于XML

类似于JavaScript的innerHTML属性，可以用于获取和设置元素（传递参数）的HTML内容

（2）text()方法

类似于JavaScript的innerText属性，用于获取和设置元素（传递参数）的文本内容

（3）val()方法

类似于JavaScript的value属性，用于设置和获取元素的值，无论元素是文本框，下来列表还是单选框，都可以返回元素值，若为多选，返回一个包含所有选择的值的数组

11、遍历节点

（1）children()方法

取得匹配元素的子元素集合，只考虑子元素，不考虑后代元素，$("p").children();

（2）next()方法

用于取得匹配元素后面紧邻的同辈元素，$("p").next();

（3）prev()方法

用于取得匹配元素前面紧邻的同辈元素，$("p").prev();

（4）siblings()方法

用于取得匹配元素前后所有同辈元素，$("p").siblings();

（5）closest()方法

该方法用于取得最近的匹配元素。首先检查元素本身，接着逐级向上往祖先元素查找，没找到则返回空jQuery对象

（6）parent()，parents()，closest()区别

parent()，获取集合中每个匹配元素的父元素

parents()，获取集合中每个匹配元素的祖先元素

closese()，从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素

12、CSS-DOM操作

可以直接利用css()方法获取元素的样式属性：$("p").css("color");

无论是外部CSS导入，还是直接拼接在HTML元素中，都可以通过css()方法获得

设置样式与attr()方法类似

$("p").css("color","red");     //设置单个
$("p").css({"color":"red","fontSize":"30px");     //设置多个

注：如果值是数字，则自动转化为像素值

获取元素高度，可以直接使用height属性

$("p").height();

注：1、jQuery1.2之后height可用于获取window和document的高度

        2、css方法获取的高度值与样式设置有关，而height获取的是元素在页面实际高度，与样式设置无关，且不带单位

与height对应的还有width()方法

其他几个经常使用的方法：

（1）offset()方法

用于获取元素在当前视窗的相对偏移，返回对象包含两个属性，top，left，只对可见元素有效

（2）position()方法

用于获取元素相对于最近一个position样式属性设置为relative或absolute的祖先节点的相对偏移，返回对象也包含连个属性top，left

（3）scrollTop()方法和scrollLeft()方法

分别用于获取元素的滚动条距顶端和距左侧的距离，还可以接受一个参数，指定滚动条滚动到指定位置