标签:
最近在看《jQuery基础教程》这本书,做了点读书笔记以备回顾,不定期更新。 第一章第二章比较基础,就此略过了。。。
$(document).ready():通过该方法注册的事件处理程序,会在DOM完全就绪并使用时调用。虽然这意味着所有元素对脚本而言都是可访问的,但是,却不意味着所有关联的文件都下载完毕。当HTML下载 完成并解析成DOM树之后,代码就可以开始运行了。并且在脚本中可以多次使用该方法,不用担心之前标记的方法被覆盖掉,而原生的window.onload()存在被覆盖的问题
1
2
3
4
5
6
7
8
9
|
// window.onload():当文档完全下载到浏览器中时,就会触发该事件。 $(document).read( function (){ //较长的形式能更清楚的表现代码在做什么 //方法实现 }); //上述调用在jQuery中可以简写为: $( function (){ //方法实现 }); |
多个元素响应单击事件的策略事件捕获: 1)在事件捕获的过程中,事件首先会交给最外层的元素,接着再交给更具体的元素。 2)事件冒泡:当事件发生时,会首先发送给最具体的元素,在这个元素获得响应机会之后,事件会向上冒泡到更一般的元素。最终出台的DOM标准规定应该同时使用这两种策略:首先,事件要从一般元素到具体元素逐层捕获,然后,事件再通过冒泡返回DOM树的顶层。而事件处理程序可以注册到这个过程中的任何一个阶段。为了提供跨浏览器的一致性,jQuery始终会在模型的冒泡阶段注册事件处理程序。因此,我们总是可以假定最具体的元素会首先获得响应事件的机会。
1
2
3
4
5
6
|
$(document).ready( function () { var toggleSwitcher = function (event) { if (!$(event.target).is( ‘button‘ )) { $( ‘#switcher button‘ ).toggleClass( ‘hidden‘ ); } }; |
jQuery提供了css()方法,这个方法集getter与setter于一体。该方法能够接受的参数有两种,一种是为它传递一个单独的样式属性和值,另一种是为它传递一个由属性-值对构成的映射,即javascript对象字面量。
jQuery提供了一个强大的.animate()方法,用于创建控制更加精细的自定义动画。.animate()方法有两种形式,第一种形式接受以下4个参数。 1)一个包含样式属性以及值的映射--与之前说过的.css()方法中的映射类似。 2)可选的速度参数--既可以是预置的字符串,也可以是毫秒数值。 3)可选的缓动(easing)类型。 4)可选的回调函数
1
2
3
4
5
6
|
.animate({ param1: value1, param2: value2}, speed, function () { /* stuff to do after animation is complete */ }); |
第二种形式接受两个参数,一个属性映射和一个选项映射: .animate({properties}, {options}); 这其中的第二个参数是把第一种形式的后三种封装在另一个映射之中。
譬如在DOM中有个属性为className,而对应的类属性在HTML中为class;DOM中的checked属性是一个布尔值,而在HTML中checked属性值是一个字符串。
1)利用css选择器选择元素 2)传入参数为HTML字符串,可创建一个DOM元素。
1).insertBefore()在现有元素外部、之间添加内容 2).prependTo()在现有元素内部、之前添加内容 3).appendTo()在现有元素内部、之后添加内容 4).insertAfter( 在现有元素外部、之后添加内容
可以使用Jquery的.clone()方法来创建任何匹配的元素集合的副本。单纯的.clone()方法不会复制匹配的元素及其后代元素中绑定的事件。如果要连同事件一起复制,应调用.clone(true)方法。
.text()方法始终会取得或设置纯文本内容,所有的HTML标签都将被忽略,而所有的HTML实体也会被转换成对应的字符。
1)要在HTML中创建新元素,使用$()函数 2)要在每个匹配的元素中插入新元素,使用:.append() .appendTo() .prepend() .prependTo() 3)要在每个匹配的元素相邻的位置上插入新元素,使用:.after() .insertAfter() .before() .insertBefore() 4)要在每个匹配的元素外部插入新元素,使用:.wrap() .warpAll() .warpInner() 5)要用新元素或文本替换每个匹配的元素使用:.html() .text() .replaceAll() .replaceWith() 6)要移除每个匹配的元素中的元素,使用 .empty() 7)要从文档中移除每个匹配的元素及其后代元素,但不实际删除它们,使用: .remove() .detach()
1)Javascript,通过用户或其他与浏览器相关事件捕获交互作用。 2)XMLHttpRequest对象,通过这个对象可以在不中断其他浏览器任务的情况下向服务器发送请求。 3)服务器上的文件,以XML、HTML或JSON格式保存文本数据。 4)其他javascript,解释来自服务器的数据并将其呈现到页面上。
1)通过服务器加载远程数据,然后再客户端请求时提供给浏览器,因为服务器能够对数据进行预处理。 2)根据请求注入<script>标签来加载外部Javascript文件。
1
|
$(document.createElement( ‘script‘ )).attr( ‘src‘ , ‘http://example.com/example.js‘ ).appendTo( ‘head‘ ); |
3)使用<iframe>这个HTML标签来加载远程数据,为该元素指定任何URL作为其获取数据的来源,包括与提供页面的服务器不匹配的URL;位于iframe中的脚本需要明确地向父文档中的对象提供数据。
标签:
原文地址:http://www.cnblogs.com/ddforevery/p/5842424.html