《深刻PHP与jQuery开发》读书笔记——Chapter2

时间 2019-11-14

标签深刻PHP与jQuery开发读书笔记 chapter2 chapter 栏目 PHP 繁體版

原文原文链接

Pro PHP and jQuery Chapter2 总结

1.理解jQuery脚本的基本行为

jQuery事实上沿用了JavaScript的那一套东西，几乎全部方法都支持链式调用，也就是说方法能够一个接一个地执行。javascript

$('p')
    .addClass('new-class')
    .text("I'm a paragraph!")
    .appendTo('body');

要记住：链式调用事后返回的仍是jQuery对象自己。php

2.经常使用的jQuery选择器方法

2.1遍历DOM元素

遍历，就是从一个DOM元素移动到另外一个元素的行为。css

索引.eq()
过滤.filter()和.not()
首尾索引.first()和.last()
包含特殊特征的元素.has()
返回布尔求值.is()
集合切分操做.slice()
寻找子元素(可选参数来匹配特定子元素)，仅仅检查下一级元素.children()
找出直属上级.closest()
不论代数，找出符合条件的子孙元素.find()
向后查找.next(),.nextAll()和.nextUntil()
向前查找.prev(),.prevAll()和.prevUntil()
选择全部兄弟元素(不分先后的同级相邻元素).siblings()
向上回溯父元素(直到html).parent(),.parents()和.parentsUntil()
新建jQuery对象.add(),注意在此刻该元素只存在于jQuery对象中,还没有添加到DOM树，所以还不能显示在页面上。
既匹配段落元素，又匹配筛选后的结果.andSelf()
返回文本节点，即元素开始标签和结束标签之间的字符数据(元素实际显示的文本）.contents()
获得上一步操做的结果集.end()

2.2建立元素并将其添加到DOM

注意:咱们在Google Chrome的控制台或者是FireBug的控制台里面对DOM所作的任何修改都是临时的。这意味着当刷新原始页面时，浏览器会重置全部的变动。之因此这样是由于JavaScript是一种客户端语言,脚本修改的并不是存放在服务器上的真实文件，而仅仅是浏览器对这个文件副本的解释。html

可是JavaScript是能够经过AJAX技术将修改保存到服务器的，这一技术能使JavaScript与服务器端语言(如PHP)协同工做。java

（主动）在目标内容以后添加.append(),在目标内容以前添加.prepend()
（被动）在目标内容以后追加.appendTo(),在目标内容以前追加.prependTo()
如：

$("<p>", {
            "text":"I'm a new paragraph!",
            "css":{"background":"yellow"}
        })
        .prependTo("body");

（主动）在目标内容以后，目标元素以外添加.after()，在目标内容以前，目标元素以外添加.before()
（被动）在目标内容以后，目标元素以外添加.insertAfter(),在目标内容以前，目标元素以外添加.insertBefore()
使用一个或多个元素包住已有的元素.wrap(),注意，里面可加回调函数

$("span").wrap(function(){
        return $(this).is(".foo") ? "<strong>" : "<em>";
});

删除包住的元素.unwrap()
将整个元素集合都须要用一个标签包住,.wrapAll()会在DOM中移动元素，从而使得它们集中在一块儿。
放在最内部包围:.wrapInner()
.remove()和.detach()方法用于从DOM中彻底删除一个元素。两个方法都从DOM中删除选中的元素，但.detach()方法无缺地保存了被删除元素的数据，所以特别适合那些须要把删除元素挪到DOM其余位置的场合。

2.3获取和修改CSS及属性

.attr()主要有两个功能:a.读取给定的属性;b.设置给定属性的值，这须要用属性名字做为它的第一个参数，再提供一个值做为它的第二个参数。
删除属性.removeAttr()
设置样式规则（接收JSON数据）.css()
.text()和.html()方法用于处理一个元素的内容，两者的不一样在于.html()可以读取或设置HTML内容，而.text()只能读取或设置文本内容。
.val()方法用于访问和修改表单元素的内容(值)。
.data()经过使用一种安全简单的方式把与元素有关的信息储存到jQuery对象中。（支持JSON格式）
.addClass()用于添加属性，.removeClass()用于删除属性,toggleClass()用于属性轮转，即若是目标元素没有相应的class，它会添加它，若是已经有相应的class，它会删除它。
布尔值检测jQuery对象是否具备相应的属性.hasClass();
高和宽.height(),.width()
内外高宽.innerHeight(),.innerWidth(),.outerHeight()和outerWidth()

2.4处理结果集

.map()和.each()jquery

.map()和.each()方法使得开发者可以使用回调函数对结果集内的每个元素单独处理，这个回调函数须要两个参数，即当前元素的索引和当前元素自己。ajax

两者的区别：.map()方法返回的是一个包含回调函数返回值的新对象，而.each()返回的是受回调函数影响后的原始jQuery对象。这意味着.each()支持链式调用，而.map()不支持。json

2.5动画或其余效果

显示和隐藏效果：.show()和.hide()
让一个元素淡入或者淡出（使用透明度）.fadeIn()和.fadeOut()。当调用这两个函数时,.fadeIn()把元素的透明度从0调整到1，另外一个则从1调整到0.淡入和淡出轮流摇摆的函数.fadeTo()
上下展开和隐藏:.slideUp(),.slideDown(),摇摆的函数有.slideToggle()
动画方法内部都是调用的是.animate()
延迟动画.delay(),中止动画.stop()

2.6处理时间

浏览器事件抛出异常:当浏览器检测到自身发生变化或遇到错误时，就抛出浏览器事件。.error()
在页面内容发生滚动时会触发scroll事件，要为滚动事件绑定事件处理程序，使用.scroll()方法。
.ready()是一个防止脚本执行过早从而避免异常的“保险”。这个方法会一直等到DOM准备好，能够接受处理时才触发它的处理程序。一个常见的习惯是把整个脚本作成一个回调函数传递给.ready()函数：

$(document).ready(function(){
        //全部利用jQuery实现的功能都放在这里
});

此外,.ready()方法也接受一个可选的参数，这个参数用来在此函数内做为jQuery函数的别名。这使你可以书写更安全的jQuery脚本，即便在已经使用jQuery.noConflict()方法把$别名让给了其余框架的场合，你使用$符号的脚本也同样正常工做。数组

下面的代码老是能够保证你代码中的$别名可以正常工做：浏览器

jQuery.ready(function($){
        //全部利用jQuery实现的功能都放在这里
        $("p").fadeOut();
    });

当一个用户单击连接，刷新页面，单击前进或后退按钮，或者关闭整个窗口时，都会触发unload事件。然而，对unload事件的处理各个浏览器并不统一。所以，若要在生产环境使用这个事件，就必定要事先在不一样的浏览器环境中对脚本进行充分测试。
处理事件绑定函数。.bind()绑定，.unbind()解除绑定。可用的事件有blur,focus,focusin,focusout,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup和error。
相似.bind()和.unbind(),.live()和.die()也分别负责为元素绑定和删除事件处理函数。一个主要的不一样是，.live()不但能绑定事件处理函数和JavaScript属性给页面上已有的元素，就连动态添加到DOM中的匹配元素也能（主动）绑定。
.one()方法的用法和.bind()彻底相同，惟一的区别在于，.one()绑定的事件处理函数，在事件触发一次后即被自动解除绑定。
关于.toggle()方法，有三种用法：

一是.toggle()方法容许开发者绑定两个或多个函数给click事件，这些函数在事件发生时会交替执行，非此即彼。

$("#bar")
    .toggle(function(){
                console.log("Function 1");
            },
            function(){
                console.log("Function 2");
            },
            function(){
                console.log("Function 3");
            });

接下来，用下面的代码切换段落p#bar的显示状态：

$("#bar").toggle();

二是能够用一个连续时间作它的第一个参数，它就会以动画的形式隐藏或显示元素。

$("#bar").toggle(2000);

最后，能够用一个布尔值作它的第一个参数能够控制元素的显示或隐藏。

$("#bar").toggle(true);
$("#bar").toggle(false);

.trigger()方法用来触发事件。这个方法的第一个参数是将被触发的事件名，第二个参数是一个可选的数组，用来传递给事件处理函数。

$("#bar")
    .bind("click",function(){
            console.log("Clicked!");
    })
    .trigger("click");

每个事件都有一个与事件同名的快捷方法。若是不传递任何参数给快捷方法，它就调用相应事件的.trigger()方法触发事件。

可用的快捷方法有.blur(),.focus(),.focusin(),.focusout(),.load(),.resize(),.scroll(),.unload(),.click(),.dblclick(),.mousedown(),.mouseup(),.mousemove(),.mouseover(),.mouseout(),.mouseenter(),.mouseleave(),.change(),.select(),.submit(),.keydown(),.keypress(),.keyup()和.error()。

举个例子，下面的代码先绑定一个处理函数到click事件，而后触发这个事件：

$("#bar").click(function(){console.log("Clicked!"); }).click();

2.7使用AJAX控制函数

1.$.ajax()

$.ajax()接受一个参数：一个包含AJAX调用所需设置的对象。若是调用它却不作任何设置，这个方法会简单地载入当前页面而不作任何处理。

最经常使用的设置项目有如下参数能够设置：

data:发送给远程脚本的数据，能够是查询字符串形式(key1 = val1&key2 = val2),也能够是JSON数据形式（{"key1":"val1","key2":"val2"})。
dataFilter(data,type):一个回调函数，用于对数据进行预处理，特别适合用来对远程脚本发送过来的数据作“消毒”（无害化）处理。
error（XMLHttpRequest，textStatus，errorThrown）：一个回调函数，在请求发生错误时执行。XMLHttpRequest对象，字符串描述的请求状态，还有错误码会做为参数传递给它。
success(data,textStatus,XMLHttpRequest):一个回调函数，在请求成功完成时执行。远程脚本返回的数据，字符串描述的请求状态和XMLHttpRequest请求对象会做为参数传递给它。
type:请求类型。默认值是GET,POST也能够用。PUT和DELETE虽然也能够用但不保证全部浏览器都支持。
url:目标URL，请求会发送到这个地址。

