|
1.DOM筛选，遍历查找相关方法
2.选择器中特殊符号的处理
3.改写原生js例子
筛选
|
eq()选择指定索引的元素
filter(表达式)筛选指定表达式的元素
first()选择第一个元素
last()选择最后一个元素
is()检测是否元素返回布尔值
has()保留包含特定后代的元素，去掉那些不含有指定后代的元素
not()从匹配的元素集合中移除指定的元素。
map()将一组元素转换成其他数组
slice()根据指定的下标范围，选取匹配的元素集合
<script>
// $(‘p:eq(0)‘).css(‘background‘,‘red‘);
// $(‘p‘).filter(‘#second‘).css(‘background‘,‘red‘);
// $(‘p‘).first().css(‘background‘,‘red‘);
// $(‘p‘).last().css(‘background‘,‘red‘);
/* $(‘p‘).click(function(){
if($(this).is(‘.first‘)){
$(this).css(‘background‘,‘red‘);
}
});*/
// $(‘p‘).not(‘#second‘).css(‘background‘,‘red‘);
//
// $(‘p‘).slice(-2,-1).css(‘background‘,‘red‘);
</script>
<body>
<form action="">
<input type="text" value="111" />
<input type="text" value="222" />
<input type="text" value="333" />
</form>
<p></p>
<script>
var arr = $(‘input‘).map(function(){
return $(this).val()
}).get().join(‘,‘);
alert(typeof arr);
$(‘p‘).html(arr);
</script>
</body>
|
a.children()选取子元素
b.parent()选取父元素
c.parents()选取祖先元素
d.parentsUntil()所有的父辈元素，直到遇到匹配的那个元素为止
1.6+ //与有参数的parents()等价
e.offsetParent()返回父元素中第一个其position设为relative或者absolute
的元素,仅对可见元素有效
f.next()选择后面紧临的兄弟元素
g.nextAll()查找当前元素之后所有的同辈元素
h.nextUntil()所有的同辈元素，直到遇到匹配的那个元素为止
1.6+
i.prev()前一个兄弟元素
j.prevAll()前面所有的兄弟元素
k.prevUntil()所有的兄弟元素，直到遇到匹配的那个元素为止
1.6+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>demo3</title>
<script src="jquery.js"></script>
</head>
<body>
<div id="outer" style="position:relative">
outer
<div id="wrap" style="">
wrap
<div>111111111</div>
<div>222222222</div>
<p id="p1">我是<span>第1个P</span>标签</p>
<p id="p2">我是第2个P标签</p>
<p>我是第3个P标签</p>
<div>我是div标签</div>
</div>
</div>
<script>
// $(‘#wrap‘).children(‘p‘).css(‘background‘,‘red‘);
// $(‘#p1‘).parent().css(‘background‘,‘red‘);
// $(‘#p1‘).parents(‘#wrap‘).css(‘background‘,‘red‘);
//
//$(‘#p1‘).offsetParent().css(‘background‘,‘red‘);
//$(‘#p1‘).next().css(‘background‘,‘red‘);
//$(‘#p1‘).nextAll(‘p‘).css(‘background‘,‘red‘);
//
//$(‘#p2‘).prev().css(‘background‘,‘red‘);
//$(‘#p2‘).prevAll(‘div‘).css(‘background‘,‘red‘);
//
//$(‘#p2‘).siblings(‘div‘).css(‘background‘,‘red‘);
//
//$(‘span‘).parent().css(‘background‘,‘red‘).end().css(‘background‘,‘#abcdef‘);
//$(‘span‘).css(‘background‘,‘#abcdef‘);
//
$(‘#p1‘).nextAll().addBack().css(‘background‘,‘red‘);
</script>
</body>
</html>
|
l.sinlings()前后所有的兄弟元素
m.closest()从元素本身开始，在DOM
树上逐级向上级元素匹配，并返回最先匹配的祖先元素
n.contents()元素的子元素，包括文字和注释节点
o.end()终止在当前链的最新过滤操作，并返回匹配的元素的以前状态
p.andself()1.8版本中已废弃
q.addBack()添加堆栈中元素集合到当前集合，一个选择性的过滤选择器
r.each()遍历一个jQuery对象，为每个匹配元素执行一个函数
|
<script src="jquery.js"></script>
</head>
<body>
<form action="">
<input type="text" name="" id="" value="第1个input的值" />
<input type="text" name="" id="" value="第2个input的值" />
<input type="text" name="" id="" value="第3个input的值" />
<input type="text" name="" id="" value="第4个input的值" />
</form>
<script>
/*$(‘input‘).each(function(){
alert($(this).val());
});*/
</script>
使用转义符
<body>
<form action="">爱好：
<input type="checkbox" name="gender[]" id="" value="看书" />
<input type="checkbox" name="gender[]" id="" value="篮球" />
<input type="checkbox" name="gender[]" id="" value="编程" />
<input type="submit" value="提交" /><input type="reset" value="重写" />
</form>
<script>
/* $(‘input[name=gender\\[\\]]‘).click(function(){
alert($(this).val());
});*/
$(‘input[type=\‘checkbox\‘]‘).click(function(){
alert($(this).val());
});
</script>
</body>
|
a.表格隔行变色
//js
<script>
var oTable = document.getElementById(‘table‘);
var aTr = oTable.getElementsByTagName(‘tr‘);
//alert(aTr.length);
for(var i=0;i<aTr.length;i++){
if(i%2==1){
aTr[i].style.background="yellow";
}else{
aTr[i].style.background="#abcdef";
}
}
</script>
//jquery
<script>
/*$(‘#table tr:even‘).css(‘background‘,‘#abcdef‘);
$(‘#table tr:odd‘).css(‘background‘,‘yellow‘);*/
$(‘#table tr‘).filter(‘:even‘).css(‘background‘,‘#abcdef‘).end().filter(‘:odd‘).css(‘background‘,‘yellow‘);
</script>
b.tab标签页
//js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>原生js的tab标签页</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style-type: none;
}
body{
margin: 50px ;
}
#ul{
height: 30px;
margin-bottom: 10px;
}
#ul li{
height: 30px;
line-height: 30px;
padding: 0 15px;
border: 1px solid #abcdef;
float: left;
margin-right: 3px;
cursor: pointer;
}
#ul li.current{
background: #abcdef;
}
#content div{
width: 300px;
height: 200px;
border: 1px solid #abcdef;
display: none;
}
#content div.show{
display: block;
}
</style>
</head>
<body>
<ul id="ul">
<li class="current">php</li>
<li>ruby</li>
<li>python</li>
</ul>
<div id="content">
<div class="show">php。。。。。。介绍</div>
<div>ruby。。。。。。介绍</div>
<div>python。。。。。。介绍</div>
</div>
<script>
var ul = document.getElementById(‘ul‘);
var li = ul.getElementsByTagName(‘li‘);
var content = document.getElementById(‘content‘);
var div = content.getElementsByTagName(‘div‘);
for (var i = 0; i < li.length; i++) {
li[i].index = i;
li[i].onclick=function(){
for (var i = 0; i < li.length; i++) {
li[i].className=‘‘;
div[i].style.display=‘none‘;
};
this.className=‘current‘;
div[this.index].style.display=‘block‘;
}
};
</script>
</body>
</html>
//jquery
<script>
$(‘#ul li‘).click(function(){
//1、点击li的时候要切换样式
//$(this).addClass(‘current‘).siblings().removeClass(‘current‘);
//2、根据li的索引值，来确定哪个div显示，其它div隐藏
//$(‘#content>div‘).eq($(this).index()).show().siblings().hide();
//$(this).addClass(‘current‘).siblings().removeClass(‘current‘).parent().next().children().eq($(this).index()).show().siblings().hide();
});
$(this).addClass(‘current‘).siblings().removeClass(‘current‘).parent().next().find(‘div‘).eq($(this).index()).show().siblings().hide();
});
</script>
|
1.优先使用id选择器
2.在class选择器前添加标签名
3.采用find(),而不使用上下文查找
4.强大的链式操作比缓存更快
5.从左至右的模型1.3+版本更新
|
|
|
|
|
jQuery学习第三课(选择器第三讲),布布扣,bubuko.com
原文：http://blog.csdn.net/magneto7/article/details/23078151
