【知了堂学习笔记】_Jquery基础知识之DOM操作（二）

最新推荐文章于 2022-07-28 21:14:32 发布
最新推荐文章于 2022-07-28 21:14:32 发布
阅读量254 收藏
点赞数
分类专栏： jquery 文章标签： jquery dom 函数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TANGLHUI/article/details/78757512
版权

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php

1.对DOM操作

  • 节点操作
    • 查找节点
      • 通过选择器
      • 通过属性选择器
      • 通过parent（[expr]）函数方法查找父级元素节点
      • 通过parents([expr])函数方法来查找祖先元素
        示例：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../../jquery-2.1.0.js"></script>
    </head>
    <body>
        <p>
            <button id="btn01">parents([expr])</button>
        </p>
        <div><p><span>Hello World</span></p></div>
    </body>
</html>
<script>
    $(function(){
        $("#btn01").click(function(){
            //通过parents函数来找祖先元素，返回元素的集合
//          console.log($("span").parents()[1  ]); 

//          通过each()函数遍历他的祖先元素
            $("span").parents().each(function(){
                //如何将js对象专长jQuery对象
                //js对象 不能用JQuery中的函数和方法
                //只有把js对象转成jQuery对象才能使用jQuery中的函数和方法
                console.log($(this).html());
            })
        });
    })
</script>
  • 插入内容
    • append():在元素的内部添加内容
    • prepend()：在元素的内部追加内容
    • after():在元素的后面追加内容
    • before():在元素的前面追加内容

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script></script>
        <script src="../../jquery-2.1.0.js"></script>
    </head>
    <body>
        <p>

            <button id="btn04">prepend()</button>
            <button id="btn05">after()</button>
            <button id="btn06">before()</button>

        </p>
        <div><p><span>hello world</span></p></div>
        <div id="d01"></div>
        <p><button class="btn01">button</button></p>
    </body>
</html>
<script>
    $(function(){

        $("#btn04").click(function(){
            //prepend（），在元素内部添加节点，匹配元素内部的开始处插入内容
            $("#d01").prepend("<p>hello prepend</p>");
        });

        $("#btn05").click(function(){
            //在元素后面节点添加内容
            $("#d01").after("hello after");
        });
        $("#btn06").click(function(){
            //在元素前面添加内容
            $("#d01").before("<p>hello before</p>");
        });


    })
</script>
  • 删除节点
    • remove（[expr]）：把元素本身一起删除掉
    • empty():清空元素内部的节点，但是元素本身不会删除掉
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script></script>
        <script src="../../jquery-2.1.0.js"></script>
    </head>
    <body>
        <p>

            <button id="btn04">prepend()</button>
            <button id="btn05">after()</button>
            <button id="btn06">before()</button>
            <button id="btn07">empty()</button>
            <button id="btn08">remov()</button>
            <button id="btn09">clone()</button>
        </p>
        <div><p><span>hello world</span></p></div>
        <div id="d01"></div>
        <p><button class="btn01">button</button></p>
    </body>
</html>
<script>
    $(function(){

        $("#btn04").click(function(){
            //prepend（），在元素内部添加节点，匹配元素内部的开始处插入内容
            $("#d01").prepend("<p>hello prepend</p>");
        });

        $("#btn05").click(function(){
            //在元素后面节点添加内容
            $("#d01").after("hello after");
        });
        $("#btn06").click(function(){
            //在元素前面添加内容
            $("#d01").before("<p>hello before</p>");
        });

        $("#btn07").click(function(){
            //删除
            $("#d01").empty();
        });
        $("#btn08").click(function(){
            //移除
            $("div").remove("#d01");
        });

        $("#btn09").click(function(){
            //复制
            $(".btn01").clone(true).appendTo("body");

        });

    })
</script>
  • 赋值元素节点
    • 调用clone（attr）
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script></script>
        <script src="../../jquery-2.1.0.js"></script>
    </head>
    <body>
        <p>

            <button id="btn04">prepend()</button>
            <button id="btn05">after()</button>
            <button id="btn06">before()</button>
            <button id="btn07">empty()</button>
            <button id="btn08">remov()</button>
            <button id="btn09">clone()</button>
        </p>
        <div><p><span>hello world</span></p></div>
        <div id="d01"></div>
        <p><button class="btn01">button</button></p>
    </body>
