下载文档原格式
jq 是一个强大的且轻量级的命令行JSON 处理器。
下面是一些 jq 的英文转中文的示例：获取JSON对象的属性英文：jq '.name' < file.json中文：jq '.name' file.json过滤JSON对象英文：jq 'select(.age > 25)' < file.json中文：jq 'select(.age > 25)' file.json转换JSON对象英文：jq '{"name": .name, "age": .age * 2}' < file.json中文：jq '{"name": .name, "age": .age * 2}' file.json排序JSON对象英文：jq '.[] | sort_by(.age)' < file.json中文：jq '.[] | sort_by(.age)' file.json删除JSON对象的属性英文：jq 'del(.address)' < file.json中文：jq 'del(.address)' file.json过滤和排序的组合英文：jq 'sort_by(.age) | .[0]' < file.json中文：jq 'sort_by(.age) | .[0]' file.json提取嵌套的JSON属性英文：jq '' < file.json中文：jq '' file.json使用变量英文：jq --arg name "John" '.name=$name' < file.json中文：jq --arg name "John" '.name=$name' file.json过滤多个条件英文：jq 'select(.age > 25) and .name == "John"' < file.json中文：jq 'select(.age > 25) and .name == "John"' file.json过滤数组中的元素英文：jq '.[1]' < file.json (获取数组的第二个元素) 中文：jq '.[1]' file.json (获取数组的第二个元素)。
jQuery技术学习文档注:本学习文档的jQuery版本为1.4，参考资料来自和jQuery1.4参考手册目录1．jQuery简介------------------------------------------------------------------------------- 2．jQuery语法------------------------------------------------------------------------------- 3．jQuery选择器------------------------------------------------------------------------------- 4．jQuery事件------------------------------------------------------------------------------- 5．jQuery效果------------------------------------------------------------------------------- 6．jQuery Callback------------------------------------------------------------------------------- 7．jQuery HTML------------------------------------------------------------------------------- 8．jQuery CSS------------------------------------------------------------------------------- 9．jQuery AJAX------------------------------------------------------------------------------- 总结-----------------------------------------------------------------------------------------------一、jQuery简介jQuery是一个javascript函数库，包含以下特性html元素选取、html元素操作、css操作、html 事件函数、javascript特效和动画、html dom遍历和修改、ajax 和Utilities等等。
目录1Accordion（可折叠标签） (3)1.1实例 (3)1.2参数 (4)2DateBox（日期框） (4)2.1实例 (4)2.2参数 (7)2.3事件 (7)2.4方法 (7)3ComboBox(组合框) (7)3.1实例 (7)3.2参数 (9)3.3事件 (10)3.4方法 (10)4Dialog（对话框） (10)4.1实例 (10)4.2参数 (12)4.3事件 (13)4.4方法 (13)5Messager（提示框） (13)5.1实例 (13)5.2方法 (16)5.3扩展 (17)6NumberBox（数字框） (17)6.1实例 (17)6.2参数 (18)7ValidateBox（验证框） (18)7.1实例 (18)7.2参数 (20)7.3方法 (20)7.4扩展 (20)8Pagination（分页） (21)8.1实例 (21)8.2参数 (22)8.3事件 (23)9Window（窗口） (23)9.1实例 (23)9.2参数 (26)9.3事件 (26)9.4方法 (26)10Panel（面板） (26)10.1实例 (26)10.2参数 (28)10.3事件 (29)10.4方法 (29)11Tabs（标签） (30)11.1实例 (30)11.2参数 (32)11.3事件 (32)11.4方法 (33)11.5标签面板属性 (33)12Tree（树） (33)12.1实例 (33)12.2参数 (36)12.3事件 (37)12.4方法 (37)13Layout（布局） (38)13.1实例 (38)13.2参数 (39)13.3方法 (39)14Datagrid（数据表） (39)14.1实例 (40)14.2参数 (43)14.3Column参数 (44)14.4事件 (45)14.5方法 (46)1Accordion（可折叠标签）1.1实例1.1.1代码<html><head><meta http-equiv="Content-Type"content="text/html; charset=UTF-8"><title>jQuery EasyUI</title><link rel="stylesheet"type="text/css"href="../themes/default/easyui.css"><link rel="stylesheet"type="text/css"href="../themes/icon.css"><script type="text/javascript"src="../jquery-1.4.2.min.js"></script><script type="text/javascript"src="../jquery.easyui.min.js"></script><script type="text/javascript">$( function() {$('#aa').accordion( {width : 400,height : 200,fit : false});});</script></head><body><div id="aa"border="true"><div title="Title1"icon="icon-save" style="overflow: auto; padding: 10px;"> <h3style="color: #0099FF;">Accordion for jQuery</h3><p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p></div><div title="Title2"icon="icon-reload"selected="true"style="padding: 10px;">content2</div><div title="Title3">content3</div></div></body></html>1.1.2效果图1.1.3 扩展实例html代码中<div id="aa"border="true">此行也可写成<div id="aa" class="easyui-accordion" style="width:300px;height:200px;" fit="false" border="false">，并且将js代码全部去掉，效果图是一样的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /><meta name="robots" content="all" /><meta name="author" content="" /><meta name="Copyright" content="Copyright All Rights Reserved." /><meta name="MSSmartTagsPreventParsing" content="true" /><meta http-equiv="imagetoolbar" content="false" /><link rel="stylesheet" type="text/css" href="c5.css"tppabs="/c5.css" /><link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /><title>jQuery 教程</title></head><body class="browserscripting"><div id="wrapper"><div id="header"><a href="javascript:if(confirm('/index.html \n\n该文件无法用 Teleport Ultra 下载, 因为它是一个域或路径外部被设置为它的启始地址的地址。
目录部分常用方法速查 (2)选择器 (2)表单选择器 (4)属性 (5)节点匹配 (6)文本处理 (12)Css (13)事件 (15)动画效果 (18)Ajax (20)其他 (24)Ajax (24)1. load( url, [data], [callback] ) (24)2. jQuery.get( url, [data], [callback] ) (25)3. jQuery.post( url, [data], [callback], [type] ) (26)4. jQuery.getScript( url, [callback] ) (27)5. jQuery Ajax 事件 (27)6. jQuery.ajax( options ) (29)7. jQuery.ajaxSetup( options ) (31)8. serialize() 与serializeArray() (31)1部分常用方法速查$()如果()内是css选择器：找到相应的节点包装成JQuery对象DOM对象：直接包装成JQuery对象一段HTML代码：先创建DOM对象，再包装成JQuery对象$("<div></div>").appendTo($(obj))返回jQuery$(#id)根据给定的ID匹配一个元素。
返回jQuery$(element)根据给定的元素名匹配所有元素返回Array<Element(s)>$(.class)根据给定的类匹配元素。
返回Array<Element(s)>$(*)匹配所有元素返回Array<Element(s)>$(selector1,selector2,selectorN)将每一个选择器匹配到的元素合并后一起返回。
返回Array<Element(s)>选择器parent > child取得<div>下的所有<span>子节点$("div > span")返回Array<Element(s)>:first选取所有<div>元素中第一个<div>元素$("div:first")返回jQuery:last选取所有<div>元素中最后一个<div>元素$("div:last")返回jQuery:not(Selector)选取所有class不是mytest的<div>元素$("div:not(.mytest)")返回Array<Element(s)>:even查找表格的偶数行，从0开始计数$("tr:even")返回Array<Element(s)>:odd查找表格的奇数行，从0开始计数$("tr:odd")返回Array<Element(s)>:eq(index)匹配一个给定索引值的元素，从0开始计数$("tr:eq(1)")返回Array<Element(s)>:gt(index)匹配所有大于给定索引值的元素，从0开始计数$("tr:gt(0)")返回Array<Element(s)>:lt(index)匹配所有小于给定索引值的元素，从0开始计数$("tr:lt(2)")返回Array<Element(s)>:animated选取当前正在执行动画的所有元素$(":animated")返回Array<Element(s)>:contains(string)选取所有文本内容包含“关键词”的<div>元素$("div:contains('关键词')")返回Array<Element(s)>:has查找所有含有<p>子元素的<div>父元素$("div:has(p)")返回Array<Element(s)>:empty选取所有空<div></div>的元素$("div:empty")返回Array<Element(s)>:visible查找所有可见元素$("tr:visible")返回Array<Element(s)>[attribute = value]选取文本输入框的input元素$("input[type=text]")返回Array<Element(s)>[attribute != value]选取所有不是hidden的input元素，注意，没有type属性的input也会被选取$("input[type!=hidden]")返回Array<Element(s)>[attribute ^= value]选取开头为mailto:的所有a链接$("a[href^='mailto']")返回Array<Element(s)>[attribute $= value]选取所有结尾为.jpg的img图片$("img[src$='.jpg']")返回Array<Element(s)>表单选择器:input查找所有的input元素（包括input, textarea, select和button）$(":input")返回Array<Element(s)>:password查找所有密码框$(":password")返回Array<Element(s)>:text查找所有单行文本框$(":text")返回Array<Element(s)>:radio查找所有单选按钮$(":radio")返回Array<Element(s)>:checkbox查找所有复选框$(":checkbox")返回Array<Element(s)>:checked查找所有选中的checkbox, radio$("input:checked")返回Array<Element(s)>:selected查找所有选中的选项元素$("select:selected")返回Array<Element(s)>属性attr(key) attr(key,value)设置一个属性的值HTML:<img src="test.jpg"/>jQuery:$("img").attr("src");Result:test.jpg返回jQueryremoveAttr(key)删除一个属性HTML:<img src="test.jpg"/>jQuery:$("img").removeAttr("src");Result:[<img /> ]返回jQueryaddClass(class)追加指定的类名HTML:<p>Hello</p>jQuery:$("p").addClass("selected highlight");Result:[ <p class="selected highlight">Hello</p> ] 如果要替换样式，用attr() 返回jQueryremoveClass()移除样式Html:<p class="red">你最喜欢的是？</p>JQuery:$("p").removeClass("red");Result:<p >你最喜欢的是？</p>可以同时移除多个样式：$("p").removeClass("red bold");或者全部移除样式：$("p").removeClass();返回jQuerytoggleClass()如果节点存在该样式，则移除，不存在，则追加$("p").toggleClass("blue");返回jQueryhasClass(class)判断节点是否存在该样式，返回布尔值$("p").hasClass("blue"); 该方法等价于：$("p").is(".blue"); 返回jQueryhtml()取得或设置文本内容类似innerHTML()仅可用于html文档返回String/jQuerytext()取得或设置文本内容类似innerText()可以用于html和xml文档返回String/jQueryval()取得或设置input文本框的值Html：<input type="text" id="searchbox" value="搜索的内容…" /> JQuery:$("searchbox").focus(function(){if(this.val()=="搜索的内容…"){this.val("")}});$("searchbox").blur(function(){if(this.val()==""){this.val(this.defaultValue)}});this.defaultValue 表示input文本框的默认value通过val()还能做到将表单多选框,checkbox,radio事先选中：$(":checkbox").val(["check2","check3"]);$(":radio").val(["radio2"]);返回String/Array节点匹配each(callback)为每一个匹配的元素执行一个函数迭代两个图像，并设置它们的src 属性注意此处this 指代的是DOM 对象而非jQuery 对象HTML:<img/><img/>jQuery:$("img").each(function(i){this.src = "test" + i + ".jpg";});Result:[ <img src="test0.jpg" />, <img src="test1.jpg" /> ]返回jQuerysize()/length获取对象中元素的个数$("img").size();$("img").length;返回Numberindex([subject])匹配的元素，并返回相应元素的索引值，从0开始计数HTML:<ul><li id="foo">foo</li><li id="bar">bar</li><li id="baz">baz</li></ul>jQuery:$('li').index($('#bar')); //1$('li').index($('li:gt(0)')); //1$('#bar').index('li'); //1$('#bar').index(); //1返回Numberget()/get(index)get():以数组形式取得所有匹配的节点集合get(index) :index存在则从中选择某一个DOM节点HTML:<img src="test1.jpg"/><img src="test2.jpg"/>jQuery:$("img").get(0);Reslut:[ <img src="test1.jpg"/> ]返回Array<Element>/ Elementeq(index)以对象形式获取第index个元素，位置从0算起获取匹配的第二个元素HTML:<p> This is just a test.</p><p> So is this</p>jQuery:$("p").eq(1)Result:[ <p> So is this</p> ]补充 .get(index)和.eq(index)的区别.get(index)返回的是一个html数组.eq(index)返回的是一个Jquery对象$("ul li").get(1).css("color", "red");//这个是错误的$("ul li").eq(1).css("color", "red");//这个是正确的同理将JQuery对象转换为DOM对象可以使用get alert一个非JQuery对象，如：var $cr = $("#cr");var cr = $cr.get(0);alert(cr.checked);返回jQueryfirst()获取匹配的第一个元素$('li').first() 等价于$('li:first')返回jQuerylast()获取匹配的最后一个元素$('li').last() 等价于$('li:last')返回jQueryfilter(fn)筛选出与指定函数返回值匹配的元素集合保留子元素中不含有ol的元素。
Jquery UI dialog 详解(中文)1 属性1.11 autoOpen ，这个属性为true的时候dialog被调用的时候自动打开dialog窗口。
当属性为false的时候，一开始隐藏窗口，知道.dialog("open")的时候才弹出dialog窗口。
默认为：true。
1.12 初始化例：请注意，$('.selector')是dialog 的类名，在本例中.selector=#dialoag,以后不再说明。
$('.selector').dialog({ autoOpen: false });1.13 初始化后，得到和设置此属性例：//获得var autoOpen = $('.selector').dialog('option', 'autoOpen');//设置$('.selector').dialog('option', 'autoOpen', false);1.21 bgiframe 默认为false ，When true, the bgiframe plugin will be used, to fix the issue in IE6 where select boxes show on top of other elements, regardless of zIndex. Requires including the bgiframe plugin. Future versions may not require a separate plugin.在IE6下，让后面那个灰屏盖住select。
1.22 初始化例：$('.selector').dialog({ bgiframe: true });1.23 初始化后，得到和设置：//获取var bgiframe = $('.selector').dialog('option', 'bgiframe');//设置$('.selector').dialog('option', 'bgiframe', true);1.31 buttons 显示一个按钮，并写上按钮的文本，设置按钮点击函数。
jQuery 1.4中文文档按照惯例，我们提供了两份jQuery的拷贝，一份是最小化的(我们现在采用Google Closure作为默认的压缩工具了)，一份是未压缩的(供纠错或阅读)。
∙jQuery压缩(23kb Gzipped)∙jQuery常规(154kb)另外，Google也在他们的服务器上放置了一份jQuery的拷贝。
这份拷贝会自动的最小化然后压缩–并且放在Google最快的缓存服务器上。
∙/ajax/libs/jquery/1.4/jquery.min.js你可以在你的站点上直接引用上面的URL，这样就可以享受迅速加载jQuery的性能优势了。
就jQuery1.4来说，我们努力的减少大规模升级中的麻烦–通过保持所有public函数的签名。
即使如此，还请通读可能会造成问题的变更列表，这样能够了解哪些变更可能会给你的应用造成问题。
(功能) Features下面的内容概括了jQuery1.4里加入的变更和功能。
另外所有的变更都已经在jQuery 1.4 的文档里记录了。
热门方法经过了性能上的大”检修”不少比较热门的和常用的jQuery方法在1.4里被重写了。
(译注:重写了方法的内部，外部调用没有大幅度改变) 我们分析源码的时候发现我们能够获得大幅的性能提升，通过把jQuery和自己比较: 查看内部函数被调用了多少次，然后努力降低源码的复杂度(译注:计算机算法中的Complexity)View the cropped chart.在1.4版里我们显著的降低了大部分热门jQuery方法的的复杂度。
更易用的设置函数(Easy Setter Functions)算来已经有一阵了，你们已经可以给.attr()传递一个函数，然后这个函数的结果会被用来赋给相应的HTML属性(attribute)上。
这个功能现在被移植到所有的设置函数了: .css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .befor e(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass (), .removeClass(), 以及.toggleClass().另外, 对于下面几个方法，当前的值会被作为第2个变量传递给这个函数。
.css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .offse t(), .addClass(), .removeClass(), 以及.toggleClass().这样代码就可以这样写:// 找出所有A标签里的'&'字符，然后用一个span标签包围$('a').html(function(i,html){return html.replace(/&/gi,'&');});// 给一些链接的title属性加些信息$('a[target]').attr("title",function(i,title){return title +" (新窗口打开)";});Ajax嵌套参数的序列化(jQuery.param() 文档, Commit 1, Commit 2)jQuery 1.4在jQuery.param方法里加入了嵌入参数序列化的支持，借用了PHP编程里兴起的，而后又被Ruby on Rails推广开来的方式。
举例来说，{foo: ["bar", "baz"]}会被序列化为“foo[]=bar&foo[]=baz”.在jQuery 1.3版里, {foo: ["bar", "baz"]}曾被序列化为“foo=bar&foo=baz”. 但是，这样做没用办法将只含有一个元素的阵列编码。
如果你需要旧的序列化方式，你可以设置传统Ajax设置来进行切换。
(使用jQuery.ajaxSettings.traditional进行全局切换，或者根据情况单独切换。
总共有3种方式可以切换到旧的序列化方式:// 全局改变序列化方式 (使用旧的)jQuery.ajaxSettings.traditional=true;// 指定情况使用旧的序列化方式jQuery.param( stuff,true);// 针对一个单独的Ajax请求使用旧的序列化方式$.ajax({ data: stuff, traditional:true});更多信息参见: jQuery.param() 文档, jQuery.ajax() 文档, Commit, CodeJSON和脚本类型通过”content-type”自动识别。
(jQuery.ajax 文档, Commit 1, Commit 2)如果一个Ajax请求的回复的媒体类型是JSON(application/json), dataType默认设为”json”(如果dataType没有被指明)。
另外，如果回复的媒体类型是Javascript(application/javascript), dataType默认设为”script”(同样，如果dataType没有明确指明), 这种情况下，脚本会自动运行。
加入了Etag的支持(jQuery.ajax() 文档, Commit)默认设置下, jQuery会忽略Ajax请求的”Last-Modified”页头。
这样做是为了忽略浏览器的缓存。
设置ifModified:true就可以使jQuery使用可用的缓存。
jQuery1.4还会发出”If-None-Match”的页头如果你设置了ifModified选项。
严格JSON模式，本地的JSON.parse方法(jQuery.ajax() 文档, Commit 1, Commit 2, Commit 3)jQuery 1.3和以前的版本曾使用Javascript的eval对引入的JSON解析。
1.4版则会使用本地的JSON解析器，前提是如果有本地的解析器可用。
它也会对引入的JSON进行校验。
所以在jQuery.getJSON方法里，或当一个Ajax请求的dataType是”json”的时候，jQuery 会拒绝不合标准的JSON(例如{foo: "bar"})。
序列化HTML5的元素(jQuery.param() 文档, Commit)新的HTML5输入方法(比如‟datetime‟和‟range‟)在序列化.serialize()一个表单的时候会被包括在内。
Ajax请求的环境(jQuery.ajax() 文档, Commit)你可以附加一个”环境”到Ajax请求上，所有的回调函数里都会拥有同样的”环境”设置(这样可以简化你的代码，尽可能避免使用闭合,或是其他对象)。
jQuery.ajax({url:"test.html",context: document.body,success:function(){jQuery(this).addClass("done");}});请求成功回调函数的第三个参数会被设为原始的XHR对象(jQuery.ajax() 文档, Commit)所有的Ajax请求的成功回调函数现在都会收到原始的XMLHttpRequest对象，作为第三个参数。
之前这个XHR对象只能通过$.ajax一类方法的返回值来获取。
明确设置”Content-Type” (jQuery.ajax() 文档, Commit)在1.3版，如果没有实际数据发送，jQuery.ajax的contentType会被忽略。
1.4版里，contentType将总是和请求一同发送。
这修复了某些后台凭靠”Content-Type”页头判断回复类别所造成的问题。
明确设置JSONP回调函数的名字(jQuery.ajax 文档, Commit)你可以使用jQuery.ajax()方法的jsonpCallback选项，通过名字来指定JSONP的回调函数。
防止启动前跨域XHR (Commit)跨域Ajax(针对提供支持的浏览器)将更易用，因为默认设置下，启动前XHR被阻止了。
(TODO)jQuery.ajax()现在使用”onreadystatechange”事件替换了计时器(Commit)使用”onreadystatechange”替换了轮流探询，Ajax请求现在将使用更少的资源元素属性(Attributes).css()和.attr()的性能被优化了。
<.attr()方法多了一个设置函数作为参数(.attr() 文档)你不但可以将一个函数用在.attr()里，还可以在这个函数里使用属性的当前值。
jQuery('<img src="enter.png" alt="enter your name" />') .attr("alt",function(index, value){return"Please, "+ value;});.val( Function ) (.val() 文档)<input class="food"type='text' data-index="0"/><input class="food"type='text' data-index="1"/>jQuery("input:text.food").hide();jQuery("<ul class='sortable'><li>PeanutButter</li><li>Jelly</li></ul>").sortable().bind("endsort",function(){$(":text.food").val(function(){return $("ul.sortable li:eq("+$(this).attr("data-index")+")").text();});});text和CDATAHTML元素也支持.text()方法了(.text() 文档, Commit)核心(Core)快捷元素创建(jQuery() 文档, Commit)现在当你需要使用jQuery函数创建一个元素的时候，你可以同时附递一个对象来指定属性值和事件:jQuery("",{id: "foo",css:{height: "50px",width: "50px",color: "blue",backgroundColor: "#ccc"},click:function(){$(this).css("backgroundColor", "red");}}).appendTo("body");对象里的键值的名字与相关的jQuery的方法的名字是对应的，对象的值会被作为参数传递给jQuery的方法。
