jQuery基础教程第四版第3章学习笔记

合集下载

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基础1.1 jQuery的特点1）jQuery是一种框架，对于浏览器的兼容问题，95％不用再去考虑了。

2）jQuery利用选择器（借鉴了CSS选择器的语法）查找要操作的节点（DOM对象），然后将这些节点封装成一个jQuery对象（封装的目的有两个：①是为了兼容不同的浏览器。

②也为了简化代码）。

通过调用jQuery对象的方法或者属性来实现对底层的DOM对象的操作。

3）jQuery特点简单概括就是：选择器+ 调方法。

1.2 jQuery编程的步骤step1：引入jQuery框架（下载），min为去掉所有格式的压缩版<script language="javascript" src="js/jquery-1.4.1.min.js"></script>step2：使用选择器查找要操作的节点（该节点会被封装成一个jQuery对象，并返回）var $obj=$('#di');//ID选择器，查找的节点ID为d1step3：调用jQuery对象的方法或者属性$obj.css('font-size','60px');//调用jQuery的css()方法◆注意事项：jQuery是一个大的匿名函数，且内部有很多函数（类似Java中的内部类），它的大部分函数返回对象都是jQuery对象（它自己），所以可以继续“．”，例如：function f1(){var $obj=$('#d1');//为了强调返回的是jQuery对象，命名习惯用$开头来声明变量$obj.css('font-size','60px').css('font-style','italic'); } 1.3 jQuery对象与DOM对象如何相互转换1）dom对象如何转化为jQuery对象使用函数：$(dom对象)即可，例如：function f2(){var obj=document.getElementById('d1');var $obj=$(obj);//将dom节点封装成jQuery对象$obj.html('hello java'); } 2）jQuery对象如何转化为dom对象方式一：$obj.get(0); 方式二：$obj.get()[0];function f3(){var $obj=$('#d1'); //方式一：var obj=$obj.get(0);var obj=$obj.get()[0];//方式二obj.innerHTML='hello perl'; } 1.4如何同时使用prototype和jQuerystep1：先导入prototype.js，再导入jQuery.jsstep2：将jQuery的$函数换一个名字：var $a=jQuery.noConflict();//注意大小写◆注意事项：函数名就是一个变量，指向函数对象，例如：<script language="javascript" src="js/prototype-1.6.0.3.js"></script><script language="javascript" src="js/jquery-1.4.3.js"></script>function f1(){//无效var obj=$('d1'); }//无效是因为jQuery是后引入的，所以prototype被jQuery替换function f1(){//为了避免冲突，可以将jQuery的$函数换一个名字$avar $a=jQuery.noConflict(); var obj=$('d1');obj.innerHTML='hello prototype'; $a('#d1').html('hello jQuery'); } 1.5 EL表达式和jQuery函数的区别1）${}：EL表达式，在服务器端运行（JSTL标签库也在服务器端运行，EL和JSTL标签库本质是Java代码）。

jQuery基础教程(第四版)课后练习3

jQuery基础教程（第四版）课后练习
CHAP 3事件
(1) 在Charles Dickens被单击时，给它应用 selected 样式。

(2) 在双击章标题（<h3 class="chapter-title">）时，切换章文本的可见性。

(3) 当用户按下向右方向键时，切换到下一个 body 类；右方向键的键码是 39 。

(4) 挑战：使用console.log() 函数记录在段落中移动的鼠标的坐标位置。

（注意：console.log()可以在Firefox的firebug扩展、Safari的Web Inspector或Chrome、IE中的Developer Tools中使用。

）
(5) 挑战：使用 .mousedown() 和 .mouseup() 跟踪页面中的鼠标事件。

如果鼠标按键在按下它的地方被释放，则为所有段落添加 hidden 类。

如果是在按下它的地方之下被释放的，删除所有段落的 hidden 类。

jQuery学习笔记

jQuery学习笔记1.第二章1.1.控制上下文当前只传给jQuery的$()函数一个参数，但这仅仅是为了在开始的时候尽量保持简单。

事实上，这个函数在接受选择器或者HTML代码作为第一个参数时，还可以接受第二参数。

如果有两个参数，那么第一个参数是选择器，第二参数是指示第一参数的操作上下文（匹配或搜索的范围）。

我们在许多jQuery方法中看到，当第二个可选的参数被忽略时，就会被一个默认的参数所替代。

上下文参数context也就是同样的道理。

默认把DOM树的所有元素作为该选择器上下文。

