jQuery选择器分类

jQuery的基本选择器

	选择器的分类

	<!--1.基本选择器
		2.层级选择器
		3.过滤选择器
			3.1 基本过滤选择器
			3.2 内容过滤选择器
			3.3 可见性过滤选择器
			3.4 子元素过滤选择器
			3.5 表单对象属性过滤选择器
		4.表单选择器

1. 基本选择器

			#id
			element   根据给定的元素名匹配所有元素

			.class
			*          改变所有元素的背景色
			selector,    将每一个选择器匹配到的元素合并后一起返回。

	-->

</title>

	<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>

#id HTML的代码如下：

	<div id="notMe"><p>id="notMe"</p></div>
    <div id="myDiv">id="myDiv"</div>

#id 用于搜索的，通过元素的 id 属性中给定的值

jQuery 代码如下；

<script type="text/javascript">
   $("#myDiv")．css("color","red");
</script>

结果: id=“myDiv”字体变为红色

   [ <div id="myDiv">id="myDiv"</div> ]

element HTML的代码如下：

	<div>DIV1</div>
	<div>DIV2</div>
	<span>SPAN</span>

element 一个用于搜索的元素。指向 DOM 节点的标签名。

jQuery 代码如下；

<script type="text/javascript">
  $("div").css({"font-size":"3em"});
</script>

结果:显示所有div，且字体为3em；

  [ <div>DIV1</div>, <div>DIV2</div> ]

.class HTML的代码如下：

	<div class="notMe">div class="notMe"</div>
	<div class="myClass">div class="myClass"</div>
	<span class="myClass">span class="myClass"</span>

.class 根据给定的类匹配元素。

jQuery 代码如下；

     $(".myClass").css("background","blue");

结果:显示所有，myClass背景为蓝色；

	[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

* HTML 代码如下：

	<div>DIV</div>
	<span>SPAN</span>
	<p>P</p>

* 匹配所有元素

jQuery 代码如下；

    $("*").css("background","yellow");

结果: body 背景为黄色

jQuery 代码

    [ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

selector HTML 的代码如下：

	<div>div</div>
	<p class="myClass">p class="myClass"</p>
	<span>span</span>
	<p class="notMyClass">p class="notMyClass"</p>

selector 将每一个选择器匹配到的元素合并后一起返回。

jQuery 代码如下；

	$("div,span,p.myClass")

结果:注意元素合并用 , 表示;

    [ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]