你的位置:首页 > Java教程

[Java教程]第2章 jQuery的选择器


选择器是jQuery的根基

一. 认识

1.CSS常用的选择器

标签选择器,后代选择器,Id选择器,通配符选择器,类选择器,群组选择器——主流浏览器全部支持

伪类选择器,子选择器,临近选择器等等——不是全部被支持

2.jQuery选择器

比如有个

<p >demo</p>

CSS写法是.demo

jq写法是$('.demo')

二者写法相似,但是前者添加的是样式,后者是行为。

二. 优势

写法当然简洁多了,还支持CSS1-CSS3。而且在使用一个可能不存在的元素时,自动帮你判断,存在的话执行,不存在则不执行。

那么问题来了:jq函数获取的永远是一个对象——所以不要使用如下代码

1
2
3
if($('oCr')){
    do something
}




要么转化为DOM对象再来判断,或者:

1
2
3
if($('#oCr').length>0){
    dosomething
}




三.选择器

做几个js原生代码练习。

【例2.1】表单隔行变色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<table id="tab" border="1" width="400">
    <thead>
        <tr>
            <td>id</td>
            <td>姓名</td>
            <td>操作</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>dangjingtao</td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>djtap</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>TAO</td>
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td>TAOt</td>
            <td></td>
        </tr>
        <tr>
            <td>5</td>
            <td>hehe</td>
            <td></td>
        </tr>
    </tbody>
</table>




js

1
2
3
4
5
6
7
8
9
10
window.onload=function(){
    var oTab=document.getElementById('tab');
    var aRows=oTab.tBodies[0].rows;
 
    for(i=0;i<aRows.length;i++){
        if(i%2==0){
            aRows[i].style.background='#ccc';
        }
    }
}




jQuery改写:考虑:even选择器

1
2
3
$(document).ready(function(){
    $('#tab tbody tr:even').css('background','#ccc');
});




 

【例2.2】给网页所有P元素加onclick事件

1
2
3
4
5
<div id="div1">
    <p>hehe</p>
    <p>hahaha</p>
    <p>hohoho</p>
</div>




JS

1
2
3
4
5
6
7
8
9
10
window.onload=function(){
    var oDiv=document.getElementById('div1');
    var aP=document.getElementsByTagName('p');
 
    for(i=0;i<aP.length;i++){
        aP[i].onclick=function(){
            alert(this.innerHTML);
        }
    }
}




改写:说白了就是一个div1内所有P元素,click(function(){})

1
2
3
4
5
$(document).ready(function(){
    $('#div1>p').click(function(){
        alert(this.innerHTML);
    })
})




 

【例.3】对多选框操作,输出被选中的多选框的个数

1
2
3
4
<input type="checkbox" value="1" name="check" checked="checked"/>
<input type="checkbox" value="2" name="check"/>
<input type="checkbox" value="3" name="check" checked="checked"/>
<input type="button" value="你选中的个数" id="btn1" />




1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.onload=function(){
    var oBtn=document.getElementById('btn1');
 
    oBtn.onclick=function(){
        var aChk=document.getElementsByName('check');
        var count=0;
        for(i=0;i<aChk.length;i++){
            if(aChk[i].checked){
                count++;
            }
        }
        alert('您选中的个数是'+count+'个');
    }
}




改写:属性选择器

1
2
3
4
5
6
7
$(document).ready(function(){
    var arr=$("input[name='check']:checked");
    $('#btn1').click(function(){
        alert('您选中的个数是'+arr.length+'个');
    })
     
})




程序有点问题,就是不能实时反映当前的情况。

  



jq选择器简明词典
1. 基本选择器释义用法示例备注
#id
.class
还可以是通配符,元素或者群组
等效于getElementById('')
等效于getElementsByClass('')
$("#myDiv");
$('.myClass');
$('*')
$('div1,div2')
也许是最好用的选择器。
2. 层次选择器释义用法示例备注
ancestor descendant
parent>child
在给定的祖先元素下匹配所有的后代元素
选取直接子元素
$("form input")
$('form>input')
 
