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程序设计有所帮助。
热门推荐
10 祝孙辈生日祝福语简短
11 恋人跨年祝福语大全简短
12 考大学敬酒简短祝福语
13 开工投产大吉祝福语 简短
14 偶然结婚祝福语朋友简短
15 感谢学长学姐祝福语简短
16 戏精的祝福语简短
17 我要结婚祝福语简短
18 婚前女儿生日祝福语简短