JQuery对DOM操作

初级呈序猿

于 2022-10-25 11:45:59 发布

阅读量141

点赞数

分类专栏： JQuery 文章标签： javascript jquery

本文链接：https://blog.csdn.net/m0_73001037/article/details/127441805

版权

部分内容参考:菜鸟教程

文章目录

1、对内容操作
2、jq操作value
3、模拟鼠标移入移出改变样式
4、盒子的滚动条
5、jq创建节点
6、向元素外部同辈节点添加
7、替换节点和clone
8、jq操作属性
9、节点遍历
10、each方法
11、end方法操作

前言

本文采用cdn引入方式引入JS,需要网络在线

一、对内容操作

方法html():

定义:html() 方法设置或返回被选元素的内容（innerHTML）。

当该方法用于返回内容时，则返回第一个匹配元素的内容。

当该方法用于设置内容时，则重写所有匹配元素的内容。

注：如只需设置或返回被选元素的文本内容，请使用text()方法。

语法:

返回内容：$(selector).html()

设置内容：$(selector).html(content)

使用函数设置内容：$(selector).html(function(index,currentcontent))

示例：

<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>
    <!-- 采用cdn引入方式需要网络在线 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>

<body>
    <div>haha</div>
</body>
<script>
    //1.方法html()
    $("div").html("HEHE");
    // html()方法可以解析标签
    // $("div").html("<h1 style='color:red'>Hellow World</h1>");
    $("div").html(`<ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>`)
    // 2.text()，方法不能解析标签
    $("p").text("<h1>文本一</h1>");
    //3.清空内容
    //清空div
    $("div").html('');
</script>

</html>

二、jq操作value

方法val():

定义:val() 方法返回或设置被选元素的 value 属性。

当用于返回值时：
该方法返回第一个匹配元素的 value 属性的值。

当用于设置值时：
该方法设置所有匹配元素的 value 属性的值。

注：val() 方法通常与 HTML 表单元素一起使用。

语法:

返回 value 属性：$(selector).val()

设置 value 属性：$(selector).val(value)

通过函数设置 value 属性：$(selector).val(function(index,currentvalue))

示例:

<!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="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>

<body>
    <div class="box">
        姓名: <input type="text" id="userName" value="张三">
        兴趣: <select name="inter" id="inter">
            <option value="0">-请选择兴趣爱好-</option>
            <otpion value="1">读书</otpion>
            <otpion value="2">看电影</otpion>
            <otpion value="3">敲代码</otpion>
        </select>
    </div>
</body>
<script>
    //获取表单元素input的值
    console.log($("#userName").val());
    //修改单行文本框的值
    $("#userName").val("李四");
    
</script>

</html>

三、模拟鼠标移入移出改变样式

方法:mouseover()

定义：

当鼠标指针位于元素上方时，会发生 mouseover 事件。

mouseover() 方法触发 mouseover 事件，或添加当发生 mouseover 事件时运行的函数。

语法:

触发被选元素的 mouseover 事件：

$(selector).mouseover()

添加函数到 mouseover 事件：

$(selector).mouseover(function)

下同

方法:mouseout()

定义：

当鼠标指针离开被选元素时，会发生 mouseout 事件。

mouseout() 方法触发 mouseout 事件，或添加当发生 mouseout 事件时运行的函数。

示例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" conten

最低0.47元/天解锁文章

初级呈序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery对DOM操作

使用JQuery对DOM操作的方法整理
复制链接

扫一扫

专栏目录