上下文可以是DOM元素引用，也可以是jQuery选择器的字符串，还可以是DOM元素包装集示例1：$(selector)选择器selector会在整个DOM树上搜索匹配。

示例2：$(selector,"div#sampleDemo")选择器selector会在拥有ID值为sampleDemo的标签div范围内搜索。

示例3：$(selector,$("div#sampleDemo"))效果与示例2相同。

使用$("div#sampleDemo")返回一个DOM元素包装集。

示例3：$(selector,document)使用DOM元素document的引用。

1.2.合并选择元素jQuery允许我们使用逗号操作符将多个选择器合并成一个选择器。

例如，要选择所有<div>和所有<span>元素，可以这么做：$("div,span")1.3.jQuery支持的基础CSS选择器选择器描述示例1.4.通过位置选择元素（CSS支持）有时，需要根据元素在页面上的位置，或者相对于其他元素的位置来选择元素。

可能要选择页面中的第一个链接、隔行段落，或者每个列表中最后一个列表项。

CSS规范将这种类型的选择器称为伪类（pseudo-classes），下表是CSS支持的，但jQuery赋予了它新的名字——过滤器。

jQuery笔记

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库。

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学习笔记——jqGrid的使用记录（实现分页、搜索功能）

jQuery学习笔记——jqGrid的使⽤记录（实现分页、搜索功能）jqGrid 是⼀个⽤来显⽰⽹格数据的jQuery插件，通过使⽤jqGrid可以轻松实现前端页⾯与后台数据的ajax异步通信。

⼀、要引⽤的⽂件要使⽤jqGrid，⾸先页⾯上要引⼊如下css与js⽂件。

1、css<link href="/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />2、js <script src='/Scripts/js/jquery-2.0.3.min.js' type="text/javascript"></script> <script src='/Scripts/js/jqGrid/jquery.jqGrid.min.js' type="text/javascript"></script> <script src='/Scripts/js/jqGrid/i18n/grid.locale-en.js' type="text/javascript"></script>⼆、使⽤要点说明1、获取值（1）、获取单个id获取⾏号，有这种⽅式：var rowid = $("#grid-table").jqGrid("getGridParam", "selrow");但是经过实际验证，这种⽅式不可⾏，当选中⾏，再点击同⼀⾏会出现获取不到⾏号的情况。

