jQuery常见选择器

最新推荐文章于 2024-01-14 11:54:30 发布

wawlian

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量413

点赞数

分类专栏： JavaScript 文章标签： jquery div class input html function

本文链接：https://blog.csdn.net/wawlian/article/details/7201264

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

以下内容都是我读《锋利的jQuery》的笔记，记录下来，没事多看看。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <style type="text/css">
        div,span,p {
            width: 140px;
            height: 140px;
            margin: 5px;
            background: #aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }
        div.mini {
            width: 55px;
            height: 55px;
            background-color: #aaa;
            font-size: 12px;

        }
        div.hide {
            display: none;
        }
    </style>
    <script type="text/javascript" src="jquery-1.3.1.js"></script>
    <script type="text/javascript">
        $(document).ready(
            function() {
                //改变id为one的元素的背景色         必须是单引号
                //$('#one').css('background','#bfa');

                //改变class为mini的所有元素背景色
                //$('.mini').css('background','red');

                //改变标签为div的所有元素背景色
                //$('div').css('background','red');

                //改变所有元素背景色
                //$('*').css('background','red');

                //改变<span>元素和id为two的元素的所有元素背景色
                //$('span,#two').css('background','red');

                //层次选择器
                //1.改变body里面所有<div>的背景色
                //$('body div').css('background','red');

                //2.改变body内子元素div的背景色
                //$('body>div').css('background','green');

                //3.改变id为one的元素的下一个兄弟div元素的背景色
                //$('#one + div').css('background','yellow');

                //4.改变id为two的元素后面所有div兄弟元素的背景色
                //$('#two ~ div').css('background','blue');

                //上面3的替代方法
                //$('#one').next('div').css('background','gray');

                //上面4的替代
                //$('#two').nextAll('div').css('background','gray');

                // 3过滤选择器
                //3.1基本过滤选择器

                //1改变第一个div的颜色
//                $('div:first').css('background','red');
//
//                // 2改变最后一个div的颜色
//                $('div:last').css('background','yellow');

                //3改变所有class不为one的div的背景色
                //$('div:not(.one)').css('background','yellow');

                //4改变索引值为偶数的div的背景色    计数从0开始
                //$('div:even').css('background','red');

                //5改变索引值为奇数的div的背景色
                //$('div:odd').css('background','red');

                //6改变索引值为3的div的背景色
                //$('div:eq(3)').css('background','red');

                //7改变索引值大于3的div的背景色
                //$('div:gt(3)').css('background','red');

                //8改变索引值小于3的div的背景色
                //$('div:lt(3)').css('background','red');

                //9改变所有标题元素的
                //$(':header').css('background','red');

                //10改变所有标题元素的
                //$(':animated').css('background','red');

                //3.2内容过滤选择器
                //1改变内容包含di的div元素的背景色
                //$('div:contains(di)').css('background','red');

                //2改变不包含子元素或者文本的空div元素的背景色
                //$('div:empty').css('background','red');

                //3改变含有class为mini的子元素的div元素的背景色
                //$('div:has(.mini)').css('background','red');

                //4改变含有子元素或者文本元素的元素的背景色
                //$('div:parent').css('background','red');

                //3.3可见性过滤选择器
                //1改变所有可见元素的背景色
                //$('div:visible').css('background','red');

                //2将不可见元素3秒显示出来
                //$('div:hidden').show(3000);


                //3.4 属性过滤选择器
                //1改变含有title属性的div元素的背景色
                //$('div[title]').css('background','red');

                //2改变属性值等于test的div元素的背景色
                //$('div[title=test]').css('background','red');

                //3改变title值不等于tets的div元素的背景色
                //$('div[title!=test]').css('background','red');

                //4改变title以te开头的div元素的背景色
                //$('div[title^=te]').css('background','red');

                //5.改变title以est结尾的div元素的背景色
                //$('div[title$=est]').css('background','red');

                //6.改变title含有es的div元素的背景色
                //$('div[title*=es]').css('background','red');

                //7改变含有id属性，并且title属性含有es的div元素的背景色
                //$('div[id][title*=es]').css('background','red');

                //3.5子元素过滤选择器
                //1改变每个class为one的div元素的第二个子元素的背景色    必须空格
                //$('div.one :nth-child(2)').css('background','red');

                //2改变每个class为one的div元素的第一个子元素的背景色
                //$('div.one :first-child').css('background','red');

                //3.改变每个class为one的div元素的最后一个子元素的背景色
                //$('div :last-child').css('background','red');

                //4.如果class为one的div元素只有一个子元素，那么改变这个子元素的背景色
                //$('div :only-child').css('background','red');

            }

        );
    </script>
</head>
<body>

    <h1>jQuery选择器</h1>
    <div class="one" id="one">
        id为one,class为one的div
        <div class="mini">class为mini</div>
    </div>
    <div class="one" id="two" title="test">
        id为two,class为one,title为test的div
        <div class="mini" title="other">class为mini,title为other</div>
        <div class="mini" title="test">class为mini,title为test</div>
    </div>
    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini" title="tesst">class为mini,title为tesst</div>
    </div>
    <div style="display:none;" class="none">style的display为none的div</div>
    <div class="hide">class为hide的div</div>
    <div>
        包含的input的type为hidden的div<input type="hidden" size="8"/>
    </div>
    <span id="mover">正在执行动画的span</span>

</body>
</html>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
      <title></title>
      <script type="text/javascript" src="jquery-1.3.1.js">
  
      </script>
  
     <script type="text/javascript">
         $().ready(
             function() {
 
                 //表单对象属性过滤选择器
                 //1改变表单内可用元素的值
                 //$('#form1 input:enabled').val("这里变化了");
 
                 //2改变表单内不可用元素的值
                 //$('#form1 input:disabled').val("这里变化了");
 
                 //3选取多选框中选中的个数
                 //alert($('#form1 input:checked').length);
 
                 //4选取下拉框中选中的内容
                 alert($('#form1 select :selected').length);
             }
         );
     </script>
 </head>
 <body>
     <form action="" id="form1">
         可用元素：<input name="add" value="可用文本框"/><br/>
         不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
         可用元素：<input name="che" value="可用文本框"/><br/>
         不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/>
 
         <br/>
        多选框：<br/>
         <input type="checkbox" name="newsletter" checked="checked" value="test1"/>test1
         <input type="checkbox" name="newsletter" value="test2"/>test2
         <input type="checkbox" name="newsletter" value="test3"/>test3
        <input type="checkbox" name="newsletter" checked="checked" value="test4"/>test4
         <input type="checkbox" name="newsletter" value="test5"/>test5
 
         <div></div>
         <br/><br/>
         下拉列表:<br/>
         <select name="test" multiple="multiple" style="height:100px">
            <option>浙江</option>
             <option selected="selected">湖南</option>
             <option>北京</option>
             <option selected="selected">天津</option>
             <option>广州</option>
             <option>湖北</option>
        </select>
 
        <br/><br/>
         下拉列表2：<br/>
        <select name="test2">
            <option>浙江</option>
             <option>湖南</option>
            <option selected="selected">北京</option>
             <option>天津</option>
             <option>广州</option>
             <option>湖北</option>
        </select>
        <div></div>
     </form>
 </body>
 </html>

wawlian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery常见选择器

以下内容都是我读《锋利的jQuery》的笔记，记录下来，没事多看看。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> div,span,p { width: 1
复制链接

扫一扫

专栏目录