锋利的jQuery

1. Jquery对象和DOM对象的转化 Var $variable = //Jquery对象 Var $variable= //DOM对象 Var $cr = $(“cr”);//Jquery转为DOM对象 Var cr= $cr[0] Var cr= document.getElementById(“#cr”)// DOM转为Jquery对象 Var $cr = $(cr); 解决jQeury和其他库的冲突 jQuery库调用完成以后，调用jQuery.noConflict()函数来将$的控制权移交给其他JavaScript库 $(“#demo”).click()单独写点击不成功，当把函数放在$(document).ready()中，代码执行。 根据奇偶对table设置不同的颜色 Var item = document.getElementbyId(“tb”);//获取id为tb的table Var tbody = item.getElementsByTagName(“tbody”)[0];//获取table的第一个tbody Var trs = tbody.getElementsByTabName(“tr”);//获取tbody下所有tr元素 For(var i=0;I <trs.length;i++) { If(i%2==0) { Trs[i].style.backgroundColor = “#ddd”;//设置自己需要的颜色 } Else { //todo } } Jquery选择器选择多个元素 $(“a,b,c”)，以，隔开 如$(“div,span”) Jquery筛选器 $(‘ul li’).filter(“contains(‘aaaa’),contains(‘bbbbbb’)”)利用contains筛选符合要求的集合，可以有多个选择器，利用‘,’隔开。 给一个按钮添加一组交互事件，而不需要判断 需要进行判断的事件： testBtn.click(function(){ if($category.is(“:visible”)) {} Else {} }) 利用交互事件的形式后： testBtn.toggle(function(){ },function(){ }) 2. jquery 的节点增加 元素的增加 可以通过$(“<div>aaaaa</div>”)创建一个元素，返回的是一个jquery对象 除此之外，还可以移动节点， <ul> <li>aaaaa</li> <li>bbbbb</li> <li>ccccc</li> <li>ddddd</li> <li>eeeee</li> <li>fffff</li> <li>ggggg</li> <li>hhhhh</li> <li>iiiii</li> </ul> Html结构如上，可以通过下面的代码改变li的位置 var $li_1 = $("ul li:eq(1)"); var $li_2 = $("ul li:eq(2)"); $li_2.after($li_1); 改变以后的结果： • aaaaa • ccccc • bbbbb • ddddd • eeeee • fffff • ggggg • hhhhh • iiiii 3. 有关jquery的节点删除问题 有两个函数 Remove函数和empty函数 Remove可以删除指定的元素集合 例如： $("ul li:eq(1)").remove(); 此函数执行完成以后，返回删除的节点的索引，以便于以后使用。 Empty函数是用来清空相应元素的内容。 通过代码：$("ul li:eq(1)").empty(); <li>aaaaaaaaaa</li> <li>bbbbbbbbbb</li> <li>cccccccccc</li> <li>dddddddddd</li> 变为 <li>aaaaaaaaaa</li> <li> </li> <li>cccccccccc</li> <li>dddddddddd</li> 4. 克隆元素 通过clone函数 通过如下代码： $("ul li").click(function () { $(this).clone(true).appendTo("ul"); }) 当单击ul li 的某一项的时候，在ul的末尾追加当前单击的li 并且通过在clone函数中增加true参数，可以让新追加的元素也有点击追加的功能。 <ul> <li>aaaaaaaa</li> <li>bbbbbbbb</li> <li>cccccccc</li> <li>dddddddd</li> </ul> 5. 替换函数 Replace函数和replaceAll函数，两者相同，replaceAll函数只是颠倒了replace函数的使用 $("#demo").replaceWith("<span>bbbbbb</span>"); $("<span>bbbbbb</span>").replaceAll("#demo"); 6. 包裹函数 Wrap WrapAll wrapInner <ul> <li>aaaaa</li> <li>bbbbb</li> </ul> Wrap函数 $("ul li").wrap("<strong></strong>");把ul中的每一个li用strong包裹起来 <ul> <strong><li>aaaaa</li></strong> <strong><li>bbbbb</li></strong> </ul> wrapAll函数 $("ul li").wrapAll("<strong></strong>");把ul中的li整体包裹起来 <ul> <strong> <li>aaaaa</li> <li>bbbbb</li> </strong> </ul> wrapInner $("ul li").wrapInner("<strong></strong>");ul中的li每一个都包裹上<strong></strong>(内包裹) <ul> <li><strong>aaaaa</strong></li> <li><strong>bbbbb</strong></li> </ul> 7. 增加改变属性 var aaa = $("span").attr("class"); //通过传入一个参数，可以得到相应的属性的值。 $("span").attr("class", "demo1");//通过传入两个参数，可以设置相应的属性的值。 有时候会不想覆盖原来的class的值，可以使用$("span").addClass("demo2");来增加class 移除class 可以通过$("span").removeClass("demo2");来移除class，当然也可以通过在要移除的class中间加空格来移除多个class $("span").addClass("demo2 demo3"); 利用toggleClass切换移除增加class $("span").toggleClass("demo2"); 判断是否有某一个class存在， $("span").has("demo2");//判断是否有demo2的class存在 总结：类似的方法还有html(),text(),height(),width(),val(),css(); 8. 遍历节点方法 Children方法//获取所有匹配的子元素， Children(“a”)//获取所有匹配的a元素 Next方法//获取匹配的后面紧跟的同辈元素 Prev方法//获取匹配的前面的同辈元素 Sublings方法//获取前后所有的同辈元素 Closest方法//首先检查当前元素是否匹配，如果匹配直接返回，如果不匹配向上查找知道找到匹配的元素 9. css-dom操作 设置css属性 $(“demo”).css(“color”,”red”); 也可以同时设置多个属性 $(“demo”).css({“color”:”red”,”font-size”:”30px”}); 当属性中带有“-”时，可以利用“-”后面字母首字母大写 $(“demo”).css({“color”:”red”,”fontSize”:”30px”}); 当要设定的属性不加““时，只能用首字母大写的形式 $(“demo”).css({color:”red”,fontSize:”30px”}); Offset，position，scrollTop，scrollLeft？ jQuery事件和动画 window.onload和$(document).ready方法的区别 window.onload是当网页中的所有元素（包括元素的所有关联文件）完全加载到浏览器后才执行，即javascript才能访问网页中的任何元素。 当定义时 Window.onload = a; Window.onload = b; 当整个网页都就绪时，只执行b函数，因为window.onload函数只能保存对一个函数的引用。 而$(document).ready是当DOM完全就绪时就可以被调用。 bind函数,时间绑定 bind(event,data,fun) event表示事件类型， data是事件对象传递给事件对象的额外数据对象 fun是事件触发时，绑定的处理函数。 合成事件 hover和toggle事件 hover(enter,leave)事件：用于模拟鼠标悬停事件，当鼠标移动到元素上时会触发第一个函数，当鼠标离开元素时，会触发第二个函数。 如下代码： $(function () { $("#demo h5.head").hover(function () { $(this).next("div.detail").show(); }, function () { $(this).next("div.detail").hide(); }) }) Toggle事件 Toggle(fun1,fun2,fun3)用于模拟鼠标单击事件，当鼠标第一次单击元素时，触发第一个函数，当鼠标单击元素第二次时，触发第二个函数，依次触发，随后的单击对这几个函数循环触发。 事件冒泡 假设一个网页的结构如下： <body> <form id="form1" runat="server"> <div id="content"> 外ªa层? <span>内¨²层?</span> 外ªa层? </div> <div id="img"> </div> </form> </body> Javascript如下： $(function () { $('span').click(function () { $('#img').html($("#img").html() + "<p>内¨²层?</p>"); }) $('#content').click(function () { $('#img').html($("#img").html() + "<p>外ªa层?</p>"); }) $('body').click(function () { $('#img').html($("#img").html() + "<p>body</p>"); }) }) 当单击内层元素时，会触发外层元素的事件也被触发，像冒泡一样一直往上升。 如果不想导致外层的元素也执行内层的事件，可以利用 event.stopPropagation();//停止冒泡函数停止冒泡 首先为函数添加一个参数， $('body').click(function (event) {//event:事件对象 $('#img').html($("#img").html() + "<p>body</p>"); 然后通过事件对象调用停止冒泡函数 阻止默认行为，比如单击一些连接，默认行为是跳转到另一个网页，如果不想让点击执行默认的跳转操作，可以通过preventDefault函数 $('body').click(function (event) {//event:事件对象 //执行的代码 event.preventDefault();//此函数阻止默认跳转 } 当然上面两种都可以通过return false代替 移除事件 Unbind函数 Unbind([type][,data]);//type为要移除的时间类型，data为要移除的函数 $(“element”).bind(“click”,myfun = function(){ //代码 }) 可以通过$(“element”).unbind(“click”,myfun)；来解除绑定事件 One方法，绑定的事件只执行一次 $("#img").one("click", function () { $(this).html("清?空?"); }) Triggle事件：//触发事件， triggle（type[,data]）；//type指定要触发的事件的类型 //data，指定附加的数据 下面的代码自定义了一个myClick事件，然后利用triggle函数来触发自定义的事件。Triggle时间中带了附加的数据。 $("#Button1").bind("myClick", function (event, mes1, mes2) { $("#demo").append("<p>" + mes1 + mes2 + "</p>") }); $("#Button1").trigger("myClick",["我¨°自Á?定¡§义°?的Ì?","事º?件t"]) triggerHandler $("input#input").triggerHandler("focus"); 当我们想要执行focus事件，浏览器会执行默认的得到焦点操作，要是我们不想浏览器执行默认的操作，可以通过triggleHandler事件来执行focus的同时不执行浏览器的默认操作。 其他方法 Bind//可以绑定多个事件 $(“div”).bind(“mouseover mouseout”,fun)//事件间以空格隔开 为事件定义命名空间 $("div.test").bind("click", function () { $("body").append("<p>click事º?件t</p>"); }) $("div.test").bind("click.plugin", function () { $("body").append("<p>click.plugin事º?件t</p>"); }) $("#Button1").bind("click", function () { $("div.test").trigger("click!"); return false; }) 上面的代码为div.class事件添加了两个单击事件，一个在命名空间plugin中,另一个没有在命名空间中,当通过trigger函数触发click事件时，当为triggle(“click!”)时，为执行不在命名空间中click事件 Jquery中的动画 Show和hide函数 Show([time])//time可以定义为slow，fast，normal，也可以设定时间，用于设定显示的过度时间。 特点:显示的高度从上向下，宽度从左到右，同时增加透明度。 Hide（[time]）//与show相反,但会记住要操作元素的display状态 当调用show时会恢复到原来的状态 fadeOut和fadeIn函数 两个函数不会改变现实的高度和宽度，只是改变显示的透明度。 Slideup和slidedown函数只会改变现实的高度， 上面的函数有时候不能满足各种需求，可以利用animate自定义动画 Animate(para,speed,callback)//para包含样式的值，speed速度，//callback动画完成后执行的函数 组合动画示例： $(function () { $("#panel").click(function () { $(this).animate({ left: "500px" }, 3000) .animate({height:"200px"},300);//以链式的形式执行 }); }) 利用回调函数 $("#panel").click(function () { $(this).animate({ left: "400px", height: "200px", opacity: "1.0" }, 3000) .animate({ top: "200px", width: "200px" }, 3000, function () {//利用回调函数，在动画执行完成后执行改变//css的函数 $(this).css("border", "5px solid blue"); }); }); Callback函数适合于所有的动画效果函数 停止动画函数 stop Stop([clearQueue][,gotoEnd]);//clearQueue用于是否把当前元素//接下来的未完成的动画队列清空,gotoEnd用于让正在执行的动画//直接到达结束时刻时候的状态。 $(function () { $("#panel").hover(function () { $(this).stop() .animate({ height: "150px", width: "300px" }, 2000) }, function () { $(this).stop() .animate({ height: "22px", width: "60px" }, 2000) }); }) 判断是否处于动画状态 If(‘element’).is(“:animation”)；//用来判断是否处于动画状态 其他动画函数 Toggle、slideToggle、fadeTo//分别代替show，hide的组合、slideUp，slideDown的组合、fadeIn，fadeOut的组合。 示例： $("#panel").click(function () { $(this).toggle(); }); 当然其他的动画都可以利用animation动画代替 Parent和parnets元素，parent是取得符合要求的父元素，而parents是取得符合要求的祖先元素。 Jquery 与Ajax的应用 jquery load方法 load(url[,data][,callback])//url为要请求的页面的地址 //data为发送至服务器的值 //callback为调用完成以后的回调函数，无论成功失败 示例： $(function () { $("#send").click(function () { $("#resText").load("test.htm .para,h6"); }); }); 通过load函数可以得到test.htm页面的html代码，把它加入到id为resText中，也可以得到相应的test.htm中相应的代码，而不是全部的代码，利用load("test.htm .para,h6");在test.htm后追加条件 回调函数： $("#resText").load("test.htm "，function(responseText,textStatus,XMLHttpRequst){ //responseText请求返回的内容， //textStatus请求状态，success，error，notmodified，timeout //XMLHttpRequest XMLHttpRequest对象 }); Ajax以xml形式传递 $(function () { $("#send").click(function () { $.get("../ashx/jquery_get.ashx", function (data, textStatus) {//data代表了传回来的值，textStatus代表了请求的状态, var username = $(data).find("comment").attr("username"); var content = $(data).find("comment content").text(); var textHtml = "<div class='comment'><h6>" + username + "</h6><p class='para'>" + content + "</p></div>"; $("#resText").html(textHtml); }); }); }); Ajax与json Ajax与post方法与get方法相似，但是也有一些不同，比如传输的方式，传输的数据量的限制，安全性的限制。 $.GetScript和$.getjson 有时候初次加载时就去的全部的javascript是没有必要的，可以通过稍后加载的方式加载 可以通过 $(document.creatElement(“script”)).append(“src”,”test.js”).appentTo(“head”)； $(“<script type=’text/javascript’ src=”test.js”></script>”).appendTo(“head”)； 也可以通过如下代码： $.getScript(“test.js”)； $.getjson $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?", function (data) { $.each(data.items, function (i, item) {//data.items为要操作的对象，i为对象的成员的索引，item为对应//的对象或内容 $("<img class='para'></img>").attr("src", item.media.m)//通过得到//item下的media元素下的m元素的值 .appendTo("#resText"); if (i == 3) { return false; } }); 原始的json数据结构如下: ({"link":"http://www.flickr.com/photos/63292151@N04/6311360357/","media": {"m":"http://farm7.static.flickr.com/6041/6311360357_b578b30004_m.jpg"}}) $.ajax(options)方法： 各个参数的作用： url：发送请求的地址 type：请求的方式，为get或post 默认为get timeout：设置请求超时的时间 data：发送的数据字符串，如果不是字符串将自动转换成字符串{fool:”bar1”,fool2:”bar2”}转换成&foo1=bar1&fool2=bar2,如果是数组{foo:[“bar1”,”bar2”]}转换成不同值同一个名称 &fool=bar1&fool=bar2 dataType:预期服务器返回的数据类型 xml，json，jsonp，html，script，text类型 beforeSend：发送请求之前的行为 function(XMLHttpRequest) { } Complete:发送请求完成以后调用，不管请求有没有成功 function(XMLHttpRequest，textStatus) { } Success：发送成功调用 function(XMLHttpRequest，textStatus) { } Error：请求失败调用 function(XMLHttpRequest，textStatus，errorThrown) { } Global：boolean 默认为true 是否调用全局ajax事件 序列化元素 Serialize函数 对于下面的表单： <form id="form1" runat="server"> <p>评¨¤论?：êo</p> <p>姓?名?：êo<input type="text" name="username" id="username" /></p> <p>内¨²容¨Y：êo<textarea name="content" id="content" rows="2" cols="20"></textarea></p> <p><input type="button" value="提¬¨¢交?" id="submit" /></p> <div id="resText"></div> </form> 我们可以通过 $.get(“url”,{username:$(“#username”).val(), Content:$(“#content”).val()},function(){})方法传递标点数据，但是但表单数据比较多的时候，可以利用serialize方法实现 示例如下 $("#submit").click(function () { $.get("../ashx/serialize.ashx", //访问的url $("#form1").serialize(), function (data, textStatus) { //serialize,对整个form1序列化 var text = "<div><p>" + $(data).find("username").text() + "</p><p>" + $(data).find("content").text() + "</p></div>"; $("#resText").html(text); }); }); serializeArray函数 该方法返回的是将DOM序列化后的JSON格式的数据 Para函数 对一个数组或对象按照key/value进行序列化 示例： Var obj = {a:1，b:2，c:3}; Var k = $.para(obj); Alert(k)//结果为a=1&b=2&c=3; Ajax中的全局事件 ajaxComplete(callback)//请求完成时执行 ajaxError(callback)//请求错误时调用 ajaxSend(callback)//请求发生前调用 ajaxSuccess(callback)//请求成功时执行 jquery 插件 //Todo…

