jQuery内容整合--- （四）dom操作

最新推荐文章于 2021-05-09 20:53:17 发布

张超@-@

最新推荐文章于 2021-05-09 20:53:17 发布

阅读量149

点赞数 1

分类专栏： jquery dom操作文章标签： jquery dom操作

本文链接：https://blog.csdn.net/CSDN9825/article/details/114364826

版权

jquery 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

dom操作

1 篇文章 0 订阅

订阅专栏

一、dom操作的分类

DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM 的程序设计语言都可以使用它. 它的用途并非仅限于处理网页, 也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML
HTML DOM: 使用 JavaScript 和 DOM 为 HTML 文件编写脚本时,　有许多专属于 HTML-DOM 的属性
CSS-DOM:针对于 CSS 操作, 在 JavaScript 中, CSS-DOM 主要用于获取和设置 style 对象的各种属性

二、jQuery中的dom操作
jQuery中的dom操作可分为以下几种：

样式操作
内容及Value属性值操作
节点操作
节点属性操作
节点遍历
CSS-DOM操作

1.直接设置样式值
即通过css()方法为指定的元素设置样式值
格式如下：

使用jQuery对一个图片添加一个边框

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Jq/jquery-3.4.1.js"></script>
    <script>
        $(function(){
        //对图片添加边框和透明度
            $('#pic1').css({'border':'3px solid red','opacity':'0.3'});
        });
    </script>
</head>
<body>
    <img src="./img/lift_product_1.jpg" alt="" id="pic1">
</body>
</html>

结果如下：
在这里插入图片描述
2.切换样式
toggleClass(class)方法相当于addClass()–>添加样式和removeClass()–>移除样式的切换过程

使用toggleClass(class)方法实现不同标签被鼠标移入和移出时更改背景颜色和字体颜色。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Jq/jquery-3.4.1.js"></script>
    <style>
        li{
            list-style: none;
        }
        .show{
            background-color: blue;
            color: gainsboro;
        }
    </style>
    <script>
        $(function(){
            $('li').hover(function(){
                //相当于addClass和removeClass的结合体
                $(this).toggleClass('show');
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
        <li>li6</li>
        <li>li7</li>
    </ul>
</body>
</html>

结果如图：
在这里插入图片描述
3.HTML代码操作
html()可以对HTML代码进行操作，类似于JS中的innerHTML

4.text文本操作
text()可以获取或设置元素的文本内容

html()和text()的区别如下：

验证html()和text()两种方法的区别

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Jq/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            //使用html()方法获得的为全部的代码，更改后的代码可以直接运行
            /*
            var content = $('#left').html();
            //弹出html()方法获取的内容
            alert(content); 
            //绑定按钮点击事件
            $('[type=button]').click(function(){
                //更换图片
                $('#left').html('<div id="left"><img src="./img/headimg.jpg" alt=""></div>')
            });
            */
           //text()方法只显示文本，修改后的代码部分直接显示，不运行。
            var content = $('#left').text();
            //弹出text()方法获取的内容
            alert(content);
            $('[type=button]').click(function(){
                $('#left').text('<div id="left"><img src="./img/headimg.jpg" alt=""></div>')
            });
        });
    </script>
</head>
<body>
    <div id="left">
        <img src="./img/lift_product_1.jpg" alt="">
        <p>这是一把小雨伞</p>
    </div>
    <input type="button" value="点我换内容">
</body>
</html>

5.Value值的操作
val()可以获取或设置元素的value属性值
在这里插入图片描述

使用val()方法清除输入框的提示词

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Jq/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            
            $('#content1').focus(function(){
                var contents=$('#content1').val();
                if(contents=='冰箱'){
                    $('#content1').val('');
                }
            });
            $('#content1').blur(function(){
                var contents=$('#content1').val();
                if(contents==''){
                    $('#content1').val('冰箱');
                }
            });
        });
    </script>
</head>
<body>
    <input type="text" value="冰箱" id="content1"><input type="button" value="搜索">
</body>
</html>

6.节点操作
包括
插入同辈节点
在这里插入图片描述
替换节点

复制节点

删除节点

获取和设置节点属性
attr()用来获取与设置元素属性

removeAttr()用来删除元素的属性
在这里插入图片描述
代码实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Jq/jquery-3.4.1.js"></script>
    <style>
        li{
            list-style: none;
        }
    </style>
    <script>
        $(function(){
            // $('h2').hide();
            //创建节点
            var $newNode=$('<li>新乡</li>');
            //添加子节点,默认添加在最后
            // $('ul').append($newNode);
            // $newNode.appendTo('ul');
            //前置插入子节点
            // $('ul').prepend($newNode);
            // $newNode.prependTo('ul');
            //元素之后插入同辈节点
            // $('ul').after($newNode);
            // $newNode.insertAfter('ul');
            //删除、清空节点
            // $('ul li:eq(1)').remove();
            // $('ul li:eq(1)').detach();
            // $('ul li:eq(1)').empty();
            //替换节点
            // $('ul li:eq(1)').replaceWith($newNode);
            // $newNode.replaceAll('ul li:eq(1)');
            //复制节点
            // $('ul li:eq(1)').clone(true).appendTo('ul');

            //获取和设置节点的属性
            // var $newNode1 = $("<img src='./img/headimg.jpg' alt='这是一个可爱的图片'>");
            // $newNode1.appendTo('ul');
            // alert($($newNode1).attr('alt'));
            // $('img').attr({'width':'300','height':'100'});
            // $('img').removeAttr('width');
        });
    </script>
</head>
<body>
    <h2>河南省</h2>
    <ul>
        <li>郑州</li>
        <li>南阳</li>
        <li>洛阳</li>
        <li>周口</li>
        <li>驻马店</li>
    </ul>
</body>
</html>

张超@-@

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jQuery内容整合--- （四）dom操作

一、dom操作的分类DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM 的程序设计语言都可以使用它. 它的用途并非仅限于处理网页, 也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XMLHTML DOM: 使用 JavaScript 和 DOM 为 HTML 文件编写脚本时,　有许多专属于 HTML-DOM 的属性CSS-DOM:针对于 CSS 操作, 在 JavaScript 中, CSS-DOM 主要用于获取和设置 style 对象的各种属
复制链接

扫一扫

专栏目录