JQuery 课时17：JQuery事件对象

jQuery 2022-10-08

Query 课时17：JQuery DOM属性

概要

在这里插入图片描述

1、addClass(className)：为每个匹配元素添加指定的样式类名

<!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="./jquery-3.6.0.js"></script>
    <style>
        .pc{
            color:red;
        }
    </style>
</head>
<body>
    <p>haha</p>
</body>
<script>
    $(function(){
    //添加样式
        $("p").addClass("pc");
    })
</script>
</html>

在这里插入图片描述

2、attr（attrbuteName）：只有一个参数时，获取匹配的元素集合中的第一个元素的属性值；有两个参数时设置每一个匹配元素的一个或多个属性

设置每一个匹配元素的一个或多个属性

<!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="./jquery-3.6.0.js"></script>
    <style>
        .pc{
            color:red;
        }
    </style>
</head>
<body>
    <a></a>
</body>
<script>
    $(function(){
        $("a").attr("href","http://www.baidu.com");
    })
</script>
</html>

获取匹配的元素集合中的第一个元素的属性值

<!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="./jquery-3.6.0.js"></script>
    <style>
        .pc{
            color:red;
        }
    </style>
</head>
<body>
    <p name="haha">哈哈</p>
    <div>
        <!-- 提取p的属性打印到div里 -->
    </div>
</body>
<script>
    $(function(){
    	 var name=$("p").attr("name");
        $("div").text(name);
    })
</script>
</html>

在这里插入图片描述

3、hasClass(className):确定任何一个元素是否有给定到某个（样式）类

<!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="./jquery-3.6.0.js"></script>
    <style>
        .h11{
            color:red;
        }
    </style>
</head>
<body>

    <h1 class="h11">哈哈哈</h1>
</body>
<script>
    $(function(){
        console.log($("h1").hasClass("h11")); //无为false，有为true
    })
</script>
</html>

在这里插入图片描述

4、.html() 当没有参数时为获取当前的内容，两个参数时为添加页面内容

<!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="./jquery-3.6.0.js"></script>
    <style>
        .h11{
            color:red;
        }
    </style>
</head>
<body>
    <a href="">aaaa</a>
    <h1 class="h11">哈哈哈</h1>
</body>
<script>
    $(function(){
        //当没有参数时为获取当前的内容
        console.log($("a").html());
        //改变当前页面内容
        $("h1").html("hehe");
    })
</script>
</html>

在这里插入图片描述

5、prop()

只能获得已有的默认的属性值

<!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="./jquery-3.6.0.js"></script>
</head>
<body>
    <input type="checkBox" value="选择">
</body>
<script>
    $(function(){
        //获取属性值
        console.log($("input").prop("value"));
     
    })
</script>
</html>

在这里插入图片描述

<!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="./jquery-3.6.0.js"></script>
    <style>
        .h11{
            color:red;
        }
    </style>
</head>
<body>
    <input type="text" value="选择">
</body>
<script>
    $(function(){
        //获取属性值
        console.log($("input").prop("value"));
        //当有两个参数是，是改变属性值
        $("input").prop("value","改变");

     
    })
</script>
</html>

在这里插入图片描述

6、removerattr()

<!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="./jquery-3.6.0.js"></script>
  
</head>
<body>
    <a href="xxx">hahha</a>
</body>
<script>
    $(function(){
        //移除a的href属性
        $("a").removeAttr("href");
        


     
    })
</script>
</html>

在这里插入图片描述

7、removeClass()

<!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="./jquery-3.6.0.js"></script>
    <style>
        a1{
            color:red;
        }
    </style>
</head>
<body>
    <a class="a1">hahha</a>
</body>
<script>
    $(function(){
        //移除a1的样式
        $("a").removeClass("a1");
        
    })
</script>
</html>

在这里插入图片描述

8、removeProp() 移除由 prop() 方法设置的属性。

Prop()与attr的区别

Prop()与attr的区别-参考链接
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

9、toggleClass()，用法跟addClass()相似

addClass(),.removeClass(),.toggleClass()的区别

.addClass(“className”)方法是用来给指定元素增加类名，也就是说给指定的元素追加样式；可以同时添加多个类名，空格符隔开
.removeClass(“className”)方法是用来给指定的元素移除类名，也就是说给指定元素移除样式；可以同时移除多个类名，空格符隔开
.toggleClass(“className”)方法是用来给指定的元素添加或者移除类名（如果类名存在则移除，不存在则增加）

10、val()

获取匹配的元素集合中第一个元素的当前值，设置匹配的元素，集合中每个元素的值。
主要是取表单元素的值 textare、input、select

<!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="./jquery-3.6.0.js"></script>
    <style>
      
    </style>
</head>
<body>
    <input type="text" value="some text">
</body>
<script>
    $(function(){
        console.log($("input").val());
        
    })
</script>
</html>

在这里插入图片描述

相关文章

jquery页面搜索关键词突出显示
页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间
jQuery实时显示日期、时间 html: &lt;span id=&quot...
jQuery 添加水印
jQuery 添加水印 &lt;script src=&quot;../../../.....
Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息
中文：Sys.WebForms.PageRequestManagerParserErrorExceptio...
Asp.net 后台调用js方法
1. 用Response.Write方法 代码如下： Response.Write(&q...
Jquery实现按钮点击遮罩加载，处理完后恢复
Jquery实现按钮点击遮罩加载，处理完后恢复 思路： 1.点击按...