jQuery 学习笔记

Jquery学习笔记Jquery 学习笔记--方法大集合【转载】2009-02-25 10:40本笔记翻译自：可视JQuery1.$()的用法1.1 $(html) ＝>根据ＨＴＭＬ参数动态建立一个jquery对像例子：$(”<div>hello</div>”).appendTo(”#body”),动态的创建一个div element插入到ID为body的element中去1.2 $(element) =>把节点对像转化成一个jquery对像例子:$(document.body).background( “black” );1.3 $(function) =>是$(doucment).ready()的快捷键．当页面加载结束后才会执行function．$(function)可以调用多次，相当于绑定多个$(function)eg: $(function(){//document is ready})1.4 $(expr,context)=>在一定的范围（context）内根据搜索条件(expr)搜索出jQuery对像eg: 1. $(’span>p’) :找出所有span中的p结点．2.$(’input:radio’,document.forms[0])搜索出第一个表单中的radio2. $.extend(prop)向jquery命名空间中添加方法,用此方法可以方便的对jquery进行扩展$.extend({min: function(a, b) { return a < b ? a : b; },max: function(a, b) { return a > b ? a : b; }});alert($.min(3,6)); //显示3alert($.max(3,6));//显示63. $.noConflict() 取消$代替jQuery.例如:jQuery.noConflict(); // Do something with jQueryjQuery(”div p”).hide();// Do something with another library’s $()$(”content”).style.display = ‘none’;4. each(function) 对所以符合条件的结点做为参数调用function例如:$(”img”).each(function(i){ this.src=”test” + i + “.jpg”; });结果：<img/><img/>==》<img src=”test0.jpg”/><img src=”test1.jpg”/>5．eq(pos)取得对像element数组的第Ｎ＋１个element例如：$(”p”).eq(1)<p>This is just a test.</p><p>So is this</p>=》<p>So is this</p>6. get() 取得所有的element数组例如: $(”img”).get();<img src="test1.jpg"/> <img src="test2.jpg"/> ===>[ <img src="test1.jpg"/> <img src="test2.jpg"/> ]get(num)可以取得指定的element例如:$("img").get(1)<img src="test1.jpg"/> <img src="test2.jpg"/> ===>[<img src="test2.jpg"/> ]7．index(subject) : 查找相应节点的位置，从０开始计数.如果没找到返回-1eg: <div id=”foobar”><b></b><span id=”foo”></span></div>$("*").index( $('#foobar')[0] ) =>0$("*").index( $('#foo')[0] ) => 2$("*").index( $('#bar')[0] )=> -18. length 返回节点的个数eg:<img src="test1.jpg"/> <img src="test2.jpg"/>$("img").length => 2同样的方法还有size()$("img").size() => 2;9. lt(pos) 删除一个节点eg:<p>This is just a test.</p><p>So is this</p>$("p").lt(1) ==>[ <p>This is just a test.</p> ]10. addClass 给一个element添加class可以添加多个eg: <p>Hello</p>$("p").addClass("selected")=>[ <p class="selected">Hello</p> ]$("p").addClass("selected highlight")=>[ <p class="selected highlight">Hello</p> ]11. attr(name) 取得element的指定属性值eg: <img src="test.jpg"/>$("img").attr("src") =>test.jpg;attr(key,value) 设置属性attr(key,function) 调用相应的方法处理后的返回值用来设置属性attr(properties) 批量的设置element的属性值eg: <img/>$("img").attr({ src: "test.jpg", alt: "Test Image" });==> <img src="test.jpg" alt="Test Image"/>$("img").attr("src","test.jpg")=><img src="test.jpg"/>以下两个方法等价:$("img").attr("title", "${this.src}")$("img").attr("title", function() { return this.src })==><img src="test.jpg" title="test.jpg" />12 html 取得element的html代码eg: <div><input/></div>$("div").html() => <input/>;html(val) 设置element的html代码eg: <div><input/></div>$("div").html("<b>new stuff</b>") ==><div><b>new stuff</b></div>;13 removeAttr(name) 删除属性eg: <input disabled=”disabled”/>$(”input”).removeAttr(”disabled”)=><input/>14 removeClass(class) 删除样式，当class是空时删除所有的样式，如果class为指定样式则删指定样式eg: <p class=”highlight selected first”>Hello</p>$(”p”).removeClass(”selected highlight”)=>[ <p class=”first”>Hello</p> ]$(”p”).removeClass() =>[ <p>Hello</p> ]15. text() 取得element中的内容text(val) 设置element内容text与html差不多，只是text会把<,>用html标识符替换eg: <p><b>Test</b> Paragraph.</p><p>Paraparagraph</p>$(”p”).text() =>T est Paragraph.Paraparagraph;<p>Test Paragraph.</p>$(”p”).text(”<b>Some</b> new text.”);==><p><b>Some</b> new text.</p>$(”p”).text(”<b>Some</b> new text.”, true) ==><p>Some new text.</p>16.toggleClass(class) 这是一个比较有用的方法，就是当element存在参数中的样式的时候取消，如果不存在就设置此样式eg:<p>Hello</p><p class="selected">Hello Again</p>$("p").toggleClass("selected")==>[ <p class="selected">Hello</p>, <p>Hello Again</p> ]17 val() 取得第一个element的vlaue值 val(val) 设置属性的值eg: <input type="text" value="some text"/>$("input").val() == >"some text";$("input").val("test")==><input type="text" value="test"/>;18 after(content)给相关的element从后面插入节点eg: <p>I would like to say: </p>$("p").after("<b>Hello</b>")==><p>I would like to say: </p><b>Hello</b><b>Hello</b><p>I would like to say: </p>$("p").after( $("b") )==><p>I would like to say: </p><b>Hello</b>;21 before(content)与after相反是插入到前面eg: <p>I would like to say: </p>$("p").after("<b>Hello</b>")==>><b>Hello</b><p>I would like to say: </p19 append(content)与上面不同的是append是添加把content做为子elementeg: <p>I would like to say: </p>$("p").append("<b>Hello</b>")＝＞<p>I would like to say: <b>Hello</b></p>;eg: <p>I would like to say: </p><b>Hello</b>$("p").append( $("b") )==>;<p>I would like to say: <b>Hello</b></p>20 appendto(content)与append刚好相反<p>I would like to say: </p><div id="foo"></div>$("p").appendTo("#foo")==><div id="foo"><p>I would like to say: </p></div>;21 prepend(content) 添加到element里面的前部．与append 的方位不一样<p>I would like to say: </p>$("p").prepend("<b>Hello</b>")==><p><b>Hello</b>I would like to say: </p>;22 prependTo(content) 与prepend的添加对像相反．<p>I would like to say: </p><div id="foo"><b>Hello</b></div>$("p").prependTo("#foo") ==><div id="foo"><p>I would like to say: </p><b>Hello</b></div>;23 clone(deep) 克隆一个新的element．参数deep为flase里不包括子element<b>Hello</b><p>, how are you?</p>$("b").clone().prependTo("p")==><b>Hello</b><p><b>H ello</b>, how are you?</p>24.empty() 删除所有的内部节点<p>Hello, <span>Person</span> <a href="#">and person</a></p>$("p").empty()==>[ <p></p> ]25. insertAfter(content) 与after差不多．$(a).after(b) === $(b).insertAfter(a)26. insertBefore(content) 与 before差不多$(a).before(b) === $(b).insertBefore(a)27. remove(expt) 删除条件是expt的相应的element,当expt为空时．全部删除<p class="hello">Hello</p> how are <p>you?</p>$("p").remove(".hello")==>how are <p>you?</p>;28. wrap(html) 把节点插入到html生成的节点里面．要注意的是html节点中不能含有内容只能是节点的结构．如果想加的话只能在嵌入后再插入内容<p>Test Paragraph.</p>$("p").wrap("<div class='wrap'></div>")==><div class='wrap'><p>Test Paragraph.</p></div>注html也可以直接用一个element代替29 add(params) 在$所取到的节点数组中添加新的节点．参数可以是expr, html,elementeg: 1.<p>Hello</p><span>Hello Again</span>$(”p”).add(”span”)==>[ <p>Hello</p>, <span>Hello Again</span> ]2.<p>Hello</p>$(”p”).add(”<span>Again</span>”)==>[ <p>Hello</p>, <span>Again</span> ]3. <p>Hello</p><p><span id=”a”>Hello Again</span></p>$(”p”).add( document.getElementById(”a”) )===>[ <p>Hello</p>, <span id=”a”>Hello Again</spa n> ]30 children(expr)取得子节点,当expr为空时，取得所有的子节点eg<div><span>Hello</span><p class=”selected”>Hello Again</p><p>And Again</p></div>$(”div”).children()==>[><span>Hello</span><pclass=”selected”>Hello Again</p><p>AndAgain</p> ]$(”div”).children(”.selected”)==>[ <p class="selected">Hello Again</p> ]31 contains(str)找出字节点中包含有str的节点．str起到过滤做用eg: <p>This is just a test.</p><p>So is this</p>$("p").contains("test")==>[ <p>This is just a test.</p> ]32. filter(expression)过滤找出符合expression的节点eg:<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>$("p").filter(".selected")==>><p class="selected">And Again</p>$("p").filter(".selected, :first")==>[ <p>Hello</p>, <p class="selected">And Again</p> ]filter(filter_func)通过函数来选择是否过滤，filter_func返回true 表示过滤<p><ol><li>Hello</li></ol></p><p>How are you?</p> $("p").filter(function(index) { return $("ol", this).length == 0; })==>[ <p>How are you?</p> ]33. find（expr）从子节点找出符合expr的．与filter的区别是filter过滤掉＄数组中的节点find过滤到的是子节点eg: <p><span>Hello</span>, how are you?</p>$("p").find("span")==>[ <span>Hello</span> ];34. is(expr) 判断是否符合条件，如果$数组的所有节点都不符合条件返回false，只要有一个符合条件就返回trueeg: <form><p><input type="checkbox" /></p></form>$("input[@type='checkbox']").parent().is("form")==>false$("input[@type='checkbox']").parent().is("p")==>true35 next(expr) 取得最近节点最近那个节点.expr为空时取得所有节点eg:1.<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>$("p").next()==>[ <p>Hello Again</p>, <div><span>And Again</span></div> ]2.<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>$("p").next(".selected")==>[ <p class="selected">Hello Again</p> ]36. not(el),not(expr),not(elems)与add相反，删除符合条件的节点．eg:1. <p>Hello</p><p id="selected">Hello Again</p>$("p").not( $("#selected")[0] )==>[ <p>Hello</p> ]$("p").not("#selected")==>[ <p>Hello</p> ]2.<div><p>Hello</p><p class="selected">Hello Again</p></div>$("p").not( $("div p.selected") )==>[ <p>Hello</p> ]37 parent(expr) 取得父节点eg:1.<html><body><div><p><span>Hello</span></p>< span>HelloAgain</span></div></body></html>$("span").parents()==>[ <body>...</body>, <div>...</div>, <p><span>Hello</span></p> ]2.<html><body><div><p><span>Hello</span></p><sp an>Hello Again</span></div></body></html>$("span").parents("p")==>[ <p><span>Hello</span></p> ]38 prev(expr) 与next相反,next取得是与节点相邻后面的．prev 取得相邻前面的eg: 1.<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p> $("p").prev(".selected")==>[ <div><span>Hello</span></ div> ]2.<p>Hello</p><div><span>HelloAgain</span></div><p>And Again</p>$("p").prev()==>[ <div><span>Hello Again</span></div> ]39 siblings(expr) 取得相邻两边的节点是．next,与prev的结合体jquery与dom相关的操作先讲到这里，下回接着讲CSS相关操作40 1/. CSS(name)读取样式属性值eg:<p style=”color:red;”>Test Paragraph.</p>$(”p”).css(”color”)==>”red”;2/css(properties)设置styleeg:<p>T est Paragraph.</p>$("p").css({ color: "red", background: "blue" })==><p style="color:red; background:blue;">Test Paragraph.</p>;3/css(key, value)设置单个样式属性,如果设置的值是数字的话,会被自动转化为像素单位eg : <p>Test Paragraph.</p>$("p").css("color","red")==><p style="color:red;">Test Paragraph.</p>;$("p").css("left",30)==><p style="left:30px;">Test Paragraph.</p>;41 1/height()取得当前匹配节点数组中的第一个节点的高的值eg: <p>This is just a test.</p>$("p").height() ==>300;2/ height(val) 设置所有匹配的节点的高,如果val的单位不是ex ,%,那么单位自动设为pxeg: <p>This is just a test.</p>$("p").height(20)==><p style="height:20px;">This is just a test.</p>;42 width() 设置宽度,width(val)设置高度.用法与height一样以上是基本的CSS的js用法,下面主要记录jQuery的一些功能函数43 $.browser 用于判断浏览器的分别为safari,opera, msie, mozilla.这些方法要等DOM ready后才能使用eg: if($.browser.safari) {$( function() { alert("this is safari!"); } ); }44. $.each(obj, fn) 这个方法与$().each()不一样,前者可以迭代任务数组与对像,后者只能迭代jQuery对象$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });45 $.extend(target, prop1, propN)继承多个对象.target被扩展的对象.prop1,第一个父对象,propN其它被继承的对象eg: 1. var settings = { validate: false, limit: 5, name: "foo" };var options = { validate: true, name: "bar" };jQuery.extend(settings, options);====>settings == { validate: true, limit: 5, name: "bar" }2.var defaults = { validate: false, limit: 5, name: "foo" };var options = { validate: true, name: "bar" };var settings = jQuery.extend({}, defaults, options);===>settings == { validate: true, limit: 5, name: "bar" }46 $.grep(array, fn, inv)用fn过滤array,当fn返回true时array 元素保留在数组中eg : $.grep( [0,1,2], function(i){ return i > 0; });==>[1, 2]47 $.map(array, fn)通过fn修改array中的值当函数返回值为null里,array元素将被删除,当返回是数组时,返回的数组将与原数组合并eg: 1.$.map( [0,1,2], function(i){ return i + 4; });==>[4, 5, 6]2.$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });==>[2, 3]3.$.map( [0,1,2], function(i){ return [ i, i + 1 ]; });==>[0, 1, 1, 2, 2, 3]48. $.merge(first, second)两个数组进行合并,删除重复的值$.merge( [0,1,2], [2,3,4] )==>[0,1,2,3,4]$.merge( [3,2,1], [4,3,2] )==>[3,2,1,4]49 $.trim(str)去除字符串两端的空格,一个十分熟悉常用的方法$.trim(" hello, how are you? ")==>"hello, how are you?";主要记录jQuery事件响应的处理50. bind(type, data, fn)对所有选定的element判断事件,type是事件类型,data是参数,fn是事处理方法.eg:1. $(”p”).bind(”click”, function(){ alert( $(this).text() ); });2. function handler(event) { alert(event.data.foo); }$(”p”).bind(”click”, {foo: “bar”}, handler)==>alert(”bar”)51. blur() 触发blur方法,blur(fn)设置blur函数eg: <p>Hello</p>$(”p”).blur( function() { alert(”Hello”); } );==><p onblur=”alert(’Hello’);”>Hello</p>52. change(fn)设置onchange事件的方法eg:<p>Hello</p>$(”p”).change( function() { alert(”Hello”); } );==><p onchange=”alert(’Hello’);”>Hello</p>53 click()触发onclick事件, click(fn)设置onclick方法54. dblclick(fn)设置ondblclick方法55.error(fn)设置error方法56 focus()触发onfocus,focus(fn)设置focus方法eg:<p>Hello</p>$(”p”).focus( function() { alert(”Hello”); } );==><p onfocus=”alert(’Hello’);”>Hello</p>57 hover(over, out) 设置mouse移入以及mouse移出时所触发的事件.eg: $("p").hover(function(){$(this).addClass("over");},function(){$(this).addClass("out");});58 keydown(fn),keypress(fn),keyup(fn),按键盘相关的操作分别对应onkeydown,onkeypress,onkeyup.59mousedown(fn),mousemove(fn),mouseout(fn),mouseover(fn),m ouseup(fn)这些是mouse相关的操作分别对应onmousedown,onmousemove,onmouseout,onmouseover,onmo useup.60 load 当element load事件发生时触发eg <p>Hello</p>$("p").load( function() { alert("Hello"); } );==><p onload="alert('Hello');">Hello</p>61.one(type, data, fn)与bind差不多,最大的区别是前者只运行一次后便不再响应.如果运行后不想继续运行默认的方法只要fn中返回值return false就可以了.eg: <p>Hello</p>$("p").one("click",function(){ alert( $(this).text() ); });==>alert("Hello")62.ready(fn)当dom 结构载入完毕的时候.用此方法时,请不要在onload方法里面写代码.不然就不会触发ready事件eg .1.$(document).ready(function(){ Your code here... });2.jQuery(function($) {// Your code using failsafe $ alias here...});63.resize 设置onresize方法.当大小改变时触发eg: <p>Hello</p>$("p").resize( function() { alert("Hello"); } );<p onresize="alert('Hello');">Hello</p>64 scroll(fn) 设置onscroll方法65.select()触发onselect方法.select(fn)设置select方法66. submit()提交表单,submit(fn)设置submit方法.eg: $("#myform").submit( function() {return $("input", this).val().length > 0; } );<form id="myform"><input /></form>67 toggle(even, odd),even当偶数单击时运行,odd当奇数单击时运行.用unbind(’click’)删除eg: $("p").toggle(function(){$(this).addClass("selected");},function(){$(this).removeClass("selected");});68 trigger(type)触发相应的type方法eg: <p click="alert('hello')">Hello</p>$("p").trigger("click")==>alert('hello')69 unbind(type, fn)与bind相反,1.unbind()删除所有的绑定.eg:<p onclick="alert('Hello');">Hello</p>$("p").unbind()==>[ <p>Hello</p> ]2.unbind(type)删除指定的绑定eg:<p onclick="alert('Hello');">Hello</p>$("p").unbind( "click" )==>[ <p>Hello</p> ]3.unbind(type, fn)删除指定type的指定fneg:<p onclick="alert('Hello');">Hello</p>$("p").unbind( "click", function() { alert("Hello"); } )==>[ <p>Hello</p> ]70 unload(fn)当页面unload的时候触发方法eg: <p>Hello</p>$("p").unload( function() { alert("Hello"); } );==><p onunload="alert('Hello');">Hello</p>主要关于如何用jQuery处理特效（70-76）71. animate(params, speed, easing, callback)动画特效.params:是动画的设置,用来表示动画的展现以及结束,speed:动画的速率可以是(”slow”, “normal”, or “fast”)也可以是毫秒数.eg: 1000easing:默认是’linear’,如想用其它参数,就要添加jQuery的特效插件.callback: 当动画完成时的调用的函数.eg:1. $(”p”).animate({ height: ‘toggle’, opacity: ‘toggle’ }, “slow”);2. $(”p”).animate({ left: 50, opacity: ’show’ }, 500);3. $(”p”).animate({ opacity: ’show’}, “slow”, “easein”);72. fadeIn(speed, callback),fadeOut(speed, callback),fadeTo(speed, opacity, callback)淡入,淡出效果,speed表示速度,可以用”slow,normal,fast”代替,也可以直接写毫秒数. callback表示淡入,淡出后的调用的函数.fadeTo表示淡入到某个透明度。

jQuery选择器总结jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法$("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素$("div") 选择所有的div标签元素，返回div元素数组$(".myClass") 选择使用myClass类的css的所有元素$("*") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass")层叠选择器：$("form input") 选择所有的form元素中的input元素$("#main > *") 选择id值为main的所有的子元素$("label + input") 选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素$("#prev ~ div") 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签基本过滤选择器：$("tr:first") 选择所有tr元素的第一个$("tr:last") 选择所有tr元素的最后一个$("input:not(:checked) + span")过滤掉：checked的选择器的所有的input元素$("tr:even") 选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）$("tr:odd") 选择所有的tr元素的第1，3，5... ...个元素$("td:eq(2)") 选择所有的td元素中序号为2的那个td元素$("td:gt(4)") 选择td元素中序号大于4的所有td元素$("td:ll(4)") 选择td元素中序号小于4的所有的td元素$(":header")$("div:animated")内容过滤选择器：$("div:contains('John')") 选择所有div中含有John文本的元素$("td:empty") 选择所有的为空（也不包括文本节点）的td元素的数组$("div:has(p)") 选择所有含有p标签的div元素$("td:parent") 选择所有的以td为父节点的元素数组可视化过滤选择器：$("div:hidden") 选择所有的被hidden的div元素$("div:visible") 选择所有的可视化的div元素属性过滤选择器：$("div[id]") 选择所有含有id属性的div元素$("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素$("input[name^='news']") 选择所有的name属性以'news'开头的input元素$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素$("input[name*='man']") 选择所有的name属性包含'news'的input 元素$("input[id][name$='man']") 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素子元素过滤选择器：$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")$("div span:first-child") 返回所有的div元素的第一个子节点的数组$("div span:last-child") 返回所有的div元素的最后一个节点的数组$("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组表单元素选择器：$(":input") 选择所有的表单输入元素，包括input, textarea, select 和 button$(":text") 选择所有的text input元素$(":password") 选择所有的password input元素$(":radio") 选择所有的radio input元素$(":checkbox") 选择所有的checkbox input元素$(":submit") 选择所有的submit input元素$(":image") 选择所有的image input元素$(":reset") 选择所有的reset input元素$(":button") 选择所有的button input元素$(":file") 选择所有的file input元素$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域表单元素过滤选择器：$(":enabled") 选择所有的可操作的表单元素$(":disabled") 选择所有的不可操作的表单元素$(":checked") 选择所有的被checked的表单元素$("select option:selected") 选择所有的select 的子元素中被selected的元素选取一个 name 为”S_03_22″的input text框的上一个td的text值$(”input[@ name =S_03_22]“).parent().prev().text()名字以”S_”开始，并且不是以”_R”结尾的$(”input[@ name ^='S_']“).not(”[@ name $='_R']“)一个名为 radio_01的radio所选的值$(”input[@ name =radio_01][@checked]“).val();$("A B") 查找A元素下面的所有子节点，包括非直接子节点$("A>B") 查找A元素下面的直接子节点$("A+B") 查找A元素后面的兄弟节点，包括非直接子节点$("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点1. $("A B") 查找A元素下面的所有子节点，包括非直接子节点例子：找到表单中所有的 input 元素HTML 代码:<form><label>Name:</label><input name="name" /><fieldset><label>Newsletter:</label><input name="newsletter" /></fieldset></form><input name="none" />jQuery 代码:$("form input")结果:[ <input name="name" />, <input name="newsletter" /> ] 2. $("A>B") 查找A元素下面的直接子节点例子：匹配表单中所有的子级input元素。

本文由我司收集整编，推荐下载，如有疑问，请与我司联系jQuery 基础教程第四版第3 章学习笔记2017/08/30 114 第3 章 3.1 在页面加载后执行任务 3.1.1 代码执行的时机选择①当文档完全下载到浏览器中时，会触发window.onload 事件，意味着页面上的全部元素对于JavaScript 而言都是可以操作的。

②通过(document).ready()注册的事件处理程序，则会在DOM 完全就绪并可以使用时调用。

意味着所有元素对脚本而言都是可以访问的，但是，却不意味着所有关联的文件都已经下载完毕。

3.1.2 基于一个页面执行多个脚本①.onload 属性一次只能保存对一个函数的引用，因此不能在现有的基础上再增加新行为。

②每次调用(document).ready()方法时都会向内部的行为队列添加一个新函数，当页面加载完成后，所有的函数都会被执行。

而且，这些函数会按照注册他们的顺序依次执行。

3.1.3 .ready()的简写形式①(document).ready()结构，实际上是基于document 这个DOM 元素构建而成的jQuery 对象上调用了.ready()方法。

②(document).ready(){ //这里是代码……}); 可以简写成：$(function() { //这里是代码……} 3.1.4 向.ready()回调函数中传入参数3.2 处理简单的事件 3.2.1 简单的样式转换器①在用户单击按钮时执行，需要引入.on()方法。

通过这个方法，可以指定任何DOM 事件，并为该事件添加一种行为。

此时，事件是click。

eg: (‘#switcher- large’).on(‘click’,function(){});3.2.2 启用其他按钮3.2.3 利用事件处理程序的上下文①当触发任何事件处理程序时，关键字this 引用的都是携带相应行为的DOM 元素。

通过在事件处理程序中使用(this)，可以为相应的元素创建jQuery 对象，然后就如同使用CSS 选择符找到该元素一样对它进行操作。

Jquery 语法jQuery 是一个JavaScript 库。

jQuery 极大地简化了JavaScript 编程。

jQuery 使用的语法是XPath 与CSS 选择器语法的组合。

在本教程接下来的章节，您将学习到更多有关选择器的语法。

Jquery 通过$进行选择基础语法：$(selector).action()美元符号定义jQuery选择符（selector）"查询"和"查找" HTML 元素jQuery 的action() 执行对元素的操作实例:$(this).hide() - 隐藏当前元素$("p").hide() - 隐藏所有<p> 元素$("p.test").hide() - 隐藏所有class="test" 的<p> 元素$("#test").hide() - 隐藏所有id="test" 的元素文档就绪事件$(document).ready(function(){});或者：$（function（）{}）都表示文档dom 加载完成后执行。

这是为了防止文档在完全加载（就绪）之前运行jQuery 代码，即在DOM 加载完成后才可以对DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。

下面是两个具体的例子：试图隐藏一个不存在的元素获得未完全加载的图像的大小文档就绪事件$(document).ready(function(){// 开始写 jQuery 代码...});这是为了防止文档在完全加载（就绪）之前运行jQuery 代码，即在DOM 加载完成后才可以对DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。

下面是两个具体的例子：∙试图隐藏一个不存在的元素∙获得未完全加载的图像的大小∙ jQuery 的入口函数是在html 所有标签(DOM)都加载之后，就会去执行。

JQuery开发工具——GVIM。

锋利的jQuery目录第1章认识jQuery (1)第2章jQuery选择器 (2)第3章jQuery的DOM操作 (5)第4章jQuery中的事件和动画 (8)第5章jQuery对表单、表格的操作及更多应用 (11)第6章jQuery与Ajax的应用 (13)第1章认识jQuery1．jQuery的优势：轻量级；强大的选择器；出色的DOM操作的封装；可靠的事件处理机制；完整的Ajax；不污染顶级变量；出色的浏览器兼容性；链式操作方式；隐式迭代；行为层与结构层的分离；丰富的插件支持；完善的文档；开源。

2．使用jQuery之前，要先导入jQuery库。

<script src=”../scripts/jquery-1.3.1.js” type=”text/javascript” />\在jQuery库中，$就是jQuery的一个简写形式，例如$(“#foo”)和jQuery(“#foo”)和document.getElementById(“foo”)是等价的。

Window.onload和$(document).ready()的区别：执行时机：前者必须等待网页中所有的内容加载完毕(包括图片)才能执行；后者在网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完。

编写个数：前者只能编写一个function()块，后者能同时编写多个(多个会依次执行)。

简化写法：前者无；后者$(document).ready(function(){//…})可以简写成：$(function(){//…})3. jQuery代码风格。

链式操作风格：$(".has_children").click( function(){$(this).addClass("highlight") //为当前元素增加highlight类.children("a").show().end() //将子节点的<a>元素显示出来并重新定位到上次操作的元素.siblings().removeClass("highlight")//获取元素的兄弟元素，并去掉它们的highlight类.children("a").hide(); //将兄弟元素下的<a>元素隐藏});代码规范：1)对于同一个对象不超过3个操作的，可以直接写成一行。

jquery 中总结十章笔记1. 选择器：- 使用`$()`或`jQuery()`函数来选取DOM元素。

- 可以使用元素名称、类名、ID、属性等进行选择。

- 还可以使用层级关系和过滤器来进一步缩小选择范围。

2. 事件处理：- 使用`on()`方法来绑定事件处理函数。

- 可以使用事件委托来处理动态添加的元素。

- 使用`off()`方法来解绑事件处理函数。

3. DOM操作：- 可以使用`append()`、`prepend()`、`after()`和`before()`方法来插入DOM元素。

- 使用`remove()`方法来删除DOM元素。

- 使用`html()`和`text()`方法来修改元素的HTML内容和文本内容。

4. 动画效果：- 使用`animate()`方法来创建自定义动画效果。

- 可以修改元素的位置、尺寸、透明度等属性。

- 可以设置动画的持续时间、缓动效果和完成时的回调函数。

5. 异步请求：- 使用`$.ajax()`方法发送异步HTTP请求。

- 可以设置请求类型、URL、数据、成功和失败的回调函数等参数。

- 可以使用`$.getJSON()`和`$.post()`等简化的方法来发送常见类型的请求。

6. 特效效果：- 使用jQuery UI库提供的特效效果可以为网页添加交互效果。

- 可以添加拖拽、排序、选项卡、日期选择等功能。

- 可以自定义特效的样式和行为。

7. 表单操作：- 可以使用`val()`方法获取或设置表单元素的值。

- 使用`prop()`方法修改复选框和单选框的选中状态。

- 使用`serialize()`方法将表单元素序列化为字符串。

8. 遍历和过滤：- 使用`each()`方法和回调函数遍历匹配的元素。

- 使用`filter()`和`not()`方法根据条件过滤元素。

- 使用`find()`方法在匹配元素的后代中查找元素。

9. AJAX事件：- 使用`$.ajaxSetup()`方法设置全局AJAX默认选项。

1、jquery和javascript严格区分大小写；$代表jquery，如$（document）.ready(function(){})2、jquery.noConflict():该方法使jquery主动放弃$变量的控制权，执行完该方法后，使用变量$将不能再操作jquery核心函数了。

jquery.noConflict(extreme):该方法需要一个布尔型的参数，当参数值为false时，执行效果与无参方法执行效果一样，当参数为true时，jquery类库不但放弃变量$的控制权，而且将会放弃变量jquery的控制权。

3、jquery（）该函数返回一个空的jquery对象jquery（elements）该函数将一个或多个DOM元素转化为jquery对象（或jquery集合）如jquery（document），另外，这个函数也可以把XML文档和window对象作为有效的参数。

jquery（callback），该函数是jquery（document）.ready(callback)的简写，该函数将绑定一个在DOM文档载入完成之后执行的函数。

页面中所有需要在DOM加载完成时执行的jquery 操作，都需要包含在这个函数中。

开发人员可以在一个页面中使用任意多个jquery （document）.ready事件。

jquery（expression,[context]）:该函数接收一个包含jquery选择器的字符串，然后利用这个字符串去匹配一个或多个元素，jquery中的操作都需要使用jquery对象，所以jquery的一切操作都要基于这个函数，或者以某种方式使用这个函数，context是可选参数，如果没有指定context参数，jquery函数将在当前的HTML文档中查找DOM元素，如果指定了context参数，就会在这个context中查找。

jquery（html）：该函数根据提供的HTML标记代码，动态创建由jquery对象封装的DOM元素，如jquery（“<div></div>”）将创建一个div节点，可以动态添加到DOM中。

function(index,domEle){
alert($(this).val());
});
// alert( $("input[type=checkbox]:checked").length);
//方法二：
对全部高中资料试卷电气设备，在安装过程中以及安装结束后进行高中资料试卷调整试验；通电检查所有设备高中资料电试力卷保相护互装作置用调与试相技互术关，系电通，力1根保过据护管生高线0产中不工资仅艺料可高试以中卷解资配决料置吊试技顶卷术层要是配求指置，机不对组规电在范气进高设行中备继资进电料行保试空护卷载高问与中题带资22负料，荷试而下卷且高总可中体保资配障料置各试时类卷，管调需路控要习试在题验最到；大位对限。设度在备内管进来路行确敷调保设整机过使组程其高1在中正资，常料要工试加况卷强下安看2与全22过，22度并22工且22作尽2下可护1都能关可地于以缩管正小路常故高工障中作高资；中料对资试于料卷继试连电卷接保破管护坏口进范处行围理整，高核或中对者资定对料值某试，些卷审异弯核常扁与高度校中固对资定图料盒纸试位，卷置编工.写况保复进护杂行层设自防备动腐与处跨装理接置，地高尤线中其弯资要曲料避半试免径卷错标调误高试高等方中，案资要，料求编5试技写、卷术重电保交要气护底设设装。备备4置管高调、动线中试电作敷资高气，设料中课并3技试资件且、术卷料拒管中试试调绝路包验卷试动敷含方技作设线案术，技槽以来术、及避管系免架统不等启必多动要项方高方案中式；资，对料为整试解套卷决启突高动然中过停语程机文中。电高因气中此课资，件料电中试力管卷高壁电中薄气资、设料接备试口进卷不行保严调护等试装问工置题作调，并试合且技理进术利行，用过要管关求线运电敷行力设高保技中护术资装。料置线试做缆卷到敷技准设术确原指灵则导活：。。在对对分于于线调差盒试动处过保，程护当中装不高置同中高电资中压料资回试料路卷试交技卷叉术调时问试，题技应，术采作是用为指金调发属试电隔人机板员一进，变行需压隔要器开在组处事在理前发；掌生同握内一图部线纸故槽资障内料时，、，强设需电备要回制进路造行须厂外同家部时出电切具源断高高习中中题资资电料料源试试，卷卷线试切缆验除敷报从设告而完与采毕相用，关高要技中进术资行资料检料试查，卷和并主检且要测了保处解护理现装。场置设。备高中资料试卷布置情况与有关高中资料试卷电气系统接线等情况，然后根据规范与规程规定，制定设备调试高中资料试卷方案。

Jquery 介绍jQuery 对 js 封装成方法。

可以比 JS 实现更多的特效，写更少的代码。

先通过$()得到对象，再调用 jQuery 中定义的方法就可以轻松操作。

API 文档中有详细的用 法，一看就会 jquery 对象是数组，直接操作时操作第一个元素jquery 转成 dom： $("#msg”)[0].innerHTML; $("#msg”).eq(0)[0].innerHTML;dom 转成 jquery： $(document.getElementById(”msg”))在哪里写代码1、在页面中导入 jquery-1.4.1.js，地方 1：$(function(){ //在这里写 jquery 代码 1});地方 2： $(document).ready(function(){ //防止文档为加载完成就运行//在这里写 jquery 代码 2 });事件函数$(document).ready(function)当文档完成加载时$(selector).click(function)点击事件$(selector).dblclick(function)双击事件$(selector).focus(function)$("#gl").focus(); var t=$("#gl").val(); $("#gl").val("").focus().val(t);获得焦点事件获得焦点，让定界符在内容最 后$(selector).mouseover(function)鼠标悬停事件$(document). blur (function) ,失去焦点 $(document). select (function)选上$("#test").find('option:selected').text(); 获取下拉框选中 的文 本$(document).hover(function ); 鼠标移上去$(document). submit(function)提交jquery 方法$(this).hide(1000) 隐藏当前的 HTML 元素。

Jquery 选择器Query 选择器允许您对HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。

它基于已经存在的CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

元素选择器$(“p”)选择所有p 标签$(document).ready(function(){$(“button”).click(function(){$(“p”).hide();});});I Id d 选择器选择所有id 为test 的元素$(“#test”)$(document).ready(function(){$(“button”).click(function(){$(“#test”).hide();});});C C lass 选择器选择指定style 为class 类型$(“.test”)$(document).ready(function(){$("button").click(function(){$(".test").hide();});});其他选择器：$(“*”) 选取所有元素$(this) 选取本元素，既当前元素$(“p.intro”)选取所有class 为intro 的p 元素$(“p:first”)选取第一个p 元素$(“ul li:first”)选取第一个ul 元素的的第一个li 元素$(“ul li:first-child”)选取每个ul 元素的第一个li 元素$(“[href]”) 选取带有href 属性的所有元素$(“a[target=’_blank’]”)选取target 属性为_blank 的a 元素$(“a[target!=’_blank’]”)选取target 属性不为_blank 的a 元素$(“:button”)选取所有type=“button”的input 和button通过$(":button") 可以选取所有type="button" 的<input> 元素和<button> 元素，如果去掉冒号，$("button")只能获取<button> 元素。

jquery学习总结（超级详细）第一篇：jquery学习总结(超级详细)执行时机编写个数简化写法一、选择网页元素jQuery的基本设计和主要用法，就是“选择某个网页元素，然后对其进行某种操作”。

这是它区别于其他函数库的根本特点。

使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。

选择表达式可以是CSS选择器：$(document)//选择整个文档对象$('#myId')//选择ID为myId 的网页元素$('div.myClass')//选择class为myClass的div元素$('input[name=first]')//选择name属性等于first的input元素window.onload $(document).ready()网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完必须等待网页中所有的内容加载完毕后（包括图片）才能执行不能同时编写多个，以下代码无法正确执行：window.onload =function({alert(“test1”);}window.onload = function(){alert(“test2”);}结果只会输出“test2”能同时编写多个无$(document).ready(function(){});可以简写成$(function(){});也可以是jQuery特有的表达式：$('a:first')//选择网页中第一个a元素$('tr:odd')//选择表格的奇数行$('#myForm :input')//选择表单中的input元素 $('div:visible')//选择可见的div元素$('div:gt(2)')//选择所有的div元素，除了前三个$('div:animated')//选择当前处于动画状态的div元素二、改变结果集如果选中多个元素，jQuery提供过滤器，可以缩小结果集：* $('div').has('p');//选择包含p元素的div元素* $('div').not('.myClass');//选择class不等于myClass的div元素 * $('div').filter('.myClass');//选择class等于myClass的div元素 * $('div').first();//选择第1个div元素 * $('div').eq(5);//选择第6个div 元素有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法：$('div').next('p');//选择div元素后面的第一个p元素$('div').parent();//选择div元素的父元素$('div').closest('form');//选择离div最近的那个form父元素$('div').children();//选择div的所有子元素$('div').siblings();//选择div的同级元素三、链式操作选中网页元素以后，就可以对它进行某种操作。

Jquery笔记1.helloworld:$(function(){$("button").click(function(){alert("helloworld");});})2.基本选择器:•改变id 为one 的元素的背景色为# bbffaa•改变class 为mini 的所有元素的背景色为# bbffaa•改变元素名为<div>的所有元素的背景色为# bbffaa•改变所有元素的背景色为# bbffaa•改变所有的<span>元素和id 为two 的元素的背景色为# bbffaa<!-- 导入 jQuery 库 --><script type="text/javascript"src="jquery-1.7.2.js"></script ><script type="text/javascript">/* $(function(){//1. 使用 id 选择器选择 id=btn1 的元素: $("#btn1")//2. 为选择的 jQuery 对象添加onclick响应函数:// $("#btn1").click(function(){}), 响应函数的代码//写在 function(){} 的中括号中.$("#btn1").click(function(){$("#one").css("background", "#ffbbaa");});$("#btn2").click(function(){$(".mini").css("background", "#ffbbaa");});$("#btn3").click(function(){$("div").css("background", "#ffbbaa");});$("*").css("background", "#ffbbaa");});$("#btn5").click(function(){$("span,#two").css("background", "#ffbbaa");});})*/</script>3.层次选择器:<input type="button"value="选择 body 内的所有 div 元素"id="btn1"/><input type="button"value="在 body 内, 选择子元素是 div 的."id="btn2"/><input type="button"value="选择 id 为 one 的下一个 div 元素"id="btn3"/><input type="button"value="选择 id 为 two 的元素后面的所有div 兄弟元素"id="btn4"/><input type="button"value="选择 id 为 two 的元素所有 div 兄弟元素"id="btn5"/><input type="button"value="选择 id 为 one 的下一个 span 元素"id="btn6"/><input type="button"value="选择 id 为 two 的元素前边的所有的div 兄弟元素"id="btn7"/><script type="text/javascript"src="jquery-1.7.2.js"></script> <script type="text/javascript">$(function(){$("#btn1").click(function(){$("body div").css("background", "#ffbbaa");});$("#btn2").click(function(){$("body > div").css("background", "#ffbbaa");});$("#one + div").css("background", "#ffbbaa");});$("#btn4").click(function(){$("#two ~ div").css("background", "#ffbbaa");});$("#btn5").click(function(){$("#two").siblings("div").css("background", "#ffbbaa");});$("#btn6").click(function(){//以下选择器选择的是近邻 #one 的 span 元素, 若该span//和 #one 不相邻, 选择器无效.//$("#one + span").css("background", "#ffbbaa");$("#one").nextAll("span:first").css("background","#ffbbaa");});$("#btn7").click(function(){$("#two").prevAll("div").css("background", "#ffbbaa");});})</script>4.基本过滤选择器:<input type="button"value="选择第一个 div 元素"id="btn1"/> <input type="button"value="选择最后一个 div 元素"id="btn2"/><input type="button"value="选择class不为 one 的所有 div 元素"id="btn3"/><input type="button"value="选择索引值为偶数的 div 元素"id="btn4"/><input type="button"value="选择索引值为奇数的 div 元素"id="btn5"/><input type="button"value="选择索引值为大于 3 的 div 元素"id="btn6"/><input type="button"value="选择索引值为等于 3 的 div 元素"id="btn7"/><input type="button"value="选择索引值为小于 3 的 div 元素"id="btn8"/><input type="button"value="选择所有的标题元素"id="btn9"/><input type="button"value="选择当前正在执行动画的所有元素"id="btn10"/><input type="button"value="选择 id 为 two 的下一个 span 元素"id="btn11"/>代码实现:$(document).ready(function(){function anmateIt(){$("#mover").slideToggle("slow", anmateIt);}anmateIt();$("#btn1").click(function(){$("div:first").css("background", "#ffbbaa");});$("#btn2").click(function(){$("div:last").css("background", "#ffbbaa");});$("#btn3").click(function(){$("div:not(.one)").css("background","#ffbbaa");});$("#btn4").click(function(){$("div:even").css("background", "#ffbbaa");});$("#btn5").click(function(){$("div:odd").css("background", "#ffbbaa");});$("#btn6").click(function(){$("div:gt(3)").css("background", "#ffbbaa");});$("#btn7").click(function(){$("div:eq(3)").css("background", "#ffbbaa");});$("#btn8").click(function(){$("div:lt(3)").css("background", "#ffbbaa");});$("#btn9").click(function(){$(":header").css("background", "#ffbbaa");});$("#btn10").click(function(){$(":animated").css("background", "#ffbbaa");});$("#btn11").click(function(){$("#two").nextAll("span:first").css("background","#ffbbaa");});});5.内容过滤选择器:<script type="text/javascript"src="jquery-1.7.2.js"></script> <script type="text/javascript">$(document).ready(function(){$("#btn1").click(function(){$("div:contains('di')").css("background","#ffbbaa");});$("#btn2").click(function(){$("div:empty").css("background", "#ffbbaa");});$("#btn3").click(function(){$("div:has(.mini)").css("background","#ffbbaa");});$("#btn4").click(function(){$("div:parent").css("background", "#ffbbaa");//$("div:not(:empty)").css("background","#ffbbaa");});});</script></head><body><input type="button"value="选择含有文本 'di' 的 div 元素"id="btn1"/><input type="button"value="选择不包含子元素(或者文本元素) 的div 空元素"id="btn2"/><input type="button"value="选择含有 class 为 mini 元素的div 元素"id="btn3"/><input type="button"value="选择含有子元素(或者文本元素)的div 元素"id="btn4"/><br><br>6.可见于不可见选择器：<input type="button"value="选取所有可见的 div 元素"id="btn1"> <input type="button"value="选择所有不可见的 div 元素"id="btn2"/><input type="button"value="选择所有不可见的input 元素"id="btn3"/>$(document).ready(function(){$("#btn1").click(function(){$("div:visible").css("background", "#ffbbaa");});$("#btn2").click(function(){//alert($("div:hidden").length);//show(time): 可以使不可见的元素变为可见, time 表示时间, 以//毫秒为单位//jQuery 的很多方法支持方法的连缀, 即一个方法的返回值来时调用该//方法的 jQuery 对象: 可以继续调用该对象的其他方法.$("div:hidden").show(2000).css("background","#ffbbaa");});$("#btn3").click(function(){//val() 方法可以返回某一个表单元素的 value 属性值.alert($("input:hidden").val());});7.属性过滤选择器：<input type="button"value="选取含有属性title 的div元素."id="btn1"/><input type="button"value="选取属性title值等于'test'的div元素."id="btn2"/><input type="button"value="选取属性title值不等于'test'的div 元素(没有属性title的也将被选中)."id="btn3"/><input type="button"value="选取属性title值以'te'开始的div元素."id="btn4"/><input type="button"value="选取属性title值以'est'结束的div 元素."id="btn5"/><input type="button"value="选取属性title值含有'es'的div元素."id="btn6"/><input type="button"value="组合属性选择器,首先选取有属性id的div元素，然后在结果中选取属性title值含有'es'的 div 元素."id="btn7"/><input type="button"value="选取含有 title 属性值, 且title 属性值不等于 test 的 div 元素."id="btn8"/>$("#btn1").click(function(){$("div[title]").css("background", "#ffbbaa");});$("#btn2").click(function(){$("div[title='test']").css("background","#ffbbaa");});$("#btn3").click(function(){//选取的元素中包含没有 title 的 div 元素.$("div[title!='test']").css("background","#ffbbaa");});$("#btn4").click(function(){$("div[title^='te']").css("background","#ffbbaa");});$("#btn5").click(function(){$("div[title$='est']").css("background","#ffbbaa");});$("#btn6").click(function(){$("div[title*='es']").css("background","#ffbbaa");});$("#btn7").click(function(){$("div[id][title*='es']").css("background", "#ffbbaa");});$("#btn8").click(function(){$("div[title][title!='test']").css("background", "#ffbbaa");});8.子元素选择器：代码实现：$(document).ready(function(){$("#btn1").click(function(){//选取子元素, 需要在选择器前添加一个空格.$("div.one :nth-child(2)").css("background", "#ffbbaa");});$("#btn2").click(function(){$("div.one :first-child").css("background", "#ffbbaa");});$("#btn3").click(function(){$("div.one :last-child").css("background","#ffbbaa");});$("#btn4").click(function(){$("div.one :only-child").css("background","#ffbbaa");});});</script></head><body><input type="button"value="选取每个class为one的div父元素下的第2个子元素."id="btn1"/><input type="button"value="选取每个class为one的div父元素下的第一个子元素."id="btn2"/><input type="button"value="选取每个class为one的div父元素下的最后一个子元素."id="btn3"/><input type="button"value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素."id="btn4"/>9.表单元素过滤选择器：代码实现：$(function(){$("#btn1").click(function(){//使所有的可用的单行文本框的 value 值变为尚硅谷alert($(":text:enabled").val());$(":text:enabled").val("尚硅谷");});$("#btn2").click(function(){$(":text:disabled").val("");});$("#btn3").click(function(){var num =$(":checkbox[name='newsletter']:checked").length;alert(num);});$("#btn5").click(function(){//实际被选择的不是 select, 而是 select 的 option 子节点//所以要加一个空格.//varlen = $("select :selected").length//alert(len);//因为 $("select :selected") 选择的是一个数组//当该数组中有多个元素时, 通过 .val() 方法就只能获取第一个被选择的值了.//alert($("select :selected").val());//jQuery 对象遍历的方式使 each, 在 each 内部的this 是正在//得到的 DOM 对象, 而不是一个 jQuery 对象$("select :selected").each(function(){alert(this.value);});});$("#btn4").click(function(){$(":checkbox[name='newsletter']:checked").each(function(){alert(this.value);});});})<h3>表单对象属性过滤选择器</h3><button id="btn1">对表单内可用input 赋值操作.</button><button id="btn2">对表单内不可用input 赋值操作.</button><br/><br/><button id="btn3">获取多选框选中的个数.</button><button id="btn4">获取多选框选中的内容.</button><br/><br/> <button id="btn5">获取下拉框选中的内容.</button><br/><br/>10.节点的插入//测试使用 jQuery 操作文本节点, 属性节点.//及查找元素节点$(function(){//1. 操作文本节点: 通过 jQuery 对象的 text() 方法alert($("#bj").text());$("#bj").text("尚硅谷");alert($(":text[name='username']").attr("value"));//2. 操作属性节点: 通过 jQuery 对象的attr() 方法.//注: 直接操作 value 属性值可以使用更便捷的val() 方法.alert($(":text[name='username']").attr("value"));$(":text[name='username']").attr("value", "尚硅谷");})$("<li id='laiwu'>莱芜</li>").appendTo($("#city"));$("<li id='xian'>西安</li>").insertBefore("#bj");$("#rl").after($("<li id='xian'>西安</li>"));主要方法如下：11.节点的包装:$(function(){//包装 li 本身$("#game li").wrap("<font color='red'></font>");//包装所有的 li$("#city li").wrapAll("<font color='red'></font>");//包装 li 里边的文字.$("#language li").wrapInner("<fontcolor='red'></font>");})12.html方法和val()方法;$(function(){//1. 为 #address 添加 focus(获取焦点), blur(失去焦点) 响应函数$(":text").focus(function(){//2. 当获取焦点时, 若 #address 中是默认值//(defaultValue属性, 该属性是 DOM 对象的属性), 就使其值置为 ""var val = $(this).val();if(val == this.defaultValue){$(this).val("");}}).blur(function(){//3. 失去焦点是, 若 #address 的值在去除前后空格后等于 ""//则为其恢复默认值.var val = this.value;if($.trim(val) == ""){this.value = this.defaultValue;}});//2.$(":button:eq(1)").click(function(){$("#single").val("选择3号");});$(":button:eq(2)").click(function(){$("#multiple").val(["选择2号", "选择4号"]);});$(":button:eq(3)").click(function(){$(":checkbox[name='c']").val(["check2", "check4"]);});$(":button:eq(4)").click(function(){//即便是为一组 radio 赋值, val参数中也应该使用数组.//使用一个值不起作用。

自己关于jquery的一些总结第一篇：自己关于jquery的一些总结1、$(“p”).html(“Hello $(”p“).text(”Helloworld!“);world!”);Html 和 text 的区别就在于 html 可以为解析，而 text 只是值而已2、$(“input[type='checkbox']”).parent()或者$(“input[name='checkbox1']”)这是一般查找某个名称 name 的所有控件，比如很多checkbox，或者radio 等当然$(“input[type='checkbox']”).parent()这里的.parent()是为了获取它的父对象，比如他的值是这个对象3、如果要使用 jquey 中的方法可以将他们转换为 jquery 对象：$(this)和 $(event.target);加了$()是把她们转换为 jquery 对象4、如下代码：this 和event.target 的区别，js 中事件是会冒泡的，所以 this 是可以变化的，但 event.target 不会变化，它永远是直接接受事件的目标 DOM 元素；this 和 event.target 都是 dom 对象，完全可以转换成 jquery 对象，通过$(this)或者 $(event.target)我还想说的是：$(div).click(function(event){})说明只有在这个层内点击才有效果，event.target.nodeName,如果你点击的是aaa，那么弹出的就是 DIV，同理如果是 list item 3, 那么是 LI,下面代码喜欢把对象都转换成 jquery 对象5、append 和prepend 区别在于append 是加在内容后面，而prepend 是加在内容前面，一般$(boby).prepend(……)会这么写，6、setTimeout(‘alert(“超时啦”)’,1000)就是过1000 毫秒后执行alert，或者可以setTimeout('getname()', 1000);这里getname 为自定义的方法7、hover(over,out)用法:当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。

jQuery开发技术笔记HTML DOM 加载步骤1、解析 HTML 结构2、加载外部脚本和样式表⽂件3、解析并执⾏脚本代码4、构造 HTML DOM 模型5、加载图⽚等外部⽂件6、页⾯加载⼀、总体架构1.1：jQuery 的核⼼特征：兼容主流浏览器：⽀持 IE 6.0+、Chrome、Firefox 3.6+、Safari 5.0+、Opera等。

具有的特的链式语法和短⼩清晰的多功能接⼝。

具有⾼效灵活的 CSS 选择器，并且可对 CSS 选择器进⾏扩展。

拥有便捷的插件扩展机制和丰富的插件。

1.2：总体架构jQuery 的模块可以分为 3 个部分：⼊⼝模块、底层模块、功能模块。

在底层⽀持模块中，回调函数列表模块⽤于增强对回调函数的管理，⽀持添加、移除、触发、锁定、禁⽤回调函数等功能；异步队列模块⽤于解耦异步任务和回调函数，它在回调函数刘表的基础上为回调函数增加了状态，并提供了多个回调函数列表，⽀持传播任意同步或异步回调函数的成功或失败状态；数据缓存模块⽤于为 DOM 元素和 JavaScript 对象附加任意类型的数据；队列模块⽤于管理⼀组函数，⽀持函数的⼊队和出队操作，并确保函数按顺序执⾏，它基于数据缓存模块实现。

在功能模块中，事件系统提供了统⼀的时间绑定、响应、⼿动触发和移除机制，它并没有将事件直接绑定到 DOM 元素上，⽽是基于数据缓存模块来管理事件；ajax 模块允许从服务器上加载数据，⽽不⽤刷新页⾯，它基于异步队列模块来管理和触发回调函数；动画模块⽤于向⽹页中添加动画效果，它基于队列模块来管理和执⾏动画函数；属性操作模块⽤于对 HTML 属性和 DOM 属性惊醒读取、设置和移除操作；DOM 遍历模块⽤于在 DOM 树中遍历⽗元素、⼦元素和兄弟元素；DOM 操作模块⽤于插⼊、移除、复制和替换 DOM元素；样式操作模块⽤于获取计算样式或设置内联样式；坐标模块⽤于读取或设置 DOM 元素的⽂档坐标；尺⼨模块⽤于获取 DOM 元素的⾼度和宽度。

jquery学习记录⼀、jquery中的选择器使⽤⽅法：1、css通⽤选择器：*选择所有⽂件；#id选择所有id为id的元素；.class选择所有calss为calss的选择器；element:HTML元素选择器；.class.class1:选择class为class的且class=class1；2、伪类别选择器：:first例如：$("p:first");⽤于选择第⼀个p元素；:last例如：$("p:last");⽤于选择最后⼀个p元素；:even 例如：$("tr:even");⽤于选择为偶数的tr元素； :odd$()例如：$("tr:odd")⽤于选择为奇数的tr元素；3、具体指定选择器：:eq(index)⽤于选择特意指定的元素例如：$("table tr:eq(2)");⽤于选择table下位于第⼆个tr的元素；:gt，:lt⽤于选择在指定定范围内的元素例如：$("table tr:gt(3)");⽤于选取表格下所有索引值⼤于3的tr元素； $("table:lt(8)")⽤于选择所有索引值⼩于8的tr元素；:not⽤于选择所有⾮指定的元素例如:$("table:not(.tab)")选择所有表格class不是tab的表格; 4、:header选择器选择所有标题元素,例如选择$(":header:not(h2)");选择H1~H6之间的所有标题元素，但是处H2外，应为⽤了⼀个:not；:animated⽤于选择所有动画元素;5、:contains内容选择器，⽤于选择有指定内容的元素；例如：$("p:contains(is)");代表选择所有p标签并且p中的内容包含is⽂字；:empty空内容选择器，⽤于选择所有元素内容为空的的便签；例如$(":empty");代表选择所有没有任何内容的元素；$("p:empty")则表⽰选择所有没有内容的p便签元素；:hidden⽤于选择所有被隐藏的元素；例如：$("p:hidden");表⽰选择页⾯中所有被隐藏的p标签元素；:visible 选择器选取每个当前是可见的元素。

JQuery学习笔记_CSS操作——操作文档节点的样式属性。

常用CSS操作函数1、css()（1）、该函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值。

（2）、如果省略了value参数，则表示获取属性值；如果指定了该参数，则表示设置属性值。

css()函数的所有"设置"操作针对的是当前jQuery对象所匹配的每一个元素；所有"读取"操作只针对第一个匹配的元素。

以对象形式同时设置任意多个属性的值。

对象object的每个属性对应propertyName，属性的值对应value。

（3）、如果参数value为空字符串("")，则表示删除该css属性。

（4）、对于多个单词构成的css属性，你可以使用其css格式("-")或者DOM格式(驼峰式)，jQuery都能理解。

例如background-color，你可以将propertyName设为background-color或backgroundColor。

建议优先以驼峰式来获取(jQuery底层也是通过DOM来获取的，DOM 元素的属性均以驼峰式命名)。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JQuery CSS操作——css</title><style>.astyle{background-color: red;}.bstyle{background-color: lightblue;}.cstyle{background-color: lightgreen;}</style><script type="text/javascript" src="../js/jquery-1.12.4.js"></script> </head><body><div><p id="one" class="astyle">JQuery 基础</p><p id="two" class="bstyle">JavaScript 基础</p><p id="three" class="cstyle">CSS 基础</p></div></body></html>$(function(){//获取p元素，添加红色边框$("p").css("border","2px solid red");//获取p元素的背景色(匹配多个元素时，获取属性时仅以第一个为准)alert($("p").css("background-color"));//删除第二个p元素的border属性$("p:eq(1)").css("border","");});$(function(){//以单个属性为参数，设置第一个p元素的字体样色为蓝色$("p:first").css("color","blue");//以数组为参数，设置最后一个p元素的字体样色//为红色，高度为20px，宽度为200px$("p:last").css({color:"red",width:"200px",height:"20px"});//以对象为参数，获取最后一个p元素的高度和宽度alert($("p:last").css(["width","height"]).width);alert($("p:last").css(["width","height"]).height);});$(function(){//以函数为参数，设置p元素的宽度$("p").css("width",function(index,value){alert(value);if(value=="199.76666px"){return value;}else{return "300px";}});});2、offset()（1）、该函数用于设置或返回当前匹配元素相对于当前文档的偏移，也就是相对于当前文档的坐标。

本文由我司收集整编，推荐下载，如有疑问，请与我司联系jquery 相关操作笔记2013/01/10 72 $(“#xxx option”).each(function(){if($(this).text()== str){ $(this).attr(“selected”,true);}); 同理根据val str = xxx; $(“#xxx option”).each(function(){if($(this).val() == str){ $(this).attr(“selected”,true); }); 2:利用选择器：$(“#xxx option[value=‘xxx’]”).find(“option[value=‘xxx’]”).attr(“selected”,true);//option[value=‘xx x’]不支持text3：获取值：$(‘#xxx option:selected’).html();或者val 3：value 绑定的是json 判断json 相等代码：/**json 比较相等function compareObject(jsonObj1, jsonObj2) { if (typeof jsonObj1 != typeof jsonObj2) return false; if (typeof jsonObj1 == ‘object’) { for (var o in jsonObj1) { if (typeof jsonObj2[o] == ‘undefined’)return false; if (!compareObject(jsonObj1[o], jsonObj2[o])) return false; return true; } else { return jsonObj1 === jsonObj2;}选择器：子页面(iframe 查找父页面id)$(window.parent.document.getElementById(“iframeShowBadPoint”))父页面调用子页面方法(iframe)ifmMap.window.fnSeMapType($(this).val()); ifmMap 是子页面的iframe 的name , fnSeMapType(“xx”)是子页面的方法。