我的jquery学习笔记整理

合集下载

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 教程jQuery 是一个JavaScript 库。

jQuery 极大地简化了JavaScript 编程。

jQuery 很容易学习。

每一章中用到的实例<html><head><script type="text/javascript" src="jquery.js"></script> <script type="text/javascript">$(document).ready(function(){$("p").click(function(){$(this).hide();});});</script></head><body><p>If you click on me, I will disappear.</p></body></html>亲自试一试代码：<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){$("p").click(function(){$(this).hide();});});</script></head><body><p>如果您点击我，我会消失。

</p><p>点击我，我会消失。

</p><p>也要点击我哦。

</p></body></html>通过点击"TIY" 按钮来看看它是如何运行的。

JQuery学习总结

锋利的jQuery学习笔记一、认识JQuery页面加载事件（可以写多个ready()）$(document).ready(function(){alert(“hello world”);})链式操作：JQuery允许你在一句代码中操做任何与其相关联的元素，包括其子元素、父元素等$(“#myDiv”).addClass(“css1″).children(“a”).removeClass(“css2″);//选择名称为myDiv的元素，为其自身添加css1的样式，然后再选择其所有子元素a，为其移除css2样式JQuery中获得一个对象的所有子元素内容$(“#myDiv”).html()JQuery中的变量与 DOM中的变量var $myVar = “”;var myVar = “”;DOM对象转换成 JQuery对象var obj = documnet.getElementById(“myDiv”);var $obj = $(obj);JQuery对象转换成 DOM对象var $obj = $(“#myDiv”);var obj = $obj.get(0); //或者var obj = $obj[0];释放JQuery对$符号的控制权JQuery.noConflict();二、JQuery选择器JQuery完善的处理机制ocument.getElementById(“test”).style.color = “red”; //如果test不存在，则页面出现异常$(“#test”).css(“color”,”red”); //哪怕页面没有名称为test的元素，也不会报错。

它是一个JQuery对象判断页面是否选择的对象if( $(“.class”).length > 0 ){// todo something}基本选择器$(“#myDiv”)//根据给定的ID选择匹配的元素，返回：单个元素$(“.myClass”) //根据给定的样式名称选择匹配的元素，返回：集合元素$(“div”) //根据给定的元素名称选择匹配的元素，返回：集合元素$(“#myDiv,div.myClass,span”) //根据给定的规则选择匹配的元素，返回：集合元素$(“*”) //选择页面所有元素，返回：集合元素层次选择器$(“div span”) //选择所有DIV元素下的所有SPAN元素（所有后代元素），返回：集合元素$(“div>span”) //选择所有DIV元素下的SPAN子元素（仅子元素），返回：集合元素$(“.myClass+div”) //选择样式名称为myClass的下一个DIV元素，返回：集合元素$(“.myClass+div”) //等价于$(“.myClass”).next(“div”);$(“.myClass~div”) //选择样式名称为myClass之后的所有DIV元素，返回：集合元素$(“.myClass~div”) //等价于$(“.myClass”).nextAll();$(“.myClass”).siblings(“div”)//选择样式名称为myClass的元素的所有同辈DIV元素（无论前后），返回集合元素过滤选择器（index从0开始）$(“div:first”) //选择所有DIV元素下的第一个DIV元素，返回：单个元素$(“div:last”)//选择所有DIV元素下的最后一个DIV元素，返回：单个元素$(“div:not(.myClass)”) //选择所有样式不包括myClass的DIV元素，返回：集合元素$(“div:even”) //选择所有索引是偶数的DIV元素，返回：集合元素$(“div:odd”) //选择所有索引是奇数的DIV元素，返回：集合元素$(“div:eq(index)”) //选择所有索引等于index的DIV元素，返回：集合元素$(“div:gt(index)”) //选择所有索引大于index的DIV元素，返回：集合元素$(“div:lt(index)”) //选择所有索引小于index的DIV元素，返回：集合元素$(“:header”) //选择所有标题元素（h1,h2,h3），返回：集合元素$(“div:animated”) //选择所有正在执行去画的DIV元素，返回：集合元素子元素过滤选择器（index从1开始）$(“:nth-child(index/even/odd)”) //选择每个父元素下的第index/偶数/奇数个子元素，返回：集合元素$(“:first-child”) //选择每个父元素下的第一个子元素，返回：集合元素$(“:last-child”) //选择每个父元素下的最后一个子元素，返回：集合元素$(“ul li:only-child”) //在UL元素中选择只有一个LI元素的子元素，返回：集合元素内容过滤选择器$(“:contains(text)”) //选择所有内容包含text的元素，返回：集合元素$(“div:empty”) //选择所有内容为空的DIV元素，返回：集合元素$(“div:has(span)”)//选择所有含有SPAN子元素的DIV元素，返回：集合元素$(“div:parent”) //选择所有含有子元素的DIV元素，返回：集合元素可见性选择器$(“:hidden”) //选择所有不可见的元素（type=”hidden”style=”display:none” style=”visibility:none”），返回：集合元素$(“:visible”) //选择所有可见的元素，返回：集合元素属性过滤选择器$(“[id]“) //选择所有含有id属性的元素，返回：集合元素$(“[class=myClass]”) //选择所有class属性值是myClass的元素，返回：集合元素$(“[class!=myClass]”) //选择所有class属性值不是myClass的元素，返回：集合元素$(“[alt^=begin]”) //选择所有alt属性值以begin开始的元素，返回：集合元素$(“[alt^=end]”) //选择所有alt属性值以end结束的元素，返回：集合元素$(“[alt*=some]”)//选择所有alt属性值含有some的元素，返回：集合元素$(“div[id][class=myClass]”) //选择所有含有id属性的并且class属性值是myClass的元素，返回：集合元素表单对象属性选择器$(“#myForm:enabled”) //选择ID属性为myForm的表单的所有可用元素，返回：集合元素$(“#myForm:disabled”) //选择ID属性为myForm的表单的所有不可用元素，返回：集合元素$(“#myForm:checked”) //选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素$(“#myForm:selected”) //选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素表单选择器$(“:input”) //选择所有<input> <select> <button> <textarea>元素，返回：集合元素$(“:text”) //选择所有单行文本框元素，返回：集合元素$(“:password”) //选择所有密码框元素，返回：集合元素$(“:radio”) //选择所有单选框元素，返回：集合元素$(“:checkbox”) //选择所有复选框元素，返回：集合元素$(“:submit”) //选择所有提交按钮元素，返回：集合元素$(“:image”) //选择所有图片按钮元素，返回：集合元素$(“:reset”) //选择所有重置按钮元素，返回：集合元素$(“:button”) //选择所有按钮元素，返回：集合元素$(“:file”) //选择所有上传域元素，返回：集合元素$(“:hidden”) //选择所有不可见域元素，返回：集合元素$(“:text”) //选择所有单选文本框元素，返回：集合元素三、JQuery中的DOM操作查找元素节点var str = $(“#myDiv”).text(); //<div id=”myDiv”title=”hello”>123</div>alert(str); //结果：123查找属性节点var str = $(“#myDiv”).attr(“title”); //<div id=”myDiv”title=”hello”>123</div>alert(str); //结果：hello创建元素节点var $li1 = $(“<span></span>”); //传入元素标记，自动包装并创建第一个li元素对象va r $li2 = $(“<span></span>”); //第二个,创建时需要遵循XHTML规则（闭合、小写）$(“#myDiv”).append($li1); //往id为myDiv的元素中添加一个元素$(“#myDiv”).append($li2); //结果：<divid=”myDiv”><span></span><span></span>&lt ;/div>$(“#myDIv”).append($li1).append($li2); //客串：传说中的链式写法，省一行代码 ^_^创建文本节点var $li1 = $(“<span>first</span>”);var $li2 = $(“<span>second</span>”);$(“#myDIv”).append($li1).append($li2);//结果：<divid=”myDiv”><span>first</span><span>sec ond</ span></div>创建属性节点var $li1 = $(“<span title=”111″>first</span>”);var $li2 = $(“<span title=”222″>second</span>”); $(“#myDIv”).append($li1).append($li2);//结果：<div id=”myDiv”><spantitle=”111″>first</span><spantitle=”222″>second</span></div>插入节点$(“#myDiv”).append(“<span></span>”); //往id为myDiv 的元素插入span元素$(“<span></span>”).appendTo(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素$(“#myDiv”).prepend(“<span></span>”); //往id为myDiv 的元素内最前面插入span元素$(“<span></span>”).prependTo(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素内的最前面$(“#myDiv”).after(“<span></span>”); //往id为myDiv的元素后面插入span元素（同级，不是子元素）$(“<span></span>”).insertAfter(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素后面（同级，不是子元素）$(“#myDiv”).before(“<span></span>”); //往id为myDiv 的元素前面插入span元素（同级，不是子元素）$(“<span></span>”).insertBefore(“#myDiv”); //倒过来，将span元素插入到id为myDiv的元素前面（同级，不是子元素）删除节点$(“#myDiv”).remove();//将id为myDiv的元素移除清空节点$(“#myDiv”).remove(“span”); //将id为myDiv的元素内的所有span元素移除复制节点$(“#myDiv span”).click( function(){//点击id为myDiv的元素内的span 元素，触发click事件$(this).clone().appendTo(“#myDiv”); //将span元素克隆，然后再添加到id为myDiv的元素内$(this).clone(true).appendTo(“#myDiv”); //如果clone传入true参数，表示同时复制事件})替换节点$(“p”).replaceWith(“<strong>您好</strong>”); //将所有p元素替换成后者 <p>您好</p> –> <strong>您好</strong>$(“<strong>您好</strong>”).replaceAll(“p”); //倒过来写，同上包裹节点$(“strong”).wrap(“<b></b>”); //用b元素把所有strong 元素单独包裹起来 <b><strong>您好</strong></b><b><strong>您好</strong></b>$(“strong”).wrapAll(“<b></b>”); //用b元素把所有strong元素全部包裹起来 <b><strong>您好</strong><strong>您好</strong></b> $(“strong”).wrapInner(“<b></b>”); //把b元素包裹在strong元素内 <strong><b>您好</b></strong>属性操作var txt = $(“#myDiv”).arrt(“title”); //获取id为myDiv的元素的title 属性$(“#myDiv”).attr(“title”,”我是标题内容”); //设置id为myDiv的元素的title属性的值$(“#myDiv”).attr({“title”:”我是标题内容”, “alt”:”我还是标题”); //一次性设置多个属性的值$(“#myDiv”).removeArrt(“alt”); //移除id为myDiv的元素的title属性样式操作var txt = $(“#myDiv”).arrt(“class”); //获取id为myDiv的元素的样式$(“#myDiv”).attr(“class”,”myClass”); //设置id为myDiv的元素的样式$(“#myDiv”).addClass(“other”); //在id为myDiv的元素中追加样式$(“#myDiv”).removeClass(“other”); //在id为myDiv的元素中移除other 样式$(“#myDiv”).removeClass(“myClass other”); //在id为myDiv的元素中移除myClass和other多个样式$(“#myDiv”).removeClass(); //在id为myDiv的元素中移除所有样式$(“#myDiv”).toggleClass(“other”); //切换样式，在有other样式和没other样式之间切换$(“#myDiv”).hasClass(“other”); //判断是否有other样式设置和获取HTML、文本和值alert( $(“#myDiv”).html() ); //获取id为myDiv的元素的HTML代码（相当于innerHTML）$(“#myDiv”).html(“<span>hello</span>”); //设置id为myDiv的元素的HTML代码alert( $(“#myDiv”).text() ); //获取id为myDiv的元素的HTML代码（相当于innerText）$(“#myDiv”).text(“hello”); //设置id为myDiv的元素的HTML代码alert( $(“#myInput”).val() ); //获取id为myDiv的元素的value值（支持文本框、下拉框、单选框、复选框等）$(“#myInput”).val(“hello”); //设置id为myDiv的元素的value值（下拉框、单选框、复选框带有选中效果）遍历节点var $cList = $(“#myDiv”).children(); //获取id为myDiv的元素的子元素（只考虑子元素，不考虑后代元素）var $sNext = $(“#myDiv”).next(); //获取id为myDiv的元素的下一个同辈元素var $sPrev = $(“#myDiv”).prev(); //获取id为myDiv的元素的上一个同辈元素var $sSibl = $(“#myDiv”).siblings(); //获取id为myDiv的元素的所有同辈元素var $pClos = $(“#myDiv”).closest(“span”); //获取id为myDiv的元素本身开始，最接近的span元素（向上查找）CSS-DOM操作$(“#myDiv”).css(“color”); //获取id为myDiv的元素的color样式的值$(“#myDiv”).css(“color”, “blue”); //设置id为myDiv的元素的color 样式的值$(“#myDiv”).css({“color”:”blue”, “fontSize”:”12px”}); //设置id为myDiv的元素的color样式的值（多个）$(“#myDiv”).css(“opacity”, “0.5″); //设置id为myDiv的元素的透明度（兼容浏览器）$(“#myDiv”).css(“height”); //获取id为myDiv的元素的高度（单位：px，兼容浏览器）$(“#myDiv”).height(); //同上（实际高度）$(“#myDiv”).css(“width”); //获取id为myDiv的元素的宽度（单位：px，兼容浏览器）$(“#myDiv”).width(); //同上（实际宽度）var offset = $(“#myDiv”).offset(); //获取id为myDiv的元素在当前窗口的相对偏移量alert( offset.top + “|” + offset.left );var offset = $(“#myDiv”).position(); //获取id为myDiv的元素相对于最近一个position设置为relative或absolute的父元素的相对偏移量alert( offset.top + “|” + off set.left );$(“#txtArea”).scrollTop();//获取id为txtArea的元素滚动条距离顶端的距离$(“#txtArea”).scrollLeft(); //获取id为txtArea的元素滚动条距离左侧的距离$(“#txtArea”).scrollTop(100); //设置id为txtArea的元素滚动条距离顶端的距离$(“#txtArea”).scrollLeft(100); //设置id为txtArea的元素滚动条距离左侧的距离四、JQuery中的事件和动画加载DOM$(window).load() 等价于 window.onload 事件$(document).ready() 相当于window.onload事件，但有些区别：(1)执行时机：window.onload 是在网页中所有元素（包括元素的所有关联文件）完全加载后才执行$(document).ready() 是在DOM完全就绪时就可以被调用，此时，并不意味着这些元素关系的文件都已经下载完毕(2)多次使用：可以在同一个页面注册多个$(document).ready()事件(3)简写方式：可以缩写成 $(function(){ }) 或 $().ready()事件绑定当文档装载完成后，可以通过bind()方法，为特定的元素进行事件的绑定，可重复多次使用bind( type, [data, ] fn );type：指事件的类型:blur（失去焦点）、focus（获得焦点）load（加载完成）、unload（销毁完成）resize（调整元素大小）、scroll（滚动元素）click（单击元素事件）、dbclick（双击元素事件）mousedown（按下鼠标）、mouseup（松开鼠标）mousemove（鼠标移过）、mouseover（鼠标移入）、mouseout（鼠标移出）mouseenter（鼠标进入）、mouseleave（鼠标离开）change（值改变）、select（下拉框索引改变）、submit（提交按钮）keydown（键盘按下）、keyup（键盘松开）、keypress（键盘单击）error（异常）data：指事件传递的属性值，event.data 额外传递给对象事件的值fn：指绑定的处理函数，在此函数体内，$(this)指携带相应行为的DOM元素合并事件hover(enter,leave)：鼠标移入执行enter、移出事件执行leave$(“#myDiv”).hover( function(){$(this).css(“border”, “1px solid black”);0}, function(){$(this).css(“border”, “none”);});toggle(fn1,fn2,…fnN)：鼠标每点击一次，执行一个函数，直到最后一个后重复$(“#myDiv”).toggle( function(){$(this).css(“border”, “1px solid black”);0}, function(){$(this).css(“border”, “none”);});事件冒泡下面的例子，BODY元素下有DIV元素，DIV元素下有SPAN元素，分别将三种元素都注册click事件。

【最全最详细】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学习笔记

第一章一、$(document).ready(function(){//do something});和window.onload的区别1.前者同一页面可以使用多次，后者出现多次只有最后一次能正确显示2.前者在DOM模型加载完成后就开始执行，后台在所有元素（包括图片）加载完成后执行3.前者可以简化为$(function(){//do something});后者没有简写形式。

二、jQuery比较常使用的是链式操作，比如一个书目导航条：$(function(){$(“ul”).click(function(){$(this).addClass(“current”).children(“li”).slideDown().end().sublings().removeClass(“current”).children(“li”).slideUp();})})对于同一元素不超过3个操作的，一般写同一行，如果操作过多，可以将类似的操纵写成一行，便于阅读。

三、jQuery对象和DOM对象的转换1.jQuery转化为DOM对象Var $variable = $(“tr”); //jQuery objectVar variable = $variable[0]; //DOM objectThe transpartent method.DomObject = jQueryObject[index] or = jQueryObject.get(index).2.DOM Object To jQuery ObjectVar variable = getElementsByTagName(“tr”); //DOM objectVar $variable = $(variable) // jQuery object;The transpartent method.jQueryObject = $(DomObject)四、jQuery开发工具1.Dreamweaver 可以安装插件提示jQuery 插件名称：jQuery_API.mxp2.Aptana 功能非常强大的、开源、专注javascript和Ajax开发IDE;3.Visual Studio 2008。

JQUERY学习总结

JQUERY学习总结jQuery是一个非常流行的JavaScript库，被广泛应用于Web开发中。

通过使用jQuery，开发者能够简化DOM操作、添加动画效果、处理事件、发送Ajax请求等等。

在学习jQuery的过程中，我总结了以下几个方面的知识。

1.选择器：2.DOM操作：jQuery提供了一系列的方法来操作DOM元素。

例如，通过`html(`和`text(`方法可以获取或者设置元素的内容，通过`append(`和`prepend(`方法可以向元素内部追加内容，通过`addClass(`和`removeClass(`方法可以添加和删除类名。

掌握这些方法可以让我们更加灵活地操作HTML元素。

3.事件处理：jQuery封装了丰富的事件处理方法，如`click(`、`hover(`、`keydown(`等。

通过这些方法，我们可以简化事件绑定和处理的流程。

此外，jQuery还提供了一些特殊的事件方法，比如`on(`和`trigger(`，可以实现事件的动态绑定和触发。

4.动画效果：jQuery可以很方便地为页面添加动画效果，如淡入淡出、滑动、展开收起等。

通过`fadeIn(`、`fadeOut(`、`slideUp(`等方法，我们可以对元素的可见性和位置进行动态控制，增加页面的交互性和美观性。

5. Ajax请求：jQuery内置了强大的Ajax功能，可以实现网页与服务器之间的数据交互。

通过`$.ajax(`方法，我们可以发送HTTP请求并处理响应。

同时，jQuery还提供了一些简化的方法，如`$.get(`和`$.post(`，用于发送GET和POST请求，使我们能够更快捷地进行数据请求和处理。

6.插件扩展：除了以上基本功能，jQuery还支持插件扩展，可以通过引入第三方插件来增强和扩展jQuery的功能。

例如，可以使用jQuery UI插件来创建丰富的用户界面组件，使用jQuery Validation插件验证表单输入等等。

jquery 中总结十章笔记

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默认选项。

jquery整理的笔记

JQUERY1导入两个js和一个css样式<link rel="stylesheet" href="js/css.css" type="text/css"></link> <script type="text/javascript" src="js/jquery1.4.2.js"></script> <script type="text/javascript"src="js/Validform.js"></script>2jquery会和dwr发生冲突，他们默认都是用$给jquery重新声明<script language="javascript">var j = jQuery.noConflict();</script>3淡入淡出的效果实现<script type="text/javascript">j(function(){j("body").hide(1000);j("body").fadeIn(3000);})</script>显示也可以：j("body").show(3000);4让普通按钮变成submit按钮<input type="button" value="提交" id="su">btnSubmit:"#su"5表单触发事件.registerform表单的styleClass="registerform"Validform:为插件点击按钮为#su就会触发jquery函数（j(function(){})）里面的类容自己要定义datatype等要再这个里面（插件）写如果是定义多个要打逗号不打会出不来效果j(".registerform").Validform()加载时就会调用j(".registerform").Validform({btnSubmit:"#su",datatype:{"c":/^[1-9][0-9]{5}(19[0-9]{2}|200[0-9]|2010)(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])[0-9]{3}[0-9xX]$/}});自己定义datetype:{ "c"：符合哪种格式}身份证必须符合这种格式c为上面定义的格式j("#humanIdCard").attr("datatype","c");j("#humanIdCard").attr("errormsg","请输入正确的身份证号码");6验证humanName：是文本框的id属性验证文本框的内容只能是(s2-20)字符2-20个长度j("#humanName").attr("datatype","s2-20");弹出不能为空的信息j("#humanName").attr("nullmsg","姓名不能为空");弹出错误的信息j("#humanName").attr("errormsg","姓名只能在2到20个字符之间");下拉框必须选j("#firstKindId").attr("datatype","select");验证邮箱为：efunction checkEmail(){j("#humanEmail").attr("datatype","e");j("#humanEmail").attr("errormsg","邮箱格式:xx@");if(j("#humanEmail").val()==""){//如果是空的话移除验证j("#humanEmail").removeAttr("datatype");}}Onkeyup:光标放进去再出来时调用验证邮箱的方法Onkeydown: 光标放进去时调用验证邮箱的方法<html:text property="hf.humanEmail" styleId="humanEmail"onkeyup="checkEmail()"/>7拿到下拉框选中的文本，给文本框styleId=firstKindName 赋值拿到文本框的值：j("#firstKindName ").val()j("#firstKindName").val(j("#firstKindId option:selected").text());<html:hidden property="hf.firstKindName" styleId="firstKindName"/>8如果是普通的文本框可以直接这样调用jquery但必须导入那两个文件<input type="text" datetype="s2-20" nullmsg="姓名不能为空" errormsg="姓名只能在2到20个字符之间">9：身份证验证正则表达式"c":/^[1-9][0-9]{5}(19[0-9]{2}|200[0-9]|2010)(0[1-9]|1[0-2])(0[1-9]|[ 12][0-9]|3[01])[0-9]{3}[0-9xX]$/10：datatype类型验证email：e验证邮编：p验证字符：s2-10 …其他还可以在写插件时自己定义10动态创建一个div 元素（以及其中的所有内容），并将它追加到body 元素中$("<div><p>Hello</p></div>").appendTo("body");视频教学第一次课：1JQuery实战第一讲：概述、环境准备及入门实例$.get();（$.post()）可以完成和服务器端进行交互三个参数urldatacallbackencodeURI(encodeURI(userName)):处理传过去的参数的中文乱码问题$.get("http://127.0.0.1:8080/JQuery/UserVerify?userName=" + encodeURI(encodeURI(userName)),null,function(response){//3.接收服务器端返回的数据，填充到div中$("#result").html(response);});服务器端String userName = URLDecoder.decode(param, "UTF-8");。

JQUERY学习总结

JQUERY学习总结JQuery是一个非常流行和常用的JavaScript库，它简化了JavaScript在网页中的操作和处理。

它提供了许多易于使用和强大的功能，可以大大提高开发者的生产力。

在这篇文章中，我将对JQuery进行学习总结，并分享一些我在学习JQuery过程中得到的一些见解和经验。

首先，JQuery的核心是选择器和操作。

通过使用选择器，我们可以轻松地选择和操作HTML元素。

JQuery的选择器语法与CSS选择器非常相似，所以如果你对CSS选择器已经很熟悉的话，学习和使用JQuery的选择器会很容易。

通过选择器，我们可以选择DOM元素，以及根据ID、类、属性和层级关系等条件来选择和过滤元素。

一旦我们选择了一个或多个元素，我们可以使用JQuery提供的方法来对它们进行操作，例如修改元素的样式、内容、属性和事件等。

JQuery还提供了一系列的效果和动画方法，可以为网页添加一些动态和交互效果。

例如，我们可以使用fadeIn(和fadeOut(方法来实现元素的淡入和淡出效果，使用slideDown(和slideUp(方法来实现元素的展开和收缩效果。

这些效果和动画方法可以大大提升用户体验，使网页看起来更加生动和吸引人。

同时，JQuery还提供了一些方法来处理和绑定事件，例如click(、mouseover(和keydown(等，可以让我们在用户与网页进行交互时执行一些特定的操作。

另外，JQuery还提供了AJAX（Asynchronous JavaScript and XML）支持。

AJAX是一种在后台和服务器进行数据交换的技术，可以实现网页的异步加载和更新。

JQuery封装了AJAX的底层实现细节，使得我们能够通过几行简单的代码来实现异步请求和数据处理。

通过AJAX，我们可以实现实时、动态加载内容和提交表单等功能，提高了网页的效率和用户体验。

除了上述功能之外，JQuery还提供了许多其他的特性和功能。

Jquery学习笔记

FGG_ jquery-1.2学习笔记整理一，jquery-1.2的基本用法1，将jquery-1.2库文件引入到你的项目里面2，在你的页面导入jquery-1.2库<script type="text/javascript" src="jslib/jquery-1.2.js"></script>3，jquery-1.2和java的异步交互function verify() {/*Jquery写法获得节点ID属性var jqueryObj = $("#userName");这样写是获得name属性var jqueryObj = $("input[name='userName']")*/var jqueryObj = $("#userName");/* var userName =$("#userName").val();从 Jquery封装的对象里面获得文本值*/var userName = jqueryObj.val();/*使用 Jquery对XMLHTTPrequest对象get请求的封装他包含3个参数第一个是服务器端的URI 第二个是需要传过去的值第三个是回调函数*/$.get("AjaxServer",{name:userName},huilai);}//回调函数function huilai(huilaide){/*将来ID名为yanzheng的节点值填充为服务器端返回的值相当于document.getElementById("yanzheng").value=huilaide;*/$("#yanzheng").html(huilaide);}/*为function verify() {}和function huilai(huilaide){}的集成写法*/ function verify2(){$.get("AjaxServer",{name: $("#userName").val()},function huilai(huilaide){$("#yanzheng").html(huilaide);});}4，页面代码二，Ajax_XMLHTTPrequest的基本用法ajax.js代码/*XMLHttpRequest基本应用,用户名验证*//*设定一个全局的参数用来创建XMLHttpRequest对象*/var xmlhttp;function ajaxjquery(){/*使用dom的方法获得文本框的值，相当与JQUERY的 $("#userName").val;*/ var userName = document.getElementById("userName").value;/*针对不同的浏览器创建XMLHttpRequest对象*/if(window.XMLHttpRequest){/*针对 FireFox, Mozillar, Opera, Safari, IE7, IE8*/xmlhttp = new XMLHttpRequest();/*针对某些特定版本的mozillar浏览器的BUG进行修正*/if(xmlhttp.overrideMineType){xmlhttp.overrideMineType("text/xml");}}else if(window.ActiveXObject){/*2个可以用来创建XMLHttpRequest对象的控件名称保存在一个数组中*/var activexName = ["MSXML2.XMLTTP","Microsoft.XMLHTTP"];for(var i = 0; i<activexName.length;i++){try{/*针对IE7版本以下*/xmlhttp = new ActiveXObject(activexName[i]);break;}catch(e){}}}if(!xmlhttp){alert("XMLHttpRequest对象创建失败，请更换更高版本的浏览器以保证您的正确浏览");return;}else{alert(xmlhttp);/*注册回调函数*/xmlhttp.onreadystatechange = huilai;/*设置连接信息，第一，设置请求方式 get/post，第二，设置请求URL，第三设置是同步请求还是异步true 表示异步 false是同步*/xmlhttp.open("GET","AjaxJQuery?userName="+userName,true);/*发送数据和服务器交互*/xmlhttp.send(null);/*-----------如果采用POST方法提交写法不同----------------xmlhttp.open("POST","AjaxJQuery",true);//需要设置请求头xmlhttp.setRequestHeader("Content-Type","application/x-www-form-u rlencoded");//POST方法发送数据xmlhttp.send("userName=" + userName);----------------------------------------------------*/ }}function huilai(){/*判断数据交互完成的状态为 4*/if(xmlhttp.readyState==4){/*判断数据交互是否成功*/if(xmlhttp.status == 200){/*纯文本的方式获得数据*/var responseText = xmlhttp.responseText;/*-------获得XML数据--------------------------//<message>假如标签名为message</message>var domObj = xmlhttp.responseXML;if(domObj){var messageNodes= domObj.getElementsByTagName("message");if(messageNodes.length>0){//获得文本节点var textNode = messageNodes[0].firstChild;//获得文本节点的内容var responseMessage = textNode.nodValue;//现实到页面var spanNode =document.getElementById("yanzheng").innerHTML = responseMessage;}}--------------------------------------------*/document.getElementById("yanzheng").innerHTML = responseText;}}}HTML页面代码<html><head><script type="text/javascript" src="jsserver/ajax.js"></script></head><body><h1>XMLHttpRequest简单应用（一）用户名验证</h1><hr /><form action=""><input type="text" id="userName" /><span id="yanzheng"></span><br><input type="button" value="验证" onclick="ajaxjquery()"/></form><br></body></html>服务器端代码public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html");PrintWriter out = response.getWriter();String userNameString = request.getParameter("userName");System.out.println(userNameString);if(userNameString==null || userNameString.length()<=0){out.print("UserName Null");}else{out.print("UserName: "+userNameString+" :YES");}out.flush();out.close();}web.xml<servlet><servlet-name>AjaxJQuery</servlet-name><servlet-class>com.fggajax.server.AjaxJQuery</servlet-class></servlet><servlet-mapping><servlet-name>AjaxJQuery</servlet-name><url-pattern>/AjaxJQuery</url-pattern></servlet-mapping>三，jquery读取XML的基本用法ajax.js代码function AJAXXMLS(){var userName = $("#userName").val();/*jquery封装好的异步交互方法也可以用$.get()和$.post()方法*/$.ajax({type:"POST", //设置交互方式url:"AJAXXMLServer",//设置交互urldata:"userName="+userName,//设置交互的数据dataType:"xml",//告诉jquery返回数据的各式success:huilai//设置回调方法});}function huilai(data){/*dom方式获得标签对象转换成jquery对象*/var jqueryObj = $(data);/*获得XML标签名字*/var message =jqueryObj.children();/*获得XML标签内的文本内容*/var text = message.text();/*将XML文本内容动态现实在页面的<span>标签文本中*/$("#yanzheng").html(text);}HTML页面代码<body><h1>Jquery读取XML各式文件的简单应用：用户名验证</h1><hr /><form action=""><input type="text" id="userName" /><span id="yanzheng"></span><br><input type="button" value="验证" onclick="AJAXXMLS()"/></form></body>服务器端代码public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/xml; charset=gbk");PrintWriter out = response.getWriter();String userNameString = request.getParameter("userName");System.out.println(userNameString);StringBuilder builder = new StringBuilder();builder.append("<message>");if(userNameString == null || userNameString.length()==0){ builder.append("userName NULL").append("</message>");}else{builder.append("userName: "+userNameString+"YES").append("</message>");}out.println(builder.toString());System.out.println(builder.toString());out.flush();out.close();}web.xml<servlet><servlet-name>AJAXXMLServer</servlet-name><servlet-class>com.fggajax.server.AJAXXMLServer</servlet-class> </servlet><servlet-mapping><servlet-name>AJAXXMLServer</servlet-name><url-pattern>/AJAXXMLServer</url-pattern></servlet-mapping>四，URL添加时间戳骗过IE不读缓存ajax.js代码/*为ajaxjquery(url)提供url值*/function fushuai(){var userName = $('#userName').val();ajaxjquery("JqueryUrl?userName="+userName);}function ajaxjquery(url){var url2 = converURL(url);$.get(url2,null,function huilai(fushuai){$("#yanzheng").html(url2+" : "+fushuai);});}/*给url地址增加一个时间戳骗过浏览器不读取缓存*/function converURL(url){/*获得时间戳*/var timtamp = (new Date()).valueOf();/*将时间戳拼接到url上*/if(url.indexOf("?")>=0){url =url+"&t="+timtamp;}else {url =url+"?t="+timtamp;}return url;}HTML页面代码<body><h1>给URL添加一个时间戳骗过部分浏览器不读取缓存</h1><hr /><form action=""><input type="text" id="userName" /><span id="yanzheng"></span><br><input type="button" value="验证" onclick="fushuai()"/></form><br></body>服务器端代码public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html; charset=gbk");PrintWriter out = response.getWriter();Integer integer =(Integer)request.getSession().getAttribute("ints");int ints = 0;if(integer==null){ints =1;}else{ints = integer.intValue()+1;}request.getSession().setAttribute("ints",ints);String userNameString = request.getParameter("userName");out.print(userNameString+" : "+ints);out.flush();out.close();}web.xml<servlet><servlet-name>JqueryUrl</servlet-name><servlet-class>com.fggajax.server.JqueryUrl</servlet-class> </servlet><servlet-mapping><servlet-name>JqueryUrl</servlet-name><url-pattern>/JqueryUrl</url-pattern></servlet-mapping>五，JQuery控制浮动窗口ajax.js代码function showwin(){/*获得节点对象后使用.css方法控制CSS样式*///$("#win").css("display","block");/*Jquery的show方法控制显示速度*///$("#win").show("slow");/*Jquery的fadeIn方法实现淡入淡出效果 */$("#win").fadeIn("slow");}function hide(){/*注意使用什么方法开启就必须有相对应的方法关闭*///$("#win").css("display","none");//$("#win").hide("slow");$("#win").fadeOut("slow");}CSS代码#win{/*id选择器*/border: 1px red solid;width: 200px;height: 200px;position: absolute;/*结对位置*/top: 100px;left: 100px;display: none;/*初始化窗口不可见*/}#div1{background-color: blue;/*控制栏目的背景颜色*/color: ywllow;/*控制栏目中的字体颜色*/padding-left: 3px;/*控制栏目的左内边距*/}#div2{padding-left: 3px;padding-top:5px;}#span1{/*控制开关按钮*/margin-left: 158px;/*是关闭开关向右移动*/cursor: pointer;/*让鼠标悬停时出现一个手指*/}HTML代码<script type="text/javascript"src="jquerylib/jquery-1.2.js"></script><script type="text/javascript" src="js/jquerywin.js"></script><link rel="stylesheet" href="css/divwin.css" type="text/css" /></head><body><h1>的JQuery实例1：浮动窗口</h1><hr /><a onclick="showwin()" href="#">显示浮动</a><div id="win"><div id="div1"><span id="span1" onclick="hide()">关闭</span></div><div id="div2">内容栏目</div></div></body>六，JQuery实现弹出菜单和动态装载ajax.js代码/*页面加载时执行JS方法*/$(document).ready(function(){/*给所有的ul菜单注册点击事件*///$("ul").click(function(){/*给ul下面的span注册单击事件*/$("ul>span").click(function(){/*找到当前节点的子节点*///var lis = $(this).children("li");/*找到当前span节点的兄弟节点*/var lis = $(this).nextAll("li");/*loggle可切换元素的显示状态关闭时开启，开启时关闭*/lis.toggle("show");});$("li > div").click(function(){/*load方法可以动态装载另外一个页面到当前节点内*/$("#fushuai").load($(this).attr("id"));});});css代码li {list-style: none;/*设置LI的小黑点消失*/margin-left: 18px;/*控制边距*/display: none;/*先把子菜单隐藏*/}span{cursor: pointer ;/*让鼠标悬停时出现一个手指*/}html代码<link rel="stylesheet" href="css/JQueryMenu.css"type="text/css"></link><script type="text/javascript"src="jquerylib/jquery-1.2.js"></script><script type="text/javascript" src="js/JQueryMenu.js"></script> </head><body><h1>JQuery弹出菜单</h1><hr /><ul><span>三八停总店</span><li><div id="JqueryWindow.jsp">春花分店</div></li><li><div>车车分店</div></li></ul><ul><span>沿河街总店</span><li><div>小草伊人分店</div></li><li><div>和尚洗头分店</div></li></ul><div id="fushuai"></div></body>七，JQuery实现可编辑文本AJAX代码/*在页面装载时候给让TD拥有一个点击事件*/$(document).ready(function(){/*点击TD的事件*/var tds = $("td").click(function fushuai(){/*取到当前TD的文本内容*/var tdtext = $(this).text();/*清空TD的文本值，可以使用remove清空*/$(this).html("");/*创建<input>节点，如果没有<>就是找到节点*/var input =$("<input>");/*设置文本的属性值*/input.attr("value",tdtext);input.attr("size",18);/*设置input响应键盘事件*/input.keyup(function(event){/*解决浏览器对象的差异*/var myevent =event || window.event;/*判断按下并弹起的是那个键*/if(myevent.keyCode==13){var inputval=$(this).val();/*获得当前原属的父原属*/var tdn = $(this).parent();/*将input的val填充到他的父原属的文本中*/tdn.html(inputval);/*父原属重新获得单击事件,递归方式获得单击事件*/tdn.click(fushuai);}});/*将文本框加入到TD中*///input.appendTo($("this"));$(this).append(input);/*文本框内容被全部选中*/input.get(0).select();/*移除当前TD上的点击事件*/$(this).unbind("click");});});html代码<link rel="stylesheet" href="css/JQueryEdit.css"type="text/css"></link><script type="text/javascript"src="jquerylib/jquery-1.2.js"></script><script type="text/javascript"src="js/JQueryEdit.js"></script></head><body><h1>JQuery实现可编辑文本</h1><hr /><table align="center" width="240"><tbody><tr><td width="120" height="24">fushuai1</td><td width="120" height="24">fushuai2</td></tr></tbody></table></body>CSS代码table,td{/*让相邻的边框全部合并*/border-collapse: collapse;;border: 1px solid black;/*设置边框的像素*/}八,jquery/json数据实现股市行情AJAX代码/*全局变量保存服务器返回的股票对象*/var objs;/*objs的节点对象*/var div1s;/*进入页面装载数据*/$(document).ready(function(){getInfo();/*每过1000毫秒调用一次getInfo方法*/setInterval(getInfo,1000);var divStock=$("#stock").css("border","1px solid black").css("width","200px").css("position","absolute").css("z-index","99").css("background-color","blue");/*页面加载时隐藏弹出框*/divStock.hide();var b=$("b").css("cursor","pointer");;/*鼠标进入*/b.mouseover(function(event){var b1=$(this);/*获得节点ID的名字*/div1s= b1.parent().attr("id");fushuai();/*找到当前对象的位置，返回的值是左边界和上边界的值*/var offset = b1.offset();/*设置弹出框的 left top的位置等于当前原属的位置*/divStock.css("left",offset.left+70+"px").css("top",offset.top+b1.height()+20+"px");/*设置弹出框的 left top的位置在鼠标的X,Y轴的后10pxvar myEvent = event || window.event;divStock.css("left",myEvent.clientX + 10 +"px").css("top",myEvent.clientY + 10 +"px");*/divStock.show();});/*鼠标离开*/b.mouseout(function(){divStock.hide();});});/*给url地址增加一个时间戳骗过浏览器不读取缓存*/function converURL(url){/*获得时间戳*/var timtamp = (new Date()).valueOf();/*将时间戳拼接到url上*/if(url.indexOf("?")>=0){url =url+"&t="+timtamp;}else {url =url+"?t="+timtamp;}return url;}/*想服务器端发起请求，获得数据*/function getInfo(){var url = converURL("GetStocksInfo");$.get(url,null,function(data){/*接受并解析Json数据格式的对象*/objs=eval(data);/*get方法后面加个值json就不需要再用eval转换json格式里面的对象了在返回的时候就被JQuery转换过来了*///objs=data;/*获取两只股票的当前指数*/var szzs=objs["300001"];var pfyh=objs["000001"];/*获得页面中对应的节点然后填充最新的股票价格*/var span1 = $("#300001").children("span");span1.html(szzs.now);if(szzs.now > szzs.yes){span1.css("color","red");}else{span1.css("color","green");}/*找到#000001下的SPAN 节点对象*/var span2 = $("#000001").children("span");span2.html(pfyh.now);if(pfyh.now > pfyh.yes){span2.css("color","red");}else{span2.css("color","green");}fushuai();}/*,"json"*/);}function fushuai(){var stockobj = objs[div1s];for(var var1 in stockobj){if(var1 != name){$("#"+var1).children("span").html(stockobj[var1]);}}}}Servlet代码package com.jquery.bens;import java.io.IOException;import java.io.PrintWriter;import java.util.HashMap;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class GetStocksInfo extends HttpServlet {private HashMap<String, Stock>stocks;public HashMap<String, Stock> getStocks() {return stocks;}public void setStocks(HashMap<String, Stock> stocks) {this.stocks = stocks;}@Overridepublic void init() throws ServletException {stocks =new HashMap<String, Stock>();//创建股票Stock szzs = new Stock(3000.0,2990.1,"上证指数","300001");Stock pfyh = new Stock(23.23,23.50,"浦发银行","000001");//将2只股票存放在stocks的map中stocks.put(szzs.getId(), szzs);stocks.put(pfyh.getId(), pfyh);System.out.println(stocks);}public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType("text/html; charset=gbk");PrintWriter out = response.getWriter();/**返回两只股票的信息*//**计算随机数*/double sz = Math.random() * 20;double pf = Math.random() * 0.5;/**控制随即数是涨还是跌*/boolean szs = ((int)(Math.random() * 20)%2==0);boolean pfs = ((int)(Math.random() * 10)%2==0);/**将随即数和当前股票价格进行加或者减*/Stock szzs = stocks.get("300001");Stock pfyh = stocks.get("000001");double temp;if(szs){temp = szzs.getNow() + sz;}else {temp = szzs.getNow() - sz;}temp = (int)(temp*100)/100.0;szzs.setNow(temp);if(pfs){temp = pfyh.getNow() + pf;}else {temp = pfyh.getNow() - pf;}temp = (int)(temp*100)/100.0;pfyh.setNow(temp);//out.println(szzs+"<br />"+pfyh);/**采用Json的数据格式返回2只股票的昨天收盘，今天开盘和当前价格*/StringBuilder builder = new StringBuilder();/**数组的方式builder.append("[{name:\"").append(szzs.getName()).append("\",id: \"").append(szzs.getId()).append("\",yes:").append(szzs.getYesterday()+",").append("tod:"+ szzs.getToday()+",").append("yess:"+szzs.getNow()+"},").append("{name:\"").append(pfy h.getName()).append("\",id:\"").append(pfyh.getId()).append("\",yes:").append(pfyh.getYesterday( )+",tod:").append(pfyh.getToday()).append(",yess:").append(pfyh.getNow()).append("}]");*//**对象的方式*/builder.append("({\""+szzs.getId()+"\":{name:\"").append(szzs.getName()).append("\",").append("yes:").append(szzs.getYesterday()).append(",tod:"+szzs.getToday()).append(",now:"+szzs.getNow()+"},").append("\""+pfyh.getId()+"\":{name:\"").append(pfyh.getName()).append("\",").append("yes:").append(pfyh.getYesterday()+",tod:").append(pfyh.getToday()).append(",now:").append(pfyh.getNow()).append("}})");out.print(builder);System.out.println(builder);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doGet(request, response);}}JavaBean代码package com.jquery.bens;public class Stock {/**股票name*/private String name;/**股票id*/private String id;/**股票昨天收盘价*/private double yesterday;/**股票今天开盘价*/private double today;/**股票当天价*/private double now;public Stock(double yesterday,double today,String name,String id){ this.yesterday = yesterday;this.today = today; = name;this.id = id;this.now = today;}public String getName() {return name;}public void setName(String name) { = name;}public String getId() {return id;}public void setId(String id) {this.id = id;}public double getYesterday() {return yesterday;}public void setYesterday(double yesterday) {this.yesterday = yesterday;}public double getToday() {return today;}public void setToday(double today) {this.today = today;}public double getNow() {return now;}public void setNow(double now) {this.now = now;}public String toString() {return +":"+this.now;}}html代码<script type="text/javascript"src="jquerylib/jquery-1.2.js"></script><script type="text/javascript" src="js/GetStocksInfo.js"></script> </head><body><h1>使用Json数据格式动态股票信息</h1><hr /><div id="300001"><b>上证指数:</b><span></span></div><div id="000001"><b>浦发银行:</b><span></span></div><div id="stock"><div id="yes">昨天收盘：<span id=""></span></div><div id="tod">今天开盘：<span id=""></span></div><div id="now">当天指数：<span id=""></span></div></div></body>Web.xml代码<servlet><servlet-name>GetStocksInfo</servlet-name><servlet-class>com.jquery.bens.GetStocksInfo</servlet-class><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>GetStocksInfo</servlet-name><url-pattern>/GetStocksInfo</url-pattern></servlet-mapping>九，jquery-1.2模仿百度搜索栏客户端代码ajax代码这个实例需要JQuery1.3版本支持/*控制索引值*/var fushuiInt =-1;/*获得提交延迟值*/var timoutId;$(document).ready(function(){/*文本框*/var wordNodes = $("#word");var wordNodestype = wordNodes.offset();/*隐藏自动补全提示框*/$("#auto").hide().css("position","absolute").css("border","1px black solid").css("left",wordNodestype.left+"px").css("top",wordNodestype.top+wordNodes.height()+7+"px").css("width",wordNodes.width()+4);/*给文本框添加一个键盘按下并弹起的事件*/wordNodes.keyup(function(event){var myEvent = event || window.event;var keyCode = myEvent.keyCode;/*判断键盘输入不同的键做不同的抄作，参数参考键码表*//*aA-zZ*//*退格*//*Del*/if(keyCode>=65 &&keyCode<=90 ||keyCode==8 ||keyCode==46){ /*获得文本框内容*/var wordText = wordNodes.val();/*文本内容不为空才想服务器端请求*/var autoNodes = $("#auto");if(wordText!=""){/*上次提交未完成的话就取消抄作，* 以减少用户在输入未完成的情况下向服务器发送请求*/clearTimeout(timoutId);/*对用户提交数据进行延迟500毫秒发送，它会返回延迟值*/timoutId = setTimeout(function(){/*将文本框内容发送到服务器*/$.get("AutoComlete",{word:wordText},function(data){/*将dom对象的data转换成JQuery的对象*/var jqueryObj = $(data);/*找到<word>节点*/var wordNodes = jqueryObj.find("word");autoNodes.html("");/*用each方法遍历word取出类容,然后将内容添加到弹出框这个方法携带2个参数一个是集合的索引号，一个是索引对应的值*/wordNodes.each(function(i){var wordNodes = $(this);/*找到一个内容就创建一个DIV并将内容添加到DIV内*/var newDivNode= $("<div>").attr("id",i);newDivNode.html(wordNodes.text()).appendTo(autoNodes);/*鼠标进入*/newDivNode.mouseover(function(){if(fushuiInt !=-1){$("#auto").children("div").eq(fushuiInt).css("background-color","white");}fushuiInt = $(this).attr("id");$(this).css("background-color","red").css("cursor","pointer");});/*鼠标离开*/newDivNode.mouseout(function(){$(this).css("background-color","white");fushuiInt=-1;});/*鼠标单击*/newDivNode.click(function(){var thisText = $(this).text();$("#word").val(thisText);$("#auto").hide();fushuiInt=-1;alerts();/*提交服务器方法*/});});if(wordNodes.length > 0){/*如果找的到节点对象就现实自动补全提示框*/autoNodes.show();}else{autoNodes.hide();fushuiInt =-1;}},"xml");},"1000");}else{autoNodes.hide();fushuiInt =-1;}}else if(keyCode == 38 || keyCode == 40){if(keyCode == 38){/*按向上*/var autodiv= $("#auto").children("div");if(fushuiInt!=-1){/*eq取这个的对象集合中的第 int 个对象*/autodiv.eq(fushuiInt).css("background-color","white");fushuiInt--;}else{fushuiInt =autodiv.length -1;}if(fushuiInt ==-1){fushuiInt = autodiv.length -1;}else{autodiv.eq(fushuiInt).css("background-color","red");}}if(keyCode == 40){/*按向下*/var autodiv= $("#auto").children("div");if(fushuiInt!=-1){autodiv.eq(fushuiInt).css("background-color","white");}fushuiInt++;if(fushuiInt==autodiv.length){fushuiInt = 0;}autodiv.eq(fushuiInt).css("background-color","red");}}else if(keyCode == 13){/*回车*/if(fushuiInt!=-1){var comText =$("#auto").children("div").eq(fushuiInt).text();$("#auto").hide();$("#word").val(comText);fushuiInt=-1;alerts();/*提交服务器方法*/}else{}}});/*按提交按钮的时候触发事件*/$("input[type='button']").click(function(){alerts();});function alerts(){$("#auto").hide();fushuiInt =-1;alert("数据【 "+wordNodes.val()+" 】被提交到服务器");}});HTML代码<script type="text/javascript"src="jquerylib/jquery-1.3.js"></script><script type="text/javascript"src="js/AutoComlete.js"></script></head><body><h1>JQuery实现搜索引擎的自动补全效果</h1><hr />------------------------------------<input type="text"id="word"/><input type="button" value="付帅一下" /><br><div id="auto"></div></body>JSP代码<%@ page language="java" contentType="text/xml; charset=utf-8"%> <%String word =(String)request.getParameter("word");%><words><%if("ajax".startsWith(word)){%><word>ajax</word><%}if("apple".startsWith(word)){%><word>apple</word><%}if("ajavaScript".startsWith(word)){%><word>ajavaScript</word><%}if("ajax niu".startsWith(word)){%><word>ajax niu</word><%}if("ajax lousui".startsWith(word)){%><word>ajax lousui</word><%}if("fushuai".startsWith(word)){%><word>fushuai</word><%}if("b sun".startsWith(word)){%><word>b sun</word><%}if("sun b".startsWith(word)){%><word>sun b</word><%}if("niub".startsWith(word)){%><word>niub</word><%}if("cctv".startsWith(word)){%><word>cctv</word><%}if("ccttv".startsWith(word)){%><word>ccttv</word><%}if("lcc".startsWith(word)){%><word>lcc</word><%}if("ajaxsssss".startsWith(word)){%><word>ajaxsssss</word><%}if("fgg go".startsWith(word)){%><word>fgg go</word><%}if("bbcc".startsWith(word)){%><word>bbcc</word><%}if("ccbb".startsWith(word)){%>。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

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

jquery（html，props）：该函数根据提供的HTML标记代码，动态创建由jquery对象封装的DOM元素，同时对该DOM元素设置一组属性、事件等如：jquery（“<input>”,{type:"text",name="username"}）上述代码将创建一个input节点，并设置type属性为text，name属性为username，同样该DOM元素可以被动态的添加到页面中。

jquery（html，[ownerDocument]）:该函数根据提供的HTML标记代码，动态创建由jquery 对象封装的DOM元素，并指定该DOM元素所在的文档。

jquery对象不是普通对象，所以一般的变量无法对其直接饮用，不能写成var obj=jquery();应该是var $obj=jquery();4、jquery的基本选择器包括css选择器、层级选择器和表单选择器。

层级选择器：1、子元素选择器：用于在给定的父元素下查找这个父元素下的所有子元素，语法如下：$("parent>child")2、后代元素选择器：用于在给定的祖先元素下匹配所有的后代元素，语法：$("ancestor descendant")之间用空格隔开，如$("form input")3、紧邻同辈元素选择器：紧邻同辈元素选择器用于匹配所有紧邻在prev元素后的next元素如：$("prev+next"),其中next表示一个有效选择器，并且紧邻着prev选择器，两者之间用+分隔。

4.相邻同辈元素选择器：用于选择某元素后面所有的同辈元素，如$("prev~siblings")表单选择器：表单域就是指网页中的input 、textarea、select、button元素,jquery提供了一组选择器，专门用于从文档中选择表单域，这些表单器均以冒号：开头。

如:$("：text").attr("value","文本框")设置type为text的文本框值为文本框过滤选择器:在基本选择器的基础上添加过滤选择器来完成查询任务，可以使用元素的索引值、内容、属性、子元素位置、表单域属性以及可见性作为筛选条件。

简单过滤选择器：主要是根据索引值对元素进行筛选，他们均以冒号：开头，并且与另一个选择器一起使用。

1、：first选择器：$("selector:first")或者：last选择器：$("selector:last"),:odd选择器用于选择索引为奇数（从0开始计数）的所有元素，如：$("selector:odd"):even选择器：用于选择索引为偶数（从0计数）的所有元素，如$("selector:even"):eq()选择器：用于从匹配的集合中选择索引等于给定值的元素，如$("selector:eq(index)"),index为指定元素在selector集合中的索引值（从0开始计数）：gt()选择器：用于从匹配的集合中选择索引值大于给定值的元素，如$("selector:gt(index)"):lt()选择器：用于从匹配的集合中选择索引值小于给定值的所有元素，如$("selector:lt(index)")其中index为一个非负整数，：not()选择器用于从匹配的集合中去除所有与给定选择器匹配的元素，如：$("selector:not(selector2)")如$("td:not(:first,:last)")去除第一个和最后一个单元格。

：header选择器用于选择所有诸如h1、h2、h3之类的标题元素。

$(":header"),:animated()选择器：用于选择所有正在执行动画效果的元素。

如$("selector:animated")内容过滤选择器：如果将某个选择器或内容过滤选择器一起使用，就可以从查询到的元素中进一步筛选出具有给定文本或子元素的元素。

1、：contains()选择器：用于选择包含给定文本的所有元素，$("selector:contains(text)"),text为指定的要查找的文本，其引号是可选的。

2、has（）选择器：用于选择包含给定子元素的元素，如$("selector1:has(selector2)"),:empty选择器：用于选择不包含子元素或文本的所有空元素，如$("selector:empty"),:parent选择器：用于选择包含子元素或文本的元素，与empty选择器的作用相反，如$("selector:parent")属性过滤选择器：jquery可以根据各种属性对由选择器查到的元素进行过滤。

属性过滤选择器包含在中括号[]中，不能以冒号开头1，包含属性选择器：用于选择包含给定属性的所有元素，$("selector[attribute]")2.属性等于选择器：用于选择给定属性等于某特定值的所有元素。

如$("selector[attribute=value]")3、属性包含选择器：用于选择指定属性值包含给定字符串的所有元素，如：$("selector[attribute*=value]")value为属性值，引号是可选的。

4、属性包含单词选择器：用于指定属性值中包含给定单词（由空格分隔）的元素，如$("selector[attribute~=value]"),其中单词由value指定，是由空格分隔的字符串5、属性不等于选择器：用于选择不包含指定属性，或者包含该属性但属性值不等于给出的value值的所有元素，如$("selector[attribute!=value]")6属性开始选择器：用于选择给定属性是以某特定值开始的所有元素，如$("selector[attribute^=value]")7、属性结尾选择器：用于选择指定属性是以某个给定值结尾的所有元素。

$("selector[attribute$=value]"),与属性开始选择器用法相反。

8、符合属性选择器：用于选择同时满足多个条件的所有元素。

$("selector[selector1][selector2][selector3]")子元素过滤器：其必须与某个选择器一起使用，首先使用这个选择器进行查询，由此得到一个父元素数组，然后按照子元素过滤器指定的规则对父元素进行进一步的筛选。

1、：first-child 选择器：用于选择其父级的第一个子元素的所有元素，如$("selector:first-child")2、last-child 选择器：用于选择其父级的最后一个子元素的所有元素，如$("selector:last-child")3、：nth-child 选择器：用于选择父元素下的第n个子元素或奇偶元素，如$("selector:nth-child(index/even/odd/euqation)")4、：only-child选择器：用于选择某元素的唯一选择器，如$("selector:only-child")表单属性过滤选择器：$("selector:checked")、$("selector:enabled")(用于选择所有可用的表单域)$("selector:disabled")、$("selector:selected"):用于选择从列表框选择所有选中的option元素。

可见性过滤选择器：$("selector:hidden")$("selector:visible")选择所有的不可见和可见元素。

搜索操作：jquery可以对页面元素进行搜索，如搜索父元素、同辈元素和搜索子元素3中搜索方式。