【JQuery基础教程(第三版)图灵】笔记

第1章 jQuery入门

1.jQuery官方网站:http://jquery.com

 

2.开发工具:Firebug

 

 

 

 

第2章 选择元素

1.属性选择符:属性选择符通过HTML元素的属性选择元素

eg:

$('img[alt]')

属性选择符使用一种从正则表达式中借鉴来的通配符语法,以^表示值在字符串的开始,以$表示值在字符串的结尾.而且,也是用星号*表示要匹配的值可以出现在字符串中的任意位置,用感叹号!表示对值取反

eg:

$('a[href^="mailto:"]')

$('a[href$=".pdf"]')

$('a[href^="http"] [href*="henry"]')

 

3.自定义选择符

:eq():参数是编号,从0开始,如eq(1)取得集合中的第二个元素.

eg:

$('div.horizontal:eq(1)')

 

:odd:选择偶数项

eg:

$('td:odd')

 

:even:选择奇数项

eg:

$('tr:even')

 

:nth-child():这个选择符相对于元素的父元素而非当前选择的所有元素来计算位置,它可以接受数值,odd或even作为参数.nth-child()是jquery中唯一从1开始计数的选择符.

eg:

$('tr:nth-child(odd)')

 

:contains():参数是选中元素里面的文本字符串,一段或者全部,选择拥有该字符串的元素.区分大小写

eg:

$('td:contains(Henry)')//选中拥有"Henry"字符串的td元素

 

 

 

 

4.表单选择符

选择符                                    匹配

:input                         输入字段,文本区,选择列表和按钮元素

:button                      按钮元素或type属性值为button的输入元素

:enabled                    启用的表单元素

:disabled                   禁用的表单元素

:checked                   勾选的单选按钮或复选框

:selected                   选择的选项元素

eg:

$('input[type="radio"]:checked')//可以选择所有选中的单选按钮(而不是复选框)

$('input[type="password"],input[type="text"]:disabled')//可以选择所有密码输入字段和禁用的文本输入字段.

 

5.DOM遍历方法

.filter():可以接受函数参数,通过传入的函数,可以执行复杂的测试,以决定相应元素是否应该保留在匹配的集合中.

更准确的说,.filter()方法会迭代所有匹配的元素,对每个元素都调用传入的函数并测试函数的返回值.如果函数返回false,则从匹配集合中删除相应元素;如果返回true,则保留相应元素.

eg:

    $('a').filter(function() {

        return this.hostname && this.hostname != location.hostname;

    }).addClass('external');

第二行代码可以筛选出符合下面两个条件的<a>元素

①.必须包含一个带有域名(this.hostname)的href属性.这个测试可以排除mailto及类型的链接

②.链接指向的域名(还是this.hostname)必须不等于页面当前所在域的名称(location.hostname)

 

6.选择特定的单元格

.next()方法:只选择下一个最接近的同辈元素.

.nextAll()方法:选择之后所有的同辈元素.

与这两个方法对应的有.prev(),.prevAll(),选择之前的

.siblings()方法:选择处于相同DOM层次的所有其他元素.

以上的选择都不包含自身的元素,要加上自身的元素可以添加.andSelf()方法

eg:

$('td:contains(Henry)').nextAll().andSelf()

下面这种方法没有遍历同辈元素获取Henry单元格的另一种方法.

$('td:contains(Henry)').parent().children()

 

7.访问DOM元素

要访问jquery对象引用的第一个DOM元素,可以用.get(0).如果需要在循环中使用DOM元素,那么应该使用.get(index).

eg:获取带有id="my-element"属性的第一个元素的标签名

var myTag=$('#my-element').get(0).tagName;

可以简写为:

var myTag=$('#my-element')[0].tagName;

 

 

 

 

第3章 事件

1.当文档完全下载到浏览器中时,会触发window.onload事件,这意味着页面上的全部元素对javascript而言都是可以操作的,这种情况下对编写功能性的代码非常有利,因为无需考虑加载的次序.

