jquery - 选择器

1、从该网址上下载最新的jquery.js插件,http://jquery.com/,如图所示:

 

2、导入插件

<html>

<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>无标题文档</title>
</head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
    $("p.test").click(function(){
   $(this).hide();
   });
 });
</script>

<body>
  <p class="test"> click me !

</body>
</html>

 

3、jquery 基本语法:

  1)jquery元素选择器:

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取 id="demo" 的第一个 <p> 元素。

 

  2) jquery属性选择器:

$(" [href] ")选取所有带有href属性的元素 

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

 

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色:

$("p").css("background-color","red");

 

更多选择器实例:

$(" ul li:first ")  -- 每个<ul>的第一个<li>元素

$(" div#intro.head") -- id="intro"的<div>元素的所有class=head的元素

详解:

1> $("*") 所有元素

2>$(".intro,demo") 所有class="intro"且class="demo"的元素

3>$("p:first") 第一个<p>元素

4>$("p:last")最后一个<p> 元素

5>$("tr:even ") 所有的偶数<tr>元素

6>$("tr:odd")所有的奇数<tr>元素

7> :eq(index)

$("ul li:eq(3)")  列表中的第四个元素(index从0开始)

8> :gt(no)

$("ul li:gt(3)") 列出index>3的元素

 

9> $("ul li:lt(3)") 列出index<3的元素

10> :not(selector)

 $("p:not('.test')")  所有class不是test的p元素

$("input:not(:empty)")所有不为空的input元素  ????

11>

$(":header") 所有的标题元素 <h1> - <h6>

 

12>:animated 所有动画元素

 

13> :contains(text)

$(":contains("xxx")")

 

选择所有包含 "is" 的 <p> 元素:

$("p:contains(is)")
 

:contains 选择器选取包含指定字符串的元素。

该字符串可以是直接包含在元素中的文本,或者被包含于子元素中。

经常与其他元素/选择器一起使用,来选择指定的组中包含指定文本的元素(如上面的例子)。

 

扩展:$("ul li:contains('xxxx')").css("background-color","red");  【选择ul li 里面包含xxxx的一行】

也可以 $("ul li:contains(xxxx)").css("background-color","red");

14>

s1,s2,s3

$("th,td,.intro")

所有带有匹配选择的元素

 

15>

你可能感兴趣的:(jquery - 选择器)