（一）开始Jquery

在每个实例中需要领会解决问题的思路的步骤



1 资源



下载jquery源代码 http://docs.jquery.com/Downloading_jQuery



                          http://d.download.csdn.net/down/976175/xb520hh



2 调用



使用<script type="text/javascript" src="lib/jquery.js"></script> 根据个人jquery.js文件的路径不同改变 src的值

如果你使用外部文件custom.js调用jquery，使用<script type="text/javascript" src="lib/custom.js"></script>

同样是根据路径的不同更改src

使用$(document).ready(function(){ //your code });包含jquery代码



3 jquery 官方网站 http://jquery.com/


4 jquery 中文社区 http://bbs.jquery.org.cn/frame.php?frameon=yes&referer=http%3A//bbs.jquery.org.cn/thread-8-1-1.html


http://bbs.51js.com/viewthread.php?tid=79244



5 $()函数是一个工厂即工厂函数，是一个基本的创建块，选择文档的一部分，即得到的是一个元素

a tag name : $("p");

an ID : $("#some-id");

a class : $(".some-class");

获得子节点元素: $("#some-id > li ");

给不含某个类名的其他的标签付class ：$("#some-id li:not(.some-class)").addClass("some-other-class");

就是给li标签中class不是some-class的定义一个class some-other-class



当存在多个Js库的时候$()标签可能会产生误解，因为其是js通用的标签，这时要使用jQuery代替$



6 添加类 $("").addClass("类名"); 删除类$("").removeClass("类名");



7 jQuery 允许我们确定函数调用的时间，DOM 被加载后才调用。使用$(document).ready() 结构，不需要等图像加

载。





8 如何学习



初学，动手要勤于动脑(光看).

以demo为蓝本，一点一点的改，确保每一部修改都能运行。 一段时间后，你就会逐步掌握了。

不要急，初学任何东西都是这样的！



第二章 选择器-得到你想要的



1 css选择器

参见第一章中的 5



2 Xpath路径选择器

1）得到具有某个属性的标签：$('a[@title]'); 得到函数属性title的a标签

2）得到具有某个标签的标签：$('div[ol]'); 用来得到含有ol标签的div标签

3）正则表达式：

已知标签的开头：$('a[@href^="malito:"]'); 得到href属性以mailto:开头的a标签

已知标签的末尾：$('a[@href$=".pdf"]');得到href属性以.pdf为结束的a标签

已知标签中的任意位置含有的字符：$('a[@href*="mysit.com"]');得到href属性中含有mysite.com字符的a标签

3 自定义选择器

1）得到一个对象或数组中的第二项：$('div.horizontal:eq(1)');得到样式class为horizontal的所有标签集合中的第二项

2) 得到任何div的父亲的第一个孩子：$('div:nth-child(1)'); ??



4 样式化交替的行

：odd 奇数行 $("tr:odd").addClass('some-class1') 给tr标签中的奇数行赋予样式some-class1

：even 偶数行 $("tr:even").addClass('some-class2') 给tr标签中的偶数行赋予样式some-class2

注意，在一个页面中如果有超过一个表格的话，或许这不是我们想看到的结果。例如，既然
在这个表格的最后一行有一个灰蓝的背景，那 么在下一个表格的第一行将会有一个灰黄的背
景。在第7章我们会研究如何避免这类问题。



:contains("string") 得到含有的字符串的标签的文本 $('td.contains("Henry")').addClass("some-class") 得到文本中含有Henry字符串的td标签,然后将some-class对应的样式赋给它



5 DOM遍历方法



参见书上的示例

$("th").parent().addClass("heading_line");
$("tr:not([th]):odd").addClass('odd');
$("tr:not([th]):even").addClass('even');

$('td:contains("Henry")').next().addClass('highlight');



1) 得到父节点：$("th").parent() 例：设置单独的行，利用单独行的子标签的找到其标签 即 $("th").parent().

addClass("some-class")；增加类名到达样式特殊化的效果

