课前说明
参考书：《锋利的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 = /^[sxA0]+/; trimRight = /[sxA0]+$/; 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这些是不需要转换的。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
可见性过滤器： :hidden 选取所有不可见元素包括:(如果直接写:hidden则会包含head itlescriptstyle….) 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()方法,只考虑子元素，不考虑后代元素。
1、使用html()方法读取或者设置元素的innerHTML： 2、使用text()方法读取或者设置元素的innerText： 3、使用attr()方法读取或者设置元素的属性，对于jQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。 4、使用removeAttr删除属性。删除的属性在源代码中看不到，这是和清空属性的区别。attr(‘name’,’’)
使用$(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下叫”探查器”。