JQuery 学习总结及实例

JQuery学习总结及实例1、JQuery简介普通JavaScript的缺点：每种控件的操作方式不统一，不同浏览器下有区别，要编写跨浏览器的程序非常麻烦。因此出现了很多对JavaScript的封装库，比如Prototype、Dojo、ExtJS、JQuery等，这些库对JavaScript进行了封装，简化了开发。这些库是对JavaScript的封装，也就是咱们调用JQuery的一句函数，JQuery内部这句函数帮我们调用JavaScript中的代码几十句，因为JQuery就是JavaScript语法写的一些函数类，内部仍然是调用JavaScript实现的，所以并不是代替JavaScript的。使用JQuery的代码、编写JQuery的扩展插件等仍然需要JavaScript的技术，Jquery本身就是一堆JavaScript函数。（1、Jquery是最火的JavaScript库，已集成到VS2010，MS的Ajaxtoolkit和JQuery结合也是最方便，JQuery的扩展插件也是非常多。（2、JQuery的优点：尺寸小、使用简单方便（WriteLess,DoMore，吃得少干得多。链式编程（$(#div1).draggble().show().hide().fly()）、隐式迭代（自动对于多个元素进行迭代方法调用））、屏蔽浏览器差异跨浏览器兼容性好（IE6.0+,FF2+,Safari3.0+,Opera9.0+,Chrome）、插件丰富、开源、免费。（3、VS中JavaScript、JQuery的自动完成功能：在VS2010中直接有，VS008需要安装VisualStudio和VS90SP1-KB958502-x86补丁会更强更好用,下载地址见备注。然后引用jquery-1.4.1.js，jquery-1.4.1-vsdoc.js放到同目录下，不需要在页面引用。（4、vsdoc是vs2008sp1以后增加的一个技术，将js文件对应的vsdoc（相当于js库提供的方法的说明库）放到和js一起，就有会第三方js的自动提示的功能2、简单的JQuery之Ready（1、注册事件的函数，和普通的dom不一样，不需要在元素上标记on**这样的事件。$(document).ready(function(){alert(加载完毕！);});（2、当页面Dom元素加载完毕时执行代码，可以简写为：$(function(){alert(加载完毕！);});（3、和onload类似，但是onload只能注册一次（没有C#中的+=机制），后注册的取代先注册的，而ready则可以多次注册都会被执行。window.onload=function(){alert(1)};window.onload=function(){alert(2)};//结果只弹出2（4、JQuery的ready和Dom的onload的区别(*)：onload是所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发，而ready则是Dom元素创建完毕后就被触发，这样可以提高网页的响应速度。在jQuery中也可以用$(window).load()来实现onload那种事件调用的时机。$(function(){alert(1111);});//简写方式3、JQuery的函数$.map(array,fu)得到函数的返回值和$.each(array,fn)调用函数处理没有返回值1!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==js/jquery-1.4.2.jstype=text/javascript/script6scripttype=text/javascript7/*$.map(array,fu)8vararr1=[1,2,3];9vararrOne=$.map(arr1,function(item){returnitem*2;});10alert(arrOne);*/1112/*$.each(array,fn)*/13vararr2=[1,2,3];14//$.each(arr2,function(key,item){alert(key+and+item);});//两个参数返回的是key+值15//$.each(arr2,function(item){alert(item);});//一个参数返回的是key16$.each(arr2,function(){alert(this);});//没有参数自觉返回值17/script18/head19body2021/body22/html4、JQuery对象和Dom对象（1、$('#div1')得到的就是jQuery对象，jQuery对象只能调用jQuery对象封装的方法，不能调用Dom对象的方法，Dom对象也不能调用jQuery对象的方法，所以alert($('#div1').innerHTML是错的，因为innerHTML是DOM对象的属性。（2、Array是JS语言本身的对象，不是Dom对象，因此不需要转换为Jquery对象才能用（3、将Dom对象转换为JQuery对象的方法，$(dom对象)；当调用jQuery没有封装的方法的时候必须用Dom对象，转换方法：vardomobj=jqobj[0]或者vardomobj=jqobj.get(0)（4、在引用外部js的Script标签内不能再写js代码，引用外部js的Script标签也不能用简写方法闭合。1!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==js/jquery-1.4.2.jstype=text/javascript/script6scripttype=text/javascript7/*JQuery对象*/8//$(function(){alert($('#div1').html());});910/*Dom对象转化为JQuery对象*/11//$(function(){vardom1=document.getElementById(div1);$(dom1).html(fontcolor='black'测试black/font);});1213/*JQuery对象转化为Dom对象+一个[0]*/14//$(function(){varjquery1=$(div1)[0];alert(jquery1.innerHTML);});1516/*JQuery修改样式css还有val*/17//$(function(){$('#div1').css(background,gray);});//css两个参数是设置值18//$(function(){alert($('#div1').css(background));});//css一个参数是取值19//$(function(){$('#myInput').val(newDate());});//val一个参数是设置值20//$(function(){alert($('#myInput').val());});//val没有参数是取值2122/script23/head24body25divid=div126fontcolor=red测试red/font27inputtype=textname=namevalue=kongid=myInput/28/div29/body30/html5、JQuery选择器（1、$(“#div1”).html();（2、$(TagName)来获取所有指定标签名的jQuery对象，相当于getElementsByTagName：例如获得所有的P：$(p).html(我们都是P);（3、标签选择器，拥有样式的标签选择器☆多条件选择器：$(p,div,span.menuitem)，同时选择p标签、div标签和拥有menuitem样式的span标签元素（类似于CSS选择器）☆注意选择器表达式中的空格不能多不能少。易错！☆层次选择器：☆☆$(divli)获取div下的所有li元素（后代，子、子的子……）☆☆$(divli)获取div下的直接li子元素☆☆$(.menuitem+div)获取样式名为menuitem之后的第一个div元素（不常用）☆☆$(.menuitem~div)获取样式名为menuitem之后所有的div元素（不常用）案例1：1!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==js/jquery-1.4.2.jstype=text/javascript/script67scripttype=text/javascript8$(function(){9$('.test').click(10function(){11alert($(this).text());12}13);14});15/script16styletype=text/css17.test{background-color:Red}18/style19/head20body21divid=div122pclass=test23test1/p24pclass=test25test2/p26pclass=test27test3/p28/div29/body30/html6、JQuery的迭代如何判断对象是否存在，jQuery选择器返回的是一个对象数组(数组中的每个对象还是Dom对象)，调用text()、html()、click()之类方法的时候其实是对数组中每个元素迭代调用每个方法，因此即使通过id选择的元素不存在也不会报错，如果需要判断指定的id是否存在，应该写：if($(#btn1).length=0){alert(id为btn1的元素不存在！);}7、节点遍历（1、next()方法用于获取节点之后的挨着的第一个同辈元素，（2、$(.menuitem).next(div)、nextAll()方法用于获取节点之后的所有同辈元素，$(.menuitem).nextAll(div)prev、prevAll之前的元素（3、siblings()方法用于获取所有同辈元素，$(.menuitem).siblings(li)siblings、next等所有能传递选择器的地方能够使用的语法都和$()语法一样。1!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==js/jquery-1.4.2.jstype