jQuery--jQuery和DOM对象互相转化、选择器

向右看齐 2022-09-21 13:27 173阅读 0赞

1. jQuery的简介  
是一个JavaScript函数库  
2. jQuery的优势

*  轻量级
 *  强大的选择器
 *  出色的DOM操作封装
 *  可靠的事件处理机制
 *  出色的浏览器兼容性

3. jQuery的使用（1.12版本）  
<script src="jquery.min.js"></script>  
  
4.jQuery对象和DOM对象  
（1）jQuery对象转为DOM对象

*  jQuery对象是一个数组对象，通过\[index\]方法得到DOM对象。如：$("\#text")\[0\]
 *  使用jQuery中的get(index)方法，如：$("\#text").get(0)

例子：

<body>
    <p id="p1">段落一</p>
    <p id="p2">段落二</p>
    <input type="button" value="使用DOM修改第一个段落" onclick="change()">
    <input id="btn1" type="button" value="使用JQuery修改第一个段落"><br/>
    <input id="btn3" type="button" value="JQuery对象转为DOM对象">
    <script>
        //使用DOm修改第一个段落
        function change(){
            var a=document.getElementById("p1");
            a.innerHTML="使用DOM修改第一个段落";
        }
        //
        $(document).ready(function(){
            //使用jQuery修改段落
            $("#btn1").click(function(){
                $("#p1").html("使用JQuery修改段落");
            });
            //JQuery对象转为DOM
            $("#btn3").click(function(){
                //(1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象.
               // $("#msg")[0]
                //(2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象
                //$("#msg").get(0)
                var dom_b=$("#p2")[0];//对象[0]从JQ对象中获取DOM对象
                dom_b.innerHTML="JQuery对象转为DOM";
            });
        });
    </script>
    </body>

（2）DOM对象转为jQuery对象

*  $(DOM对象名称)，如：$(document.getElementById("div"))

例子：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JQuery对象和DOM对象</title>
        <script src="jquery.js"></script>
    </head>
    <body onload="load()">
    <p id="p1">段落一</p>
    <p id="p2">段落二</p>
    <input type="button" value="使用DOM修改第一个段落" onclick="change()">
    <input id="btn1" type="button" value="使用JQuery修改第一个段落"><br/>
    <input id="btn2" type="button" value="DOM对象转为JQuery对象">
    
    <script>
        //使用DOm修改第一个段落
        function change(){
            var a=document.getElementById("p1");
            a.innerHTML="使用DOM修改第一个段落";
        }
        //
        $(document).ready(function(){
            //使用jQuery修改段落
            $("#btn1").click(function(){
                $("#p1").html("使用JQuery修改段落");
            });
            //DOM对象转为JQuery
            $("#btn2").click(function(){
                var b=document.getElementById("p2");
                var jq_b=$(b);//$(DOM对象)
                //$(DOM 对象后产生的对象)
                jq_b.html("DOM对象转为JQuery");
            });
    </script>
    </body>
    </html>

5. jQuery的选择器  
（1）基本选择器

*  \* 如：$("\*")，所有元素
 *   \#id属性； 如：$("\#lastname")中，所有id="lastname" 的元素
 *   .class属性；如： $(".intro") 中，所有 class="intro" 的元素
 *  element 如：$("p") 所有 <p> 元素
 *   .class属性 .class属性  如：$(".intro.demo") 所有 class="intro" 且 class="demo" 的元素

例子：

<p>H5edu.cn</p>
    <p>你好</p>
    <div><img src="image/logo.png" width="30%" height="30%"></div>
    <input type="button" id="btn1" value="p标签隐藏"><br/>
    <input type="button" id="btn2" value="全部显示"><br>
    <input type="button" id="btn3" value="div,p隐藏">
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("p").hide();
            });
            $("#btn2").click(function(){
                $("*").show();//匹配所有的元素
            });
            $("#btn3").click(function(){
                $("div,p,#btn1").hide();//集合元素，可以写标签，也可以加id属性，多个中间用，号分开
            });
        });
    </script>

（2）层次选择器

*  $("class/id 元素")，查询class/id后的所有元素
 *  $("class/id>元素") ，查询class/id中所有的子节点（一级）
 *  $("class/id +next"),选取class/id元素的下一个元素
 *  $("class/id ~元素")，选取class/id中所有的元素

例子：

<h2>层次选择器</h2>
    <div id="div1">
        <p id="p1">段落</p>
        <h2>张新丁</h2>
        <h2>你好</h2>
        <div id="div2">
            <img src="image/logo.png" width="30%" height="30%">
            <h2>层次选择器</h2>
            <img src="image/logo.png" width="30%" height="30%">
            <img src="image/logo.png" width="30%" height="30%">
        </div>
        <p id="p2">
            <img src="image/logo.png" width="30%" height="30%">
        </p>
    </div>
    <script>
        $(function(){//简写：$(document).ready(function(){});
            //div1 H2是指div1中所有的H2
            $("#div1 H2").css("color","red");
            //#div1>H2表示div1中的所有的直接子节点（一级）
            $("#div1>H2").css("background-color","pink");
            //+号表示后面的一个元素
            $("#p1+H2").css("border","1px solid blue");
            //h2中所有的img
            $("h2~img").css({"width":"20%","height":"20%","border":"dashed 1px green"});
        });
    </script>

（3）过滤选择器

1.  基本过滤选择器：