2) 得到特殊行以外的兄弟节点：使用not([]) 例 ：排除统一标签的特殊行 $("tr:not([th])");

3) 得到下一个兄弟节点 ：使用.next() 例 ：参见上面

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

使用.next(expr) : 这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元 素。可以用一个可选的表达式进行筛选。

4) .prev() ：取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

.prev(expr) ：可以用一个可选的表达式进行筛选。 这个函数只返回前一个紧邻的同辈元素，而不是前面所有的同辈元素。

5) 得到一个标签后面的兄弟节点：使用.sibling(); 例：$('td:contains("Henry")').siblings().addClass('highlight');

6) gt()和eq(); 例 ：$('td').parent().find('td:gt(0)') .addClass('highlight'); 得到td父标签，然后找到父标签的td

子标签，并过滤掉第一个td子标签，$('td:contains("Henry")').parent().find('td:eq(1)').addClass( 'highlight')

这个是得到上面所描述的第二个td子标签



6 访问DOM元素



1) get():得到元素，相当于document.getElementById() 如果要访问第一个元素用.get(0),如果有多个元素的话使用.

get(index)来选择，如果我们想知道 id 为#myelement 的元素的 tag name 的话，可以用：$('#myelement').

get(0).tagName,为了方便可以使用如下的方式$('#myelement')[0],同上面是一样的



第三章 事件——扣动扳机

3.1 在页面加载后执行任务

1 $(document).ready(function(){}); 使用这个在页面加载的时候执行js语句，相当于window.onload，可执行多个

函数 function aa(){} function bb(){} $(document).ready(function(){aa();bb()})是有效的



3.2 简单的事件

1 对于JS的综合的考虑：遵循渐进增强的原则，页面的样式转换器应该能够在javascript无效时隐藏起来，甚至跟好的是，

能够通过链接，到当前页面的替代版本而能起到应有的作用



2 书上是通过一个改变样式的示例来阐述如何执行一个事件，具体的请参考书



3 .bind() : 执行事件的函数示例：$(document).ready(function(){$(#id).bind('click',function(){

$('body'.addClass('some-class');)});});

可以捆绑多个触发事件，这个示例是通过事件来改变不同的样式，可以添加也可以删除removeClass('some-class');

jquery有简写的方法，就是不用.bind直接接事件，$('#id').click(function(){});这种方式是比较常用的



4 环境关键字this :当触发任何事件的时候（这里是onclick事件）,关键字this引用的都是携带相应行为的dom元素，这个

就相当于，我们在html中使用的<a id="alist" onclikc="change('this')">的效果是相同的



5 书上通过环境关键字this，简化了jquery代码 ，并使用多个函数中具有相同功能的代码归并在一个函数中，具体的流程参

见书上29-32页



3.3 复合事件



1 Jquery中自定义的事件处理程序.ready() , .toggle() , .hover() 后两个成为复合事件处理程序



3.3.1 显示和隐藏内容特性



1 两个函数 .toggle()和toggleClass() ，toggle()可以执行两种交替的样式变换，如果只是隐藏最好的方法是使用后者

示例：$('#id').toggle(function(){$('#id/.class').addClass('hidden')},function(){$('#id/.class').removeClass('hidden')};,)



$('#id').click(function(){$('#id/class').toggleClass('hidden')};) toggleClass方法是自动检查该类是否存在，存在删除，不存在添加，这个方法是很好用的



3.3.2



1 jquery实现的点击触发事件的标签可以不被限制在a标签和button按钮的范围，也就是说div标签也是可以执行.

toggle()方法的，还可以执行toggleClass();和.hover()，就像是鼠标划过一样



2 .hover() 示例：类似.toggle() 也是有两个函数 $('#id').hover(function(){$('#id/.class').addClass('class')},function(){$('#id/.class').removeClasss('class')});



3.3.3 事件扑获和事件冒泡机制，jquery会在事件冒泡阶段注册事件处理程序,首先相应事件的是最具体的元素，然后会向上冒泡到最外层的父元素。