one+div选取class为one的下一个div同辈元素$(.one+div')jQuery替代方案:

$('.one').next('div')可以替代$('.one+div')

one~siblings选取特定id元素后面所有特定类别同辈元素$(.one~div)

jQuery替代方案:

$(#one).nextAll('div')可以替代$('#two~div')。

3.过滤选择器释义用法示例备注
3.1 基本过滤选择器释义用法示例备注
:first和:last获取指定类型匹配的第一个/最后一个元素$('div:first')
找出第一个div
$('div:last')
找出最后一个div
 
not(selector}去除所有与给定选择器匹配的元素假设两个选择框,一个选中一个没选中:选择的是没被点选的那个复选框。
$('input:not(:checked)')
 
:even(偶数)
:odd(奇数)
选取索引值为偶数/奇数的元素,从0开始。
注意索引值第0个即现实中第1个。
$('div:even')
选取的是偶数个索引值的div,也就是现实中第1,3,5,7..的div
索引值都是从0开始的。除了Eq是单个元素,其它都是多个元素
:eq(index)
:gt(index)
:lt(index)
提取索引值/索引值之后/索引值之前的元素$('input:eq(1)')
索引值第1个也就是现实中第2个input标记。
:header选择所有标题元素(h1,h2,h3....h6),前面不用跟对象$(':header') 
:animated选取当前执行动画的元素$('div:animate')
选取正在执行动画的div
 
:focus选取当前获取焦点的元素, 前面不用跟对象$(':focus') 
3.2 内容过滤选择器释义用法示例备注
:contains(text)选取所有文本内容为text的元素$('div:contains('我'))
选取所有内容包含“我"的div元素
 
:empty
:parent
选取不包含子元素或文本的空元素
选取含有子元素或文本的元素(也就是非空元素)
$('div:empty')
选取所有的空div
选取所有非空的div
$('div:parent')
 
:has(selector)选取含有选择器所匹配的元素$('div:has(p)')
选取所有含有p元素的div
 
3.3可见性过滤选择器释义用法示例备注
:hidden
:visible
选取所有不可见的元素$('div:hidden')
选取所有可见的div
如果前面不跟对象,则默认所有不可见的被选取
选取所有可见的元素选取所有不可见的div
$('div:visible')
 
3.4 属性过滤选择器释义用法备注
[attribute]选取所有拥有此属性的d元素$('div[id]')
选取含有id的div
 
[attribute=value]
[attribute!=value]
选取此属性为value的元素$('div[title=haha]')
选取title为haha的div
 
选取属性值不为value的元素$(div['title!=haha]')
选取title为haha的div
 
[attribute^=value]选取属性以value开始的元素  
[attribute$=value]  选取属性以value结束的元素  
[attribute*=value]  选取属性含有value的元素  
[attribute|=value]选取属性为给定字符串,或以该字符串为前缀(前缀-后缀)的元素  
[attribute-=value]选取属性用空格分隔的值中包含value的元素  
[attribute1][attribute2]..[attributeN]多个属性选择器的交集  
3.5 子元素过滤选择器释义用法备注
:nth-dhild(index/even/odd/eqation)选取每个父元素下第index个子元素或奇偶数子元素 index从1算起,是个集合元素
:first-child每个父元素下第一个子元素$('ul li:firsrt-child')
选取每个ul的第一个li元素
不同于:first,这是个集合元素
:last-child每个父元素下最后一个子元素  
:only-child独生子元素会被匹配,否则无效。 都是集合元素
3.6 表单对象的属性过滤选择器释义用法备注
:enable


:disable
选取所有可用元素$('form1:enable')
选取id为form1的表单内所有可用元素
 
选取所有不可用元素  
:checked(单选框,复选框)所有被选中的元素$('input:checked') 
:selected(下拉列表)所有被选中的元素$('select option:selected') 
4. 表单选择器释义用法备注
:input选取所有,input、textarea,select,button元素 前面不用跟对象
:text选取所有单行文本框  
:password选取所有密码框  
:radio选取所有单选框  
:checkbox选取所有复选框  
:submit选取所有提交按钮  
:image选取所有图像按钮  
:reset选取所有重置按钮  
:button选取所有button按钮  
:fil   
    


 

注意事项:

(1)当选择器含有特殊字符(比如16进制颜色代码)

\\#666

(2)注意:xxx的空格问题,意义和表现都是不同的。

 

【久违的案例】某购物网站品牌列表效果

项目需求:点击显示更多,弹出隐藏的选项,同时将重要推荐高亮显示,同时按钮文字变成:收起。再次单击收起,变回原来的页面。可以先写出JavaScript的工作方式。

先布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="section">
    <h2>jQuery选择器辞典</h2>
    <ul>
        <li class="main"><a href="javascript:;">基本选择器</a></li>
        <li class="main"><a href="javascript:;">层次选择器</a></li>
        <li class="main"><a href="javascript:;">过滤选择器</a></li>
        <li class="main"><a href="javascript:;">表单选择器</a></li>
        <li class="minor"><a href="javascript:;">基本过滤选择器</a></li>
        <li class="minor"><a href="javascript:;">内容过滤选择器</a></li>
        <li class="minor"><a href="javascript:;">属性过滤选择器</a></li>
        <li class="minor"><a href="javascript:;">子元素过滤选择器</a></li>
        <li class="minor"><a href="javascript:;">表单对象的过滤属性选择器</a></li>
        <li><a href="javascript:;">补白</a></li>
    </ul>
    <div id="showhide">
        显示所有
    </div>
</div>




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
*{
    margin:0;padding:0;
}
ul li{list-stylenone;}
a{text-decorationnone;}
 
 
#section{
    width:800px;
    margin:100px auto;
}
h2{
    width400px;
    text-aligncenter;
    margin0 auto;
    margin-bottom50px;
}
 
ul li{
     
    floatleft;
}
.minor{
    displaynone;
}
ul li a{
    displayblock;
    width200px;
    line-height40px;
    font-size16px;
    text-aligncenter;
    colorblack;
}
ul li a:hover{
    colorrgb(255,85,0);
    text-decorationunderline;
}
 
#showhide{
    clear:both;
    width:80px;
    border1px solid black;
    backgroundurl(../images/down.gif) no-repeat 4px center;
    margin:0 auto;
    padding-left20px;
    cursorpointer;
}




js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
window.onload=function(){
    var oBtn=document.getElementById('showhide');
    var aMinor=document.getElementsByClassName('minor');
    var aMain=document.getElementsByClassName('main');
    var bShow=false;
    var i=0;
 
 
    oBtn.onclick=function(){
        bShow=!bShow;
        if(bShow){
            for(i=0;i<aMinor.length;i++){
                aMinor[i].style.display='block';
            }
            for(i=0;i<aMain.length;i++){
                aMain[i].getElementsByTagName('a')[0].style.color='#FF5500';
            }
            oBtn.style.background='url(images/up.gif) no-repeat 4px center'
 
        }else{
            for(i=0;i<aMinor.length;i++){
                aMinor[i].style.display='none';
            }
            for(i=0;i<aMain.length;i++){
                aMain[i].getElementsByTagName('a')[0].style.color='black';
            }
            oBtn.style.background='url(images/down.gif) no-repeat 4px center'
                  
        }
    }
     
}





评述:由于原生js的局限性,需要在html中导入较多的class。而且获取a的属性也相当麻烦。

jquery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function(){
    var bShow=false;
    $('#showhide').click(function(){
        bShow=!bShow;
        if(bShow){
            $('.minor').css('display','block');
            $('.main>a').css('color','#ff5500');
            $(this).css('background','url(images/up.gif) no-repeat 4px center');
        }else{
            $('.minor').css('display','none');
            $('.main>a').css('color','#000');
            $(this).css('background','url(images/down.gif) no-repeat 4px center');
        }
 
    })
})




确实简化了一些声明。但是有些多余的class其实是不必要的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready(function(){
    var $aMinor=$('ul li:gt(3):not(:last)');
    //获取索引值大于3的品牌集合(除了最后一条)
    $('#showhide').click(function(){
        if($aMinor.is(":visible")){
            $aMinor.hide();//对应的方法是show,不用再写display的css()方法了。
            $('.main>a').css('color','#000');
            $(this)
                .css('background','url(images/down.gif) no-repeat 4px center')
                .text('展开');//改变里面的文本
        }else{
            $aMinor.show();
            $('.main>a').css('color','#ff5500');
            $(this)
                .css('background','url(images/up.gif) no-repeat 4px center')
                .text('收起');
        }
 
    })
})