如下是一个示例：

$.ajax({
        "type":"POST",
        "url":"ajax.php",
        "data":"var1=val1&var2=val2",
        "success":function(data){
                    $("#bar")
                        .css("background","yellow")
                        .html(data);
        }
});

2.$.ajaxSetup()

$.ajaxSetup()用于为AJAX请求设置默认选项。举例来讲，默认状况下，若所有AJAX请求都被用POST方式发到ajax.php，而且返回数据都用来填充段落#bar,则可使用下面的代码：

$.ajaxSetup({
        "type":"POST",
        "url":"ajax.php",
        "success":function(data){
                $("#bar")
                    .css("background","yellow")
                    .html(data);
        }
});

如今，发起新的AJAX请求就容易多了，只须要传递新的数据：

$.ajax({
        "data":{
                "newvar1":"value1",
                "newvar2":"value2"
        }
});

在以后的AJAX调用中，只要在调用选项中给出新的选项设置就可覆盖默认设置：

$.ajax({
        "type":"GET",
        "data":{
                "newvar1":"value3",
                "newvar2":"value4"
        }
});

3.使用AJAX快捷方法

这些快捷方法都是$.ajax()方法的简单封装，只不过有几个请求选项被设置成了固定值而已。

使用这些方法会有轻微的性能损失，由于本质上这些方法只是被设置好了参数，而后再由它调用$.ajax()。尽管如此，使用这些快捷方法带来的便利确实可以加快脚本的开发。

