Jquery(十) DOM解析

最新推荐文章于 2023-12-18 14:53:40 发布
最新推荐文章于 2023-12-18 14:53:40 发布
阅读量319 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oneqinglong/article/details/71158274
版权

☆ 1.查找-创建-插入

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>查找节点 创建节点 插入节点</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src="jquery-1.6.4.min.js"></script>

  <!--查找节点-->
  <!--
  <script type="text/javascript">

    $(document).ready(function(){

        var pp=$("ul>li:eq(1)").text();//获取乒乓球的文本
        //alert(pp);
        var zq=$("ul>li:contains('足球')").attr("title");//通过title属性获取
        alert(zq);
    });

  </script>

  -->

  <!--创建节点-->
  <!--
  <script type="text/javascript">

    $(document).ready(function(){

        //创建节点
        var a=$("<li></li>");
        //添加到ul中
        $("ul").append(a);
        //创建带有文本的节点
        var b=$("<li>排球</li>");
        $("ul").append(b);
        //创建带有属性的节点
        var c=$("<li title='绣球'>绣球</li>");
        $("ul").append(c);
    });
  </script>

  -->

  <!--插入节点-->
  <script type="text/javascript">

    $(document).ready(function(){

        //创建节点
        var x=$("<li title='棒球'>棒球</li>");
        //末尾追加
        $("ul").append(x);
        //置顶添加
        var y=$("<li title='羽毛球'>羽毛球</li>");
        $("ul").prepend(y);
        //添加足球的后边
        var z=$("<li title='桌球'>桌球</li>");
        $("ul>li:eq(1)").append(z);
        var f=$("<li title='橄榄球'>橄榄球</li>");
        $("ul").after(f);

        var w=$("<li title='网球'>网球</li>");
        $("ul").before(w);

    });
  </script>
 </head>

 <body>

 <p title="你喜欢哪种运动?">你喜欢下边那种运动?</p>
  <ul>

    <li title="足球">足球</li>
    <li title="乒乓球">乒乓球</li>
    <li title="篮球">篮球</li>
  </ul>
 </body>
</html>

☆ 2. 删除-复制-替换

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>删除节点 复制节点和替换节点</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
  <!--删除节点-->

  <script type="text/javascript">

    $(document).ready(function(){

        /*
        //节点本身已经不存在了
        $("ul>li:eq(0)").remove();
        //根据属性删除
        $("ul li").remove("[title=篮球]");
        */
        //只是删除文本 但是节点本身还存在
        $("ul li:eq(0)").empty();
    });
  </script>


  <!--复制节点-->
 <!--
  <script type="text/javascript">

    $(document).ready(function(){

        /*
        var x=$("ul>li:eq(0)").clone();
        $("ul").append(x);
        */

        $("ul li").click(function(){

            $(this).clone().appendTo("ul");
        });
    });
  </script>

  -->

  <!--替换节点-->
  <!--
  <script type="text/javascript">

    $(document).ready(function(){

        $("ul li:eq(0)").replaceWith("<strong><li>排球</li></strong>");
        $("p").replaceWith("<strong>你喜欢运动吗?</strong>");

        $("<li title='棒球'>棒球</li>").replaceAll("ul li:eq(2)");
    });
  </script>
  -->
 </head>

 <body>


 <p title="你喜欢哪种运动?">你喜欢下边那种运动?</p>
  <ul>

    <li title="足球">足球</li>
    <li title="乒乓球">乒乓球</li>
    <li title="篮球">篮球</li>
  </ul>
 </body>
</html>

☆ 3.包裹节点和样式操作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>包裹节点和样式操作 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
  <!--包裹节点-->
  <!--
  <script type="text/javascript">

    $(document).ready(function(){

        //$("p").wrap("<a href='#'></a>");
        $("p").wrapInner("<a href='#'></a>");
    });
  </script>

  -->
<!--
    获取和删除属性
-->
<!--
<script type="text/javascript">

    $(document).ready(function(){

        //获取属性值
        var pTitle=$("p").attr("title");
        alert(pTitle);
        //设置属性值
        $("p").attr("title","运动");
        //获取属性
        var p2=$("p").attr("title");
        alert(p2);
        //移除属性
        $("p").removeAttr("title");
        //获取一下
        var s=$("p").attr("title");
        alert(s);
    });

    -->

<style type="text/css">

    .abc{

        background:#aaa;

    }
