【学习拾遗】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的核心理念！