另一方面,通过$(document).ready()注册的事件处理程序,则会在DOM完全就绪并可以使用时调用,虽然这也意味着所有元素对脚本而言都是可以访问的,但是,却不意味着所有关联的文件都已经下载完毕.换句话说,当HTML下载完成并解析为DOM树之后,代码就可以运行.

一般来说,使用$(document).ready()要优于使用onload事件处理程序

 

2.引用函数和调用函数

这里在将函数指定为处理程序时,省略了后面的圆括号,只使用了函数名.如果带着圆括号,函数会被立即调用;没有圆括号,函数名就只是函数的标识符或函数引用,可以用于在将来再调用函数.

 

3.$(document).ready(),每次调用这个方法都会向内部的行为队列中添加一个新函数,当页面加载完成后,所有函数都会被顺次执行,

 

4.库冲突

如果在同一页面中调用多个不同javascript库,由于很多库都使用$标识符,因此就会发生冲突.

为解决这个问题,jquery库提供了一个jquery.noConflict()方法,调用该方法可以把对$标识符的控制权让渡还给其他库.

让出$标识符后,可以重新命名jquery为$,而不必担心造成冲突.

jQuery(document).ready(function($){//在这里,可以使用$})

简写为

jQuery(function($){//使用$的代码})

 

5.bind()方法

通过这个方法,可以指定任何DOM事件,并为该事件添加一种行为.

eg:

$('#swicther-large').bind('click',function(){

    $('body').addClass('large')

})

也可以简写为

$('#swicther-large').click(function(){

$('body').addClass('large')

})

 

6.复合事件:

.toggle():接受两个参数,这两个参数都是函数,第一次在元素上单击会调用第一个参数的函数,第二次单击会调用第二个参数的函数,如此反复.

.hover():同样接受两个函数参数,第一个函数会在鼠标指针进入被选择的元素时执行,而第二个函数会在鼠标指针离开该元素时触发.

 

7.事件目标

事件处理程序汇中的变量event保存着事件对象,而event.target属性保存着发生事件的目标元素.

eg:似乎可以解决冒泡问题

$(document).ready(function(){

    $('#switcher').click(function(event){

            if(event.target == this){//判断

                $('#switcher button').toggleClass('hidden');//百度toggleClass()方法

            }

    });

});

 

8.停止事件传播

事件对象还提供了一个.stopPropagation()方法,该方法可以完全阻止事件冒泡,但不能阻止默认操作

 

9.阻止默认操作

使用.preventDefault()方法可以在触发默认操作之前终止事件

 

10.is()方法

该方法接受一个选择符表达式,然后用选择来测试当前的jquery对象,如果集合至少有一个元素与选择符匹配,.is()返回true.

eg:返回 false，因为 input 元素的父元素是 p 元素：

var isFormParent = $("input[type='checkbox']").parent().is("form");

详情百度.

 

11.移除事件处理程序

调用.unbind()方法移除折叠处理程序

 

12.事件的命名空间

eg:'click.collapse'就是一个事件命名空间,这样的好处是移除事件处理程序时,只移除指定的click事件,不会是全部的click事件.

    $(document).ready(function() {

        $('#switcher').bind('click.collapse', function(event) {

            if (!$(event.target).is('button')) {

                $('#switcher button').toggleClass('hiddent');

            }

        });

 

        $('#switcher-narrow,#switcher-large').click(function() {

            $("#switcher").unbind('click.collapse');

        });

    });

对于只需触发一次,随后要立即解除绑定的情况可以使用.one()方法

eg:

 $('#switcher').one('click.collapse', function(event) {

    if (!$(event.target).is('button')) {

        $('#switcher button').toggleClass('hiddent');

    }

});

 

13.模仿用户操作

通过.trigger()方法就可以完成模拟事件的操作.就像执行了该事件一样

 

 

 

 

第4章 样式和动画

1.css()方法

.css()方法能够接受参数有两种,一种是为它传递一个单独的样式属性和值,另一种是为它传递一个由属性-值对构成的映射

eg:

//单个属性及值

.css('property','value')

//属性-值对构成的映射

.css({

    property1:'value',

    'property2':'value'

})

 

2.显示隐藏

.show():显示

.hide():隐藏

都可以指定3种预设的速度参数:'slow','normal','fast'.

slow表示0.6秒;normal表示0.4秒;fast表示0.2秒

若要指定更精确的速度,可以使用毫秒数值,例如.show(850)//不需要引号

复合方法.toggle()也可以指定速度参数如.toggle('slow'),此时的作用就是.show()和.hide()的结合

 

3淡入淡出

.fadeIn():淡入(逐渐增大其不透明度)

.fadeOut():淡出(逐渐减小其不透明度)

这两个方法同样可以使用速度参数

 

4.滑上滑下

.slideDowm():滑下

.slideUp():滑上

这两个动画仅改变元素的高度,同样可以使用速度参数

复合方法.slideToggle()表示通过逐渐增加或减少元素的高度来显示或隐藏元素.

 

5.自定义动画.animate()方法

.animate()方法,用于创建控制更加精细的自定义动画.该方法有两种形式

第一种形式接收以下4个参数:

①.一个包含样式属性及值的映射,与本章.css()方法中的映射类似

②.可选的速度参数,既可以是预设的字符串,也可以是毫秒数值.

③.可选的缓动类型,参见第10章

④可选的回调函数.

把这4个参数放到一起,结果如下显示:

.animate({ property1: 'value1', property2: 'value2' },//映射

    speed,//速度

    easing,//缓动 

    function() { //回调函数

        alert('The animation is finished');

    }

 );

第二种形式接受两个参数,一个属性映射和一个选项映射:

.animate({properties},{options})

这里的第二个参数是把第一种形式的第2~4个参数封装在了另一个映射中,同时添加了两个选项.

$().animate({

    property1: 'value1',

    property2: 'value2'

}, {

    duration: 'value',

    easing: 'value',

    specialEasing: {

        property1: 'value1',

        property2: 'value2'

    },

    complete: function() { //回调函数

        alert('The animation is finished');

    },

    queue: true,

    step: callback

});

//书上代码最好练习一遍

 

 

 

 

第5章 操作DOM

1.操作属性

addClass():添加类

removeClass():移除类

.toggleClass():方法能够交替地添加和移除一个类,就是结合以上两个方法.

.attr():接受一对参数,第一个是属性名,第二个是属性值,不过,更常用的方式还是传入一个包含键值对的映射.

.removeattr():移除属性.

.prop():该方法可以取得和设置DOM属性,它和.attr()方法没有什么不同,都可以一次性接受一个包含多个值的映射,也支持值回调函数.

 

2.值回调

值回调其实就是给参数传入一个函数,而不是传入具体的值,这个函数会针对匹配的元素集中的每个元素都调用一次,调用后的返回值将作为属性的值.例如,可以使用值回调类为每个元素生成唯一的ID值.

 

3插入新元素

.insertBefore():在现有元素外部,之前添加内容;

.prependTo():在现有元素内部,之前添加内容;

.appendTo():在现有元素内部,之后添加内容;

.insertAfter():在现有元素外部,之后添加内容.

 

4. 包装元素

.wrap():把每个被选元素放置在指定的 HTML 内容或元素中。

.warpAll():

wrapInner():该方法会在调用它的元素内部添加一个新元素,包装内部原来的所有内容.

 

5.内容方法

.html():在不传参数的情况下,这个方法返回匹配的元素中的HTML标记,而传入参数后,元素的内容将被传入的HTML替换掉.在此要注意传入的html必须是有效的,而且要对特殊字符进行转义.

.text():可以取得匹配元素的内容,或者用新字符串替换匹配元素的内容,.text()始终会取得或设置纯文本内容.在使用.text()取得内容时,所有HTML标签都将被忽略,而所有HTML实体也会被转换成对应的字符.

 

6.总结

①要在HTML中创建新元素,使用$()函数

②要在每个匹配的元素中插入新元素,使用:

    ◆.append()

    ◆.appendTo()

    ◆.prepend()

    ◆.prependTo()

③要在每个匹配的元素相邻的位置上插入新元素,使用:

    ◆.after()

    ◆.insertAfter()

    ◆.before()

    ◆.insertBefore()

④要在每个匹配的元素外部插入新元素,使用:

     ◆.wrap()

     ◆.wrapAll()

     ◆.wrapInner()

⑤要用新元素或文本替换每个匹配的元素,使用:

     ◆.html()

     ◆.text()

     ◆.replaceAll()

     ◆.replaceWith()

⑥要移除每个匹配的元素中的元素,使用:

     ◆.empty()

⑦要从文档中移除每个匹配的元素及其后代元素,但不实际删除它们,使用:

     ◆.remove()

     ◆.detach()

 

 

 

 

第6章 通过AJAX发送数据

//有空再看吧

 

 

 

 

第7章 使用插件

1.jQuery的官方网站的插件库(地址为:http://plugins.jquery.com)

 

2.插件Cycle

引用时注意把引入它的代码放在引入jquery主文件的代码的后面,但要位于使用这个插件的脚本的前面

 

3.通过Cycle插件可以将这个列表转换成可以交互的幻灯片.在DOM中适当的容器上调用.cycle()方法,就可以实现这一转换.

 

4.Cycle的幻灯片通过调用.cycle('pause')和.cycle('resume')可以暂停和恢复播放

 

5.jQuery UI插件库

①访问:http://jqueryui.com, 可以下载所有jquery UI模块.

②三个操作类的方法:.addClass(),.removeClass()和.toggleClass().这三个方法在jquery ui中经过扩展,都可以接受第二可选的参数,用于控制动画时长.

③jquery在某个时长内不会以稳定的速度来执行动画,高级缓动函数可以改变加速或减速曲线,以产生与众不同的结果.例如,easeInExpo函数会让动画速度以指数方式加快,最终的动画速度要数倍于开始时的速度.

 

6.交互组件

交互式组件就是一组行为,可以跟自定义代码结合起来生成复杂的交互式应用.例如,Resizable就是这样一个组件,这个组件可以让用户通过自然地拖动把元素调整成任意的大小.

 

 

 

 

 

第8章 开发插件

不看吧

 

 

 

 

第9章 高级选择符和遍历

1..has()方法:将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集。

 

2..querySelectorAll():取得与给定的选择符表达式匹配的所有元素.

 

3.$('input[type="text"]')的效率比$('input:text')的效率要高.

$('input').eq(1)的效率比$('input:eq(1)')的效率要高很多

 

 

 

 

第10章 高级事件处理

例子的代码很好

 

1.无穷滚动

 

 

 

 

第11章 高级效果

1.:animated选择符.判断该元素是否处于动画的过程中.

 

2..stop()方法

该方法能在动画运行的过程中让动画立即停止.

该方法可以接受两个布尔值参数,其中第二个参数叫goTOEnd.如果把这个参数设置为true,那么当前动画不仅会停止,而且会立即跳到最终值.

 

3.$.fx对象,在需要彻底改变动画的性质时,可以访问这个问题尽管这个对象的某些属性名不见经传,只为jquery库本身使用而设计,但另外一些属性则可以供我们在全局层面上修改动画运行的效果.

 

4.$.fx.off

把$.fx.off属性设置为true表示关闭所有动画,全局禁用所有效果.

 

5.$.fx.interval

$.fx对象还提供了另一个属性——interval,用于控制动画每一步之间的毫秒数,$.fx.interval的默认值为13,换算成帧速率大约为每秒77帧,增大这个interval属性的值(也就是降低帧速率)可以使动画效果更平滑流畅.

 

6.$fx.speeds

$.fx对象还有一个speeds属性.这个属性本身是一个对象,包含三个属性,

speeds:{

    slow: 600,

     fast: 200,

     //默认速度

     _default: 400

}

如果想添加自定义的速度选项,只要给$.fx.speed添加一个属性即可,例如,执行$.fx.speeds.crawl=1200这行代码后,就可以在任何动画中使用'crawl'把动画持续时间设置为1200毫秒.

 

7.showDetails()

该方法基本实现了我们最初设想的"展开"效果.

 

8.延迟对象

 

 

 

 

第12章 高级DOM操作