</style>
<!--添加和删除样式-->
<script type="text/javascript">

    $(document).ready(function(){

        //获取p标签 并且添加样式
        $("p").addClass("abc");
        //移除样式
        $("p").removeClass("abc");
    });
</script>
</script>

 </head>

 <body>


 <p title="你喜欢运动吗?">你喜欢下边那种运动?</p>
  <ul>

    <li title="足球">足球</li>
    <li title="乒乓球">乒乓球</li>
    <li title="篮球">篮球</li>
  </ul>
 </body>
</html>

☆ 4 .text和html以及val

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> text和html以及val</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
  <script type="text/javascript">

    $(document).ready(function(){

        /*
        //获取文本
        var t=$("p").text();
        alert(t);
        //设置文本
        $("p").text("你喜欢运动?");
        */

        /*
        var q=$("p").html();
        alert(q);
        //设置
        $("p").html("运动");
        */

        //设置属性值
        var s=$("p").val();
        alert(s);
        $("p").val("你好");
        var w=$("p").val();
        alert(w);
    });

  </script>
 </head>

 <body>

 <p title="你喜欢运动吗?" value="yundong">你喜欢下边那种运动?</p>
  <ul>

    <li title="足球">足球</li>
    <li title="乒乓球">乒乓球</li>
    <li title="篮球">篮球</li>
  </ul>
 </body>
</html>

☆ 5.val的应用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>val的应用</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
  <script type="text/javascript">

    $(document).ready(function(){

        //获取焦点 执行一个函数 用于把文本框的内容清空
        $("#t1").focus(function(){

            //获取属性值
            var tValue=$("#t1").val();

            if(tValue=="账号/手机号码/邮箱" || tValue==""){
                //设置value值为""
                $("#t1").val("");
            }
        });

        //失去焦点 执行一个函数用于恢复文本框的内容
        $("#t1").blur(function(){

            var a=$("#t1").val();
            //没输入内容
            if(a==""){

                $("#t1").val("账号/手机号码/邮箱");
            }
        });
    });

  </script>
 </head>

 <body>

  <form>

    <p>账号<input type="text" size="20" id="t1" value="账号/手机号码/邮箱"/></p>
    <p>密码<input type="password" size="21"/></p>
    <p>

        <input type="submit" value="登录"/>
        <input type="reset" value="重写"/>
    </p>

  </form>
 </body>
</html>

☆ 6.DOM遍历节点

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> DOM遍历节点</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

  <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
  <!--遍历节点-->
  <!--
  <script type="text/javascript">

    $(document).ready(function(){

        var a=$("ul").children();
        alert(a.length);
        var b=$("p").next();
        alert(b);
    });
  </script>
  -->

  <script type="text/javascript">

    $(document).ready(function(){

        $("ul").bind("click",function(e){

            $(e.target).closest("li").css("color","red");
        });
    });
  </script>
 </head>

 <body>

  <p title="你喜欢运动吗?" value="yundong">你喜欢下边那种运动?</p>
  <ul>

    <li title="足球">足球</li>
    <li title="乒乓球">乒乓球</li>
    <li title="篮球">篮球</li>
  </ul>
 </body>
</html>

☆ 7. CSS DOM操作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>css DOM操作</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
  <script type="text/javascript">

    $(document).ready(function(){

        //<input type="button" value="获取p标签的颜色"/>
        $("input:eq(0)").click(function(){

            var c=$("p").css("color");
            alert(c);
        });
        //<input type="button" value="设置p标签的颜色和字体大小"/>
        $("input:eq(1)").click(function(){

            $("p").css({"font-size":"30px","background":"red"});
        });
        //<input type="button" value="获取p标签的高度"/>
        $("input:eq(2)").click(function(){

            var x=$("p").height();
            alert(x);
        });
        //<input type="button" value="获取p标签的宽度"/>
        $("input:eq(3)").click(function(){

            var y=$("p").width();
            alert(y);
        });
        //<input type="button" value="设置p标签的高度"/>
        $("input:eq(4)").click(function(){

            $("p").height(300);
        });
        //<input type="button" value="设置p标签的宽度"/>
        $("input:eq(5)").click(function(){

            $("p").width(400);
        });
        //<input type="button" value="获取p标签的上边距和左边距"/>
        $("input:eq(6)").click(function(){

            var off=$("p").offset();
            //获取上边距
            var ot=off.top;
            //获取左边距
            var of=off.left;
            alert("top--"+ot+"---left"+of);
        });
    });
  </script>
 </head>

 <body>

 <input type="button" value="获取p标签的颜色"/>
 <input type="button" value="设置p标签的颜色和字体大小"/>
 <input type="button" value="获取p标签的高度"/>
 <input type="button" value="获取p标签的宽度"/>
 <input type="button" value="设置p标签的高度"/>
 <input type="button" value="设置p标签的宽度"/>
 <input type="button" value="获取p标签的上边距和左边距"/>

  <p title="你喜欢运动吗?" value="yundong">你喜欢下边那种运动?</p>
  <ul>

    <li title="足球">足球</li>
    <li title="乒乓球">乒乓球</li>
    <li title="篮球">篮球</li>
  </ul>
 </body>
