19Query九类选择器

Posted yungcs_

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了19Query九类选择器相关的知识,希望对你有一定的参考价值。

要求
1)掌握jQuery九类选择器及应用
2)掌握jQuery常用Method-API
3)掌握jQuery常用Event-API

一)jQuery九类选择器【参见jQueryAPI.chm手册】
目的:通过九类选择器,能定位web页面(html/JSP/XML)中的任何标签
(1)基本选择器【参见01_selector.html】

         /1)查找ID"div1ID"的元素个数
    //alert( $("#div1ID").size() );

    //2)查找DIV元素的个数
    //alert( $("div").length );

    //3)查找所有样式是"myClass"的元素的个数
    //alert( $(".myClass").size() );

    //4)查找所有DIV,SPAN,P元素的个数
    //alert( $("DIV,span,p").size() );

    //5)查找所有ID为div1ID,CLASS为myClass,P元素的个数
    alert( $("#div1ID,.myClass,p").size() );

(2)层次选择器【参见02_selector.html】

  <!-- 
    <input type="radio" value="z"/>
    <input type="radio" value="e"/>
    <input type="radio" value="y"/>
    -->
    <form>
        <input type="text" value="a"/>      
        <table>
            <tr>
                <td>
                    <input type="checkbox" value="b"/>
                </td>
            </tr>           
        </table>
    </form>
    <input type="radio" value="ccccccccc"/>
    <input type="radio" value="d"/>
    <input type="radio" value="e"/>
    <script type="text/javascript">

    //1)找到表单form里所有的input元素的个数
    //alert( $("form input").size() );

    //2)找到表单form里所有的子级input元素个数
    //alert( $("form>input").size() );

    //3)找到表单form同级第一个input元素的value属性值
    //alert( $("form+input").val() );

    //4)找到所有与表单form同级的input元素个数
    alert( $("form~input").size() );

(3)增强基本选择器【参见03_selector.html】

  <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>

    <input type="checkbox" checked/>
    <input type="checkbox" checked/>
    <input type="checkbox"/>

    <table border="1">
      <tr><td>line1[0]</td></tr>
      <tr><td>line2[1]</td></tr>
      <tr><td>line3[2]</td></tr>
      <tr><td>line4[3]</td></tr>
      <tr><td>line5[4]</td></tr>
      <tr><td>line6[5]</td></tr>
    </table>    

    <h1>h1</h1>
    <h2>h2</h2> 
    <h3>h3</h3>

    <p>p</p>


    <script type="text/javascript">
        //1)查找UL中第一个LI元素的内容
            //html()要用于html/jsp,不能用在xml
            //text()既能用于html/jsp,且能用于xml
            //alert( $("ul li:first").text() );

        //2)查找UL中最后个元素的内容
            //alert( $("ul li:last").text() );

        //4)查找表格的索引号为1、3、5...奇数行个数,索引号从0开始
            //alert( $("table tr:odd").size() );

        //5)查找表格的索引号为2、4、6...偶数行个数,索引号从0开始
            //alert( $("table tr:even").size() );

        //6)查找表格中第二行的内容,从索引号0开始,这是一种祖先 后代 的变化形式
            //html():强调的是标签中的内容,即便标签中的子标签,也会显示出来
            //text():强调的是标签中的文本内容,即便标签中的子标签,也只会显示出文本内容,不会显示子标签
            //alert( $("table tr:eq(1)").text() );

        //7)查找表格中第二第三行的个数,即索引值是1和2,也就是比0大
            //alert( $("table tr:gt(0)").size() );

        //8)查找表格中第一第二行的个数,即索引值是0和1,也就是比2小
            //alert( $("table tr:lt(3)").size() );

        //9)给页面内所有标题<h1><h2><h3>加上红色背景色,且文字加蓝色
            //$(":header").css("background-color","red").css("color","#ffff33");

        //3)查找所有[未]选中的input为checkbox的元素个数
            alert( $(":checkbox:not(:checked)").size() );

    </script>

(4)内容选择器【参见04_selector.html】

  <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
    <style type="text/css">
        .myClass
            font-size:44px;
            color:blue
        
    </style>
  </head>
  <body>

    <div><p>John Resig</p></div>
    <div><p>George Martin</p></div>
    <div>Malcom John Sinclair</div>
    <div>J. Ohn</div>
    <div></div>

    <p></p>
    <p></p>

    <script type="text/javascript">

        //1)查找所有包含文本"John"的div元素的个数
            //alert( $("div:contains('John')").size() );

        //2)查找所有p元素为空的元素个数
            //alert( $("p:empty").size() );

        //3)给所有包含p元素的div元素添加一个myClass样式
            //$("div:has(p)").addClass("myClass");

        //4)查找所有含有子元素或者文本的p元素个数,即p为父元素
            alert( $("p:parent").size() );

    </script>

  </body>
</html>

