JQuery 课时17：JQuery事件对象

最新推荐文章于 2022-11-28 14:30:06 发布
最新推荐文章于 2022-11-28 14:30:06 发布
阅读量82 收藏
点赞数
分类专栏： jQuery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42221321/article/details/118492299
版权

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>

在这里插入图片描述

卷毛崽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端技术（JQuery）学习笔记（一）JQuery文档准备就绪事件、JQuery事件处理、JQuery对象与DOM对象的、JQuery取值
dl0246的博客
05-05 1239
一、JQuery，是一套JavaScript的函数库（类库），可以很大程度上简化js代码。所以，利用Jquery对HTML元素的操作更加的便捷。 1、JQuery的核心函数：jQuery()函数，利用这个核心函数可以完成html元素的选取功能。为了简化开发过程，JQuery提供了$号代替JQuery核心函数 比如jQuer
jQuery事件注册、jQuery事件对象、事件处理
phoebemeng的博客
07-28 314
jQuery事件注册、jQuery事件对象、事件处理、on（）绑定事件的优势
jQuery:常用 jQuery方法，$()的四种类型参数，jQuery对象转js对象方法实例
ZzzWClock的博客
06-20 1076
jQuery:常用 jQuery方法，$()的四种类型参数，jQuery对象转js对象方法实列 前言:什么是jQuery？ jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它使像HTML文档穿越和操作，事件处理，动画和Ajax的东西简单得多，一个易于使用的API，适用于许多浏览器。jQuery 结合了多功能性和可扩展性，改变了数百万人编写 JavaScript 的方式。 如导入jQuery？ 搜索 jQuery cdn 用里面的cdn方式导入 <script
Vue3：基础学习笔记
weixin_42204713的博客
11-10 1348
点击跳转到Vue.js学习参考文档 文章目录vue3.0介绍什么是Vue.js安装vite构建工具工具创建vue3项目使用npm创建使用yarnvue3项目结构 vue3.0介绍 什么是Vue.js 1、前端开发框架 2、用于构建用户界面的渐进式框架 3、简化复杂的开发过程 4、Vue 也完全有能力为复杂的单页应用程序提供支持 安装 将 Vue.js 添加到项目中有四种主要方法： 1、在页面上将其导入为CDN包 <script src="https://unpkg.com/vue@next">&
操作class、事件对象简介、Event对象、事件的冒泡、事件委派、事件的捕获——DOM
weixin_70320000的博客
11-28 278
操作class、事件对象简介、Event对象、事件的冒泡、事件委派、事件的捕获
DOM的事件函数this和className等样式注意点
雨林
09-17 2210
事件中的this，除了可以使用event.srcElement在事件中响应函数中，this表示发生事件的控件，只有在事件响应函数才能使用this获得相应事件的控件，在事件响应函数中调用的函数中不能使用，如果要使用调用的函数中使用要将this传递给函数或者使用event.srcEv
JQuery 事件对象都有哪些常见属性？
jinlovo
05-07 664
$(function () { $(document).on("click", {"name":"jinlovo"},function (e) { console.log(e.data); //传递给事件处理程序的额外数据 Object{"name":"jinlovo"} console.l...
b.rar_JavaScript/JQuery_Java_
08-12
jQuery是一个JavaScript库，简化了JavaScript的DOM操作、事件处理和动画制作。Java则是一种面向对象的编程语言，常用于服务器端开发、移动应用和大型企业级系统。 【压缩包子文件的文件名称列表】中的文件都是HTML...
初识jQuery
04-01
在这个12课时的系列课程中，我们将深入理解jQuery的基本概念和实用技巧。 ### 1. jQuery简介 jQuery由John Resig创建，其核心理念是“Write Less, Do More”。它通过提供简洁的API（应用程序接口），使得开发者...
Jquery图片切换
08-10
这个例子涵盖了DOM操作、事件处理、定时器以及简单的CSS动画，是jQuery应用的典型示例。在实际项目中，可以进一步优化和扩展，例如添加无限循环、预加载图片、自定义动画效果等功能，以满足不同场景的需求。记得在...
《响应式网页开发实战》教学教案—第9章 jQuery Mobile样式.pdf
06-23
在2课时的课程中，学生应能熟练掌握如何设置网格样式、添加和定位按钮，以及应用主题样式。 完成本章的学习后，学生将有能力构建一个具备移动友好特性的图片浏览网页，不仅可以在桌面浏览器上正常显示，还能在手机...
学生课程管理系统手机微信页面模板.zip
07-29
手机微信公众号或者小程序页面模板，包括查询教师、课时，评价、投票等功能。十分容易编辑修改，可用作同类型页面的制作
jQuery 事件对象
12-11 181
JavaScript 在事件处理函数中默认传递了 event 对象，也就是事件对象。但由于浏览器 的兼容性，开发者总是会做兼容方面的处理。jQuery 在封装的时候，解决了这些问题，并且 还创建了一些非常好用的属性和方法 一．事件对象 事件对象就是 event 对象，通过处理函数默认传递接受。之前处理函数的 e 就是 event 事件对象，event 对象有很多可用的属性和方法，我们...
jQuery中事件的触发以及事件参数对象
dwjdj的博客
05-08 579
* 事件触发的方法: * 1.对象.事件名字() * 2.对象.trigger("事件名字") * 3.对象.triggerHandle("事件名字"),该方式不能触发浏览器的默认行为 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src=".....
jquery事件处理函数的参数问题：event对象和自定义参数
aty
01-26 4785
jquery中如果需要给按钮绑定click事件处理函数，那么我们可以使用如下的代码： $("#button1").click( function() { alert("I was clicked."); } ); 一般我们都会按照上面的写法，注册事件处理函数，很少给处理函数传递参数。但是如果我们需要事件更详细的信息，比如事件发生时鼠标的位置等，那么我们就必须要使用事件对象了。
互联网生态峰会PPT模板
07-13
【作品名称】：互联网生态峰会PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
钢管扣件质量检查表.docx
07-13
钢管扣件质量检查表.docx
Foxit-Installer-Clean-Up
07-13
福昕编辑器残留清除工具
培训课件 -安全生产月--几种常见的现场急救方法.pptx
最新发布
07-13
培训课件 -安全生产月--几种常见的现场急救方法.pptx

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值