3.3.4 .hover()可以解决事件冒泡机制带来的错误，所以使用.hover来代替mouseout();mouseover();



3.4 限制和终止事件



1 当使用onclick处理事件时，有必要对事件的作用范围进行限制.这时就要给事件函数传递一个参素就是event事件类



2 event.target：事件目标。这个事件的目标可以确定点击事件赋予的元素即$('#id')...中的id,而不会产生冒泡的事件，

避免其他的元素相应这个事件

实例：$('#div-id').click(function(event){if(event.target==this){(折叠的效果)}})就是说在没有这个判读的时候，div-id代表的标签下的所有的元素标签都可以执行折叠的效果，加上这个就可以控制只有点击id为div-di的标签是才能执行折叠的的效果



3 event.stopPropagation():避免所有的元素都相应这个事件



4 阻止默认事件操作，使用preventDefault();和返回false:,默认事件操作是指比如，点击a按钮转到相应的链接，提交表

单submint,转向到action指定的页面



5 事件传播和默认操作是相互独立的两套机制，stopPropagation();是阻止事件传播，而preventDefault()是阻止默认

操作的执行，而返回false是两者的结合；



6 unbind：反绑定，即接触事件操作，有利于控制冒泡。反绑定简写的方式现在不在使用



7 .one()函数不好用



8 .trigger()：程序加载是执行的事件处理程序，在这里就是，当页面信息加载完成后执行折叠页面的效果

示例：$('#id').trigger('click');这里的id要和事件加载的id值保持一致$('#id').click();

简写：事件触发函数没有任何的参数，即$('#id').click();



第四章 效果—为操作添加艺术性



4.1 修改内联css



1 .css:读取已经存在的样式和添加样式，如果不是动态的改变样式的值的情况下，添加固定的样式类则和使用.addClass

是一样的，如果需要添加不断更新的类的属性的时候需要使用.css

示例：$('#id').css('property','value'); 多个属性$('#id').css({'property':'value','property1','vlaue1'})

以后每章具体的示例参见手册 .css('cursor','pointer')



2 parseFloat()：从字符串中读取数字

paresFloat("a2355",10)这种情况返回的是NaN,如果字符串的首字符不能被转换为数字，也就是说不是数字则返回NaN。

示例 paresFloat("2355aa",10)= 2355;这里面的10含义是确保为十进制数



3 slice()：从指定的位置开始读取字符串



4 $('#id')[0].id：得到的是指定元素的id的值,因为使用$('#id')是创建一个jquery对象，所以要使用下标值



5 书上的示例在ie中是无效的？？



4.2 基本的隐藏和显示



1 .hide()：隐藏元素下的内容

示例 $('#id').hide();

2 .show()：显示内容

示例 $('#id').show();



4.3 速度和效果



1 速度参数：.show('slow') .show('normal') .show('fast') 速度分别是0.6 0.4 0.2 秒，也可以使用具体的秒数，但 要注意不能加引号，.show(850) ，show和hide会同事修改多个样式，包括高度，宽度和不透明度



2 淡入淡出：.fadeIn('slow') 淡入 fadeOut(2000) 淡出



4.4 多重效果



1 fadeIn和fadeOut:不透明度



2 fadeTo:不透明度 示例fadeTo('slow',0.5),将不透明减退到0.5



3 slideDown()和slideUp()：高度，slideUp('slow');向上折叠



4 animate():多重效果的自定义动画，包含四个参数，a:属性和样式映射，类似.css()，b:速度参数，c：可选的缓动类型

d：可选的回调函数，参数可以是任意的组合



5 通过CSS设置定位：在没有设置position的值时，所有的块级元素默认的css定位属性都是static,这个属性明确的告诉我们在改变元素的定位属性，即使用position:定义位置，之前试图移动他们是没有作用的

参见示例