(5)可见性选择器【参见05_selector.html】

  <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>

    <table border="1" align="center">
      <tr style="display:none">
        <td>Value 1</td>
      </tr>
      <tr>
        <td>Value 2</td>
      </tr>
      <tr>
        <td>Value 3</td>
      </tr>
    </table>

    <script type="text/javascript">
        //1)查找隐藏的tr元素的个数
        //alert( $("table tr:hidden").size() );

        //2)查找所有可见的tr元素的个数
        //alert( $("table tr:NOT(:hidden)").size() );
        alert( $("table tr:visible").size() );//提倡
    </script>

  </body>
</html> 

(6)属性选择器【参见06_selector.html】

    <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>

    <div>
      <p>Hello!</p>
    </div>
    <div id="test2"></div>

    <input type="checkbox" name="newsletter" value="Hot Fuzz"/>
    <input id="myID" type="checkbox" name="newsletter" value="Cold Fusion" />
    <input type="checkbox" name="newsaccept" value="Evil Plans" />

    <!-- 
    <input type="checkbox" name="letternews" value="Hot Fuzz"/>
    <input id="myID" type="checkbox" name="letnewster" value="Cold Fusion" />
    <input type="checkbox" name="accNEWSept" value="Evil Plans" />
    -->

    <script type="text/javascript">

        //1)查找所有含有id属性的div元素个数
        //alert( $('div[id]').size() );

        //2)查找所有name属性是newsletter的input元素,并将其选中
        //$("input[name='newsletter']").attr("checked","checked");

        //3)查找所有name属性不是newsletter的input元素,并将其选中
        //$("input[name!='newsletter']").attr("checked","true");
        /*
            请问:在JS中如下符号表示什么意思
            1)=/==/===
            2)!=/!==
            明天讲解
         */
        //4)查找所有name属性以'news'开头的input元素,并将其选中
        //$("input[name^='news']").attr("checked","checked");

        //5)查找所有name属性以'letter'结尾的input元素,并将其选中
        //$("input[name$='letter']").attr("checked","checked");

        //6)查找所有name属性包含'news'的input元素,并将其选中
        //$("input[name*='news']").attr("checked","checked");

        //7)找到所有含有id属性,并且它的name属性是以"letter"结尾的input元素,并将其选中
        $("input[id][name$='letter']").attr("checked","true");

    </script>

  </body>
</html>

(7)子元素选择器【参见07_selector.html】

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>

    <ul>
      <li>John</li>
      <li>Karl</li>
      <li>Brandon</li>
    </ul>

    <ul>
      <li>Glen</li>
      <li>Tane</li>
      <li>Ralph</li>
    </ul>

    <ul>
      <li>Marry</li>
    </ul>

    <ul>
      <li>Jack</li>
    </ul>


    <script type="text/javascript">

        /*1)迭代[each]每个ul中第1个li元素中的内容,索引从1开始
        $("ul li:first-child").each(function()
            alert( $(this).text() );
        );
        */

        /*2)迭代每个ul中最后1个li元素中的内容,索引从1开始
        $("ul li:last-child").each(function()
            alert( $(this).text() );
        );
        */

        /*4)迭代每个ul中第2个li元素中的内容,索引从1开始
        $("ul li:nth-child(2)").each(function()
            alert( $(this).text() );
        );*/

        //3)在ul中查找是唯一子元素的li元素的内容
        $("ul li:only-child").each(function()
            alert( $(this).text() );
        );



    </script>
  </body>
</html>

(8)表单选择器【参见08_selector.html】

    <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
    <form>
        <input type="button" value="Input Button"/><br/>
        <input type="checkbox" /><br/>
        <input type="file" /><br/>
        <input type="hidden" name="id" value="123"/><br/>
        <input type="image" src="../images/lb.jpg" width="25px" height="25px"/><br/>
        <input type="password" /><br/>
        <input type="radio" /><br/>
        <input type="reset" /><br/>
        <input type="submit" /><br/>
        <input type="text" /><br/>
        <select><option>Option</option></select><br/>
        <textarea></textarea><br/>
        <button>Button</button><br/>
    </form>

    <script type="text/javascript">

        //1)查找所有input元素的个数
        //alert( $("input").size() );//10,找input标签
        //alert( $(":input").size() );//13,找input标签和select/textarea/button

        //2)查找所有文本框的个数
        //alert( $(":text").size() );

        //3)查找所有密码框的个数
        //alert( $(":password").size() );

        //4)查找所有单选按钮的个数
        //alert( $(":radio").size() );

        //5)查找所有复选框的个数
        //alert( $(":checkbox").size() );

        //6)查找所有提交按钮的个数
        //alert( $(":submit").size() );

        //7)匹配所有图像域的个数
        //alert( $(":images").size() );

        //8)查找所有重置按钮的个数
        //alert( $(":reset").size() );

        //9)查找所有普通按钮的个数
        //alert( $(":button").size() );

        //10)查找所有文件域的个数
        //alert( $(":file").size() );

        //11)查找所有input元素为隐藏域的个数
        //alert( $(":input:hidden").size() );

    </script>
  </body>
</html> 