</html>
<script>
    $(function(){

        $("#btn04").click(function(){
            //prepend（），在元素内部添加节点，匹配元素内部的开始处插入内容
            $("#d01").prepend("<p>hello prepend</p>");
        });

        $("#btn05").click(function(){
            //在元素后面节点添加内容
            $("#d01").after("hello after");
        });
        $("#btn06").click(function(){
            //在元素前面添加内容
            $("#d01").before("<p>hello before</p>");
        });

        $("#btn07").click(function(){
            //删除
            $("#d01").empty();
        });
        $("#btn08").click(function(){
            //移除
            $("div").remove("#d01");
        });

        $("#btn09").click(function(){
            //复制
            $(".btn01").clone(true).appendTo("body");

        });
        $(".btn01").click(function(){
            //复制
            window.alert("我是一个按钮");

        });
    })
</script>
  • 属性操作
    • $(“div”).attr(“title”):获取元素属性节点值
    • $(“div”).attr(“title”,”helloworld”)
    • $(“div”).removeAttr(“title”):删除元素节点的属性
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../jquery-2.1.0.js"></script>
    </head>
    <body>
        <p>
            <button id="btn01">attr("title")</button>
            <button id="btn02">attr("title","hello")</button>
            <button id="btn03">removeAttr("title")</button>
        </p>
        <div></div>
    </body>
</html>
<script>
    $(function(){
        $("#btn01").click(function(){
            //获取节点属性的值
            console.log($("div").attr("title"));
        });
        $("#btn02").click(function(){
            //给节点属性复制 或者改变
            $("div").attr("title","hello");
        });
        $("#btn03").click(function(){
            $("div").removeAttr("title");
        });
    })
</script>
  • 样式操作
    • css（name,value）:添加单个样式
    • addClass(cssname):添加一个或多个样式，若果是多个样式请用空格隔开
    • removeClass(cssname):移除样式
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../jquery-2.1.0.js"></script>
    </head>
    <style type="text/css">
        .div{
            width: 100px;
            height:100px;
            border: 1px solid black;
        }
    </style>
    <body>
        <p>
            <button id="btn1">css("background","#FFFFF")</button>
            <button id="btn2">addclass</button>
            <button id="btn3">removeclass</button>
            <button id="btn4">还原样式</button>
        </p>
        <div></div>
    </body>
</html>
<script>
    $(function(){
        $("#btn1").click(function(){
            //添加单个样式
            $("div").css("width","100px").css("border","1px solid red");
        });
        $("#btn2").click(function(){
            // 添加一个样式
            $("div").addClass("div");
        });
        $("#btn3").click(function(){
            // 删除一个样式
            $("div").removeClass("div");
        });
        $("#btn4").click(function(){
            // 还原样式
            $("div").removeAttr("style").removeAttr("class");
        });
    })