6 w3c中的css规范中的盒模型可以在http://www.w3.org/TR/REC-CSS2/box.html 中找到

7 获得各种宽度：.width(),按钮的宽度：$button.width(),边界的宽度：.css('paddingLeft'),.css('paddingRight')，

边的宽度：.css('borderRightWidth'),.css('borderLeftWidth');



4.5 并发和排队



1 排队效果就是使用.链接各种效果 ：示例 .padeTo('slow',0.5).slideUp('slow')



2 对于非效果方法，排队的效果并不适用于他们，如.css('backgroundColor','#f00');无论放在哪都会先执行



3 对于非效果方法，是同时发生的



4 回调函数：可以使用回调函数来排列非效果方法



5 得到一个元素的兄弟节点，$(this).next();



6 在使用$(this).next.slideShow('slow',function(){ 在这里面再次使用$(this)时就是代表的是兄弟节点})，如果不想

是兄弟节点，那么就要在外面将$(this)赋予一个变量后再使用，var $thisPara =

$(this)(如果要想在ie中好用 ，就要现定义$thisPara=Object();,后在赋值就好用了),$thisPara.next.slideShow

('slow',function(){这时使用$thisPara就不是兄弟节点了})



第五章 DOM操作——基于命令改变页面



1 在网页中创建元素，属性和文本



5.1 操作属性



1 .each()：类似for循环，方法带有index参数，类似循环计数器，以每一个匹配的元素作为上下文来执行一个函数，这样

就意味着每次执行传递进来的函数的时候，this的关键字都是指向不同的元素

示例：$('#id').each(function(index){$(this).attr({'id','id'+index})})



2 .text()：获取文本属性的值

示例：$('#id a').text();



3 $('div.chapter a[@href*=wikipedia]').each()：这个是更确定作用的范围，具体的含义参看第二章



4 .attr()：添加属性，示例 $('td').attr({'rel','external'}) .前面是需要添加属性的元素标签



5.2 插入新元素



1 $()：这个工厂方法的用处是在括号中的元素如果存在则，读取，如果不存在则创建新的元素。

如：$(<a href="http://www.sina.com">aa</a>)



2 .insertAfter(),after(),insertBefore(),before() ：用于插入新元素，insertAfter()和after()的不同之处是

$('<a href="#top">back to top </a>').insertAfter('div.chapter p');

$('div.chapter p').after('<a href="#top">back to top </a>');

可以看到只是位置的不同，但就是这个不同在实现连缀其他方法的操作中，前者是对a元素做更多的操作，后者是对所选

择的元素进行连缀操作，所以方便还是前者。



3 eq()和gt()：gt和eq的区别是gt作用于给定位置之后的元素，eq作用于当前元素



5.3 移动元素



1 什么叫隐式迭代



2 使用insertAfter和insertBefore插入，移动元素，那么注脚的次序就会被颠倒参见示例，这两个插入都是在div标签之

外，即<div></div>+insertAfter之后



3 $A.appendTo('#id')：将内容插入到指定的元素中，即在div标签里面

$A.append('B')：也是将内容插入到指定的元素中，两者的区别是前者是把A追加到#id中，后者是相反，把B追加到A

中，实际上执行的是appendChild操作，添加为最后一个子结点



4 $a.prependTo($b)：将a的内容移动到b标签中

$a.prepend($b) ：将b的内容移动到a标签中，相当于appendChild();添加为第一个子节点



5.4 包装元素



1 $a.wrap(<li></li>)：将内容a装入标签li中，即在$a的外层添加一个标签，例如可以是div,参见示例



5.5 复制元素



1 $a.clone().$b：将a复制到b处



2 $a.clone(false).$b：只会复制标签元素a里面的文本内容将不会复制



3 5.5.2 1 ：使用样式定位元素内容



4 .prependTo()和.prepend()参见5.3



5 $a.find('b')：找到正在处理的元素a的后代元素的好方法,b可以是标签，id，class值,如果是id或class值的格式是

