JavaScript权威指南读书笔记——第十九章 jQuery类库

jQuery基础

jQuery函数

jQuery()函数(也是$())。

调用方式：

第一种调用方式是传递CSS选择器给jQuery()函数。还可以将一个元素或jQuery对象作为第二个参数传递给jQuery()函数，这时返回的是该特定元素的元素集的子元素中匹配选择器的部分。

第二种调用方式是传递一个Element、Document或Window对象给jQuery()函数。只是简单的将对象封装成jQuery对象。

第三种调用方式是传递HTML文本字符串给jQuery()函数。jQuery会根据传入的文本创建HTML元素并封装成jQuery对象。

通过第三种方式调用时，jQuery()函数可以选的第二个参数，可以传递可以是object对象。此时，假设对象的属性表示HTML属性的键/值对。

示例：

var img = $("<img/>", {
    src:url,
    css:{borderWidth:5},
    click:handleClick
});

第四种调用方式是传入一个函数到jQuery()函数。当文档加载完毕且DOM可操作时，传入的函数将被调用 。

查询与查询结果

jQuery()函数返回值是一个jQuery对象。jQuery对象是类数组：它们有用length属性和介于0~length-1之间的数值属性。还可以用size()方法来代替length属性，用get()方法来代替方括号索引。可以使用toArray()方法来将jQuery对象转化为真实数组。

jQuery对象还有三个属性。

selector属性是创建jQuery对象时的选择器字符串。

context属性是上下文对象，是传递jQuery()函数第二个参数，如果没有传递的话，默认是Document对象。

jquery属性是字符串形式的jQuery版本号。

想遍历jQuery对象的所有元素时，可以调用each()方法来代替for循环。它接收一个回调函数作为唯一参数，然后对jQuery对象中的每一个元素调用回调函数。在回调函数中this关键字指代Element对象。each()方法将索引值和该元素作为第一个和第二个参数传递给回调函数。this和第二参数都是原生文档元素。如果回调函数返回false，遍历将在该元素后终止。each()方法返回调用自身jQuery对象。

jQuery的map()方法，它接受回调函数作为参数。jQuery对象的每一个元素都调用回调函数，同时回调函数返回值收集起来，并封装成一个新jQuery对象返回。元素作为this值和第二参数传入，元素的索引值作为第一参数传入。

jQuery的另一个方法是index()。该方法接受一个元素作为参数，返回值是该元素在此jQuery对象中的索引值，如果找不到的话返回-1。

jQuery还有一个is()方法。它接受一个选择器作为参数，如果选中元素中至少有一个匹配该选择器时，则返回true。

jQuery的getter和setter

获取和设置HTML属性

attr()返回是jQuery中用于HTML属性的getter/setter。可以使用HTML属性名和JavaScript属性名可以等同使用。一个相关函数是removeAttr()，可用来从所有选中元素中移除某个属性。

//getter
$("form").attr("action");
//一次性设置多个属性
$("#img").attr({
    src:"url",
    width:720,
    height:64
});
$("a").attr("target",fuction(){
    if (this.host == location.host)
        return "_self";
    else
        return "_blank";
});
$("a").removeAttr("target");

获取和设置CSS属性

css()方法作用于元素的CSS样式。可以用于设置和获取元素的CSS样式。css()元素会把元素数值转换成带有单位后缀的字符串返回，而设置样式值时，则会将数值转化成字符串，在必要时添加”px”后缀。使用的属性名可以有两种方式，font-weight和fontWeight等同。

//下面两行等同
$("h1").css("font-weight");
$("h1").css("fontWeight");
//不可获取复合样式
$("h1").css("font");
//可以设置复合样式是OK的
$("div.note").css("border","solid black 2px");
$("h1").css({
    backgroundColor:"white",
    padding:"10px 2px 4px 20px"
});
$("h1").css("font-size",function(i,curval){
    return Math.round(1.25*parseInt(curval));
});

获取和设置CSS类

//添加CSS类
$("h1").addClass("hilite first");
$("section").addClass(function(index,oldClass){
    return "section"+index;
});

//删除CSS类
$("p").removeClass("hilite first");
$("section").removeClass(function(index,oldClass){
    return "section"+index;
});
$("div").removeClass();

//切换CSS类
$("h1").toggleClass("big");

//检测CSS类
$("p").hasClass("first");
$("#lead").is(".first");

设置和获取元素类容

text()和html()方法用来获取和设置元素的纯文本或HTML内容。