(9)表单对象属性选择器【参见09_selector.html】

    <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>

    <form>

      <input type="text" name="email" disabled="disabled" />
      <input type="text" name="password" disabled="disabled" />
      <input type="text" name="id" />

      <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
      <input type="checkbox" name="newsletter" value="Weekly" />
      <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />

      <select id="provinceID">
          <option value="1">广东</option>
          <option value="2" selected="selected">湖南</option>
          <option value="3">湖北</option>
      </select>

    </form>



    <script type="text/javascript">

        //1)查找所有可用的input元素的个数
        //alert( $("input:enabled").size() );

        //2)查找所有不可用的input元素的个数
        //alert( $("input:disabled").size() );

        //3)查找所有选中的复选框元素的个数
        //alert( $(":checkbox:checked").size() );

        //4)查找所有未选中的复选框元素的个数
        //alert( $(":checkbox:NOT(:checked)").size() );

        //5)查找所有选中的选项元素的个数
        //alert( $("select option:selected").size() );
        alert( $("#provinceID option:NOT(:selected)").size() );

    </script>

  </body> 
</html>
    注意:项目中,通常是多种选择器一起使用

二)jQuery常用Method-API
目的:对web页面(HTML/JSP/XML)中的任何标签,属性,内容进行增删改查
(1)DOM简述与分类
(A)DOM是一种W3C官方标准规则,可访问任何标签语言的页面(HTML/JSP/XML)
(B)DOM是跨平台(window/linux/unix),跨语言(javascript/java),
跨浏览器(ie/firefox/Chrome)的标准规则
(C)我们只需要按照DOM标准规则,针对主流浏览器(ie/firefox/Chrome)编程
(D)JS/jQuery按照DOM的标准规则,既可以操作HTML/JSP,也能操作CSS
(E)DOM标准规则不是JS的专属,其它语言,也能适用,例如:VBScript,Java语言等

(2)DOM标准规则下的jQuery常用API,注意:以下方法均由jQuery对象调用
each():是jQuery中专用于迭代数组的方法,参数为一个处理函数,this表示当前需要迭代的js对象
append():追加到父元素之后
prepend():追加到父元素之前
after():追加到兄弟元素之后
before():追加到兄弟元素之前
attr(name):获取属性值
attr(name,value):给符合条件的标签添加key-value属性对
$(“

HTML代码 “):创建元素,属性,文本
remove():删除自已及其后代节点
val():获取value属性的值
val(“”):设置value属性值为”“空串,相当于清空
text():获取HTML或XML标签之间的值
text(“”):设置HTML或XML标签之间的值为”“空串
clone():只复制样式,不复制行为
clone(true):既复制样式,又复制行为
replaceWith():替代原来的节点
removeAttr():删除已存在的属性
addClass():增加已存在的样式
removeClass():删除已存在的样式
hasClass():判断标签是否有指定的样式,true表示有样式,false表示无样式
toggleClass():如果标签有样式就删除,否则增加样式
offset():获取对象的left和top坐标
offset(top:100,left:200):将对象直接定位到指定的left和top坐标
width():获取对象的宽
width(300):设置对象的宽
height():获取对象的高
height(500):设置对象的高
children():只查询子节点,不含后代节点
next():下一下兄弟节点
prev():上一下兄弟节点
siblings():上下兄弟节点
show():显示对象
hide():隐藏对象
fadeIn():淡入显示对象
fadeOut():淡出隐藏对象
slideUp():向上滑动
slideDown():向下滑动
slideToggle():上下切换滑动,速度快点
面试题–find(“9类选择器”):查询指定的节点和多重each()迭代

//使用jquery弹出奇数的tr标签下的td里的值

var $tr = $("table tr:lt(4):even");
$tr.each(function()
//tr中查找td标签,$(this)表示tr
var $td = $(this).find("td");
$td.each(function()
        //$(this)表示td
        var txt = $(this).text();
alert(txt);
);
);

三)jQuery常用Event-API
目的:对web页面(HTML/JSP)进行事件触发,完成特殊效果的处理
window.onload:在浏览器加载web页面时触发,可以写多次onload事件,但后者覆盖前者
ready:在浏览器加载web页面时触发,可以写多次ready事件,不会后者覆盖前者,依次从上向下执行,我们常用$(函数)简化
ready和onload同时存在时,二者都会触发执行,ready快于onload
change:当内容改变时触发
focus:焦点获取
select:选中所有的文本值
keyup/keydown/keypress:演示在IE和Firefox中获取event对象的不同
mousemove:在指定区域中不断移动触发
mouseover:鼠标移入时触发
mouseout:鼠标移出时触发
submit:在提交表单时触发,true表示提交到后台,false表示不提交到后台
click:单击触发
dblclick:双击触发
blur:焦点失去

作业:
1)将selector目录下的所有练习题做一遍
2)将method目录下的所有练习题做一遍
3)将event目录下的所有练习题做一遍[暂不做]
4)将exe目录下的所有练习题做一遍

以上是关于19Query九类选择器的主要内容,如果未能解决你的问题,请参考以下文章

jQuery的九类选择器

CSS 性能:后代选择器还是两个直接后代选择器最好?

jquery基本使用

19Jquery入门

css后代选择器和子选择器的区别

后代选择器和子元素选择器的区别