【学习拾遗】Jquery（一）--核心

　　说Jquery不说它的选择器简直就是犯罪！所以从选择器开始说！

一）选择器

　　如果用一句话来形容Jquery的选择器，你想说啥？反正我想说的是：正则表达式!可以看看jquery.js的源文件

matchExpr = {
		"ID": new RegExp( "^#(" + characterEncoding + ")" ),
		"CLASS": new RegExp( "^\\.(" + characterEncoding + ")" ),
		"TAG": new RegExp( "^(" + characterEncoding.replace( "w", "w*" ) + ")" ),
		"ATTR": new RegExp( "^" + attributes ),
		"PSEUDO": new RegExp( "^" + pseudos ),
		"CHILD": new RegExp( "^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\(" + whitespace +
			"*(even|odd|(([+-]|)(\\d*)n|)" + whitespace + "*(?:([+-]|)" + whitespace +
			"*(\\d+)|))" + whitespace + "*\\)|)", "i" ),
		"bool": new RegExp( "^(?:" + booleans + ")$", "i" ),
		// For use in libraries implementing .is()
		// We use this for POS matching in `select`
		"needsContext": new RegExp( "^" + whitespace + "*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\(" +
			whitespace + "*((?:-\\d)?\\d*)" + whitespace + "*\\)|)(?=[^-]|$)", "i" )
}

  显而易见，

　　ID：＃选择器，根据Id属性进行匹配；

　　CLASS：．选择器，根据class属性进行匹配；

　　TAG：标签选择器，根据标签进行选择；

　　ATTR：属性选择器，根据属性进行选择；

　　其他的选择器，其实究其本质，也无非是一些正则表达式，有兴趣的可以自己查下。

　举个实例：有Id选择器，属性选择器，标签选择器，属性选择器等

<div>
	<input type="checkbox" name="intrest"/><input type="checkbox" name="intrest"/><input type="checkbox" name="intrest"/><input type="checkbox" name="intrest"/></br>
	<input type="checkbox" name="intrest"/><input type="checkbox" name="intrest"/><input type="checkbox" name="intrest"/><input type="checkbox" name="intrest"/></br>
	<input type="checkbox" name="intrest"/><input type="checkbox" name="intrest"/><input type="checkbox" name="intrest"/><input type="checkbox" name="intrest"/></br>
	<br/>
	
	<span>全选：</span><input type="checkbox" id="all"><span>反选：</span><input type="checkbox" id="other">
	
</div>

/*全选，全不选
	$(function(){
		$("#all").click(function(){
			$("#other").prop("checked",false);
			if($(this).prop("checked")){
				$("input[name='intrest']").prop("checked",true);
				$(this).prev().text("不选:")
			}else{
				$("input[name='intrest']").prop("checked",false);
				$(this).prev().text("全选:")
			}
			
		});
		
		$("#other").click(function(){
			$("#all").prop("checked",false);	
			var c=$("input[name='intrest']:checked");
			var nc=$("input[name='intrest']:not(:checked)");
			c.prop("checked",false);
			nc.prop("checked",true);
		})
	})*/

PS：很常用的一个全选/反选的功能，有需要的可以收藏一下

二、链式操作

　　第二个本来想说属性操作和事件操作来着，但是挨个实践了一下，感觉属性也好，事件也好，单个说也能说，也好说，但是体现不出来Jquery的思想核心：write less do more！所以，说链式操作！我不觉得除了链式操作还有其它能体现Jquery核心思想的地方了，选择器除外！

    何为链式操作？这涉及到了Jquery的包装集,用Jquery包装的对象集合？大致就这意思，概念不用纠结，只需知道通过Jquery包装的对象才可以调用各种Jquery的方法。而链式操作，就是说：对同一个对象的操作不需要重复写该对象，直接在前面一个操作后面写后一个操作就可以了！（总感觉说不清呢？），看实例吧

举个实例：表格操作,鼠标移动到行上面变色，单击获取每行，获取该行所有单元格的内容

style：

<style type="text/css">
table{   
    font-size:16px;
    color:#333333;
    border-width: 1px;
    border-color: #999;
    border-collapse: collapse;
}
th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #999;
    background-color: #CBEAED;
	width: 100px;

}.styleclass{
<span style="white-space:pre">	</span>background:#2897C0;
<span style="white-space:pre">	</span>cursor:pointer;
}
td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #999;  
	text-align:center;
	
}

html

</div>
		<table>
			<thead>
				<th>姓名</th>
				<th>类别</th>
				<th>年龄</th>
			</thead>
			<tbody>		
				<tr id="1">
					<td >唐僧</td>
					<td>人类</td>
					<td>50</td>			
				</tr>
				<tr id="2">
					<td >悟空</td>
					<td>猴类</td>
					<td>500</td>			
				</tr>
				<tr id="3">
					<td >八戒</td>
					<td>猪类</td>
					<td>400</td>			
				</tr>
				<tr id="abc">
					<td>沙僧</td>
					<td>天神</td>
					<td>600</td>			
				</tr>
			</tbody>
		</table>
</div>

Js：（重点）

<span style="white-space:pre">		</span>$("tbody tr").mouseenter(function(){
<span style="white-space:pre">			</span>$(this).toggleClass("styleclass");
<span style="white-space:pre">		</span>}).mouseout(function(){
<span style="white-space:pre">			</span>$(this).toggleClass("styleclass");
<span style="white-space:pre">		</span>}).click(function(){<span style="white-space:pre">			</span>
<span style="white-space:pre">			</span>var subtb=$(this).children();
<span style="white-space:pre">			</span>subtb.each(function(){
<span style="white-space:pre">				</span>alert($(this).text());
<span style="white-space:pre">			</span>})
<span style="white-space:pre">		</span>}).css("cursor","pointer");

　　什么是链式操作？mouseout，mouseenter，css都是对同一个Jquery包装集的操作，因此像一条链一样写下来，这就是链式操作！jquery的链式操作如果细看其源码的话，其原理是在执行完对应的操作后，会返回被操作的对象包装集，所以才可以不写对象直接.functoin（）进行调用！

三、小结

　　write less do more，jquery的选择器，通过正则表达式提供了简洁的获取元素包装集的操作，而链式操作则更进一步践行了Jquery的核心理念！