jQuery 1.2之Selectors(选择器)基础篇

Posted by linyupark :: 2007,September 17th,18:55 pm

这篇把jQuery 1.2里最基础的几个选择器使用方法以举例的形式给大家展示

*举例的代码在IE7需要刷新一下才能生效(直接放在实体页上不会出现这样的情况，弹窗比较特殊)

#id （直接通过#元素id来选择目标元素）

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery实验用页</title> <script type="text/javascript" src="/files/jquery.js"></script> </head> <body> <h1>这是标签h1的内容<small>标签h1里的small内容</small></h1> <h2>这是标签h2的内容<big>标签h1里的big内容</big></h2> <h3>这是标签h1的内容<i>标签h1里的i内容</i></h3> <p>段落1</p> <p>段落2</p> <p>段落3</p> <p class="p4">段落4,class为p4</p> <div id="wrap"><p class="p5">段落4,class为p5,嵌套在id为wrap的div中</p></div> </body> <script type="text/javascript"> $(document).ready(function(){ //准备工作完毕 $("#wrap").css("border","1px solid #c03"); }); </script> </html>

$(”#wrap”)这句可以直接选中当前页面中元素id值为wrap的对象

element （选中指定的所有元素对象）

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery实验用页</title> <script type="text/javascript" src="/files/jquery.js"></script> </head> <body> <h1>这是标签h1的内容<small>标签h1里的small内容</small></h1> <h2>这是标签h2的内容<big>标签h1里的big内容</big></h2> <h3>这是标签h1的内容<i>标签h1里的i内容</i></h3> <p>段落1</p> <p>段落2</p> <p>段落3</p> <p class="p4">段落4,class为p4</p> <div id="wrap"><p class="p5">段落4,class为p5,嵌套在id为wrap的div中</p></div> </body> <script type="text/javascript"> $(document).ready(function(){ //准备工作完毕 //选中所有p元素，加上红边 $("p").css("border","1px solid red"); }); </script> </html>

使用$(”p”)就可以选中当前页所有的p元素对象

.class （得到所有class属性值相符合的元素对象）

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery实验用页</title> <script type="text/javascript" src="/files/jquery.js"></script> </head> <body> <h1>这是标签h1的内容<small>标签h1里的small内容</small></h1> <h2>这是标签h2的内容<big>标签h1里的big内容</big></h2> <h3>这是标签h1的内容<i>标签h1里的i内容</i></h3> <p>段落1</p> <p>段落2</p> <p>段落3</p> <p class="p4">段落4,class为p4</p> <div id="wrap"><p class="p5">段落4,class为p5,嵌套在id为wrap的div中</p></div> </body> <script type="text/javascript"> $(document).ready(function(){ //准备工作完毕 //class为p4的段落被加上红边 $(".p4").css("border","1px solid red"); }); </script> </html>

$(”.p4″)就直接取到当前页中class属性为p4的元素对象，例子中只有一个段落符合

* （匹配所有元素）

这个可以作为页面的全局元素设定来使用

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery实验用页</title> <script type="text/javascript" src="/files/jquery.js"></script> </script> </head> <body> <h1>这是标签h1的内容<small>标签h1里的small内容</small></h1> <h2>这是标签h2的内容<big>标签h1里的big内容</big></h2> <h3>这是标签h1的内容<i>标签h1里的i内容</i></h3> <p>段落1</p> <p>段落2</p> <p>段落3</p> <p class="p4">段落4,class为p4</p> <div id="wrap"><p class="p5">段落4,class为p5,嵌套在id为wrap的div中</p></div> </body> <script type="text/javascript"> $(document).ready(function(){ //准备工作完毕 //所有元素内的字体大小变为11px $("*").css("font-size","11px"); }); </html>

页面的字体大小全部变为11px了

selector1, selector2, selectorN （用逗号分隔选择多个对象）

如果需要对多个不同元素进行操作，就可以用到这个，只需要记住用逗号分隔每个选择器即可

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery实验用页</title> <script type="text/javascript" src="/files/jquery.js"></script> </head> <body> <h1>这是标签h1的内容<small>标签h1里的small内容</small></h1> <h2>这是标签h2的内容<big>标签h1里的big内容</big></h2> <h3>这是标签h1的内容<i>标签h1里的i内容</i></h3> <p>段落1</p> <p>段落2</p> <p>段落3</p> <p class="p4">段落4,class为p4</p> <div id="wrap"><p class="p5">段落4,class为p5,嵌套在id为wrap的div中</p></div> </body> <script type="text/javascript"> $(document).ready(function(){ //准备工作完毕 //选中h1,h3,h2里的big元素,将它们的文字颜色变为绿色 $("h1,h3,h2 big").css("color","green"); }); </script> </html>

Filed under: jQuery / Js

« jQuery 1.2发布 :: jQuery 1.2之Selectors(选择器)层次篇 »

M	T	W	T	F	S	S
« Jan
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

文档分类

最近发表

ALA

连接集合