正文
jQuery实战读书笔记（备忘录）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
选择器备忘 ：
| :even
匹配所有索引值为偶数的元素，从 0 开始计数
:odd
匹配所有索引值为奇数的元素，从 0 开始计数
实例——设置table交替行变色：
<script type="text/javascript">
$(function(){
$('#main_table tr').filter(':even').css({'background':'#0ff'}).filter(':odd').css({'background':'#f00'});
//注1
});
</script>
<tr>
<td width="100">a1</td>
<td width="100">b1</td>
</tr>
<tr>
<td width="100">a2</td>
<td width="100">b2</td>
</tr>
<tr>
<td width="100">a3</td>
<td width="100">b3</td>
</tr>
<tr>
<td width="100">a4</td>
<td width="100">b4</td>
</tr>
<tr>
<td width="100">a5</td>
<td width="100">b6</td>
</tr>
<tr>
<td width="100">a6</td>
<td width="100">b6</td>
</tr>
<tr>
<td width="100">a7</td>
<td width="100">b7</td>
</tr>
</table>
当然也可以这么做：
$(function () {
$("table#main_table tr").each(function (i) {
var _this = $(this);
if (i % 2 == 0) //从0开始
{
_this.css("background", "#0ff"); //odd
} else {
_this.css("background", "#f00"); //even
}
});
});
另外
:nth-child()
匹配其父元素下的第N个子或奇偶元素
$("table#main_table tr:nth-child(3n)").css({ 'background': '#f00' });
其中n可以使具体的正数，也可以是3n、2n这种形式的。
注1：形如table#main_table（当然这里如果是class更恰当）它和table #main_table不一样。后者是一个undefined。
|
:contains(text)
匹配包含给定文本的元素
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
$('div:contains("John")').size() //注意引号的打法是：外双里单 vs 外单里双 vs text不加引号
结果为：2
另外：$('div').contains("John").size() 在jQuery1.2已被废弃。它的等同形式为：
$.fn.contains = function (text) {
return $(this).filter(':contains(' + text + ')');
} //注意标志部分要么都用单引号，要么都用双引号
对象访问
：
|
each(function)
以每一个匹配的元素作为上下文来执行一个函数(即遍历对象)
这里主要是区别$(obj).each(function)和$.each(obj,function());
var obj = { name: "John", lang: "JS" };
$.each(obj,function (index,domEle) {
alert("Name: " + index + ", Value: " + domEle);
}); //index标示key domEle标示value
或者
$(obj).each(function (index,domEle) {
alert("Name:"+domEle.name+",Value:"+domEle.lang);
});//index标示下标，domEle标示obj的每个对象
效果 ：
| fadeOut
使原本显示的元素淡出
$('div').css('display','block');
$(':button').click(function(){
$('div').fadeOut('slow',function(){
alert('end');
});
});
<input type="button" value="测试" >
<div style="width:100px;height:100px;border:1px solid red;">
hello world
</div>
| fadeIn
使原本隐藏的元素淡入
demo同上
| fadeTo
调整（隐藏元素）元素的不透明度
$('div').css('display','none');
$(':button').click(function(){
$('div').fadeTo('slow',0.6,function(){
alert('end');
});
});
| slideDown
使原本隐藏的元素向下滑动出现
$('div').css('display','none');
$(':button').click(function(){
$('div').slideDown('slow',function(){
alert('end');
});
});
| slideUp
使原本显示的元素向上滑动出现
demo同上
| slideToggle
如果元素显示则执行slideUp()；如果元素隐藏则执行slideDown()
$(':button').click(function(){
$('div').slideToggle('slow',function(){
alert('end');
});
});
相当于
$(':button').click(function(){
if($('div').is(':hidden'))
{
$('div').slideDown('slow',function(){
alert('end');
});
}else
{
$('div').slideUp('slow',function(){
alert('end');
});
}
});
