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

Pro PHP and jQuery Chapter2 总结

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

jQuery事实上沿用了JavaScript的那一套东西，几乎所有方法都支持链式调用，也就是说方法可以一个接一个地执行。

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

要记住： 链式调用过后返回的还是jQuery对象本身。

2.常用的jQuery选择器方法

2.1遍历DOM元素

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

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

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

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

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

  • （主动）在目标内容之后添加.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及属性

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

2.4处理结果集

.map()和.each()

.map()和.each()方法使得开发者能够使用回调函数对结果集内的每一个元素单独处理，这个回调函数需要两个参数，即当前元素的索引和当前元素本身。

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

2.5动画或其他效果

  1. 显示和隐藏效果：.show()和.hide()
  2. 让一个元素淡入或者淡出（使用透明度）.fadeIn()和.fadeOut()。当调用这两个函数时,.fadeIn()把元素的透明度从0调整到1，另一个则从1调整到0.淡入和淡出轮流摇摆的函数.fadeTo()
  3. 上下展开和隐藏:.slideUp(),.slideDown(),摇摆的函数有.slideToggle()
  4. 动画方法内部都是调用的是.animate()
  5. 延迟动画.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，可选的数据和可选的回调函数（在当前元素的内容被替换以后执行）。

The END#

posted @ 2014-11-01 15:56  中大黑熊  阅读(471)  评论(0)  编辑  收藏  举报