find('#id'),find('.class'),如果是元素标签的话find('input'),如果是type的话find(':checkbox'),如果是

元素中的元素的话find(a b),元素之前使用空格



6 $a.html('b')：使用b替换a标签中的所有的内容,或者是新增一个文档的内容，不能用于xml文档



7 $a.b.end().appendTo(c)：end()是结束所有的进阶，回到最原始的处理元素，a,一般用作将a元素处理一系列操作

后，插入到c的子元素中



8 $a.text() ：得到元素a中所有的文本，取出html标签



5.6 DOM操作方法的归纳



1 $('p').empty()：删除元素中所有的子节点,就是只剩下<p></p>



2 $a.text('b') ：使用文本b替换a元素中的内容,更换文本的内容



3 $a.remove()：删除a标签及其所有的子结点，$a.remove('.class')：删除a标签中类是class的元素及其所有的子结点




第六章 AJAX 让网站与时俱进

6.1 基于请求加载数据



1 $a.load('b')：加载数据，引入html文件片段，b可以是函数，是一个Html文件的ur，a是引入的标签



2 $.each()：这个和$a.each()的区别是后者只能迭代和执行jquery对象的函数，前者可以用于迭代任何对象和数组,也就

是说可以用于json和xml数据,这里面有两个参数,第一个是要遍历的数据，第二个是要执行的函数



3 $.getJSON()：读取json文件，产生一个回调函数得到Json文件里面的数据，然后使用$.each()来取得输出的内容，只

是有一个问题在文件当中得到的始终不是一个json格式，而是把其当作字符串来处理，就是没有实现书上

面的示例



4 $.getScript('b')：得到调用的b.js文件



5 $.get()：用get方式请求装入页面.主要是读取xml文件和向php文件中传递值和读取回调函数



6.2 选择数据格式



1 数据格式共有四种：就是6.1 中的 1 3 4 5具体采用何种方式要符合你的应用



2 应用：

html 片段：是最简单的，在不需要与其他应用程序共享数据的情况下使用

json：在性能和文件的大小上具有优势，易于重用。

javascript：对数是不推荐使用的，优势是可以将很少用到的行为提取到外本文件中去，减少加载的页面的代码量

xml：具有非常强大的可移植性，如果未知远程应用程序的时候，XML可提供很好的互操作性，缺点是过于庞大



6.3 向服务器传递数据



1 执行GET请求，就是在按钮或链接处，调用目标php文件的时候，在url的后面添加上？para参数，然后通过$.get()方法传递参数给php文件，示例中使用的是$.get()方法，也可以把结果组织成json使用$.getJSON()的方法



2 执行post请求：1）可以与$.get()互换 2）使用$.load（）方法简化，因为其默认的传递方式就是post,示例中的.load

()方法没有解决 rerurn false的问题



3 关于form的操作

1) $a.submit()：对提交表单的事件进行操作，类似于$a.click()

2) .val()：获取input标签中的value的值，如果里面有参数那么就是替换input中的value的值

3) .serialize()：将input元素的内容连接成一个请求字符串，示例中还是有些问题

对form的操作还是选用form.js插件



6.4 关注请求



1 $a.ajaxStart()：在AJAX开始执行是调用的函数



2 $a.ajaxStop()：在AJAX最后一次请求活动结束时调用的函数



3 页面加载缓慢时候的处理，即先显示一个加载信息的图示，还有加载过后的显示信息的效果见示例



6.5 AJAX和事件



1 当再给页面中的h3 标签设置点击高亮的时候，由加载产生的字典标题的标签也是h3,但点击时并不会产生高亮的效果，

这是因为在加载时字典的词条还不是DOM的一部分，因此不会为他们绑定事件处理程序，解决，绑定的元素单独绑定自

己的事件处理函数，也就是说将事件处理函数设置成一个独立的函数，在页面显示和页面加载的内容里面都调用这个函数

就可以了



2 以上说明了如果只是给页面的时间单独增加事件的话，页面加载的内容在相同的情况下是不会执行此事件的。