最后先在js最外部定义⼀个变量selId，然后使⽤如下代码在选中⾏时赋值：onSelectRow: function (rowid, status) { selId = rowid; //给最外层的selId赋值 }（2）、获取多个选中⾏的idvar ids=$('#gridTable').jqGrid('getGridParam','selarrrow');其输出格式是逗号分隔的id，如：1,2,3,4,5（3）、获得所有⾏的ID数组var ids = $("jqgridtableid").jqGrid('getDataIDs');（4）、获取⾏数据如果想获取选择的⾏的数据，只要传⼊rowId即可，如下：var rowData = $('#gridTable').jqGrid('getRowData',rowId);⽽这个rowData是⼀个对象，如果要获取选择的⾏的这个对象的属性值，如name的值，需如下：var Name= ;（5）、获取单元格数据var celldata = $("jqgridtableid").jqGrid('getCell',id,colnum);（6）、设定⾏选中 //设定选中⾏,可设定多⾏选中： $("jqgridtableid").jqGrid('setSelection',id1); $("jqgridtableid").jqGrid('setSelection',id2);2、⾃定义分页、数据交互何谓⾃定义？就是允许你⽤你⾃⼰喜欢的js对象与后端做数据交互。

学习jQuery笔记

translate() 方法通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：rotate() 方法通过 rotate() 方法，元素顺时针旋转给定的角度。

允许负值，元素将逆时针旋转。

scale() 方法通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：skew() 方法通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：matrix() 方法matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

transform: translate(50px,100px);transform:matrix(0.866,0.5,-0.5,0.866,0,0);CSS3 创建多列column-count 属性规定元素应该被分隔的列数：CSS3 规定列之间的间隔column-gap 属性规定列之间的间隔：CSS3 列规则column-rule 属性设置列之间的宽度、样式和颜色规则。

jQuery $(this).hide()演示 jQuery hide() 函数，隐藏当前的 HTML 元素。

$("#test").hide()演示 jQuery hide() 函数，隐藏 id="test" 的元素。

$("p").hide()演示 jQuery hide() 函数，隐藏所有 <p> 元素。

$(".test").hide()演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。

基础语法是：$(selector).action()∙美元符号定义 jQuery∙ 选择符（selector ）“查询”和“查找” HTML 元素∙ jQuery 的 action() 执行对元素的操作我们的实例中的所有 jQuery 函数位于一个 document ready 函数中： $(document).ready(function(){--- jQuery functions go here ----});$(this) 当前 HTML 元素$("p")所有 <p> 元素 $("p.intro")所有 class="intro" 的 <p> 元素 $(".intro")所有 class="intro" 的元素 $("#intro")id="intro" 的元素 $("ul li:first") 每个 <ul> 的第一个 <li> 元素$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素jQuery 名称冲突jQuery 使用 $ 符号作为 jQuery 的简介方式。

jquery第三章

3.1.9 样式操作
1.attr("class") 获取属性和设置属性
<p class="myClass" title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> alert( $("p").attr("class") );// 获取指定元素的class $("p").attr("class","high");//设置指定元素的class为high
3.1.4 删除节点
4.empty() 清空节点
<ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> $("ul li:eq(1)").empty();
3.1.5 复制节点
1.clone() 2.clone(true):复制的节点也具有行为（将处理代码一起复制）
3.1.3 插入节点
1.append() 作为最后一个子节点添加进来 2.appendTo() <p>我想说：</p> $("p").append("<b>你好</b>"); <p>我想说：<b>你好</b></p> $("<b>你好</b>").appendTo("p"); <p>我想说：<b>你好</b></p>

jquery学习笔记

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学习总结（超级详细）

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学习笔记

中间的一个‘*’是对所有的标签添加属性
对所有的div ul进行标签设定
又一种组合
选择div下的input 只包含其子元素的input
选择yyjcw 下的所有input子集
改变所有tbyyjcw2后边同辈的input标签
或者是利用下边的代码实现：
改变所有tbyyjcw2后边同辈的第一个input标签
选择第一个div 并且改变字体的颜色以及转译字符的使用（双引号里边有双引号就需要转移字符）
最后一个div：
任意一个div：
选择所有小于4的div：
后边的三个div：
偶数项：
排除掉不需要的div：
选取网页中所有的h1 h2 h3 等：
内容选择器选择div中内容是jquery的东西：
选择所有包还有内容的元素：
显示隐藏的div：
一个淡入的显示隐藏效果：
遍历的效果：选择input中name位a1的input .each是遍历
实用的函数工具：（$实用函数工具的命名空间前缀，$就是一个标示符，与其他标示符没有区别，利用标示符jQuery（而不是别名$）去调用同样的函数功能是一样的）
$.trim(someString); 删除字符串前后的空格的使用工具函数
（功能和jQuery.trim(someString); 是一样的）。

JQuery初学笔记

标准文件JQuery应用Jquery是继prototype之后的又一个优秀的javascript框架首先要引入Jquery<script type="text/javascript" src="WEB-INF/jquery-1.4.2.min.js"></script>第1章访问和操作DOM元素1.获取DOM对象var tDiv = $("#divTmp");// 获取DOM对象var username = $("#username").val();// 得到文本框内容var usersex = $("#usersex").is(":checked")?"男":"女";// 获取单选钮的值var isno = $("#isno").is(":checked")?"是":"否";// 获取复选框的值// 显示提示文本元素和内容$("#divtip").css("display","blok").html(username+"<br>"+usersex+"<b r>"+isno);<form action="" method="post">请输入如下信息：姓名：<input type="text" name="username" id="username">性别：<input type="radio" name="usersex" id="usersex" value="男">男<input type="radio" name="usersex" id="usersex" value="女">女婚否：<input type="checkbox" name="isno" id="isno" value="是">是<input type="checkbox" name="isno" id="isno" value="否">否<div class="divbtn"><input type="button" name="subbtn" id="subbtn" value="提交"> </div><div id="divtip"></div></form>2.为元素设置属性attr()方法可以对元素的属性进行获取、设置，removeattr()方法可以删除某一指定属性。

jQuery学习笔记一(Nora)

JQuery学习笔记早半年前就看过jQuery的相关资料，也试着学过点，用过一点，但没有深入的系统的学习过这个js 框架，现在准备学习一下JQuery，从今天算起吧。

Jquery学习1---关于Jquery:JQuery是一个js框架，集成了javascript、Dom、XmlHttpRequest等。

是由John Resig在2006年创建的。

看来编程界也是人才辈出啊。

在使用JQuery之前，需要下载JQuery技术框架文件。

下载地址去官方网站：/最新版本好像是1.7了，下载压缩后的吧，小一些，也就不到100kb，是一个js文件。

然后还需要将下载的jquery文件引入到页面中才可以使用。

引入代码（方法）如下：<script type="text/javascript" src="jquery文件的地址（相对）"></script>看我的文件结构如下：我使用的是1.7版本的。

相对应的引入方式<script type="text/javascript" src="js/jquery-1.7.min.js"></script>下面就可以在该页面中使用该文件了，也就是可以使用Jquery了。

哈哈Jquery学习2----关于JQuery构造器构造器是JQuery框架的核心，其有jQuery()函数来实现（也可简写为$(),所以一般情况下使用后者）,此函数是JQuery的核心，jquery的一切操作都会构建在这个函数之上。

注意：使用jQuery()这种格式的时候，jQuery这个单词要写对，就Q需要大写，其他要小写，错一个字母都不可以。

jQuery()函数可以接受四种类型的参数：第一：jQuery(html):根据html标记字符串，动态的创建由jquery包含的Dom元素假设现在我们的html文件的<body>标签里什么都没有，我们使用jquery向body标签中添加一个div，并且div中的内容是“这是添加的一个div，哈哈”。

JQuery学习笔记

JQuery学习笔记引⼊jQuery库:jQuery 库是⼀个 JavaScript ⽂件，您可以使⽤ HTML 的 <script> 标签引⽤它：<head><script src="jquery.js"></script></head>通过CDN（内容分发⽹络）引⽤它许多⽤户在访问其他站点时，已经从⾕歌或微软加载过 jQuery。

所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。

同时，⼤多数 CDN 都可以确保当⽤户向其请求⽂件时，会从离⽤户最近的服务器上返回响应，这样也可以提⾼加载速度。

如需从⾕歌或微软引⽤ jQuery，请使⽤以下代码之⼀：Google CDN:<head><script src="/ajax/libs/jquery/1.8.0/jquery.min.js"></script></head>Microsoft CDN:<head><script src="/ajax/jQuery/jquery-1.8.0.js"></script></head>⽂档就绪函数$(document).ready(function(){---JQuery functions go here---});这是为了防⽌⽂档在完全加载（就绪）之前运⾏ jQuery 代码。

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

下⾯是两个具体的例⼦：试图隐藏⼀个不存在的元素获得未完全加载的图像的⼤⼩基础语法：$(selector).action()美元符号定义 jQuery选择符（selector）“查询”和“查找” HTML 元素jQuery 的 action() 执⾏对元素的操作jQuery选择器元素选择器：$("button")类选择：使⽤$(".well")来获取所有class为well的div元素。

jQuery学习笔记

jQuery学习笔记jQuery是一个简洁快速灵活的JavaScript框架，能让你在网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。

1jQuery大多是基于document 一个或多个元素进行操作的，选择元素就是基础。

1.1通过tagName匹配。

$("p")就是选出所有的document中P标签的元素1.2通过ID匹配。

$("#list1")就是选出所有的document中id="list1"的元素1.3通过.className匹配。

$(".a")就是选出所有的document中class="a"的元素1.4通过tag.className匹配。

$("p.b")就是选出所有的P标签的属性class="b"的元素1.5通过tag#id.className匹配。

$("ul#list1.b")就是选出所有的ul标签id="list1"的属性class="b"的元素1.6多类一起选择。

$('ul, ol, dl') 选出所有的ul、ol、dl标签的元素2匹配元素是集合时，需要通过过滤来匹配元素。

2.1基本过滤。

2.1.1:first (:last) $("p:first")P标签元素集的第1个2.1.2:even (:odd) $("p:odd")P标签元素集的第奇数个（开始）2.1.3:eq(n) :gt(n) :lt(n) $("p:gt(1)") P标签元素集第大于1的（开始）2.1.4:not $("p:not(p:eq(2))") P标签元素集中不是第2 个那些（开始）2.1.5:header2.1.6:animated2.2属性过滤2.2.1[attribute] $("p[name]")P标签元素集中含name属性的元素2.2.2[attribute=value] $("p[id=para1]") P标签元素集中id=" para1"的元素2.2.3[attribute!=value] $("p[id!=para1]") P标签元素集中id非para1的那些元素2.2.4[attribute^=value] $("p[id^=para]") P标签元素集中id以para开头的元素2.2.5[attribute$=value] $("p[id$=a1]") P标签元素集中id以a1结尾的元素2.2.6[attribute*=value] $("p[id*=ar]") P标签元素集中i d包含ar的那些元素2.2.7[attrFilter1][attrFilterN] $("p[id^=para][lang*=en-]")P标签元素集中id不以para开头且属性lang包含en-的元素2.3内容过滤2.3.1:contains(text) $("p:contains(ara)") P标签元素集中text包含ara的那些元素2.3.2:empty $('td:empty') td标签元素集中无text的那些td元素2.3.3:has(selector) $("ul:has(li[class=a])") ul标签集中包含li[class=a]元素的那些ul元素2.3.4:parent $("p:parent")P标签元素集中那些非空的元素2.4可见性过滤2.4.1:visible $("p: visible ")P标签元素集中那些可见的元素2.4.2:hidden $("p: hidden ")P标签元素集中那些不可见的元素2.5子元素过滤2.5.1:nth-child(index)、:nth-child(even)、:nth-child(odd) $("ulli:nth-child(odd)")ul标签子元素li集中那些奇数元素（1开始）2.5.2:nth-child(equation) $("ul li:nth-child(2n)") ul标签子元素li集中那些数元素（1开始）2.5.3:first-child、:last-child $("ul li:first-child") ul标签子元素li集中第1个元素2.5.4:only-child $("ul li:only-child") ul标签子元素li集中仅有1个元素2.6Form过滤2.6.1:input $("form :input")Form中所有的输入域，包括：select、text、textarea、button等2.6.2:text $("form :text")Form中所有的text域2.6.3:password $("form : password ")Form中所有的password域2.6.4:redio、:checkbox、:checked、:submit、:reset、:button、:file、:image2.7遍历过滤2.7.1size()、length 。

jQuery学习笔记

目录第一章认识JQUERY (3)1.1 WINDOW.ONLOAD和$(DOCUMENT).READY(FUNCTION(){})的区别： (3)1.2J Q UERY对象和DOM对象 (3)第二章JQUERY选择器 (5)2.1基本选择器 (5)2.2层次选择器 (5)2.3过滤选择器 (6)第三章JQUERY中的DOM操作 (9)3.1D OM的分类： (9)3.2J Q UERY中D OM的分类： (9)3.3属性操作 (10)3.4样式操作 (10)3.5遍历节点 (11)3.6CSS-D OM操作 (11)第四章JQUERY中的事件和动画 (12)4.1事件绑定 (12)4.2合成事件 (12)4.3事件冒泡 (12)4.4事件属性 (13)4.5移出事件 (13)4.6模拟操作 (13)4.7动画效果 (14)第五章JQUERY对表单，表格的操作及更多应用 (15)5.1表单的应用 (15)5.2表单验证 (15)5.3其他应用 (16)第六章AJAX的应用 (17)6.1LOAD( URL,[DA TA],[CALLBACK]) (17)6.2J Q UERY.GET( URL,[DA TA],[CALLBACK]) (17)6.3J Q UERY.POST( URL,[DA TA],[CALLBACK],[TYPE]) (17)6.4J Q UERY.GET S CRIPT( URL,[CALLBACK]) (17)6.5 J Q UERY A JAX 事件 (18)第七章JQUERY打造个性网站 (19)7.1 JQUERY.JQZOOM.JS插件图片显示放大镜效果 (19)7.2 JQUERY.THICKBOX.JS插件弹出D IV的效果 (19)7.3点击评分 (19)7.4放大镜效果 (19)7.5图片滚动 (19)第八章JQUERY插件开发 (20)8.1什么是插件 (20)8.2 J Q UERY插件的机制 (20)第一章认识jQuery1.1 window.onload和$(document).ready(function(){})的区别：1.2 jQuery对象和dom对象a).dom：document object model 文档对象模型：获取方法：getElementById(),getElementsByName()getElementsByTagName()。

jQuery基础教程第四版 第3章学习笔记

Jquery学习笔记

【最全最详细】jQuery学习笔记

jQuery基础教程(第四版)课后练习3

jQuery学习笔记

jQuery笔记

jQuery学习笔记——jqGrid的使用记录（实现分页、搜索功能）

学习jQuery笔记

jquery第三章

jquery学习笔记

jquery学习总结（超级详细）

jQuery学习笔记

JQuery初学笔记

jQuery学习笔记一(Nora)

JQuery学习笔记

jQuery学习笔记

jQuery学习笔记

jQuery基础教程第四版第3章学习笔记