Jquery基本语法
一、jQuery的基本用法:
随着WEB2.0及ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名
的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等，
jQuery是继prototype之后的又一个优秀的Javascript框架。它是由John Resig 于2006 年初创建
的，它有助于简化JavaScript 以及Ajax 编程。
它具有如下一些特点：
1. 代码简练、语义易懂、学习快速、文档丰富。
2. jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。
3. jQuery支持CSS1-CSS3,以及基本的xPath。
4. jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
5. 可以很容易的为jQuery扩展其他功能。
6. 能将JS代码和HTML代码完全分离，便于代码和维护和修改。
7. 插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、
tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。
使用方法(同prototype)
在需要使用JQuery的页面中引入JQuery的js文件即可。
例如：
引入之后便可在页面的任意地方使用jQuery提供的语法。
二、学习教程及参考资料
请参照《jQuery中文API手册》和https://www.360docs.net/doc/8610063378.html,/visual/cn/index.xml
推荐两篇不错的jquery教程：《jQuery的起点教程》和《使用jQuery 简化Ajax 开发》(说明：以
上文档都放在了【附件】中)
三、语法总结和注意事项
1、关于页面元素的引用
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath 条件等
方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。
如:
01.$("#msg").html();-->通过ID
02.$("div").html(); $("input").val(); -->通过元素名(jQuery获取的是一个集合)
03.$("div p"); -->第一行代码得到所有
元素。
04.$("div.container") -->第二行代码得到class为container的
05.$("div #msg"); -->第三行代码得到
06.$("table a",context); -->第四行代码得到context为上下文的table里面所有的连接元素。
2、jQuery对象与dom对象的相互转换
2.1只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，普通的dom对
象一般可以通过$()转换成jquery对象。
如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。
2.2由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，
一般可通过索引取出。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：
01.$("#msg").html();
02.$("#msg")[0].innerHTML;
03.$("#msg").eq(0)[0].innerHTML;
04.$("#msg").get(0).innerHTML;
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获
取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。
如要获取第三个
01.$("div").eq(2).html(); //调用jquery对象的方法
02.$("div").get(2).innerHTML; //调用dom的方法属性
3、同一函数实现set和get
Jquery中的很多方法都是如此，主要包括如下几个：
01.$("#msg").html(); //返回id为msg的元素节点的html内容。
02.$("#msg").html("new content");
03.//将“new content”作为html串写入id为msg的元素节点内容中,页面显示粗体的new content
04.$("#msg").text(); //返回id为msg的元素节点的文本内容。
05.$("#msg").text("new content");
06.//将“new content”作为普通文本串写入id为msg的元素节点内容中,页面显示
new content
07.$("#msg").height(); //返回id为msg的元素的高度
08.$("#msg").height("300"); //将id为msg的元素的高度设为300
09.$("#msg").width(); //返回id为msg的元素的宽度
10.$("#msg").width("300"); //将id为msg的元素的宽度设为300
11.$("input").val("); //返回表单输入框的value值
12.$("input").val("test"); //将表单输入框的value值设为test
13.$("#msg").click(); //触发id为msg的元素的单击事件
14.$("#msg").click(fn); //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有这两种调用方法
4、几个有用的jQuery方法:
0)集合处理功能
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提
供的很方便的方法进行集合的处理。
包括两种形式：
01.$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
02.//为索引分别为0，1，2的p元素分别设定不同的字体颜色。
03.$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
04.//实现表格的隔行换色效果
05.$("p").click(function(){alert($(this).html())})
06.//为每个p元素增加了click事件，单击某个p元素则弹出其内容
1)$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。
2)$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。
如
01.$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
等价于：
01.var tempArr=[0,1,2];
02.for(var i=0;i 03. alert("Item #"+i+": "+tempArr[i]); 04.} 3)也可以处理json数据，如 01.$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " 02.+ n ); }); 结果为： https://www.360docs.net/doc/8610063378.html,:name, Value:John https://www.360docs.net/doc/8610063378.html,:lang, Value:JS 4)$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返 回生成的新数组。 如： 01.var tempArr=$.map( [0,1,2], function(i){ return i + 4; }); 02.tempArr内容为：[4,5,6] 03.var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; }); 04.tempArr内容为：[2,3] 5)$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。 如： 01.$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4] 6)$.trim(str)：删除字符串两端的空白字符。 如： 01.$.trim(" hello, how are you? "); //返回"hello,how are you? " 5、操作元素的样式 主要包括以下几种方式： 01.$("#msg").css("background"); //返回元素的背景颜色 02.$("#msg").css("background","#ccc") //设定元素背景为灰色 03.$("#msg").height(300); $("#msg").width("200"); //设定宽高 04.$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式 05.$("#msg").addClass("select"); //为元素增加名称为select的class 06.$("#msg").removeClass("select"); //删除元素名称为select的class 07.$("#msg").toggleClass("select"); //如果存在（不存在）就删除（添加）名称为select 的class 6、完善的事件处理功能 Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通 过jquery获取的对象添加事件。 如： 01.$("#msg").click(function(){alert("good")}) //为元素添加了单击事件 02.$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]}) //为三个不同的p 元素单击事件分别设定不同的处理 jQuery中几个自定义的事件： （1）hover(fn1,fn2)：当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移 出这个元素时，会触发指定的第二个函数。 01.//当鼠标放在表格的某行上时将class置为over，离开时置为out。 02.$("tr").hover(function(){ 03.$(this).addClass("over"); 04.}, 05. function(){ 06. $(this).addClass("out"); 07.}); （2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。 01.$(document).ready(function(){alert("Load Success")}) 02.//页面加载完毕提示“Load Success”,不同于onload事件，onload需要页面内容加载完毕（图片等 03.），而ready只要页面html代码下载完毕即触发。与$(fn)等价 （3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发 指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对 这两个函数的轮番调用。 01.//每次点击时轮换添加和删除名为selected的class。 02.$("p").toggle(function(){ 03. $(this).addClass("selected"); 04.},function(){ 05. $(this).removeClass("selected"); 06.}); （4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。 例如： 01.$("p").trigger("click"); //触发所有p元素的click事件 （5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定 从每一个匹配的元素中（添加）删除绑定的事件。 例如： 01.$("p").bind("click", function(){alert($(this).text());}); 02.//为每个p元素添加单击事件 03.$("p").unbind(); //删除所有p元素上的所有事件 04.$("p").unbind("click") //删除所有p元素上的单击事件 7、扩展我们需要的功能 01.$.extend({ 02. min: function(a, b){return a < b?a:b; }, 03. max: function(a, b){return a > b?a:b; } 04.}); //为jquery扩展了min,max两个方法 使用扩展的方法（通过“$.方法名”调用）： 01.alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20)); ----------->ajax编程,请见其它笔记. 8、渐入淡出 01.$("#msg").fadeIn("fast"); 02.$("#msg").fadeOut("slow"); 没错，上面两行代码已经分别实现了一个id为Msg的jquery对象的渐入和淡出。做一个像Gmail一样 的动态加载通知条，用jquery就那么简单。两个函数接受的参数除了快慢等，还可以接收整型，作 为渐入或淡出的完成时间，单位为MS。 9.plugin这也是一个插件的时代。 jquery插件给我的感觉清一色的清洁，简单。如Jtip，要使用它的功能，只需要在你的元素的class 上加上Jtip,并引入jtip.js及其样式即可以了。其他事情插件全包。我喜欢jquery的一个重要原因 是发现她已经有了很多很好，很精彩的插件。 10.解决自定义方法或其他类库与jQuery的冲突 很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义 了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用 于解决此问题。 使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之 前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法 $("#msg")改为jQuery("#msg")。 如： 01.jQuery.noConflict(); 02.// 开始使用jQuery 03.jQuery("div p").hide(); 04.// 使用其他库的$() 05.$("content").style.display = 'none'; (二)基于jQuery的Ajax用法: 基于JQuery框架的AJAX 在JQuery中，AJAX有三种实现方式：$.ajax(),$.post,$.get()。 (1)使用$.post实现Ajax向页面发送数据($.get()的用法与此相似) 01.$.post(’save.cgi’, {text: ‘my string’,number: 23}, function() { 02.alert(’Your data has been saved.’); 03.}); (2)如果您确实需要编写一些复杂的Ajax 脚本，那么需要用到$.ajax() 函数。您可以指定xml、 script、html 或者json，jQuery 将自动为回调函数准备合适的结果，这样您便可以立即使用该结果。还可以指定beforeSend、error、success 或者complete 回调函数，向用户提供更多有关Ajax 体验的反馈。 $.ajax() 使Ajax 由复杂变简单 01.$.ajax({ 02.url: ‘document.xml’, 03.type: ‘GET’, 04.dataType: ‘xml’, 05.timeout: 1000, 06.error: function(){ 07.alert(’Error loading XML document’); 08.}, 09.success: function(xml){ 10.// do something with xml 11.} 12.}); 另一实例: XHTML(主要): 代码: 复制内容到剪贴板 01.
03.
09.
10.
11.
JS:
1、引入jquery框架：
代码: 复制内容到剪贴板
01.
2、构建AJAX，JQUERY的好处是不需要在XHTML中使用JS代码来触发事件了，可以直接封装在JS
文件中：
代码: 复制内容到剪贴板
01.
02.
4、action逻辑与普通的ation写法无大区别。
JSON将Action里的状态信息序列化成JSON格式的数据
js和jquery获取父级元素、子级元素、兄弟元素的方法
原文地址：js和jquery获取父级元素、子级元素、兄弟元素的方法作者：草根gis 先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比。 JS的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行也当最DOM元素 原生的JS获取ID为test的元素下的子元素。可以用： var a = docuemnt.getElementById("test").getElementsByTagName_r("div"); 这样是没有问题的 此时a.length=2； 但是如果我们换另一种方法 var b =document.getElementByIdx_x("test").childNodes; 此时b.length 在IE浏览器中没问题，其依旧等于2，但是在FF浏览器中则会使4，是因为FF把换行也当做一个元素了。 所以，在此，我们就要做处理了，需遍历这些元素，把元素类型为空格而且是文本都删除。 functiondel_ff(elem){ varelem_child = elem.childNodes; for(vari=0; i< p=""> if(elem_child[i].nodeName == "#text" && !/s/.test(elem_child.nodeValue)) {elem.removeChild(elem_child)
} } } 上述函数遍历子元素，当元素里面有节点类型是文本并且文本类型节点的节点值是空的。就把他删除。 nodeNames可以得到一个节点的节点类型，/s/是非空字符在JS里的正则表达式。前面加！,则表示是空字符 test() 方法用于检测一个字符串是否匹配某个模式.语法是：RegExpObject.test(string) 如果字符串string 中含有与RegExpObject 匹配的文本，则返回true，否则返回false。 nodeValue表示得到这个节点里的值。 removeChild则是删除元素的子元素。 之后，在调用子，父，兄，这些属性之前，调用上面的函数把空格清理一下就可以了 下面介绍JQUERY的父，子，兄弟节点查找方法 jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素
jQuery常用功能大全
jQuery常用功能大全 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery 对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。 普通的dom对象一般可以通过$()转换成jquery对象。 如：$(document.getElementByIdx_x("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、如何获取jQuery集合的某一项 对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery 对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个
jquery选择器 之 获取父级元素、同级元素、子元素
jquery选择器之获取父级元素、同级元素、子元素 1、父级元素 1.1 parent() 方法返回被选元素的直接父元素。 如：$("span").parent(); 1.2 parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素()。 如：$("span").parents();
也可以使用可选参数来过滤对祖先元素的搜索。 如：$("span").parents("ul"); 1.3 parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。 如：$("span").parentsUntil("div");
2、同胞 2.1 siblings() 方法返回被选元素的所有同胞元素。如：$("h2").siblings(); 返回属于
的同胞元素的所有元素： $("h2").siblings("p");
2.2 next() 方法返回被选元素的下一个同胞元素。 如：$("h2").next(); 2.3 nextAll() 方法返回被选元素的所有跟随的同胞元素。如：$("h2").nextAll();
2.4 nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。 如：$("h2").nextUntil("h6");
2.5 prev(), prevAll() 以及prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素。 3、子元素 3.1 children() 方法返回被选元素的所有直接子元素。 如：$("div").children(); 返回类名为"1" 的所有元素，并且它们是
jquery学习总结(超级详细)
window.onload $(document).ready() 执 行时机必须等待网页中所有的内容加载完毕后（包括 图片）才能执行 网页中所有DOM结构绘制完毕后就 执行，可能DOM元素关联的东西并 没有加载完 编写个数不能同时编写多个，以下代码无法正确执行： window.onload =function({alert("test1");}window.onload = function(){alert("test2");}结果只会输出 "test2" 能同时编写多个 简 化写法无 $(document).ready(function(){}); 可以简写成$(function(){}); 一、选择网页元素 jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。 使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。 选择表达式可以是CSS选择器： $(document)//选择整个文档对象 $('#myId')//选择ID为myId的网页元素 $('div.myClass')//选择class为myClass的div元素 $('input[name=first]')//选择name属性等于first的input元素 也可以是jQuery特有的表达式： $('a:first')//选择网页中第一个a元素 $('tr:odd')//选择表格的奇数行 $('#myForm :input')//选择表单中的input元素 $('div:visible') //选择可见的div元素 $('div:gt(2)')//选择所有的div元素，除了前三个 $('div:animated')//选择当前处于动画状态的div元素
jQuery选择器
$的选择器部分: 凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.但是,很让人兴奋的是,他支持常见的浏览器,而css中很多选择器是IE6所不支持的. 1.基本选择器(3种): $("标签名"),如$("p")是选取了所有的p标签节点 $("#id名"),如$("#test")是选取了id为test的标签节点 $(".class名"),如$(".test")是选取了所有class为test的标签节点 上面的$("标签名")和$(".class名")返回的都是所有满足的节点,至于进一步筛选可以添加一些函数,如eq,gt,lt 等等. 2.组选择器: 下面还是现做一个约定:把"标签名或#id名或.class名"记作mix,则mix表示一个标签名,或一个#id或一个.class. $("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3") 3.后代选择器: $("mix mix"),当然可以是多个嵌套,但后代选择器可以是深层子代,所以$("mix mix mix ...")这种写法作用不大.例子:$("div .test"):在div标签内的所有具有test的class的后代元素(就是被div嵌套的class属性为test 的标签) 可以见DEMO。 4.子选择器: $("mix>mix"),这个放在后代选择器后面是为了和它做对比.子选择器只能选择第一代子代.不处理深层嵌套.例子: $("div>.test")
在$("div + #test")中能取到p段落节点
则不能取到 6.属性选择器: 把属性选择器不放在css选择器里面是因为jQuery中写法是不一样的.至于css中写法可以参考我之前写的一篇css的选择器一文.jQuery中是和xPath类似的写法: $("mix[@attr]"):选取所有该mix且具有attr属性的节点 $("mix[@attr=a_value"]):选取所有该mix且具有attr属性并满足属性值为a_value的节点 $("mix[@attr^=a_value_head"]):attr属性的属性值是以a_value_head开头的 $("mix[@attr$=a_value_end"]):attr属性的属性值是以a_value_end结尾的 $("mix[@attr*=a_value"]):attr属性的属性值中包含a_value 7.进一步选择器:
jquery