3 双触发情况，就是有时在点击h3标签的时候会两次触发绑定事件这样就不会有效果产生，具体的解释参见书92页，解决

见4



4 限定事件绑定函数的作用域：$()函数可以接收两个参数，第二个用于限定搜索范围的dom节点，在绑定事件中使用这一

特性，就可以避免多事件绑定问题具体参见示例



5 利用事件冒泡来解决3的问题：就是在他们的父标签中加入绑定事件程序，然后在限制可以使用这个事件的子元素，利用

的是if($(event.target).is('h3')){} 来操作，注意$(event.target)和.is();



6.6 安全限制：没有看



第七章 表格操作



1 tr:odd和tr:even：前者代表第偶数个tr标签，后者代表第奇数个tr标签，可以用来设置具有交替效果的实现，不一定就

是tr标签，其他的任何标签都可以，这样很方面产生交替的效果



2 排序一般的是使用.sort()函数，比较复杂没有做完，包括很多的效果比如分页等等



3 如果tr是不规则的排列的话就要使用a:not([d])了将不规则的a元素的子元素d排除在外，a元素的其他子元素正常应用类



4 三种背景色

1） $a.not('[b]')：a元素中除去子元素b的其他子元素

2） .each(function(index){})：使用each内建的索引，就是遍历所有符合条件的元素，然后给每一个元素都赋予下标索

引

3） 将三种背景色的class写成数组，然后使用index % 3 取模的方式，作为数组的下标，在交替的时候都会采用索引除以

基数取模的方式，来实现效果



5 三行一组的交替背景色

1） 如果不是规则的使用索引，就要自定义一个索引控制标签，来产生效果

2） 同样是使用取模的方式来实现效果



6 行的高亮

1）主要是使用的标签排除，和toggleClass,removeClass,each 有问题效果没有实现,只是第一行出现了效果



7 提示信息

1）鼠标点击的位置成手掌状，只需在.click()之前加上$a.addClass('pointer').click()即可，充分利用.符号式



2) var dd=function(event){} event代表的是事件执行的元素



3）event.pageX：是元素当前x轴的位置，event.pageY是元素当前y轴的位置，xm=event.pageX-5就是代表在鼠标

左边5像素，ym=event.pageY+20,就是代表在鼠标下方20像素,注意在ie和firfox下的兼容问题 ，参见示例，另外一点也很重要，同样是参见示例。



4）$("<div class="tooltip">Click from d echi </div>")appendTo('body'); 可以使用这个语句直接把内容添加到body的最后面



5）.hover(over,our)：这个函数是鼠标的事件，前一个是鼠标悬停在对象上面执行的函数，后一个函数是鼠标移出这个对

象执行的函数



6）.mousemove(function)：当鼠标移动时触发的事件,function代表的是触发的函数，执行的效果就是当鼠标移动的时

候，效果也是随之移动



7）a.call('object,para')：a可以是函数对象也可以是类对象，此方法是把a赋予对象object，如果a是函数对象，那么在

类object中执行函数a,如果a是类对象，那么a中所有的方法在object中都是可以调用的，就相当于object是类a的继

承，para是a中需要用到的参数



8 收缩与展开



1）$a.prepend(b)：想匹配的元素a标签里面插入前置内容，即：first-child



9 过滤



1）过滤就是用户给定一个条件，就只会显示出符合条件的数据行，过滤掉那些不需要的行



2）jquery过滤功能的函数实现还是找别的教程比较好，因为这里面有错误，看到96页



第八章 构建功能型表单



8.1.1 图标符号



1）html标签中 label 和 input 标签：如果Input的类型是文本字段,label放在input前面，如果input的类型是复选框，

lavel包含Input



2）实例中使用$('legend',this)，this是作用域的意思确保每次只取得一次legend中的文本，否则第一次迭代的时候就会

取得全部的legend文本，而其他循环就会取不到值