如果传入字符串给text()或html()，该字符串会用做该元素的纯文本或格式化的HTML文本内容。

//获取文档标题
var title = $("head litle").text();
//获取第一个<h1>元素的html
var headline = $("h1").html();
//设置纯文本
$("head litle").text("title");
//设置html
$("head litle").html("title<br/>");

获取和设置元素的位置高宽

使用offset()方法可有获取或设置元素的位置。该方法相对文档来计算位置值，返回一个对象，带有left和top属性。

var elt = $("#id");
var position = elt.offset();
position.top += 100;
elt.offset(position);

elt.offset(function(index,curpos){
    return {left:curpos.left + 25*index,top:curpos.top};
});

position()方法想offset()方法，但它只能用做getter，它返回的元素位置是相对于 其偏移父元素的。jQuery对象的offsetParent() 获得被定位的最近祖先元素。offset()返回元素的绝对位置，用相对与文档坐标来表示。而position()则返回相对于元素的offsetParent()的偏移量。

获取元素的宽高

var body = $("body");
var contentWidth = body.width();
var paddingWidth = body.innertWidth();
var borderWidth = body.outerWdith();
var marginWidth = body.outerWidth(true);
var padding = paddingWidth - contentWidth;
var border = borderWidth - paddingWidth;
var margin = marginWidth - borderWidth;

width()和height()方法也可以是setter。width()和height()的getter和setter行为之间有个小的不对称。用作getter时，这些方法返回元素的内容盒子的尺寸，不包括内边距、边框和外边距。用作setter时，它们只是简单设置CSS的width和height属性。默认情况下，这些属性也指定内容盒子的大小。如果一个元素设置CSS box-sizing属性设置为border-box，则width()和height()方法设置的尺寸包括内边距和边框。

jQuery还有scrollTop()和scrollLeft()，可获取或设置元素的滚动条位置。可有获取当前滚动条的位置和设置新滚动条的位置。

获取和设置元素数据

需要将数据与jQuery对象中的元素关联，传递名称和值两个参数给data()方法即可。还可以传递一个对象给data()setter，此时，该对象的每一个属性都用做名/值对，用来与jQuery对象的元素关联。

data()方法可以用做getter。当不带参数调用时，它会返回一个对象，含有与jQuery对象中的第一个元素相关联的所有名/值对。当传入一个参数调用data()时，它会返回对第一个元素与该字符串参数相关联的数据值。

removeData()方法用来从元素中删除数据。如果传递字符串给removeData()，该方法会删除元素中与该字符串相关联的值。如果不带参数调用removeData()，它会删除与元素相关联的所有数据。

$("div").data("x",1);
var x = $("div").data("x");
$("div").removeData("x");

//方法形式
$("div").data(...);
//函数形式
$.data(e,...);

修改文档结构

插入和替换元素

$("#log").append("<br/>");

$("<br/>").appendTo("#logger");

复制元素

如果插入的元素已经是文档的一部分，这些元素只会简单地移动而不是复制到新位置。入股想复制到新位置而不是移动它，必须首先用clone()方法来得到一个副本。clone()创建并返回没一个选择元素的一个副本。

$("a").clone().appendTo("#linklist");

包装元素

wrap()包装每一个元素。wrapInner()包装每一个选中元素的内容。wrapAll()则将选中元素作为一组来包装。

//用<i>元素包装所有<h1>元素      <h1><i></i></h1>
$("h1").wrap(document.createElement("i"));
//用<i>元素包装所有<h1>的内容     <i><h1></h1></i>
$("h1").wrapInner("<i/>");
//用一个类为list的div标签包装所有a标签
//<div class="list"><a></a><a></a>...</div>
%("a").wrap("<div class="list"></div>");

删除元素

empty()会删除每个选中元素的所有节点，但不会删除自身。remove()方法会从文档中删除选中元素。通常不带参数调用remove()，此时会从文档中移除jQuery对象中的所有元素。如果只传入一个参数，该参数会被当成是选择器，jQuery对象中只有匹配选择器的元素才会被移除。

使用jQuery处理事件

事件处理程序的注册

使用jQuery对象调用事件名字的方法传入处理函数即可

$("input:button").click(function(){
    //...
});

resize和unload事件只有在Window对象中触发。load()方法可在$(window)上调用，用来给窗口注册加载事件处理程序。load()还可以加载新内容到元素中。error()方法可用在<img>元素上，用来注册当图片加载失败时调用的处理程序。不应该用于设置窗口的onerror属性。