简单易学~~~

when you have a problem,you need to: 1write everything(ideas、plans) down & make it visible 2list every possible reason that may cause the problem 3test every potential reason one by one

1.Javascript自身存在3个弊端： 1.1 复杂的文档对象模型（DOM） 1.2 不一致的浏览器实现 1.3 缺乏便捷的开发、调试工具。 2.流行的JavaScript库：Prototype Dojo YUI ExtJS MooTools jQuery 3.jQuery的优势： （1）轻量级 （2）强大的选择器 （3）出色的DOM操作的封装 （4）可靠的事件处理机制 （5）完善的Ajax （6）不污染顶级变量 （7）出色的浏览器兼容性 （8）链式操作方式 （9）隐式迭代 （10）行为层与结构层的分离 （11）丰富的插件支持 （12）完善的文档 （13）开源 4.jQuery的官网为：http://jquery.com可以在这里下载最新的jQuery库，对于每一个版本的jQuery库，它提供两种类型让开发者下载，一种是无压缩版本供开发和调试用名称为jquery-<version>.js还有一种是经过压缩工具压缩的版本主要用于程序的发布版使用，名称为：jquery-<version>.min.js。 5.要使用jQuery库，需要在你的代码之前引入入jQuery: <script sc="jquery-1.8.2.js" type="text/javascript"></script> 6.jQuery格式建议： （1）对于同一个对象不超过3个操作的，可以直接写成一个i操作 （2）对于同一个对象的较多操作，建议每行写一个操作，或者将同一个类别的操作写在同一行 （3）对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以适当地缩进 （4）对于多个对象的多个操作，可以结合（2）和（3）来做 7.DOM和jQuery对象： DOM：Document Object Model 文档对象模型，每一份DOM都可以表示成一棵树 jQuery对象：jQuery对象就是通过jQuery包装DOM对象后产生的对象 8.jQuery对象和DOM对象的相互转换: 首先，约定如果是jQuery对象，则在变量前面加上$，如下所示 var $v = jQuery对象; var v = DOM对象; jQuery对象转成DOM对象： jQuery提供了两种方法将一个jQuery对象转换成DOM对象，即[index]和get(index) 例如： var $cr = $("#cr"); var cr = $cr[0] ; 或者： var cr $cr.get(0); DOM对象转换成jQuery对象： 对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了 例如： var cr = document.getElementById("cr"); var $cr = $(cr); 9.解决jQuery和其他库的冲突的方法： （1）如果jQuery库在其他库之前导入，那么可以直接使用jQuery来做一些jQuery的工作 （2）如果jQuery库在其他库之后导入，那么可以用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库，也可以在移交的同时自定义备用名称 例如： var $j = jQuery.noConflict();