</script>
TANGLHUI
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[知了堂学习笔记] JQuery对DOM的操作
mili_dou的博客
12-08 210
操作分类 节点操作 查找节点 通过选择器 通过属性选择器 通过parent([expr])函数方法来查找父级元素节点 通过parents([expr])函数方法来查找祖先元素 创建节点 $(html)来完成，但要结合jquery中其他函数方法 删除节点 remove([expr]):把元素本身一起删除掉 empty():清空元素内容的节点，但是元素本身不会删除掉 插入内容 append()
[知了堂学习笔记]_jQuery对DOM的操作
yxuan9826的博客
12-09 232
请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php 1.操作分类 节点操作 属性操作 样式操作 2.节点操作 2.1查找节点 2.1.1通过选择器 2.1.2 通过属性选择器 通过parent([expr])函数方法来查找父级元素节点 通过parents([expr])函数方法来查找祖先元素 2.2 创建节点：$
JS和JQuery对DOM的操作
huang_yx的博客
03-25 307
查询节点:js：1.根据ID查询；2.根据标签名查询；3.根据name查询；4.根据层次查询；详情如下：&lt;script&gt; //1.根据ID查询节点 var ul = document.getElementById("city"); var cd = document.getElementById("cd"); console.log(ul); console.log...
学习JQuery中的DOM操作和事件操作
Preeminent
01-07 997
学习JQuery中的DOM操作和事件操作一些问题JQuery是一个javascript类库，那类库是什么，库和框架的区别有是什么呢？ 库的英语为Library，是将代码集合成的一个产品，供程序员调用。面向对象的代码组织形式而成的库也叫类库。面向过程的代码组织形式而成的库也叫函数库。在函数库中的可直接使用的函数叫库函数。开发者在使用库的时候，只需要使用库的一部分类或函数，然后继续实现自己的功能。 框架
jquery对dom的操作常用方法整理
qq_33043025的博客
05-04 2300
参考：https://www.jb51.net/article/39099.htm jquery对dom的操作包括了对html内容的添加、删除元素/内容、操作CSS等等，本文整理了一些dom操作的常用方法，感兴趣的朋友可以参考下哈 Jquery对dom的操作也是很总要的。1.三个简单实用的用于 DOM 操作的 jQuery 方法： · text() - 设置或返回所选元素的文本内容 · html() - 设置或返回所选元素的内容（包括 HTML 标记） · val() - 设置或返回表单字段的值2.at
知了课堂 Flask学习视频 问答平台前端静态资源
01-16
学习视频地址 网易云课堂：https://study.163.com/course/courseMain.htm?courseId=1004091002 Bilibili：https://www.bilibili.com/video/BV17r4y1y7jJ
知了传课_2023版_B站Flask课程代码.zip
10-29
《Flask框架深度解析：基于知了传课2023版B站课程代码》 Flask是一款轻量级的Web应用框架，以其简洁、灵活的特性在Python Web开发领域备受青睐。本教程将深入剖析《知了传课_2023版_B站Flask课程》中的代码实例，...
小学五年级语文下学期基础知识练习二.docx
11-23
小学五年级语文下学期的基础知识练习涵盖了汉字读音、书写、词汇运用、句子改写、成语填空以及阅读理解等多个方面，旨在巩固学生的基础语文能力。 一、汉字读音选择： 题目要求为加点字选择正确的读音。例如，...
知了问答 flask实战项目笔记
05-08
《Flask实战项目笔记——构建问答平台》 在IT领域，Web开发是不可或缺的一部分，而Python的Flask框架因其轻量级、灵活的特性，深受开发者喜爱。本笔记将聚焦于使用Flask构建一个问答平台的实践过程，帮助读者深入...
ssm知了堂财务报账管理系统hsg4282B6程序.rar
07-03
ssm知了堂财务报账管理系统hsg4282B6程序
jQuery基本DOM操作
青椒盖饭的博客
01-15 1859
基本的DOM操作之中主要是进行元素的追加,删除等处理操作 追加元素操作 &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;jquery 属性操作&amp;lt;/title&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;/&amp;gt; &amp;lt;link rel=&
jQuery中的DOM操作
m0_52660785的博客
07-28 1924
jQuery中的DOM操作
JQuery之DOM操作
PzzZ的博客
08-18 4928
1、创建节点及结点属性 （1）DOM创建节点及结点属性 创建流程比较简单，大体如下： 创建节点(常见的：元素、属性和文本) 添加节点的一些属性 加入到文档中 流程中涉及的一点方法： 创建元素：document.createElement 设置属性：setAttribute 添加文本：innerHTML 加入文档：appendChild <body> <h2&...
前端系列之jQuery(jQueryDOM操作)
十二指环的博客
01-31 2320
一.如何筛选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操作
onepunchmen00的博客
01-08 3959
创建HTML DOM对象和jquery对象的区别 DOM对象是浏览器渲染出来的元素   jquery对象是对0、1个或者多个DOM对象的包装    例如 最后一个返回jquery版本号         创建HTML   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta c...
使用jQuery操作DOM重点总结
妖精小狗的博客
09-14 7974
DOM操作分为三类： DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById() HTML-DOM：用于处理HTML文档，如document.forms CSS-DOM：用于操作CSS，如element.style.color="green" 注：JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持   jQuery对...
2024巴黎奥运会中国队奖牌数据
08-17
2024巴黎奥运会中国队奖牌数据
DBO-LightGBM蜣螂优化算法优化LightGBM分类预测，优化前后对比（Matlab完整源码和数据）
08-17
1.Matlab实现DBO-LightGBM蜣螂优化算法优化LightGBM分类预测,优化前后对比，Matlab调用Python的LightGBM库（完整源码和数据）。 2.输出对比图、混淆矩阵图、预测准确率，运行环境Matlab2023及以上，配置Python的LightGBM库。兼容测试链接：https://ww2.mathworks.cn/support/requirements/python-compatibility.html 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：机器学习之心，博客专家认证，机器学习领域创作者，2023博客之星TOP50，主做机器学习和深度学习时序、回归、分类、聚类和降维等程序设计和案例分析，文章底部有博主联系方式。从事Matlab、Python算法仿真工作8年，更多仿真源码、数据集定制私信。
基于协同过滤的电影推荐系统python代码+数据库
最新发布
08-17
基于协同过滤的电影推荐系统python代码+数据库，基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据库基于协同过滤的电影推荐系统python代码+数据
Python编程入门指南：基础指令与实战教程
《Think Python 2ed》是一本由Allen B. Downey所著的经典Python编程入门教材，适用于初学者。该书中文翻译版本由...无论是通过下载PDF、在线阅读，还是利用浏览器环境，都能让学习者轻松掌握Python编程基础知识。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值