hover()方法用来注册mouseenter和mouseleave事件注册处理程序。调用hover(f,g)，相当于mouseenter(f)后调用mouseleave(g)。如果仅传入一个参数给hover()，该参数函数同时会用做enter和leave。

toggle()，该方法将处理程序绑定到单机事件。如果调用toggle(f,g,h)，第一次调用函数f()，第二次调用函数g(),第三次调用函数h()，第四次调用函数f()。

jQuery事件对象

jQuery事件对象作为第一个参数传入事件处理程序。

Event事件定义了一下方法：

preventDefault()
isPreventDefault()
stopPropagation()
isStopPropagation()
stopImmediatePropagation()
isStopImmediatePropagation()

注销事件处理程序

//从所有元素中移除所有jQuery事件处理程序
$("*").unbind();
//从所有<a>元素中取消绑定所有mouseover和mouseout处理程序
$("a").unbind("mouseover mouseout");
//取消绑定在myMod命名空间的mouseover事件
$("a").undbind("mouseover.myMod");
$("a").bind("click",clickHandler);
//取消指定的的click事件
$("a").unbind("click",clickHandler);
$("a").unbind({
    mouseover:mouseoverHandler,
    mouseout:mouseoutHandler
});

触发事件

//就和用户单机提交按钮一样
$("#my_form").submit();
//和上面代码等同
$("#my_form").trigger("submit");

