JQuery 课时17:JQuery事件对象

Query 课时17:JQuery DOM属性

概要

JQuery 课时17:JQuery事件对象

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>

JQuery 课时17:JQuery事件对象

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>

JQuery 课时17:JQuery事件对象

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>

JQuery 课时17:JQuery事件对象

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>

JQuery 课时17:JQuery事件对象

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>

JQuery 课时17: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="./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>

JQuery 课时17:JQuery事件对象

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>

JQuery 课时17:JQuery事件对象

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>

JQuery 课时17:JQuery事件对象

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 课时17:JQuery事件对象

上一篇:一本通1156 求π的值


下一篇:Flutter实战(二,安卓开发面试题目