01 选择器

//id选择器

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){ //页面初始化函数
    $('#div1').css('background','red'); //找到id为div1的元素  将背景色设置为红色
})
</script>
<title>练习</title>
</head>
<div id = "div1">哈哈哈</div>
<body>

</body>
</html>

显示结果如下：

如果id中含有特殊字符的话 要进行转义

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    $('#a\\.b').css('background','red'); //用\\进行转义
    $('#a\\:b').css('background','black');
    $('#\\[div\\]').css('background','gray');
})

</script>
<title>练习</title>
</head>
<div id = "a.b">1</div>
<div id = "a:b">2</div>
<div id = "[div]">3</div>
<body>

</body>
</html>

显示结果如下：

 

//标签选择器

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
      $('div').css('color','red');//获取所有的div元素 将前景色设置为红色
})

</script>
<title>练习</title>
</head>
<div>1</div>
<div>2</div>
<div>3</div>
<body>

</body>
</html>

显示结果如下：

 

//类选择器

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
      $('.red').css('color','red');//获取所有的class为red的div元素 将前景色设置为红色
})

</script>
<title>练习</title>
</head>
<div class="red">1</div>
<div >2</div>
<div class="red">3</div>
<body>

</body>
</html>

显示结果如下：

 

//通配选择器

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
      $('body *').css('color','red');//获取body下的所有的元素 将前景色设置为红色
})

</script>
<title>练习</title>
</head>

<body>
 <div >div1</div>
 <span> span</span> 
 <div >div2</div>
</body>
</html>

显示效果如下：

 

//组选择器

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
      $('h2,.div1,[title="spantitle"]').css('color','red');//同时获取h2  class为div 和title属性为spantitle的元素  将前景色设为红色
})

</script>
<title>练习</title>
</head>
<body>
<h2>h2</h2>
<div class='div1'>div</div>
<span title='spantitle'>span</span>
</body>
</html>

显示结果如下：

//包含选择器

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
     $('form input').css('border','solid 1px red');//找到form标签下的input标签 设置边框
})

</script>
<title>练习</title>
</head>
<body>
<form>
<input value='1'/>
<input value='2'/>
</form>
<input value='3'/>
</body>
</html>

显示结果如下：

 

//子选择器

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
     $('form >input').css('border','solid 1px red');//只找form下一层  再下一层就不找了
})

</script>
<title>练习</title>
</head>

<body>
<form>
<input value='1'/>
<div><input value='divinput'/></div>
<input value='2'/>
</form>
<input value='3'/>
</body>
</html>

显示结果如下：

//相邻选择器

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
     $('div + input').css('border','solid 1px red');//获取div同级次的input元素 
})

</script>
<title>练习</title>
</head>

<body>
<form>
<input  value='1'/>
<div><input value='divinput'/></div>
<input value='2'/>
</form>
<input value='3'/>
</body>
</html>

显示结果如下：

 

//兄弟选择器

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
     $('div ~ input').css('border','solid 1px red');//找到div元素后面同级的所有input元素
})

</script>
<title>练习</title>
</head>

<body>
<form>
<input id='#input1' value='1'/>
<div><input value='divinput'/></div>
<input class='haha' value='2'/>
<input class='haha' value='2'/>
</form>
<input value='3'/>
</body>
</html>

显示结果如下：

//定位选择器

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('tr:first').css('background', 'red');//找到第一个tr元素
            $('tr:eq(1)').css('background', ' blue');//找到第二个tr元素  下标从0开始
            $('tr:last').css('background', ' green');//找到最后一个tr元素
        });

    </script>
</head>
<body>
   <table>
        <tr><td>第一行</td></tr>
        <tr><td>第二行</td></tr>
        <tr><td>第三行</td></tr>
   </table>
</body>
</html>

显示结果如下：

//指定范围选择器

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('tr:odd').css('background', 'blue');//找到tr元素的奇数行 1 3 5 7 9 
            $('tr:even').css('background', 'red');//找到tr元素的偶数行 0 2 4 6 8 
            $('tr:lt(2)').css('color', 'gray');//找到tr的元素的下标小于2的
            $('tr:gt(3)').css('color','yellow');//找到tr的元素的下标大于3的
           
        });

    </script>
</head>
<body>
   <table>
        <tr><td>第一行</td></tr>
        <tr><td>第二行</td></tr>
        <tr><td>第三行</td></tr>
        <tr><td>第四行</td></tr>
        <tr><td>第五行</td></tr>
        <tr><td>第六行</td></tr>
   </table>
</body>
</html>

 

显示结果如下：

 

//排除选择器

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('tr:not(tr:lt(2))').css('background','red');//排除下标为0 1 的tr元素
           
        });

    </script>
</head>
<body>
   <table>
        <tr><td>第一行</td></tr>
        <tr><td>第二行</td></tr>
        <tr><td>第三行</td></tr>
        <tr><td>第四行</td></tr>
        <tr><td>第五行</td></tr>
        <tr><td>第六行</td></tr>
   </table>
</body>
</html>

显示结果如下：

 

//匹配包含文本选择器

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("td:contains('三')").css('color','red');//找到td元素中包含三的
           
        });

    </script>
</head>
<body>
   <table>
        <tr><td>第一行</td></tr>
        <tr><td>第二行</td></tr>
        <tr><td>第三行</td></tr>
        <tr><td>第四行</td></tr>
        <tr><td>第五行</td></tr>
        <tr><td>第六行</td></tr>
   </table>
</body>
</html>

显示结果如下：

 

//匹配包含元素选择器

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('tr:has(td)').css('color','red');//找出tr元素下面包含td的元素
           
        });

    </script>
</head>
<body>
   <table>
        <tr><td>第一行</td></tr>
        <tr><td>第二行</td></tr>
        <tr><td>第三行</td></tr>
        <tr><td>第四行</td></tr>
        <tr><h3>第五行</h3></tr>
        <tr><h3>第六行</h3></tr>
   </table>
</body>
</html>

显示结果如下：

 

posted @ 2015-06-12 07:47  YyuTtian  阅读(153)  评论(0)  编辑  收藏  举报