JQUERY学习知识重点.doc

.-基于属性的选择器在HTML中，几乎所有元素都具有属性，比如：1. <imgsrc=""alt=""width=""height=""border="0"/>2. <inputtype="text"name="email"value=""size="80"/>上面两个HMTL元素中包含了九个属性。利用jQuery，我们可以根据元素的属性和属性值来对元素进行选择。一起看看以下例子中的选择器：3. $(document).ready(function() 4. 5. /Alltheimageswhosewidthis600px 6. 7. $("imgwidth=600").click(function() 8. 9. alert("Youvejustselectedanimagewhosewidthis600px"); 10. 11. ); 12. 13. /Alltheimageshavingawidthdifferentto600px 14. 15. $("imgwidth!=600").click(function() 16. 17. alert("Youvejustselectedanimagewhosewidthisnot600px"); 18. 19. ); 20. 21. /Alltheinputswhosenameendswithemail 22. 23. $("inputname$=email").focus(function() 24. 25. alert("Thisinputhasanamewhichendswithemail."); 26. 27. ); 28. 29. );基于属性的选择器在HTML中，几乎所有元素都具有属性，比如：1. <imgsrc=""alt=""width=""height=""border="0"/>2. <inputtype="text"name="email"value=""size="80"/>上面两个HMTL元素中包含了九个属性。利用jQuery，我们可以根据元素的属性和属性值来对元素进行选择。一起看看以下例子中的选择器：3. $(document).ready(function() 4. 5. /Alltheimageswhosewidthis600px 6. 7. $("imgwidth=600").click(function() 8. 9. alert("Youvejustselectedanimagewhosewidthis600px"); 10. 11. ); 12. 13. /Alltheimageshavingawidthdifferentto600px 14. 15. $("imgwidth!=600").click(function() 16. 17. alert("Youvejustselectedanimagewhosewidthisnot600px"); 18. 19. ); 20. 21. /Alltheinputswhosenameendswithemail 22. 23. $("inputname$=email").focus(function() 24. 25. alert("Thisinputhasanamewhichendswithemail."); 26. 27. ); 28. 29. );Widget组件选择器除了插件的选择器之前，还有一些基于元素某些属性或位置的选择器。下面让我们看看这些更为重要的选择器：1. $(document).ready(function() 2. 3. /Allthehiddenimagesareshown 4. 5. $("img:hidden").show(); 6. 7. /Thefirstpisgoingtobeorange 8. 9. $("p:first").css("color","orange"); 10. 11. /Inputwithtypepassword 12. 13. /thisis$("inputtype=password") 14. 15. $("input:password").focus(function() 16. 17. alert("Thisisapassword!"); 18. 19. ); 20. 21. /Divswithparagraph 22. 23. $("div:has(p)").css("color","green"); 24. 25. /Wecanalsocombinethem.with() 26. 27. /Allnotdisabledcheckboxes 28. 29. $("input:checkbox(:not(:disabled)").hover(function() 30. 31. alert("Thischeckboxisworking."); 32. 33. ); 34. 35. );对树进行选择和转换选择就想树一样，网站结构中叶存在子与父。在jQuery中，我们可以利用这一结构。假设我们拥有相同的html，但是现在我们想要选择名为“main”的div中的p元素，但是不想对任何有关p元素的东西造成变化。我们有三种可能的方案，如下：1. $("#wrapper").children(#main).children(p).css("color","orange"); 2. $("#wrapper").children().children(p).css("color","orange"); 3. $("#main").children(p).css("color","orange");利用children方法可以选择树中位于其他元素下的某个元素。如果我们传递给它一个选择器，该方法将仅选择我们需要的元素，如果不是这样，父元素的所有子元素都将被选中。让我们看看第一个和第二个选择器直接的区别。唯一的不同之处在于：第二个选择器中我们什么也没有指定，所有每一个子元素都会被选中。此处的关键在于：在上图中wrapper这个div元素下除main之外并没有其他子元素，所以我们得到的结果是一样的。添加元素现在我们在树中添加元素。这个元素可以是段落、div元素、表格等等，假设我们想要添加一个列表，如下：4. <ul>5. 6. <li>Dog</li>7. 8. <li>Cat</li>9. 10. <li>Frog</li>11. 12. </ul>只是一些字符串，所以我们可以在JavaScript代码中这样写：13. varlist="<ul>n"14. 15. +"<li>Dog</li>n" 16. 17. +"<li>Cat</li>n" 18. 19. +"<li>Frog</li>n" 20. 21. "</ul>"现在我们要在html中某个地方添加字符串。比如，在之前我们选择的p元素之后。最后我们可以输入完整的代码，如下所示：22. $(document).ready(function() 23. 24. varlist="<ul>n"25. 26. +"<li>Dog</li>n" 27. 28. +"<li>Cat</li>n" 29. 30. +"<li>Frog</li>n" 31. 32. "</ul>" 33. 34. $("#wrapper").children(#main).append(list); 35. 36. );字面上我们将字符串附加到HTML中的</p>，结果是这个列表显示在p元素之后。移除元素移除元素并不难，当我们谈到对树进行转换时，在这一过程一定会涉及元素的移除。下面我们来移除之前选择的那个段落（注意我们可以再次使用选择器）。1. $("#wrapper").children(#main).children(p).remove();2. 在这一代码中，位于选中元素之中的所有元素都将被移除，所以必须十分小心。如果div下有一个列表，当我们移除该div时，div和列表都会被移除。表面之下jQuery类似只露出一角的冰山，在水面之下还有更多内容。这一小结中，我们将向你展示某些表面之下的内容。绑定（Bind）绑定是一种方法，利用它，我们可以将一个事件（鼠标点击、悬置等等）与一个方法连接起来。这有点类似：当用户单击此处时，调用该方法。听起来很熟悉，对吗？没错，我们经常这样做。看看以下示例：3. $(document).ready(function() 4. 5. $("#id").click(function() 6. 7. alert("Thatclickwasamazing!"); 8. 9. ); 10. 11. );上文中click()方法在以下代码相对于wrapper：12. $(document).ready(function() 13. 14. $(#id).bind(click,function() 15. 16. alert("Thatclickwasamazing!"); 17. 18. ); 19. 20. );此外，使用unbind()方法可以解除事件与元素的连接。定义你自己的jQuery方法目前我们看到了一些方法，如click、bind、hover等等，但是我们如何定义自己的方法？如何使用$(selector).mymethod()这样的语句调用这些方法？以下代码提供了这些问题的解决方案。定义一个方法，显示一个元素的值。1. /ThenamewillbealertVal 2. jQuery.fn.alertVal=function() 3. 4. varelement=$(this0);/Thatsourelement 5. 6. if(element.val() 7. 8. alert(element.val();/Thatsourelementsvalue 9. 10. ; 11. /Thisisthewaywecanuseit 12. $("selector").alertVal();回调（callback）是常用的解决方案使用回调，我们可以在其他方法完成时执行某个方法。你可以将回调方法看做对别人说：但你做完时，给我电话，因为我要做我的那份工作。不过现在的问题是：如何使用回调？13. $(document).ready(function() 14. 15. myCallBack=function() 16. 17. alert("Imacallbackalert."); 18. 19. 20. 21. /WhenthegetfinishesthenmyCallBackisexecuted 22. 23. $.get(myhtmlpage.html,myCallBack); 24. 25. );注意：如果该函数包含参数，我们必须使用以下方式：26. $(document).ready(function() 27. 28. $.get(myhtmlpage.html,function() 29. 30. myCallBack(param1,param2); 31. 32. ); 33. 34. ); jQuery中为我们提供了很多有用的方法和属性，文章总结了一些常用的函数和方法。个人认为在开发中会比较常用的，在实际的开发中我们可能会用到其他的方法和属性，文中只是个人认为新手初学jQuery时，必须掌握的一些方法。 51CTO推荐专题：入门到精通 jQuery开发手册 jQuery事件处理 ready(fn) 代码： $(document).ready(function() / Your code here.)； 作用：它可以极大地提高web应用程序的响应速度。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。 bind(type,data,fn) 代码： $("p").bind("click", function() alert( $(this).text() );); 作用：为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。起到事件监听的作用。 toggle(fn,fn) 代码：$("td").toggle( function () $(this).addClass("selected"); , function () $(this).removeClass("selected"); ); 作用：每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。挺有趣的一个函数，在动态实现某些功能的时候可能会用到。(像click(),focus(),keydown()这样的事件这里就不提了，那些都是开发中比较常用到的。) jQuery外观效果 addClass(class)和removeClass(class) 代码： $(".stripe tr").mouseover(function() $(this).addClass("over");).mouseout(function() $(this).removeClass("over");); 也可以写成： $(".stripe tr").mouseover(function() $(this).addClass("over") );$(".stripe tr").mouseout(function() $(this).removeClass("over") ); 作用：为指定的元素添加或移除样式，从而实现动态的样式效果，上面的实例中实现鼠标移动双色表格的代码 css(name,value) 代码： $("p").css("color","red"); 作用：很简单，就是在匹配的元素中，设置一个样式属性的值。这个个人感觉和上面的addClass(class)有点类似。 slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown() 代码：$("#btnShow").bind("click",function(event) $("#divMsg").show() );$("#btnHide").bind("click",function(evnet) $("#divMsg").hide() ); 作用：jQuery中提供的比较常用的几个动态效果的函数。还可以添加参数：show(speed,callback)以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。 animate(params,duration,easing,callback) 作用：制作动画效果用到的函数，功能非常的强大，可以连续使用此函数。 查找筛选 map(callback) HTML 代码:Values:< INPUT value=John name=name> < INPUT value=password name=password>< INPUT value="< A href=" name=url ? %22 ejohn.org http:>http:/ejohn.org/%22/< /A>< FORM> jQuery 代码:< /FORM> $("p").append( $("input").map(function() return $(this).val();).get().join(", ") ); 结果: John, password, < A href="http:/ejohn.org/%3C/p">http:/ejohn.org/%3C/p< /A>> 作用：将一组元素转换成其他数组（不论是否是元素数组）你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用$.map()来方便的建立。 find(expr) HTML 代码:< SPAN>Hello< /SPAN>, how are you?jQuery 代码: $("p").find("span") 结果: < SPAN>Hello< /SPAN> 作用：搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。 文档处理attr(key,value) HTML 代码:< IMG>< IMG> jQuery 代码:$("img").attr("src","test.jpg"); 作用：取得或设置匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。在控制HTML标记上是必备的工具。 html()/html(val) HTML 代码:< DIV>Hello< /DIV> jQuery 代码: $("div").html(); 结果: Hello 作用：取得或设置匹配元素的html内容，同类型的方法还有text()和val()。前者是取得所有匹配元素的内容。，后者是获得匹配元素的当前值。三者有相似的地方常用在内容的操作上。wrap(html)HTML 代码:Test Paragraph.jQuery 代码:$("p").wrap(" < DIV class=wrap>< /DIV>");结果:< DIV class=wrap>Test Paragraph. 作用：把所有匹配的元素用其他元素的结构化标记包裹起来。这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。 可以灵活的修改我们的DOM。 empty() HTML 代码:Hello, Person < A href="http:/new.51cto.com/wuyou/news_edit.php?artID=127754#">and person< /A> jQuery 代码: $("p").empty(); 结果: 作用：删除匹配的元素集合中所有的子节点。 Ajax处理 load(url,data,callback) url (String) : 待装入 HTML 网页网址。 data (Map) : (可选) 发送至服务器的 key/value 数据。 callback (Callback) : (可选) 载入成功时回调函数。 代码：$("#feeds").load("feeds.aspx", limit: 25, function() alert("The last 25 entries in the feed have been loaded");); 作用：载入远程 HTML 文件代码并插入至 DOM 中。这也是Jquery操作Ajax最常用最有效的方法。 serialize() HTML 代码: Results:< FORM> < SELECT name=single> < OPTION selected>Single< /OPTION> < OPTION>Single2< /OPTION>< /SELECT> < SELECT multiple name=multiple> < OPTION selected>Multiple< /OPTION> < OPTION>Multiple2< /OPTION> < OPTION selected>Multiple3< /OPTION>< /SELECT> < INPUT value=check1 type=checkbox name=check> check1 < INPUT value=check2 type=checkbox name=check checked="checked"/> check2 < INPUT value=radio1 type=radio name=radio checked="checked"/> radio1 < INPUT value=radio2 type=radio name=radio> radio2< /FORM> jQuery 代码:$("#results").append( "< TT>" + $("form").serialize() + "< /TT>" ); 作用：序列化表格内容为字符串。用于 Ajax 请求。 工具 jQuery.each(obj,callback) 代码：$.each( 0,1,2, function(i, n) alert( "Item #" + i + ": " + n ););/遍历数组$.each( name: "John", lang: "JS" , function(i, n) alert( "Name: " + i + ", Value: " + n );/遍历对象); 作用：通用例遍方法，可用于例遍对象和数组。 jQuery.makeArray(obj) HTML 代码:First< DIV>Second< /DIV>Third< /DIV>< DIV>Fourth< /DIV> jQuery 代码:var arr = jQuery.makeArray(document.getElementsByTagName("div"); 结果: Fourth Third Second First 作用：将类数组对象转换为数组对象。使我们可以在数组和对象之间灵活的转换。 jQuery.trim(str) 作用：这个大家应该很熟悉，就是去掉字符串起始和结尾的空格。 小结：在实际的开发中我们可能会用到其他的方法和属性，以上只是个人认为新手初学jQuery时，必须掌握的一些方法。仅供大家学习的参考。有什么不对的高手指教。 5种方法教你用jQuery重写表单验证(1) http:/developer.51cto.com 2010-05-27 09:11 qibaiyilang 百度空间 我要评论(0) 这里给大家介绍使用jQuery的load()方法、$.get()、$.post()、$.ajax()和表单插件（Form Plugin）5种方法分别重写“表单验证”的实例，并且进一步说明中文乱码的问题。前面我们曾介绍过使用jQuery技巧来提高代码质量，因为jQuery非常容易上手并使用简单。重写表单验证是程序员们经常做的事情，使用jQuery我们有五种方法可以选择，同时也能够解决乱码的问题。首先，对编码知识进行简要的说明，请务必理解后再看下面的代码。发送中文字符请求时，如果使用get方式，运行正常；而使用post方法则会出现乱码。这是由于异步对象XMLHttpRequest在处理返回的responseText的时候，是按UTF-8编码进行解码的。如果你原来的网页编码是gb2312的话，当然会发生编码的冲突了；如果你原来的网页编码是utf-8，那么就不会出现中文乱码的问题了。出现了中文乱码该怎么办呢？通常的解决办法是用escape()对发送的数据进行编码，然后在返回的responseText上再用unescape()进行解码。然而在JavaScript编程中通常不推荐使用escape()和unescape()，而推荐使用encodeURI()和decodeURI()。请看下面的“表单验证实例”，或许对你学习编码知识有一定的帮助。第一、jQuery的load(url,data,callback)方法语法说明：url为异步请求的地址，data用来向服务器传送请求数据，为可选参数。一旦data参数启用，整个请求过程将以post的方式进行，否则默认为get方式。如果希望在get方式下也传递数据，可以在url地址后面用类似“dataname1=data1&dataName2=data2”的方法。callback为Ajax加载成功后运行的回调函数。另外使用load()方法返回的数据，不再需要考虑是文本还是XML，jQuery都会自动进行处理。好了，下面马上使用load()方法实现“自动表单验证”实例。首先是，html框架，5个例子都是一样的，如下：1. <form> 2. 用户昵称:<inputtype="text"onblur="startCheck(this)"name="User"id="User"><spanid="UserResult"></span><br/> 3. 输入密码:<inputtype="password"name="passwd1"><br/> 4. 确认密码:</td><td><inputtype="password"name="passwd2"><br/> 5. <inputtype="submit"value="注册"class="button"> 6. <inputtype="reset"value="重置"class="button"> 7. </form>必要说明：1、onblur="startCheck(this)" 这是JavaScript代码(简称js) ，意思是text文本框失去焦点时触发自定义函数startCheck(),this是指代text文本框的值。2、<span id="UserResult"></span>用来存放异步对象返回的结果。8. jQuery代码如下： 9. 10. <scriptlanguage="javascript"src="jquery.min.js"></script> 11. <scriptlanguage="javascript"> 12. functionstartCheck(oInput) 13. /首先判断是否有输入，没有输入直接返回，并提示 14. if(!oInput.value) 15. oInput.focus();/聚焦到用户名的输入框 16. document.getElementById("UserResult").innerHTML="Usercannotbeempty." 17. return; 18. 19. oInput=$.trim(oInput.value);/使用jQuery的$.trim()方法过滤左右空格 20. varsUrl="action.asp?user="+oInput; 21. sUrl=encodeURI(sUrl);/使用encodeURI()编码，解决中文乱码问题 22. $("#UserResult").load(sUrl,function(data) 23. $("#UserResult").html(decodeURI(data);/使用decodeURI()解码 24. 25. ); 26. 27. </script>必要说明：1、使用jQuery时，都必须加载jquery.min.js文件，可以到http:/jquery.com/官网下载最新的版本。2、判断是否有输入时，用的全是JavaScript语法。3、对传递给“处理页”的参数进行encodeURI编码，以解决中文乱码问题。4、load()中的function函数是为了对返回结果进行decodeURI解码，以解决中文乱码问题。5、对$.trim()、$("#UserResult")、html等jQuery语法不理解的，可以参考jQuery中文手册。本站提供下载。28. action.asp处理页代码如下： 29. 30. <% 31. if(Request("user")="eko")then 32. Response.Write"Sorry,"&Request("user")&"alreadyexists." 33. else 34. Response.WriteRequest("user")&"isok." 35. endif 36. %>必要说明：1、action.asp处理页的编码是GB2312，如果把"Sorry.already exists.is ik"等英文改为中文，请看下面的说明。2、使用post方法会出现乱码，这是由于异步对象XMLHttpRequest在处理返回的responseText的时候，是按UTF-8编码进行解码的。3、所以post方式的话，必须把action.asp页另存为时，第三项的编码由 ANST 改为 UTF-8 (请务必记住!)。