如鹏网 静态Web开发 第五章：JQuery

Posted 2020-06-18

课前说明

参考书：《锋利的jQuery》

jQuery官网：http://jquery.com

jQuery在线API：http://api.jquery.com http://api.jquery.com/api/ (xml文件。)

jQuery UI：http://jqueryui.com/

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

常见的javascript框架库

什么是JavaScript框架库？

　　 普通JavaScript的缺点：每种控件的操作方式不统一，不同浏览器下有区别，要编写跨浏览器的程序非常麻烦。因此出现了很多对JavaScript的封装库。

　　 常见的JavaScript框架库 Prototype【‘pr?ut?.taip 】、YUI、Dojo【’dod?o ，豆粥】、ExtJS、jQuery等，这些库对JavaScript进行了封装，简化了开发。这些库是对JavaScript的封装，内部都是用JavaScript实现的。

　　jQuery就是JavaScript语法写的一些函数类，内部仍然是调用JavaScript实现的，所以并不是代替JavaScript的。使用jQuery的代码、编写jQuery的扩展插件等仍然需要JavaScript的技术，jQuery本身就是一堆JavaScript函数。jQuery是最火的JavaScript库，jQuery的扩展插件也是非常多。

　　　　1.常用JavaScript库：

　　　　　　1>Prototype: 网址：http://www.prototypejs.org

　　　　　　2>Dojo: 网址：http://dojotoolkit.org

　　　　　　3>YUI（The Yahoo! User Interface Libray） 网址：http://developer.yahoo.com/yui

　　　　　　4>Ext JS 网址：http://www.extjs.com

　　　　　　5>MooTool 网址：http://mootools.net 6>jQuery 网址：http://jquery.com

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

jQuery简介

什么是jQuery？

　　jQuery就是一个JavaScript函数库，没什么特别的。

jQuery能做什么？jQuery是做什么的？

　　 jQuery本身就是一堆JavaScript函数，JavaScript是做什么的，jQuery也一样。毕竟jQuery只是用JavaScript编写的函数库而已，有些功能jQuery没有封装，则还需要通过自己写JavaScript来实现。

jQuery的特点？

　　　　Write Less,Do More 很好的解决了不同浏览器的兼容问题（IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome）css还是有问题的

　　　　 对于不同控件具有统一的操作方式。 体积小（几十KB）、使用简单方便（Write Less Do More）

　　　　 链式编程$("#div1").draggble().show().hide().fly() 、隐式迭代 、插件丰富、开源、免费。插件多缺什么找什么。让编写JavaScript程序更简单、更强大！

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

Query中的顶级对象$

　　jQuery中最常用的对象即$对象，要想使用jQuery的方法必须通过$对象。

　　只有将普通的Dom对象封装成jQuery对象，然后才能调用jQuery中的各种方法。

　　$是jQuery简写，在代码中可以使用jQuery代替$，但一般为了方便大家都直接使用$。

　　 写注释，后续jQuery代码会越写越多，所以必要的注释一定要写。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

编写简单的jQuery代码

　　通过window.onload实现弹框 通过jQuery的方式实现。

　　$(document).ready(fn); $(fn); 等价于$(document).ready(fn);

　　 window.onload与$(document).ready(fn);的区别

　　　　window.onload需要等待页面完全加载完毕才会触发，即所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发。

　　　　$(document).ready()只要Dom元素加载完毕即触发。这样可以提高响应速度。

　　　　 $(document).ready();可以多次注册事件处理程序，并且最终都会执行，

　　　　而window.onload每次注册新的事件处理程序时都会将前面的覆盖掉。

　　　　 使用jQuery实现window.onload的效果：$(window).load(fn);

　　　　jQuery中注册事件是load(fn)而不是onload(fn);与Dom不一样。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

jQuery中提供的两个函数

　　　　$.map(array,callback(element,index));

　　　　 对于数组array中的每个元素，调用callback()函数，最终返回一个新的数组。原数组不变。

　　　　 案例1：将一个数组中的元素翻倍，并返回一个新数组。

　　　　 案例：将一个数组中索引大于3的元素的值翻倍，其余值不变，并返回一个新数组。

