搜索
JQuery基础学习Jquery简介jQuery是一个简洁快速灵活的JavaScript框架，它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。使用方法在需要使用JQuery的页面中引入JQuery的js文件即可。例如：scripttype=text/javascriptsrc=js/jquery.js/script引入之后便可在页面的任意地方使用jQuery提供的语法。学习教程及参考资料请参照《jQuery中文API手册》，附件中包含JQueryAPI语法总结和注意事项：1、关于页面元素的引用通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。2、jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。普通的dom对象一般可以通过$()转换成jquery对象。如：$(document.getElementById(msg))则为jquery对象，可以使用jquery的方法。由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。如：$(#msg)[0]，$(div).eq(1)[0]，$(div).get()[1]，$(td)[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。以下几种写法都是正确的：$(#msg).html();$(#msg)[0].innerHTML;$(#msg).eq(0)[0].innerHTML;$(#msg).get(0).innerHTML;3、同一函数实现set和getJquery中的很多方法都是如此，主要包括如下几个：$(#msg).html();//返回id为msg的元素节点的html内容。$(#msg).html(bnewcontent/b);//将“bnewcontent/b”作为html串写入id为msg的元素节点内容中,页面显示粗体的newcontent$(#msg).text();//返回id为msg的元素节点的文本内容。$(#msg).text(bnewcontent/b);//将“bnewcontent/b”作为普通文本串写入id为msg的元素节点内容中,页面显示粗体的bnewcontent/b$(#msg).height();//返回id为msg的元素的高度$(#msg).height(300);//将id为msg的元素的高度设为300$(#msg).width();//返回id为msg的元素的宽度$(#msg).width(300);//将id为msg的元素的宽度设为300$(input).val();//返回表单输入框的value值$(input).val(test);//将表单输入框的value值设为test$(#msg).click();//触发id为msg的元素的单击事件$(#msg).click(fn);//为id为msg的元素单击事件添加函数同样blur,focus,select,submit事件都可以有着两种调用方法4、集合处理功能对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。包括两种形式：$(p).each(function(i){this.style.color=['#f00','#0f0','#00f']})//为索引分别为0，1，2的p元素分别设定不同的字体颜色。$(tr).each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})//实现表格的隔行换色效果$(p).click(function(){.html())})//为每个p元素增加了click事件，单击某个p元素则弹出其内容5、支持方法的连写所谓连写，即可以对一个jquery对象连续调用各种不同的方法。例如：$(p).click(function(){.html())}).mouseover(function(){}).each(function(i){this.style.color=['#f00','#0f0','#00f']});6、几个有用的Jquery方法$.each(obj,fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。如$.each([0,1,2],function(i,n){;});等价于：vartempArr=[0,1,2];for(vari=0;itempArr.length;i++){}也可以处理json数据，如$.each({name:John,lang:JS},function(i,n){;});结果为：Name:name,Value:JohnName:lang,Value:JS7、解决自定义方法或其他类库与jQuery的冲突很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$(#msg)改为jQuery(#msg)。如：jQuery.noConflict();//开始使用jQueryjQuery(divp).hide();//使用其他库的$()$(content).style.display='none';$(selector)$()函数返回的不再是一个普通的dom对象，而是一个封装好的JQuery对象，可以通过调用jQuery对象的相应方法操作dom对象，是为了屏蔽不同浏览器底层的差异（即对dom模型支持不完善）。关于jQuery中的ready函数是这样解释的,引用于:jQuery中文API.ready(handler):当DOM完全加载完成时，执行一个函数window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕.$(document).ready(function(){//dostuffwhenDOMisready});jQuery会让代码变得更短从而更容易理解和维护，下面是$(document).ready(callback)的缩写法：$(function(){//codetoexecutewhentheDOMisready});下面例子对应的html文件在starterkit中，对应的js文件为custom.js。可以解压jquery-starterkit.zip文件，进行实践测试。例一：//等待dom元素加载完毕.$(document).ready(function(){$(a).click(function(){alert(Helloworld!);});});可改为：$(function(){$(a).click(function(){alert(Helloworld!);});});$(a)是一个jQuery选择器(selector),在这里，它选择所有的a标签（注：即a/a），$号是jQuery“类”(jQueryclass)的一个别称，因此$()构造了一个新的jQuery对象(jQueryobject)。函数click()是这个jQuery对象的一个方法，它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法.例二：通常的javascript写法document.getElementById(orderedlist).在jQuery中，我们这样做：$(document).ready(function(){$(#orderedlist).addClass(red);//这里将starterkit中的一个CSS样式red附加到了orderedlist上});$(document).ready(function(){$(#orderedlistli).addClass(blue);//所有orderedlist中的li都附加了样式blue。});现在我们再做个复杂一点的，当把鼠标放在li对象上面和移开时进行样式切换，但只在list的最后一个element上生效。$(document).ready(function(){$(#orderedlistli:last).hover(function(){$(this).addClass(green);},function(){$(this).removeClass(green);});});例三：$(document).ready(function(){$(#orderedlist).find(li).each(function(i){$(this).html($(this).html()+BAM!+i);});});find()让你在已经选择的element中作条件查找,因此$(#orderedlist).find(li)就像$(#orderedlistli)一样。each()方法迭代了所有的li，并可以在此基础上作更多的处理。大部分的方法,如addClass(),都可以用它们自己的each()。在这个例子中,html()用来获取每个li的html文本,追加一些文字，并将之设置为li的html文本。（注：从这个例子可以看到.html()方法是获取对象的html代码，而.html('xxx')是设置'xxx'为对象的html代码）。例四：$(document).ready(function(){//usethistoresetseveralformsatonce$(#reset).click(function(){//$(form)[0].reset();//这个代码选择了所有的form元素，并在其中的第一个上call了一个reset()。$(form).each(function(){this.reset();});});});这样你在点击Reset链接后，就选择了文档中所有的form元素，并对它们都执行了一次reset()。例五：$(document).ready(function(){$('#faq').find('dd').hide().end().find('dt').click(function(){varanswer=$(this).next();if(answer.is(':visible')){answer.slideUp();}else{answer.slideDown();}});});这里我们用了一些链式表达法来减少代码量，而且看上去更直观更容易理解。像'#faq'只选择了一次，利用end()方法，第一次find()方法会结束(undone)，所以我们可以接着在后面继续find('dt')，而不需要再写$('#faq').find('dt')。在点击事件中的，我们用$(this).next()来找到dt下面紧接的一个dd元素，这让我们可以快速地选择在被点击问题下面的答案。例六：$(document).ready(function(){$(a).hover(function(){$(this).parents(p).addClass(highlight);},function(){$(this).pare