3）在示例中注意一下prependTo的格式,读取元素是使用$('p'), 追加元素是使用$('<p></p>').



8.1.2 必填字段的提示信息



1）$a.filter()b：在a的元素中下过滤掉不符合条件b的选项,是循环选择的。



2）如果选择一个元素里面包含的元素使用(：)这个符号标志，示例 $('form:input').text();



3）$('input.classname:first')：得到符合条件的第一个元素



4）c.replace(a,b)：使用正则表达式，可以将c中的a用b代替，还有另外一种用法，这是一个javascript函数具体的用法

查手册，对于分组这个概念还没有能明白



8.1.3 根据条件显示的字段



1）使用.append(a)要注意对添加的字符串a中的特殊的html字符要进行转义处理，不过这个步骤一般都会在text()中执行

所以添加文本最好是使用text()这个函数



2）可以使用$(this).+属性名称的方式来获取对应元素中的属性的值，比如在表单的input中，使用this.value可以得

到value的值，还有this.checked来得到checked属性的值



3）注意.parent()和.parents()的区别



4）示例中的两个删除很好的解决了很多的判断语句，这个技术应该是经常使用的技术



5）.bulr()：失去焦点是触发的事件



8.2 表单验证



1）a.test(b)：a是一个正则表达式，测试b是否存在 js语法，主要验证正则表达式



8.2.2 最终检查



1）.trigger()：实际上就是绑定一个触发的事件，如果此事件在之前已经定义过的话



2）a.join(b)：将数组转化成用b链接的字符串



3）a.push(b)：将b字符串添加到数组a中，并返回数组的新的长度值，这是构建数组的一个方法，合并两个或多个数组使

用concat方法



4）a.removeAttr('b')：删除a中b的属性 //8.3



5）有很多灵活的表单的插件可以在 http://plugins.jquery.com/中找到



8.5 字段的占位符文本



1）.remove( )：remove并不是真正的删除而是隐藏，所以在其后可以使用.text()得到文本内容



2）.focus()：当页面获得焦点时触发的事件



3）.removeClass('a')：移除class为a的样式



8.6 ajax自动完成



1）在有关键盘输入的信息.keyup()是与键盘的输入同步的，而keydown和keypress都是落后键盘一个字符的



2）清楚浏览器中自动记忆功能，ie中是在工具-》选项->内容-》自动完成，使用脚本控制就是设置autocomplete的属性如在示例中，$('#id').attr('autocomplete','off'),如果想要整个表单都不执行记忆功能那么<form



3） 8.6.4 中主要是体现了如何有效的利用索引



4）.mouseover()：鼠标划过时的样式的设定，注意与hover()的区别,hover是当鼠标移动到上面的时候执行一个函数，

当鼠标移出时执行另外一个函数



5）event.preventDefault()：js函数，取消事件相关的默认事件的执行



6）event.keyCode：是event对象的属性，表示输出的键盘的值对应的数值，例如向上键的event.keyCode = 38



7）自动完成与实时搜索的功能
8.8 输入掩码



1）以前我们是通过单元格在表格中的索引来查找列中的单元格，这里将使用增加html的复杂度，来简化javascript代码，每个单元格有了标识的类之后，选择单元格就会变的很简单了



2）输入掩码是在用户填写内容的同时应用标准，并简单的禁止无效的按键操作



3）keypress：执行的是按下键盘的事件



4）event.keyCode：keyCdoe是event对象的一个属性，用于获得目标对象所按下的键盘键值，firfox中是charCode



5）使用ie和firfox兼容的一种写法是 var obj = event.keyCode ? event.keyCode : event.charCode



8.9 数值计算



1）parseInt：返回字符串中含有数值的部分，parseInt('dd')返回的是NaN ，parseInt('q3e')返回的是NaN  paresInt('3.3dd')返回的是3



2）input的type为text的取其值是val()，没有input标签的也就是说是正常的元素标签下面的得到的文本是用text();