　　　　 $.each(array,fn)//遍历数组,return false来退出循环。 主要用来遍历数组，不修改数组，对于普通数组或者“键值对”数组都没有问题。 在each函数中可以直接使用this,表示当前元素的值。

　　　　 $.trim(字符串);//去掉两端空格，调试看实现方式。

　　　　 字符串.replace(/^\s+/,’’);

　　　　trimLeft = /^[\s\xA0]+/; trimRight = /[\s\xA0]+$/; IE一些版本不支持\s空格，\xA0也表示空格

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

 jQuery对象、Dom对象

　　　　Dom对象如果想调用jQuery的方法必须先转换为jQuery对象。

　　　   Dom对象：文档树中的对象都是dom对象。

　　　　jQuery对象：把Dom对象包装后就得到了jQuery对象。

　　　　如何获取Dom对象？ 如何将Dom对象转换为jQuery对象？

　　　　　　Dom→jQuery $(spObj).get(0).innerhtml $(spObj)[0].innerHTML

　　　　　　如何直接通过jQuery方式获取页面上的元素？（获取后直接就是一个jQuery对象）

　　　　　　 $(‘#id’)、$(‘span’)、$(‘.cls’)、…… 通过jQuery对象即可调用：.text()、val()、html()、css(‘color’,’red’)、……。

　　　　　　jQuery中大多都是方法少有属性，因为属性很难链式编程。

　　　　　　获取值、设置值都是使用的同一个方法，有参数表示设置值，无参数表示取值。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

哪些不需要转Jquery对象

Array（数组）对象有没有对应的jQuery对象？

　　数组本身就不是Dom对象。不存在与jQuery对象之间的转换。

　　使用jQuery语句可以直接使用数组，就像$.each()或$.map();

　　 补充：通过document.getElementsByTagName()或者document.getElementsByName()获取的返回值是一个类似于数组的值，但不是数组，没有数组特有的方法。        　　parseInt()\Array这些是不需要转换的。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

jQuery选择器

选择器：用于选取页面上的元素对象。jQuery选择器完全继承了CSS选择器的方式。(学会了css的选择器就会jQuery的选择器了)

jQuery选择器是学习jQuery的基础。

Dom中如何获取页面中的元素对象？

 document.getElementById(‘id’);document.getElementsByTagName(‘input’);

 document.getElementsByName(‘gender’);

jQuery中获取页面中的元素对象

 Id选择器：$(‘#id’);

 标签选择器：$(‘input’)【$(‘*’);选择页面上的所有元素。】

 (*)属性过滤选择器：$(‘*[name=gender]’)或$(‘[name=gender]’)

案例1：设置某个div中显示的内容，通过Id选择器

案例2：为某个按钮注册单击事件，单击的时候设置页面上所有的p标签中显示文字为“我们都是好孩子”。//隐式迭代

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

 链式编程

.html(‘v’).text(‘v’);链式编程，隐式迭代。

链式编程注意：$(‘div’).html(‘设置值’).val(‘设置值’);这样可以，但是$(‘div’).html().text()这样是不对的，因为获取值时返回的是获取的字符串而不是对象本身所以不能链式编程。

$(‘div.cls’).text(‘我去.’);标签加类选择器

$(‘.cls’).text(‘好帅’);样式选择器

 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

jQuery选择器

多条件选择器：$(“p,div,span.cls”)，同时选择p标签、div标签和拥有cls样式的span标签元素。

层次选择器：

 （1）后代:$(‘div li‘).css(‘backgroundColor‘, ‘red‘);获取div下的所有li元素（后代，子、子的子……）

 （2）子元素:$(‘div>li‘).css(‘backgroundColor‘, ‘red‘);获取div下的直接li子元素 【必须是直接子元素】

 （3）相邻元素1:$(‘div+span‘).css(‘backgroundColor‘, ‘red‘);//这个元素后紧跟着的第一个元素

 （4）相邻元素2:$(‘div~span‘).css(‘backgroundColor‘, ‘red‘);//这个元素后跟着的所有元素

 $(‘*’);选取所有的元素。

注意：选择器表达式中的空格不能多不能少。易错！过滤器与表单选择器时注意。

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

获得兄弟元素的几个方法

next(); //当前元素之后的紧邻着的第一个兄弟元素（下一个）

nextAll();//当前元素之后的所有兄弟元素

prev();//当前元素之前的紧邻着的兄弟元素（上一个）

prevAll();//当前元素之前的所有兄弟元素

siblings();//当前元素的所有兄弟元素

案例：页面上有一个ul球队列表当鼠标移动到某个li上的时候改行背景颜色变红，当点击某个li的时候，让该li之前的所有li背景色变黄，之后的所有li背景色变蓝。自己不变色。

案例2：评分案例。

   －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

jQuery的迭代(包装集)

如何判断对象是否存在，jQuery选择器返回的是一个对象数组，调用text()、html()、click()之类方法的时候其实是对数组中每个元素迭代调用每个方法，因此即使通过id选择的元素不存在也不会报错，如果需要判断指定的id是否存在，应该写：

if ($(“#btn1”).length <= 0) {}判断该元素是否存在

（动态创建元素的时候用。）

   －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

链式编程|

鼠标进入每个p标签的时候通过样式方式添加高亮显示。

网页开关灯效果。

addClass 添加样式 removeClass 移除样式

toggleClass 切换样式的显示。hasClass 判断是否应用了某样式

链式编程的时候一定要注意在什么时候“破坏”了链，当前对象的传递，如果传递被破坏，则继续链式编程会有意想不到的结果！nextAll(),prevAll(),sibilings()

如何解决：调用end()方法。（返回链 被破坏前的对象。）

$(‘p:lt(2)’)前两个,索引为2之前的

$(‘p:gt(2)’)；表示的是后两个

   －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

基本过滤选择器

:first 选取第一个元素。$("div:first")选取第一个<div>

:last 选取最后一个元素。$("div:last")选取最后一个<div>

:not(选择器) 选取不满足“选择器”条件的元素，$("input:not(.myClass)")选取样式名不是myClass的<input>

:even、:odd，选取索引是偶数、奇数的元素：$("input:even")选取索引是奇数的<input>

:eq(索引序号)、gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素，比如$("input:lt(5)")选取索引小于5的<input>

$(":header")选取所有的h1……h6元素（*）

 

   －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

案例

第一行是表头，所以显示大字体（fontSize=30px），最后一行是汇总，所以显示红色字体。正文的前三行是前三名，所以显示傻大的字体（28）表格的偶数行是红色色背景。

用Dom实现；用jQuery实现。对比差异！

注意：gt(0):lt(3),表示先筛选出所有大于0的，然后在此基础上再筛选出所有小于3的，即：在所有大于0的基础上再选择0,1,2。

 

案例：点击按钮，表格隔行变色。奇红，偶黄。表格点击行背景色变蓝色，其他行背景色变白。

不仅可以使用选择器进行进行绝对定位，还可以进行相对定位，只要在$()指定第二个参数，第二个参数为相对的元素.

 $( “ul”, $(this)).css(“background”, “red”);

案例：修改点击行的所有td的背景色，将当前点击行的td设置为奇数td背景色红色，偶数td背景色蓝色。

 

   －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

属性、表单过滤器

属性过滤选择器：

$(‘#dv input[name]‘);属性过滤器

$(‘#dv input[name]‘);得到所有有name属性的元素

$(‘#dv input[name=txt1]‘);得到name为txt1的元素

$(‘#dv input[name!=txt1]‘);得到name不为txt1的元素

 还可以选择开头【name^=值】、结束【 name$=值】、包含【 name*=值】等，条件还可以复合。【[属性1=a][属性2=b]…】（*）

表单对象属性选择器（过滤器）：

 $("#form1 :enabled")选取id为form1的表单内所有启用的元素

 $("#form1 :disabled")选取id为form1的表单内所有禁用的元素

 $(“input:checked”)选取所有选中的元素（Radio、CheckBox）,这个中间不能加空格.

 $("select :selected")选取所有选中的选项元素（下拉列表） 

 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

元素的each

jQuery元素也可以调用each方法，只是对$.each的简化调用。return false;终止循环.

案例:页面中有多个兴趣爱好,通过复选框设置,选中某个复选框,下面即可显示选中的个数及内容

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

表单选择器

$(“:input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样， $("input")只获得<input>

$(“:text”)选取所有单行文本框，等价于

$("input[type=text]"),$(‘input[type=text]’),$(‘:text’);

$(“:password”)选取所有密码框。

同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。

代替了$(‘input[type=***]’);

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

其他过滤器

可见性过滤器： :hidden 选取所有不可见元素包括:(如果直接写:hidden则会包含head\title\script\style….) 1.表单元素type=“hidden”(表示的是隐藏域) 2.设置css的display:none 3.高度和宽度明确设置为0的元素。 4.父元素时隐藏的，所以子元素也是隐藏的 visibility: hidden 与opacity为0不算，因为还占位所以不认为是hidden:visible选取所有可见元素 内容过滤器： :contains(text),过滤出包含给定文本的元素。(innerText中包含。) :empty,过滤出所有不包含子元素或者文本的空元素。 :has(selector),过滤出元素中包含（即子元素中）selector选择器能选择到的元素。 :parent,过滤出可以当做父元素的元素（即该元素有子元素或者元素中包含文本。）

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

子元素过滤器

:first-child,与:fisrt的区别,:first只能选取第一个，而:first-child，则能选取每个子元素的第一个元素。 $(‘ul li:first’);只返回一个li元素。 $(‘ul li:first-child’);//为每个父元素（ul）都返回一个li。 :last-child :only-child,匹配当前父元素中只有一个子元素的元素。 :nth-child,对比eq()来理解，eq()值匹配一个，nth-child()为每个父元素都要匹配一个子元素。 :nth-child(index),index从1开始。 :nth-child(even) :nth-child(odd) :nth-child(3n),选取3的倍数的元素 :nth-child(3n+1),满足3的倍数+1的元素。 .children()方法,只考虑子元素，不考虑后代元素。

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

jQuery的Dom操作

1、使用html()方法读取或者设置元素的innerHTML： 2、使用text()方法读取或者设置元素的innerText： 3、使用attr()方法读取或者设置元素的属性，对于jQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。 4、使用removeAttr删除属性。删除的属性在源代码中看不到，这是和清空属性的区别。attr(‘name’,’’)

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

动态创建Dom节点

使用$(html字符串)来创建Dom节点，并且返回一个jQuery对象，然后调用append等方法将新创建的节点添加到Dom中： $()创建的就是一个jQuery对象，可以完全进行操作 创建radio，使用$(‘<input name=“”/>’);，而不要在创建好后通过attr(‘name’,’gender’).//通过attr()设置name,在IE6下有问题。 append方法用来在元素的末尾追加元素（最后一个子节点）。增加元素末尾(儿子) prepend，在元素的开始添加元素（第一个子节点）。增加元素开始(儿子) after，在元素之后添加元素（添加兄弟）增加元素后面(兄弟) before：在元素之前添加元素（添加兄弟）增加元素前面(兄弟) 案例：jQuery动态创建表格。(动态加载网站列表，从json中取数据) 练习：无刷新评论。

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

其他追加方法(将自己追加到某元素)

子元素.appendTo(父元素);//主动巴结!到最后一个 子元素.prependTo(父元素);//主动巴结到第一个。 (*)A.insertBefore(B);将A加到到B的前面，等同于B.before(A); (*)X.insertAfter(Y);将X加到到Y的后面，等同于Y.after(X); 效果都一样

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

删除节点

empty(); 清空某元素下的所有子节点 内部实现：while(ele.firstChild){ele.removeChild(ele.firstChild);}//不同版本可能不一样。 remove(selector) 删除当前元素，返回值为被删除的元素。还可以继续使用被删除的节点。比如重新添加到其他节点下： 权限选择案例:一个下拉框中的选项放置另一个下拉框选项中 写代码的好习惯，{、(写完开始就写结束，省得忘了。，在jQuery中这样写就不容易写错了。 如果报错“例外被抛出”等，很可能是选择器表达式有问题，比如单词拼写错误、加了不必要的空格等。val是方法不是属性。jQuery是完全按照JavaScript的语法写出来的JavaScript函数库，没有任何的魔法，任何看似怪异的写法都是很合法的JavaScript语法。jQuery就是一堆写好的JavaScript函数库而已，没有什么特殊的，你也可以写出来，因此完全可以和普通JS代码混着用。最好不要dom、jQuery方式混着用。注意不同jQuery版本的区别。

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

练习

加法计算器。两个文本框中输入数字，点击按钮将相加的结果放到第三个文本框中。 十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。设置可用性等jQuery未封装方法：attr("")setInterval() 案例1：创建若干个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是focus，焦点离开控件的事件是blur。 案例：选择球队,两个ul。被悬浮行高亮显示（背景是红色），点击球队将它放到另一个的球队列表。//清除所有事件。.unbind();

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

节点操作

替换节点： $("br").replaceWith("<hr/>"); 用<hr/>替换br $(‘<br/>’).replaceAll(‘hr’); //调用者也得是选择器选择到的元素。 用<br/>元素替换所有的hr 红色为选择器；蓝色为要替换的内容（动态创建的元素）。 包裹节点 wrap()方法用来将所有元素逐个用指定标签包裹： wrapAll() wrapInner()//在内部围绕

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

样式操作

获取样式 attr("class")，设置样式attr("class","myclass")，追加样式addClass("myclass")(不影响其他样式)，移除样式removeClass("myclass")，切换样式（如果存在样式则去掉样式，如果没有样式则添加样式）toggleClass("myclass")，判断是否存在样式：hasClass("myclass") 点击表格行，被点击的行高亮显示（背景是黄色），其他行白色背景。监听每个tr的click事件，将点击的背景设置为黄色，其他的设置为白色背景。颜色定义为class样式。(使用类样式来做) 练习：聚焦控件的高亮显示。颜色定义为class样式。 $(“body *”)，选择器*表示所有类型的控件。获得焦点的元素背景色为黄色。 练习：搜索框效果。焦点放入控件，如果文本框中的值是“请输入关键词”，那么将文本清空，并且颜色设置为黑色。如果焦点离开控件，如果文本框中是空值，那么将文本框填充为“请输入关键词”，颜色设置为灰色（Gray）。颜色定义为class样式。

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

RadioButton操作

取得RadioButton的选中值，被选中的radio只有一个值，所以直接用val() 显示单选按钮中哪些内容被选中了,注意多个单选按钮不在同一组中 设置RadioButton的选中值：.attr(‘checked’,true); $("input[name=gender]").val(["女"]); 或者 $(":radio[name=gender]").val(["女"]); 注意val中参数的[]不能省略,val()的参数必须是一个数组。

对RadioButton的选择技巧对于CheckBox和Select列表框也适用 除了可以使用val批量设置RadioButton、CheckBox等的选中以外，还可以设定checked属性来单独设置控件的选中状态 $(‘#selOne’).val([‘1’,’2’,’3’]);//同时设置多个下拉菜单选中 $("#btn1").attr("checked",true) 练习：CheckBox的全选、全不选、反选

 

如果使用attr("checked",true)与attr("checked",false)或者removeAttr("true"); 会出现第一次全选可以出 现全选效果，但是第二次点击后就无法实现全选效果。现在改为prop

 $("#checkboxId").prop("checked",true);

 $("#checkboxId").prop("checked",false);

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

微博案例

1、点话题按钮，如果文本框为空显示 #输入话题标题# 如果文本框中已经显示的是： #输入话题标题#。“输入话题标题”高亮显示。 2、设置发布按钮的样式 background-position 设置背景图片显示的位置。坐标为0,-195px hover样式解决。注意px问题。 3、用户输入文字时，计算剩余的字数。当字数超过140时，显示#E56C0A色字，并提示用户已经超出多少字。change()事件中注册，每隔10毫秒调用一次change()方法。 4、点击朋友按钮显示朋友列表。 5、点击表情按钮显示表情列表（注意浏览器缓存问题。） 多张图片合并一张，减少了网络访问次数。 IE9和IE6下层的浮动问题。 计算字数

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

事件

jQuery中的事件绑定： $(“#btn”).bind(“click”,function(){})， 每次都这么调用太麻烦，所以jQuery可以用$("#btn").click(function(){})来进行简化 合成事件hover[‘h?v?]，hover(entern,leavefn)，当鼠标放在元素上时调用enterfn方法，当鼠标离开元素的时候调用leavefn方法。相当于mouseover与mouseout事件的结合。类似于超链接的伪类a:link,a:hover在IE6下只有超链接支持，文本框等并不支持，所以这时就可以考虑使用合成事件hover(fn1,fn2) $(‘#bt‘).toggle(function () {alert(1);}, function () {alert(2);}, function () {alert(3); }, function () {alert(4);});

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

事件冒泡

事件冒泡：jQuery中也像JavaScript一样是事件冒泡window.event.cancelBubble = true,ie取消 如果想获得事件相关的信息，只要给响应的匿名函数增加一个参数：e，e就是事件对象。调用事件对象的stopPropagation()方法终止冒泡。e. stopPropagation(); 标准js方式：e.stopPropagation(); IE下：e.cancelBubble = true； $("tr").click(function(e) { alert("tr被点击"); e.stopPropagation(); });//注意函数的参数是e

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

阻止事件

阻止默认行为：有的元素有默认行为，比如超链接点击后会转向新链接、提交按钮默认会提交表单，如果想阻止默认行为只要调用事件对象的preventDefault()方法和window.event.returnValue=false效果一样。 $(“a”).click(function(e) { alert(“所有超链接暂时全部禁止点击”); e.preventDefault(); });//jQuery中封装的。 （*） jQuery在注册事件的时候如何传递参数？event.data获取参数。 .click({‘k’:1,’v’:2},fn);然后通过evt.data.k或evt.data.v .bind(‘click’,data,fn);//同上

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

事件其他

jQuery的事件对象：event对象。 属性：pageX、pageY、target获得触发事件的元素(冒泡的起始，和this不一样，相当于window.event.srcElement)、which如果是鼠标事件获得按键（1左键，2中键，3右键），如果是键盘事件keydown则获取的是keyCode。 altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下，为bool值 移除事件绑定：unbind()方法即可移除元素上所有绑定的事件，如果unbind("click")则只移除click事件的绑定。bind:+=；unbind:-= 一次性事件：如果绑定的事件只想执行一次随后立即unbind可以使用one()方法进行事件绑定。 e.type获取当前事件的类型click、mousemove、… $(this).offset()//获取当前元素相对于页面的坐标。 $(this).offset().left、$(this).offset().top event.originalEvent;//获取原生的event对象。

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

鼠标

获得发生事件时鼠标的位置 让图片飞……案例 在mousemove、click等事件的匿名响应函数中如果指定一个参数e，那么就可以从e读取发生事件时的一些信息，比如对mousemove等鼠标事件来说，就可以读取e.pageX、e.pageY来获得发生事件时鼠标在页面的坐标。 练习：Tooltips效果。用层来做，背景色是黄色。当鼠标移动到页面上的某个元素时，在旁边显示当前元素的Id.

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

动画

show()、hide()方法会显示、隐藏元素。用toggle(speed)方法在显示、隐藏之间切换 $(":button[value=show]").click(function() { $("div").show(); }); $(":button[value=hide]").click(function() { $("div").hide(); }); 如果show、hide方法不带参数则是立即显示、立即隐藏，如果指定速度参数则会用指定时间进行动态显示、隐藏，单位为毫秒，也可以使用三个内置的速度：fast（200毫秒）、normal（400毫秒）、slow（600毫秒），jQuery动画函数中需要速度的地方一般也可以使用这个三个值。 练习：右下角弹出QQ消息的效果。slideDown(1000);从下网上显示

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

效果

滑动效果 slideDown()、slideUp()、slideToggle()隐藏就显示,显示就隐藏 淡入淡出（透明） fadeIn()、fadeOut()、fadeToggle()同上、fadeTo()到达透明度多少2000，0.1 自定义动画 animate({样式},speed) 部分样式不支持：backgroundColor、color、borderStyle、…… 使用animate设置对象位置的时候要确保position的值为absolute或relative. 停止动画正在执行动画的元素.stop()(*),带参数的stop(true,false); 动画队列： $(‘img‘).animate({ "top": "400px", "left": "10px;" }, 2000); $(‘#btn‘).click(function () {$(‘img‘).animate({ "width": "80px", "height": "80px", "top": "-=400px", "left": "500px" }, 2000).animate({ "top": "+=450px", "left": "+=450px" }, 3000);

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

注意

Jquery 和 dom中尽量用单引号，html代码用双引号。

很多Dom做的功能用ASP.net服务端代码也能完成，但是那样会页面频繁刷新，性能、可用性非常差。能用Dom操作就不要用ASP.net服务端代码。先学HTML、JS、Dom，不要一上来就学asp.net，因为那样容易被ASP.Net好用所迷惑。 id和jQuery对象的区别。动态创建出来的对象在append之前是不能通过$("#id")来引用的。 js中单引号与双引号 $(‘body’).append($(‘<table></table>’)).append($(‘<a></a>’));//a在body中，不在table中。 stopPropagation();//阻止事件冒泡

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

jQuery插件： jQuery cookie

什么是cookie：Cookie就是保存在浏览器上的内容，用户在这次浏览页面的时候向Cookie中保存文本内容，下次再访问页面的时候就可以取出来上次保存的内容，这样就可以得到上次“记忆”的内容。Cookie不是jQuery特有的概念，只不过jQueryCookie把它简化的更好用而已。Cookie就是存储在浏览器里的一些数据。 Cookie需要浏览器的支持，浏览器的Cookie是可以禁用的，如果禁用了Cookie就不能使用了，不过一般不用考虑禁用Cookie的情况。Cookie的几个特征：Cookie是与域名相关的，所以163.com不能读取baidu.com记录的Cookie，正因为如此读取、设置Cookie的时候不用担心不同域名cookie的冲突；一个域名能写入的Cookie总尺寸是有限制的，一般是是几千字节，能写入的Cookie总条数一般是几十条，超过以后浏览器自己会根据自己的策略移除一些Cookie；Cookie不是写入以后一定下次能读出来，浏览器可能会定期清除、用户也可能会手动清除。写到Cookie中的数据一定是可有可无的数据，像防止投票作弊就不能用Cookie。

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

jQuery Cookie使用

使用方法，Cookie保存的是键值对 1、添加对jQuery.cookie.js 2、设置值，$.cookie(‘名字‘, ‘值‘)。cookie中保存的值都是文本。 3、读取值，var v=$.cookie(‘名字‘) alert($.cookie("用户名")); $.cookie("用户名","tom");在同域名的另外一个页面中也能读取到。 案例：点击登录以后保存用户名，再登录的时候读取上次保存的用户名，帮用户填上 设置值的时候还可以指定第三个参数，$.cookie(‘名字’, ‘值’, { expires: 7, path: ‘/’, domain: ‘itcast.cn’, secure: true })，expires表示要求浏览器保留Cookie几天，这个值只是给浏览器的建议，可能没到时间就已经被清除了。可以实现“勾选【记录我的用户名10天】”的功能。如果不设定expires在浏览器关闭以后就清除，options参数用哪个设置哪个。 secure：传输cookies时候，是否需要一个安全协议。

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

jqzoom插件图片放大

官网：http://www.mind-projects.it/ 步骤1：<script type=‘text/javascript‘ src=‘js/jquery-1.2.6.js‘></script> <script type=‘text/javascript‘ src=‘js/jquery.jqzoom-1.0.1.js‘></script> 步骤2：<link rel="stylesheet" type="text/css" href="css/jqzoom.css" /> 步骤3：<a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE"> <img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE" > </a> 步骤4：$(document).ready(function(){ $(‘.MYCLASS).jqzoom(); });

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

常用jQuery插件

jQuery官方的UI控件 jQueryUI http://jQueryui.com/ 下发包 演示常用方法，分析代码。 表现和内容分离，语义化。 jQuery.validate 表单验证插件 Form,用于为表单提供直接的Ajax能力 所有插件列表http://plugins.jQuery.com/ 步骤1：解压jQueryUI后将CSS目录（里面包含images）与Js目录拷贝的网站下。 步骤2：导入jquery-ui-1.8.16.custom.css和jquery-ui-1.8.16.custom.min.js 步骤3：$(function () { $(‘#txt1‘).datepicker(); });

  －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 

网页分析工具

DebugBar→IE的 IE8内置了开发人员工具（工具→开发人员工具），IE6/7需要安装Internet Explorer Developer Toolbar（下载地址见备注）。 IECollection也带了安装包。可以禁用cookie、禁用JavaScript、清理Cookie、禁止缓存、调试JS等。 Firebug→FireFox下的 多版本IE工具：IECollection，比IETester更强大。 Profile功能（概述）,IE下叫”探查器”。

如鹏网：http://www.rupeng.com