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程序设计有所帮助。