JQuery第二天
发布日期:2021-06-18 12:12:16
浏览次数:30
分类:技术文章
本文共 2472 字,大约阅读时间需要 8 分钟。
一、事件-注册 - on的更多用法
1、 给标签同时注册多个事件 =>每一个事件,都拥有不同的处理函数 $('css选择器').on({事件类型:事件处理函数,事件类型:事件处理函数}) 2、 给标签同时注册多个事件=>每一个事件 ,拥有相同的处理函数 $('css选择器').on('事件类型 事件类型 ',事件处理函数) //多个事件类型以空格隔开,不是逗号 二、事件 - 解绑 解绑事件 .off() 方法 => 如果不传参数,解绑全部事件 语法: .off('事件类型 事件类型')=>解绑某一个或者多个 三、one方法的使用及实现原理 在网页运行期间,只执行一次 语法: $('css选择器').one('事件类型',事件处理函数) 四、代码主动触发事件 1、 JS原生:用JS代码主动触发事件执行 1.1、 .onclick() 方法 不会冒泡 (只是方法被调用了,并没有真正的执行事件,因为没有冒泡) 1.2、 .click() 会冒泡 1.3、 new CustomEvent('事件类型',{bubbles:true}) 创建一个自定义的事件 可以冒泡例:
2、 JQ :用jQ的代码主动触发事件执行
2.1、click() 可以冒泡 2.2、trigger('事件类型') - 触发 可以冒泡 触发标签的默认行为 2.3、triggerHandler('事件类型') 不可以冒泡 阻止标签的默认行为例:
五、事件对象
1、概念:事件对象: 事件处理函数中,系统通过形参给我们返回的值 2、内容:事件对象包含什么: 跟事件相关的一些信息 - 事件源 事件类型等 3、意义:JQ的事件对象 继承自原生的事件对象 六、对象拷贝 $.extend(参数一,参数二) 过程:将参数二(包含参数二)往后的所有的对象的key+value都合到参数一身上,并且返回参数一 注:如果有同名的属性,后者覆盖前者 2、浅拷贝例:
3、实现深拷贝 $.extend(true,参数一,参数二,..)
七、多库共存 问题:同名$ 会出现覆盖的情况 解决:let 变量=jQuery.noConflict()例:
八、属性操作
1、JS操作属性 语法: setAttribute('属性名','值') 设置属性 getAttribute('属性名') 获取属性 2、 JQ的属性操作 2.1、操作自定义属性 attr() 语法: .attr('属性名','属性值') 设置 .attr('属性名') 获取 2.2、操作标准属性 prop()(标签自带的属性 class id title checked 等等) 语法: .prop('属性名','值') 设置 .prop('属性名') 获取 3、补:attr() 操作checked出问题 prop() 操作自定义属性时 不保存在标签身上,保存在内存中 九、文本属性操作(设置 - 传参)(获取 - 不传参) 1、 .html() - innerHTML // 可以解析标签例:$('#myDiv').html('我是一个p标签
')//解析标签并设置内容 console.log($('#myDiv').html());// 获取内容
2、 .text() - innerText // 不可以解析标签
例:$('#myDiv').text('我是一个p标签
')//设置内容 console.log($('#myDiv').text()); // 获取内容
3、 .val() - value
例: $('input').val(设置的值) // 设置内容 console.log($('input').val());// 获取内容
十、一些方法与事件中的注意点
1、 获取JQ对象要注意,JQ对象是一个伪数组 通过Array.from转成真数组才可以使用数组方法例:$('.j-checkbox') //获取对象 Array.from($('.j-checkbox'))//转化成真数组
2、every方法
说明:.every() 必须所有的项都为true 结果才为true例:Array.from($('css选择器')).every(function (smallC, index) {return 结果}) // smallC 是原生dom对象(自定义)
3、each() 方法 JQ做遍历
注意: JQ的 each方法 接收参数 和 forEach 相反 each(参数一,参数二) 参数一:下标 参数二 当前的项 语法:$('').each(function(index,v){}) forEach(参数一,参数二) 参数一:当前的项 参数二 : 下标 4、parents() 方法 取得祖先元素 用途:取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素) 5、prev() 方法 取得前一个同辈元素 用途:取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。 next() 方法 取得后面同辈元素 用途:取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。 6、substr() substring() 截取字符串 6.1、substr(start, length) start - 所需的子字符串的起始位置 length - 字符个数 可选项 6.2、substring(start, end) start - 所需的子字符串的起始位置 end - 指明子字符串的结束位置 可选项 7、toFixed(num) 方法 .toFixed(num) 方法可把 Number 四舍五入为指定小数位数的数字 num 规定小数的位数 8、.remove() 从DOM中删除所有匹配的元素或当前元素 9、.empty() 删除匹配的元素集合中所有的子节点转载地址:https://blog.csdn.net/Bear_with_her/article/details/117885542 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
第一次来,支持一个
[***.219.124.196]2024年04月15日 10时21分43秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
【大话Mysql面试】-Mysql的索引为什么要使用B+树,而不是B树,红黑树等之类?
2019-04-26
【大话Mysql面试】-如何通俗易懂的了解Mysql的索引最左前缀匹配原则
2019-04-26
【大话Mysql面试】-MYSQL的两种存储引擎MyISAM与InnoDB的区别是什么?
2019-04-26
理解String.intern()和String类常量池疑难解析例子
2019-04-26
python flask打造前后端分离的口罩检测
2019-04-26
【大话Mysql面试】-MySQL基础知识
2019-04-26
【大话Mysql面试】-MySQL数据类型有哪些
2019-04-26
【大话Mysql面试】-MySQL数据引擎
2019-04-26
【大话Mysql面试】-常见SQL语句书写
2019-04-26
【大话Mysql面试】-SQL语句优化
2019-04-26
【大话Mysql面试】-Mysql事务以及隔离级别
2019-04-26
【大话Mysql面试】-Mysql索引
2019-04-26
【大话Mysql面试】-Mysql锁
2019-04-26
【大话Mysql面试】-Mysql常见面试题目
2019-04-26
08 【多线程高并发】Java线程间通信的方式
2019-04-26
【数据结构与算法】什么是跳表?通俗易懂来理解跳表
2019-04-26
【数据结构与算法】什么是图?图是什么?快速带你回顾图有关的知识点
2019-04-26
【数据结构与算法】什么是串?什么是KMP算法?字符串匹配是什么?
2019-04-26