jquery学习笔记

第一章 开始Jquery

1 资源

 

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

 

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()  例 ：参见上面

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

5) 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)= 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参数，类似循环计数器，     

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

 

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

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

 

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

 

4 .attr()：添加属性，示例 .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值

 

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()：删除元素中所有的子节点

 

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对象的函数，前者可以用于迭代任何对象和数组

 

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中需要用到的参数