//触发ns1命名空间的click事件
$("button").trigger("click.ns1");
//触发没有命名空间的单机处理程序
$("button").trigger("click!);

trigger()如果传入事件对象，该对象会传递给触发的处理程序。

//button1的单机处理程序触发button2的单机处理程序
$("#button1").click(function(e){
    $("#button2").trigger(e);
});

trigger()如果传入普通对象，会创建一个jQuery事件对象，type属性会用来判断触发什么类型的处理程序，其他属性会添加到新对象中。

$("#button1").trigger({
    type : "click",
    a : 1
});

给trigger()传入第二个参数会成为每个触发的事件处理程序的第二个参数。

//可以在处理程序的第二个参数读取true
$("#button").trigger("click",true);

如果想调用事件处理程序，但不执行默认操作，可以使用triggerHandler()代替。该方法会首先调用preventDefault()和cancelBubble()方法。这以为这不会冒泡也不会执行相关联的默认操作。

自定义事件

使用jQuery.event.trigger()函数代替trigger()方法，用来全局触发处理器会更有用：

$("#logoff").click(function(){
    //广播一个事件
    $.event.trigger("logoff");
});

实事事件

如果使用bind()给文档<a>绑定事件处理程序，接着创建<a>元素到的新文档，这些新元素和老元素不会拥有相同的的事件处理程序。

要使用实事事件，需要用delegate()和undelegate()来代替bind()和unbind()。

$(document).delegate("a","mouseover"，handler);
$(".dynamic").delegate("a","mouseover"，handler);

$(".dynamic").undelegate("a");
$(".dynamic").undelegate("a","mouseover");
$(".dynamic").undelegate("a","mouseover",handler);

delegate()方法有用4个参数的版本，将数据值作为第三个参数传入可以在事件处理程序的事件对象中获取。

还可以使用live()和die()来代替

$("a").live("mouseover",handler);
$("a",$(".dynamic")).live("mouseover",handler);
$("a").die("mouseover");
$("a").die("mouseover",handler);

jQuery中的Ajax

load()方法

向它传入一个URL，它会异步加载该URL的内容，将内容插入每一个选择元素中。

$("#status").laod(status_report.html);

如果给该方法传递的第一个参数是函数而不是字符串，则load()方法是事件处理程序注册方法二不是Ajax方法。

如果只想加载文档的一部分，可以在URL后面添加一个空格和一个jQuery选择器。

$("#temp").load("a.html #id");

load()方法还接受两个可选参数。如果传入的是字符串，则会追加到URL后面。如果传入对象，该对象会被转化为一个用“&”分隔的名/值对后与请求一起发送。load()方法通常发送HTTP GET请求，但如果传入数据对象，则它会发送POST请求。

$("div").load("a.html","param1=a");
$("div").load("a.html",{
    param1:'a'
});

如果没有指定任何数据，回调函数可以作为第二个参数。否则，它必须是第三个参数。每次回调函数都会传入三个参数：被加载的URL的完整文本内容、状态码字符串和用来加载该URL的XMLHTTPRequestdioxide。

Ajax工具函数

jQuery.getScript()

它会异步加载文件，加载完成后在全局作用域执行该代码。

可以传入回调函数作为第二个参数，jQuery会在代码加载和执行完成后调用一次改回调函数。

回调函数的第一个参数是脚本的文本内容，第二个参数是“success”状态码，第三个参数则是获取脚本内容的XMLHTTPRequest对象。

jQUery.getJSON()

和jQuery.getScript()类型，但是不会讲获取的文本当做脚本执行，而会将其解析为JSON。

回调函数的第一个参数就是解析好的JSON数据。

如果jQUery.getJSON()的URL或数据字符串在末尾或“&”字符含有“=?”字符串，则表明这是一个JSONP请求

//服务器段要将callback的参数带参数调用
//callback+"({a:'abcd'})"

$.getJSON(url+"&callback=?",function(data){
    //data是JSON
});

serialize()

获取用“&”分隔的名/值对还可以用serialize()方法。

$("#submit_button").click(function(event){
    $(this.form).load(this.form.action,$(this.form).serialize());
    event.preventDefault();
    //防止多次提交
    this.disabled = "disabled";
});

$.param()

//a[]=1&a[]=2&a[]=3
$.param({a:[1,2,3]});
//o[x]=1&o[y]=true
$.param({o:{x:1,y:true}});
//o[x][y][]=1&o[x][y][]=2
$.param({o:{x:{y:[1,2]}}});

jQuery.get()和jQuery.post()

第一个参数是URL，第二个参数是可选数据字符串或对象，和回调函数。

回调函数的第一个参数是返回的数据，第二个是“success”字符串，第三个是XMLHttpRequest对象。

jQuery选择器和选取方法

选择器

简单选择器

组合选择器

选择器组

传递给$()函数的选择器就是选择器组，这是一个逗号分隔的列表。

$("a,div,p");

选取方法

var paras = $("p");
paras.first();
paras.last();
paras.eq(1);
params.eq(-2);
paras[1];

$("p").slice(2,5);
$("p").slice(-3);

filter()的三种调用方式

• 传递选择器字符串，它会返回一个匹配该选择器元素的jQuery对象。
• 传递另一个jQuery对象，它会返回一个这两个jQuery对象的交集。
• 传递判断函数，仅包含判断函数为true的元素。

not()方法和filter()一样，处理含义与filter()相反。

has()，如果传入选择器，has()返回一个仅包含子孙元素匹配该选择器的选择元素的jQuery对象。如果传入文档元素，会将选中元素集调整为那些是指定元素祖先节点的选择元素。

add()，添加元素，会移除重复元素，并对该组合选取进行排序，按照文档中的顺序排序。

$("div").add($("p"));
$("div").add(document.getElementsByTagName("p"));

将选中元素集用做上下午

//在<div>中查找<p>元素
$("div").find("p");

//查找选中元素的直接子元素
//$("header>span");
$("header").children("span");

//与$("h1+p");相同
$("h1").next("p");
//h1元素前面的兄弟元素
$("h1").prev();

//#id元素后面的所有<p>兄弟元素
$("#id").nextAll("p");
//#id元素前面的所有兄弟元素
$("#id").prevAll();

//nextUtil()和preUtil()方法接收一个选择器参数，会选取选中元素前面或后面的所有兄弟元素，直到招傲匹配选择的兄弟元素为止。

//li元素的父元素
$("li").parent();

//parentUtli()返回选中的元素的祖先元素，直到出现匹配指定选择器的第一个祖先元素。
//所以包含<a>的<div>
$("a[href]").parentUtil(":not(div)");

//包含链接的最里层的<div>
$("a[href]").closest("div");

恢复到之前的选择元素集

选取方法在创建或返回一个新jQuery对象时吗，它们会将该对象添加到它派生自的旧jQuery对象的内部引用。end()方法弹出栈。

$("div").find("p").addClass("hightlight").end().css("border", "solid black 1px");

可以将新的元素集作为数组或类数组对象传递给pushStack()方法。指定的元素会成为新的选择元素，之前选择的元素集则会压入栈中。

var sel = $("div");
sel.pushStack(document.getElementsByTagName("p"));
sel.end();

andSelf()返回一个新的jQuery对象，包含当前的选择元素，加上之前的所有选择元素（会去除重复）。