jQuery选择器用法实例详解
本文实例讲述了jQuery选择器用法。分享给大家供大家参考,具体如下:
jQuery使用两种方式来选择html的element,第一种使用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器(如:$("div>ula"));第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。
使用CSS和XPath选择器选择的方法有许多种用法,关于详细的CSS选择器可参考本站相关文章。
首先来看通过元素的ID取得元素:$("#id"),在名字前面增加#表示这是一个id,注意引号不要丢掉。
在页面中增加一个id为msg的span元素,将helloworld显示在span元素中,可以如下实现:
<html> <head> <title>Hello</title> <scriptsrc="jquery-1.2.5.js"type="text/javascript"></script> <scripttype="text/javascript"> $(function(){ $("#msg").html("Hello,world.");}); </script> </head> <body> <spanid="msg"/> </body> </html>
注意:#id需要用引号引起来,有参数的html函数用来为元素的innerHTML赋值。
下一个例子:
比如我们有一个list,它的ID是orderedlist,那么取得这个list的引用的jQuery就是$("#orderedlist"),为它增加一个值为red的class属性$("#orderedlist").addClass("red"),addClass函数用来为元素增加CSS设置。取得list中的最后一个li的引用,$("#orderedlistli:last")。
下面的例子将最后一个li的内容更改为hello,world.
<html> <head> <title>Hello</title> <scriptsrc="jquery-1.2.5.js"type="text/javascript"></script> <scripttype="text/javascript"> $(function(){ alert("wait"); $("#orderedlistli:last").html("hello,world."); }); </script> </head> <body> <olid="orderedlist"> <li>Firstelement</li> <li>Secondelement</li> <li>Thirdelement</li> </ol> </body> </html>
希望本文所述对大家jQuery程序设计有所帮助。