$.get()和$.post()

处理标准的GET和POST请求，用$.get()和$.post()方法最方便。两个方法都支持4个参数:请求URL，可选的参数（发给远程脚本的），可选的回调函数（当请求成功完成后执行）和一个可选的dataType设置。

$.getJSON()

当须要获取JSON数据时，使用$.getJSON()格外方便。它须要的参数有请求URL，可选的数据和可选的回调函数。

要演示这个方法的使用，咱们须要建立一个新的测试文件命名为json.php，而后插入如下数据:

{"var1":"value1","var2":"value2"}

而后经过jQuery获取:

$.getJSON("json.php",
        function(data){
            $("#bar")
                .css("background","yellow")
                .html(data.var1+", "+data.var2);
        });

$.getScript()
$.getScript()方法用于加载外部脚本。它的第一个参数是请求URL，还有一个可选的回调函数（一般并不须要，由于脚本在加载完成后会自动执行）。

新建一个测试文件script.php,而后添加以下内容：

alert("This script was loaded by AJAX!");

而后执行：

$.getScript("script.php");

$.load
.load()方法的行为就像$.get()或$.post(),只是它是一个方法而不是全局函数。它内置一个固定的回调函数，负责用服务器返回的数据填充当前元素的内容。

这个函数支持三个一样的参数:目标URL，可选的数据和可选的回调函数（在当前元素的内容被替换之后执行）。