3）js中精确保留小数点的写法,math.round(a*b*100)/100 如果保留两位就除以100，三位就是除以1000，这里是防止出现无限循环的小数，由于没有精确的保留小数点的，所以采用变相的写法，math.round()是精确保留整数

     而math.ceil() 大于其数字参数的最小整数，例如math.ceil('3.2') 返回的就是4 math.round('3.2')返回的就是3，同样这两个方法都是要舍掉小数位的，如果要想保留小数位的方法就同math.round是一样的方式



4）isNaN(a)：用来判断得到a的值是不是保留值 NaN (不是数字) 例如parseFloat('af11')返回的就是NaN这个表示不是数字的含义



5）.toFixed()：用于返回小数位的四舍五入，例如：5.36.toFixed(1) 返回的就是5.3



6）$('input').change(function(){alert('aa')});这个就相当于<input type='text' onchange="alert('aa')"



8.10



1) $('<th>&nbsp</th>').insertAfter('#cart thead th:nth-child(2)') 这句话的含义是将th标签插入到thead标签下面的第二个th子元素的后面



2）$('#cart tbody tr:visible:even').removeClass("odd")：这里面的visible是相对于有hide()的情况而言的tr:冒号后面都是一些限制的条件，：nth-child(1)



8.11 没有看



第九章 滑移和反转



9.1 标题反转效果



1）有关样式的控制参看示例或书上的148页



2）使用$.get('a.xml',function(){})的方式在ie中读取xml文件是不好用的，还没有解决掉



3）jquery中应用xml的实例



4）将a元素包装到h3元素当中，就是先生成一个元素后插入到一个元素中  9.1.2



5）.html()的用法



6）.lenght：取得当前匹配的元素的数量，例如$('div.a').length 就是获得class为a的div的个数



7）在多个相同条件的数组中，循环符合条件元素的算法，参见实例45页



8）clearTimeout(a) 清楚计时器 a就是a=setTimeOut();这个函数，要想再执行就重新调用a



9）计时器的判断条件没有想清楚！！！



10）9.1.6 是控制在ajax得到放回之前使用的语句是ajaxStart(),和ajaxStop()



11）9.1.7 的效果没有实现！！！



9.2 图像传送带



1）position的两个重要的属性absolute和relative的使用



2）eq()的使用，关于设置子元素的方法



3）event.preventDefault() 的使用，去掉默认的操作



4）实际上移动的效果就是对eq的一种操作只要把它设置好就可以了



5）增加新的标签元素的四个步骤  $('<img />').attr('href','').addClass('classname').css('value')



6）z-index的使用，css , left , top



9.3 放大图片



1）one()方法的使用并和bind()的性能上的区别



2）文本元素的提取和添加



3）得到元素标签的写法 get();



4）offsetParent offsetLeft  offsetTop的使用，参见例子和博客

     http://blogger.org.cn/blog/more.asp?name=file163&id=19963



5）9.3.3-2没有看



第十章 插件



10.1 使用插件



1）dimensions已经加入到jquery的内核了，不用单独使用插件文件了



2）dimensions的使用 189



10.3 查找插件文档



10.4 开发新插件



1）全局函数：实际上就是jquery的方法



2）具体的操作参见示例



3）对象方法环境，如果JQuery选择符可能会匹配一个或多个元素，就要使用each()方法产生隐形迭代，然后使用this依稀调用符合条件的元素，可使用this[0]来确定每一个元素



4）a.push(b)



5）$.unique(array)：过滤掉数组中重复的元素，例子中没有能明白



6）setArray()



7）extend()：方法是一种继承机制，有关内容可上网搜索



8）.pushStack(array)：pushStack方法会创建一个新的jQuery对象，而不是修改旧的



10.4.4 添加新的简写方法



参见书

10.4.5 维护多事件日志

以后的内容参见示例和书



编写jquery插件应该注意的事项在最后 211-212页


sina

email


1 .blur(function(){})：失去焦点是调用的函数