jQuery选择器

一下触发按钮均为button：例：<input type="button" value="点我呀" οnclick="testE()"/>;

$("div,span,p.myClass")选择器:找到匹配任意一个类的元素。

jquery部分代码：

function testE(){
			var classArr = $("#a1,div,span,p.myClass");
			$.each(classArr, function(i, obj){
				alert( "第" + ++i + "个元素: " + $(obj).html());
			});
		}

html部分代码：

<div>div</div>
	<p class="myClass">p class="myClass"</p>
	<span>span</span>
	<h1 id="a1">多多联系</h1>
	<p class="notMyClass">p class="notMyClass"</p>

$("form input")选择器：找到表单中所有的 input 元素

jquery部分代码：

function testF(){
			var classArr = $("form input");
			$.each(classArr, function(i, obj){
				alert( "第" + ++i + "个元素: " + $(obj).val());
			});
		}

html部分代码：

<form>
	  <label>Name:</label>
	  <input name="name" />
		<fieldset>
	      <label>Newsletter:</label>
	      <input name="newsletter" />
		</fieldset>
	</form>
	<input name="none" />

$("form > input")选择器：匹配表单中所有的子级input元素。

jquery部分代码：

function testG(){
			var classArr = $("form > input");
			$.each(classArr, function(i, obj){
				alert( "第" + ++i + "个元素: " + $(obj).val());
			});
		}

html部分代码：

<form>
	  <label>Name:</label>
	  <input name="name" />
		<fieldset>
	      <label>Newsletter:</label>
	      <input name="newsletter" />
		</fieldset>
	</form>
	<input name="none" />

$("label + input")选择器：匹配所有跟在 label 后面的 input 元素

jquery部分代码：

function testF(){
			var classArr = $("label + input");
			$.each(classArr, function(i, obj){
				alert( "第" + ++i + "个元素: " + $(obj).val());
			});
		}

html部分代码：

<form>
	  <label>Name:</label>
	  <input name="name" />
		<fieldset>
	      <label>Newsletter:</label>
	      <input name="newsletter" />
		</fieldset>
	</form>
	<input name="none" />

$("form ~ input")选择器：找到所有与表单同辈的 input 元素

jquery部分代码：

function testE(){
			var classArr = $("form ~ input");
			$.each(classArr, function(i, obj){
				alert( "第" + ++i + "个元素: " + $(obj).val());
			});
		}

html部分代码：

<form>
	  <label>Name:</label>
	  <input name="name" />
		<fieldset>
	      <label>Newsletter:</label>
	      <input name="newsletter" />
		</fieldset>
	</form>
	<input name="none" />