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

可见性过滤器： :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()方法,只考虑子元素，不考虑后代元素。

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下叫”探查器”。