jQuery 的DOM操作元素

前言

只有jQuery才能使用jQuery方法！
用jQuery记得先引用

操作元素的属性

获取属性

attr(属性名称) 获取指定的属性值
prop(属性名称) 获取具有true和false两个属性的属性值
例子:

	<form action="" id="myform">
        <input type="checkbox" name="复选框1" id="aa" checked="checked" /> 复选框1
        <input type="checkbox" name="复选框2" id="bb"/> 复选框2
    form>
    <script src="js/jquery-3.6.0.js" type="text/javascript">script>
    <script type="text/javascript">
        var aattr = $("#aa").attr("name");
        var aprop = $("#bb").prop("name");
        console.log(aattr);
        console.log(aprop);      
    script>
1
2
3
4
5
6
7
8
9
10
11

在这里插入图片描述

虽然上方在控制台都可以打印输出，但是他们有区别。
attr：操作 checkbox 时，选中返回 checked，没有选中返回 undefined。
总结获取：
返回值是boolean属性的—>建议用prop()
反之，用attr()

设置属性

attr(属性名称，属性值)
prop(属性名称，属性值)
在这里插入图片描述
成功修改了复选框默认的是否选中。

移除属性

removeAttr(属性名)

	<a href="http://www.baidu.com" id="remove">百度a>
	<script src="js/jquery-3.6.0.js" type="text/javascript">script>
	<script>
		$('#remove').removeAttr('href');
	script>
1
2
3
4
5

在这里插入图片描述
成功将连接属性移除

操作元素的样式

attr("class") 获取class属性的值，即样式名称
attr("class","样式名") 修改class属性的值，修改样式
addClass("样式名") 添加样式名称
css() 添加具体的样式
removeClass(class) 移除样式名称

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>设置元素样式title>
    <script src="js/jquery-3.6.0.js" type="text/javascript">script>
    <style type="text/css">
        div {
            padding: 8px;
            width: 180px;
        }

        .blue {
            background: blue;
        }

        .larger {
            font-size: 30px;
        }

        .green {
            background: green;
        }
        .red{
            background-color: red;
        }        
    style>
head>

<body>
    <h3>css()⽅法设置元素样式h3>
    <div id="conBlue" class="blue larger">颜色1div>
    <div id="conRed">红⾊div>
    <div id="test">我只是测试而已div>
    <div id="remove" class="blue larger">颜色2div>
body>
<script type="text/javascript">
    //1.获取class属性的值，即样式名称
    var cls = $("#conBlue").attr("class");
    console.log(cls);
    //2.修改class属性的值，修改样式
    $("#conBlue").attr("class","green larger")
    //3.添加样式名称
    $("#conRed").addClass("red");
    //4.1添加具体的样式,添加一个
    $("#test").css("font-size","39px");
    //4.2添加具体的样式,添加多个
    $("#test").css({"fonrt-size":"35px","font-family":"华文新魏"});
    //5.移除样式
    $("#remove").removeClass("blue");
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

在这里插入图片描述

操作元素的内容

html() 获取元素的html内容
html("html, 内容") 设定元素的html内容
text() 获取元素的⽂本内容，不包含html
text("text 内容") 设置元素的⽂本内容，不包含html
val() 获取元素value值
val("值") 设定元素的value值

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>操作内容title>
    <script src="js/jquery-3.6.0.js" type="text/javascript">script>
head>

<body>
    <h3><span>html()和text()⽅法设置元素内容span>h3>
    <div id="html">div>
    <div id="text">div>
    <input type="text" name="uname" value="oop" />
body>
<script type="text/javascript">
    // 获取HTML内容，包括HTML标签
    console.log($('h3').html());
    // 获取⽂本内容，不包括HTML标签
    console.log($('h3').text());
    // 获取value值
    console.log($('[name=uname]').val());
    // 设置
    $('#html').html("使⽤html设置,看不到标签
");
    $('#text').text("使⽤text设置,能看到标签
");
    $('[name=uname]').val("哈哈哈");
    
script>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在这里插入图片描述

相关阅读:
GenerationMixin类
 OBS 录屏软件 for Mac 视频录制和视频实时交流软件安装
 win10连接远程服务访问文件提示：文件共享不安全，不能连接文件共享
 400电话呼叫中心-佳音通讯400电话
 cocos-lua定时器用法
 VUE3页面截取部署后的二级目录地址
 系统IO和标准IO
el-table嵌套el-form表单的案例
 前端找工作?真的不难看看你会哪些
 [MRCTF2020]套娃
原文地址：https://blog.csdn.net/weixin_45909221/article/details/126183466