jQuery权威指南笔记

 

TIPS1:

$(document).ready(function(){}) 等价于 $(function(){})

等价于window.onload(),但$(document).ready在页面框架下载完成后就执行。而window.onload必须在页面全部加在完毕（包括图片下载），因此$(document).ready的执行效率会高于window.onload。

 

TIPS2:

选择器：若id="tabstatus" 则$("#tabstatus")

如何获得table的偶数行 $("#tabstatus tr:nth-child(even)")

 

TIPS3:

jQuery选择器分为：基本选择器，层次选择器，过滤选择器，表单选择器四大类。

过滤选择器中分为：简单过滤选择器，内容过滤选择器，可见性过滤性选择器，属性过滤选择器，子元素过滤选择器，表单对象属性过滤选择器。

 

一：基本选择器

需要注意的是，最后一个selector1，selectorN是求并集，也就是满足selector1的元素和selectorN的元素。

 

二：层次选择器

 

示例如下：

三：过滤器中简单过滤器

语法：

 示例如下：

 

 

<ul>
	<li class="DefClass">Item 0 </li>
	<li class="DefClass">Item 1 </li>
	<li class="NotClass">Item 2 </li>
	<li class="DefClass">Item 3 </li>
</ul>

 

效果如下：

（续）

 

过滤器之内容过滤器

语法如下：

 示例：

 

<div>ABCD</div>
<div><span></span></div>
<div>EFaH</div>
</div></div>

 

 

 

过滤器之可见性过滤器

语法：

 示例：

 

 

过滤器之属性过滤选择器

 <div id="divID">ID</div>
<div title="A">Title A </div>
<div id="divAB" title="AB">ID <br/> Title AB</div>
<div title="ABC">Title ABC</div>

 

 show()是jquery的函数，其中参数表示显示时间。

过滤器之子元素过滤选择器

语法如下：

 效果如下：

<ul>
	<li>Item 1-0</li>
	<li>Item 1-1</li>
	<li>Item 1-2</li>
	<li>Item 1-3</li>
</ul>
<ul>
	<li>Item 2-0</li>
	<li>Item 2-1</li>
	<li>Item 2-2</li>
	<li>Item 2-3</li>
</ul>
<ul>
	<li>Item 3-0</li>
</ul>

 

 过滤器之表单对象属性过滤器

语法：

<form id="form1" style="width:241px">
	<div id="divA">
		<input type="text" value=" 可用文本框 " class="clsIpt" />
		<input type="text" disabled="disabled" value=" 不可用文本框 " class="clsIpt" />
	</div>
	<div id="divB">
		<input type="checkbox" checked="checked" value="1" /> 选中
		<input type="checkbox" value="0" /> 未选中
	</div>
	<div id="divC">
		<select multiple="multiple">
	    	<option value="0">Item 0</option>
	        <option value="1" selected="selected">
	        	Item 1
	     	</option>
	        <option value="2">Item 2</option>
	        <option value="3" selected="selected">
	           	Item 3
	        </option>
	    </select>
	    <span id="Span2"></span>
	 </div>
</form>

 效果：

 

过滤器之表单选择器

 

<form id="form1">
            <textarea class="txt"> TextArea</textarea>
            <select><option value="0"> Item 0</option></select>
            <input type="text" value="Text" class="txt"/>
            <input type="password" value="PassWord" class="txt"/>
            <input type="radio" /><span id="Span1"> Radio</span>
            <input type="checkbox" />
            <span id="Span2"> CheckBox</span>
            <input type="submit" value="Submit" class="btn"/>
            <input type="image" title="Image"
            src="Images/logo.gif" class="img"/>
            <input type="reset" value="Reset" class="btn"/>
            <input type="button" value="Button" class="btn"/>
            <input type="file" title="File" class="txt"/>
            <div id="divShow"></div>
</form>