*  :first，匹配选择第一个元素
 *  :last匹配选择最后一个元素
 *  :not(selector)去除所有匹配元素
 *  :odd匹配所有奇数的元素
 *  :even匹配素偶数的元素
 *  :eq(index)匹配一个指定的索引值值的元素
 *  :gt(index)匹配大于指定所有值的元素
 *  :lt(index)匹配小于指定所有值的元素
 *  .header选择所有h1-h6的head标签
 *  :animated匹配正在执行的动画效果的元素

例子：

<h3>过滤选择器的使用</h3>
    <ul>
        <li>:first匹配选择第一个元素</li>
        <li>:last匹配选择最后一个元素</li>
        <li>:not(selector)去除所有匹配元素</li>
        <li>:odd匹配所有奇数的元素</li>
        <li>:even匹配所有偶数的元素</li>
        <li>:eq(index)匹配一个指定的索引值的元素</li>
        <li>:gt(index)匹配大于指定所有值的元素</li>
        <li>:lt(index)匹配小于指定所有值的元素</li>
        <li>.header选择所有h1-h6的head标签</li>
        <li>:animated匹配正在执行的动画效果的元素</li>
    </ul>
    <table>
        <tr><td>HTML</td></tr>
        <tr><td>CSS</td></tr>
        <tr><td>JavaScript</td></tr>
        <tr><td>CSS3</td></tr>
        <tr><td>HTML5新增标签</td></tr>
    </table>
    <script>
        //设置所有的li的颜色
        $(function(){
            $("li").css("color","#999");
            //设定第一个
            $("li:first").css("color","red");
            //设定最后一个
            $("li:last").css("color","red");
            //设定奇数
            $("li:odd").css("background-color","pink");
            //设定偶数
            $("li:even").css("background-color","#abcdef");
            //设定表隔行换色(奇数和偶数)
            $("tr:odd").css("background-color","cyan");
            $("tr:even").css("background-color","purple");
    
        });
    </script>

2. 内容过滤选择器

*  $("id/class/标签  :contains('文本')")，选取文本内容的text元素
 *  $("id/class/标签  :has('标签')")，选取含有标签的所有元素

例子：

<div><a href="">欢迎来到张新丁的个人主页,张新丁的个人空间</a></div><br/>
    <div><p>邮箱：zhang@qq.com</p></div>
    <script>
        $(function(){
            //:contains查找所有包含“张鑫”的a元素
            $("a:contains('张新')").css("color","red");
            //has匹配含有该元素
            $("div:has('p')").css("border","1px solid red");
        });
    </script>

3. 可见性选择器

*  :hidden，选取所有不可见的元素
 *  :visible，选取所有可见元素

例子：

<input type="hidden" value="隐藏">
    <input type="text" value="文本框">
    <input type="button" id="btn1" value="获取hidden对象的value">
    <input type="button" id="btn2" value="获取可见对象text内容">
    <script>
        $(function(){
            $("#btn1").click(function(){
                //hidden是隐藏对象过滤器
                alert($("input:hidden").val());
            });
    
            $("#btn2").click(function(){
                //visible是显示对象的过滤器
                alert($("input:visible").val());
            });
        });
    </script>

4.属性过滤器

*  \[attribute\] $("\[href\]") 所有带有 href 属性的元素
 *  \[attribute=value\] $("\[href='\#'\]") 所有 href 属性的值等于 "\#" 的元素
 *  \[attribute!=value\] $("\[href!='\#'\]") 所有 href 属性的值不等于 "\#" 的元素
 *  \[attribute$=value\] $("\[href$='.jpg'\]") 所有 href 属性的值包含以 ".jpg" 结尾的元素

例子：

<img src="image/logo.png" width="30%" height="30%"><br>
    <img src="image/logo.png" width="40%" alt="test" ><br>
    <img src="image/logo.png" width="20%" alt="你好">
    <script>
        $(function(){
            //选取有height属性的元素
            $("img[height]").css("border","1px solid red");
            //alt*='你好'选取指定属性值为‘你好’的元素
            $("img[alt*='你好']").css("border","1px dashed blue");
    
        });
    </script>

5.子元素过滤器

*  :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
 *  :nth-child(2): 能选取每个父元素下的索引值为 2 的元素
 *  :nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素
 *  :nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素
 *  :first:child: 获取每个父元素的第一个元素
 *  :last:child: 获取每个父元素的最后一个元素
 *  :only:child: 如果某一元素是它父元素中唯一的子元素，那么将匹配

例子：

<div>
        <h3>学习HTML5路线图</h3>
        <p>1.HTML</p>
        <p>2.CSS</p>
        <p>3.JavaScript</p>
        <p>4.JQuery</p>
    </div>
    <script>
        $("div p").css("color","red");
        $("div p:nth-child(5)").css("color","blue");
        //nth-child(2n-1): 能选取每个父元素下的索引值为 2n-1 的元素
        $("div p:nth-child(2n-1)").css("color","yellow");
    </script>

6.表单对象属性过滤器  
例子：

姓名<input type="text" value=""><br>
    性别<input type="radio" value="1" name="sex">男
    <input type="radio" value="2" name="sex">女<br>
    <input type="button" value="获取">
    <script>
        $(function(){
            $(":button").css({"width":"100%","height":"80%"});
            $(":button").click(function(){
                alert($(":text").val());
                alert($(":radio:checked").val());
            });
        });
    </script>