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

最新推荐文章于 2024-03-11 18:58:15 发布
最新推荐文章于 2024-03-11 18:58:15 发布
阅读量825 收藏
点赞数
分类专栏： jQuery HTML5+CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012054869/article/details/51734594
版权

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>
ZhangXD_BLOG
关注
专栏目录
jquery对象和javascript对象即DOM对象相互转换
12-09
首先，jQuery对象是通过调用jQuery函数（$）并传入一个选择器或DOM元素来创建的。这种包装使得我们可以利用jQuery提供的丰富API，如选择、遍历、事件处理和动画等。例如，`$("#img").attr("src","test.jpg")`就是一...
基于jQuery对象和DOM对象和字符串之间的转化实例
01-19
2、jQuery对象———->DOM对象 下标选取法(原理:jQuery是DOM的数组形式):$(“h2”)[1] 使用.get(index)函数 3、字符串———–>DOM对象 写一个脚本函数 function parseDom(nodelist) { //nodelist是html文本字符串 ...
jquery与dom的转换
weixin_30414245的博客
12-03 97
刚开始学习jQuery，可能一时会分不清楚哪些是jQuery对象，哪些是DOM对象。至于DOM对象不多解释，我们接触的太多了，下面重点介绍一下jQuery，以及两者相互间的转换。 什么是jQuery对象？ ---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法。 比如： $("#test").html() 意思是指：获取ID为...
jQuery对象与DOM对象之间的转换方法
qq_21223653的博客
08-01 403
jquery dom
jQuery和DOM对象互转
小狐狸和小兔子
09-23 420
jQuery和DOM对象互转jQuery和DOM作为开发想必我们都或多或少的有接触，但是很多时候容易混淆，特别是刚接触的新手，往往会分不清什么是jQuery对象，什么是DOM对象？jQuery对象需要引入jQuery的js，其实我们可以理解它就是一个类库，官网下载地址http://jquery.com/download/ ，在使用上语法很精简var $obj=$("#id")orvar $obj=j
JQuery与DOM之间的转换
Zyl_CN的博客
09-14 1128
&lt;input type="text" value="132"&gt; &lt;script src="jquery-1.11.1.min.js"&gt;&lt;/script&gt; &lt;script&gt; var inpVal=document.getElementsByTagName('input')[0]; console.log(inpVal.va
jQuery和DOM对象之间的转换
妖怪的博客
02-15 535
1.jQuery转DOM有2种方法,jQuery对象是一个类似于数组的结构 2..DOM转jQuery
jquery-3.4.1_jquery_3.4.1.js_jquery-3.4.1_sangat1_jquery3.4.1_jq
09-30
综上所述，jQuery 3.4.1是一个强大的JavaScript库，它的主要特点包括高效的选择器引擎、简洁的API、丰富的插件生态系统和跨浏览器兼容性。通过引入"jquery-3.4.1.js"，开发者可以轻松地实现各种前端功能，如动态修改...
jquery-3.5.1.min.js_jquery-3.5.1.min.js_jquery_
10-03
jQuery的核心特性包括选择器、DOM操作、事件处理、动画效果以及Ajax操作。选择器是jQuery的精髓，它简化了JavaScript中获取DOM元素的方式，如"$()"函数可以轻松选取HTML元素。DOM操作则提供了一整套方法，如$("#id")...
jquery-1.11.1.js和jquery-1.11.1.min.js
12-06
它支持CSS选择器、DOM操作、事件处理、AJAX请求、动画效果等。例如，使用`$()`可以快速获取DOM元素，`.click()`用于绑定点击事件，`.fadeIn()`和`.fadeOut()`实现元素的淡入淡出效果，`.ajax()`则用于异步数据交互。...
JQuery对象与DOM对象相互转换
Carey
09-29 1370
核心提示：jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型，一般情况下，如S(’#id’)得到的是jquery对象，它不能使用js中的dom方法。所以，如果jquery对象要使用标准的dom方法，就需要进行对象转换。 刚开始学习jQuery，可能一时会分不清楚哪些是jQuery对象，哪...
jQuery对象与Dom对象及jQuery中的选择器
不教一日闲过的博客
12-13 559
CSS选择器与jQuery中的选择器
jQuery将元素转为Dom
weixin_34417814的博客
04-27 240
jquery将选择的元素转为Dom $('#video')[0] 如果元素多的话比如： //可以通过循环遍历元素 for(var x=0;x<$('video').length;x++){ temp=$('video')[x]; temp.pause(); } ...
jQuery对象与js对象互相转换
JackLiu16的博客
03-18 5641
两种转换方式将一个jQuery对象转换成js对象：[index]和.get(index)：(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的js对象。 如：var $v =$("#v") ; //jQuery对象 var v=$v[0]; //js对象 alert(v.checked) //检测这个checkbox是否被选中 (2)jQuery本身提供，通过.get(...
关于jquery选择器的转移
Protagonist
06-20 280
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
jQuery（一）：jQuery与DOM相互转换及jQuery选择器
核桃仁先生的博客
08-01 261
通过jQuery库自带的方法获取页面DOM元素的对象叫做jQuery对象，保存jQuery 对象的变量通常以$开头 $userName.val("Tom") jQuery 对象是 jQuery 独有的，该对象无法使用 DOM 对象中的任何方法；同样 DOM 对象也不能使用 jQuery 里的任何方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></ti
jq对象和DOM对象转换,jq入口函数,基础选择器,筛选选择器,层级选择器
清风的博客
09-18 215
jQuery 1.了解jq jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。 j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。 jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM ...
jquery对象与js对象的相互转换的应用和两个div只选中其中一个的操作
CongBird的博客
10-28 1741
废话少说，先直接上代码！ $(function() { $("[id^=plan_]").each(function() { //^选择器，选择以paln_开头的所有div进行遍历 $(this).click(function() { $("[id^
javascript基础学习系列三百五十五：DOMParser类型
最新发布
m0_68635815的博客
03-11 1314
Firefox 专门为把 XML 解析为 DOM 文档新增了 DOMParser 类型，后来所有其他浏览器也实现了该 类型。要使用 DOMParser，需要先创建它的一个实例，然后再调用 parseFromString()方法。这个方 法接收两个参数:要解析的 XML 字符串和内容类型(始终应该是"text/html")。返回值是 Document 的实例。
jQuery对象与DOM对象转换及选择器详解
在JavaScript的世界里，jQuery库极大地简化了DOM操作，它的核心就是选择器和对象处理。jQuery对象是jQuery库中特有的概念，通常通过`$(selector)`的方式获取。描述中提到，`$(selector)`并不直接返回DOM对象，而是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值