</html>
海绵娃娃
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue的Axios跨域问题，以及如何使用jquery实现dom解析（爬虫）
ZPCrobot的博客
11-15 571
背景 通过npm run dev。我们会把项目起在127.0.0.1下面。那么我们所有的请求的baseUrl默认都是这个。如果我们希望访问其他三方的网站，如果三方网站没有放开同源策略限制的话，我们将会遇到服务端跨域的问题。但是通常情况下我们遇到的都是浏览器的同源策略限制，如下图所示： 那么如何来解决这个跨域的问题？ 我们可以通过webpack配置proxyTable来进行访问控制 devServer: { host: '127.0.0.1', port: 8090, proxy:
jquery的dom资料
08-12
jquery的dom资料，学习jquery的使用，以及jquery的dom资料，学习jquery的使用，以及jquery的dom资料，学习jquery的使用，以及
jquery dom解析html,纯干货！jQuery之DOM操作解析
weixin_33235712的博客
06-22 344
说明：本文涉及的内容多，为保持整体脉络的清晰，对个别疑难点将另附链接，并不定期对文章的错漏之处进行修正...一、创建节点eg: //用三种方式创建三个段落(包括标签节点、属性节点和文本节点)并添加到文档中去$("$("$("这是第三个段落").appendTo("body");二、查找节点eg: //采用上面已经创建的节点，下面进行查找标签节点、属性节点和文本节点的操作var p1 =...
jQuery2.x源码解析(DOM操作篇)
weixin_30430169的博客
01-13 191
jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) jQuery这个类库最为核心重要的功能就是DOM操作了。DOM是由w3c制定的为HTML和XML文档编写的应用程序接口，全称叫做W3C DOM，它使得开发者能够修改html和xml的内容和展现方式，将网页与脚本或编程语言连接起来。 ...
使用jQuery解析DOM
最新发布
迪之的博客
12-18 339
jQuery是一个非常强大的JavaScript库，可以简化DOM操作和事件处理，使得开发交互式网页变得更加简单和高效。通过jQuery解析DOM和操作元素，可以轻松地实现各种交互效果和动态的网页内容。操作元素：可以使用jQuery提供的方法来操作元素，例如。选择元素：可以使用CSS选择器来选取元素，例如。选取class为myClass的元素，并使用。方法可以设置或获取元素的HTML内容，方法可以设置或获取元素的文本内容，选取id为myDiv的元素，并使用。方法可以设置或获取元素的属性，
jquery dom解析html,jQuery操作DOM元素详解
weixin_36373949的博客
06-22 395
jQuery操作DOM元素详细方法总结。一、属性操作1.使用attr()获取:对象.attr(“属性名”)//返回当前属性值，底层使用的是getAttribute注意：此种方式不能获取value属性的实时数据，使用对象名.val()进行获取修改：对象.attr(“属性名”,”属性值”);删除：removeAttr(“属性名”) ：删除该属性的值2.使用prop()使用方法同attr()一致，底...
jQuery创建DOM元素实例解析
10-24
标题中提到的知识点是关于"jQuery创建DOM元素实例解析"，而描述则详细说明了该文档主要介绍jQuery创建DOM元素的方法，并通过实例分析了jQuery使用$直接创建DOM元素的技巧，具有参考借鉴价值。根据给定的文件内容，...
jQuery 实现DOM元素拖拽交换位置的实例代码
10-15
### jQuery 实现 DOM 元素拖拽交换位置的原理和技术点 在网页中实现 DOM 元素的拖拽功能能够让用户通过直观的方式进行元素的排序、移动等操作，从而提升网站的交互性和用户体验。本文介绍利用 jQuery 库来实现 DOM ...
jQuery操作DOM解析
04-28
**jQuery操作DOM解析** 在Web开发中，DOM（Document Object Model）是HTML或XML文档的结构化表示，它允许程序和脚本动态更新、添加、删除和改变元素。jQuery库简化了JavaScript对DOM的操作，提供了丰富的API来处理...
jQuery操作DOM详解
li286487166的博客
04-16 5020
一、DOM操作的分类1.DOM Core简介：DOMCore并不属于javaScript，任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，例如XML。 javaScript中的getElementById(),getElementsByTagName(),getAttribute()和setAttribute()等方法，这些
Jquery、Java解析html字符串成dom对象，遍历dom对象获取图片元素（或者其子元素）
ZixiangLi的博客
12-01 3198
Jquery、Java解析html字符串成dom对象，遍历dom对象获取图片元素（或者其子元素） 使用 Jquery解析html: .parseHTML方法：将html字符串解析成dom对象，他返回的是一个array数组（包含其所有子元素）.parseHTML方法：将html字符串解析成dom对象，他返回的是一个array数组（包含其所有子元素） (doms).children(“img”)：
JQuery获取dom值得方法
curry_zhao的博客
08-08 2461
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。 html() html(val) html(function(index, html)) 取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。 text() text(val) text(function(index, text)) 获...
jQuery对象与DOM对象之间的转换方法
热门推荐
michael8512的博客
07-28 2万+
jQuery对象是包装DOM对象后产生的，但是两者却不能混用，DOM对象才能使用DOM方法，jQuery对象才能使用jQuery方法，以下介绍两者转换的方法： jQuery对象转成DOM对象： （1）jQuery对象实际上是一个数据对象，可以通过[index]方法获得相应的DOM对象。 如：var $v=$("#v"); //得到jQuery对象 var v=$("v")[0];/
jQuery学习笔记（四）jQuery遍历、DOM操作
一叶知秋
09-26 4200
一、DOM操作（增删改查） 1、新增节点 $(selector).append(content) 在匹配元素内部最后面新增一个节点 $(content).appendTo(selector) 把新节点追加到匹配元素内部最后面（效果同append，只是书写上前后位置互换） $(selector).prepend(content) 在匹配元素内部最前面新增一个节点 $(conten...
JQuery之DOM操作
PzzZ的博客
08-18 4942
1、创建节点及结点属性 （1）DOM创建节点及结点属性 创建流程比较简单，大体如下： 创建节点(常见的：元素、属性和文本) 添加节点的一些属性 加入到文档中 流程中涉及的一点方法： 创建元素：document.createElement 设置属性：setAttribute 添加文本：innerHTML 加入文档：appendChild <body> <h2&...
Jquery(八) 属性过滤
夏天不能盖被子
05-03 617
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> jQuery过滤器 属性过滤</title> <meta name="Generator" content="EditPlus"> <me
JQ操作DOM
dingxue3465的博客
03-16 217
回顾一下修改DOM的CSS、文本、设置HTML有多么麻烦，而且有的浏览器只有innerHTML，有的浏览器支持innerText，有了jQuery对象，不需要考虑浏览器差异了，全部统一操作！ 修改Text和HTML jQuery对象的text()和html()方法分别获取节点的文本和原始HTML文本，例如，如下的HTML结构： <!-- HTML结构 --> <...
前端系列之jQuery(jQueryDOM操作)
十二指环的博客
01-31 2323
一.如何筛选jQuery对象<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery chapter 2 Demo</title> </head> <body> <div id="div">div</div> <script src=
jquery dom解析html,详解jQuery中的DOM操作
weixin_42164534的博客
06-22 679
大致介绍jQuery作为JavaScript库，继承并发扬了JavaScript对DOM对象操作的特性，使开发人员能方便的操作DOM对象。jQuery中的DOM操作看看DOM操作都有哪些逐一来看先写一份HTML代码，后面的代码将操作这份HTML代码你最喜欢的水果？苹果橘子菠萝查找节点1、查找元素节点查找节点可以用各种各样的选择器来查找$('ul li');2、查找属性节点可以用attr()方法，参...
JavaScript与jQuery：DOM解析与基础概念
jQuery对象和DOM对象有所不同，jQuery对象通常用于包裹DOM元素，提供更简洁的API。jQuery选择器用于高效地定位DOM元素，使得代码更简洁高效。jQuery源码分析涉及其内部工作原理，帮助开发者理解性能优化和扩展。 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值