关键词:
话说上回:史上最全 jQuery 知识点小结(上)
本节案例请移步查看:jQuery-案例
欢迎学习交流!!!
持续更新中…
文章目录
2. jQuery常用API
2.4 jQuery属性操作
语法规范 | 说明 |
---|---|
prop(“属性”) | 获取元素固有属性值 |
prop(“属性”,“属性值”) | 设置元素固有属性值 |
attr(“属性”) | 获取元素自定义属性值,类似于原生getAttribute() |
attr(“属性”,“属性值”) | 设置元素自定义属性值,类似于原生setAttribute |
data(“name”,“value”) | 数据缓存,想被选元素附加数据 |
data(“name”) | 数据缓存,向被选元素获取数据 |
- 该方法也可以获取H5自定义属性
- data() 方法可以在指定的元素上存取数据,并不会修改DOM元素结构。一旦页面刷新,之前存放的数据都将被移除
- 同时,data() 还可以读取HTML5自定义属性 data-index,得到的是数字型
2.5 jQuery内容文本值
此处主要针对元素的内容还有表单的值操作
- 普通元素内容html() (相当于原生inner HTML)
html() 获取元素的内容
html("内容") 设置元素的内容
例:
console.log($("div").html());
$("div").html("123);
- 普通元素文本内容text() (相当于原生innerText)
text() 获取元素的文本内容
text("文本内容") 设置元素的文本内容
- 表单的值val() (相当于原生value)
val() 获取表单的值
val("内容") 设置表单的值
2.6 jQuery元素操作(遍历、创建、添加、删除)
遍历元素:
jQuery隐式迭代是对同一类元素做了相同的操作,若要给同一类元素做不同的操作,则需要用到遍历
$("div").each(function (index, domEle) xxx; )
- each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
- 里面的回调函数有2个参数: index 是每个元素的索引号; demEle 是每个DOM元素对象,不是jquery对象
- 要想使用jquery方法,需要给这个dom元素转换为jquery对象 $(domEle)
$.each(object,function (index, element) xxx; )
- $.each()方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
- 里面的函数有2个参数: index 是每个元素的索引号; element 遍历内容
创建元素:
$(''<li></li>''); 动态地创建了一个li
添加元素:
添加方式 | 添加方法 | 说明 |
---|---|---|
内部添加 | element.append(“内容”) | 放到匹配元素的坐后面,类似于原生appendChild |
内部添加 | element.prepend(“内容”) | 匹配元素内部最前面 |
外部添加 | element.after(“内容”) | 目标元素后面 |
外部添加 | element.before(“内容”) | 目标元素前面 |
- 内部添加元素,生成之后,是父子关系
- 外部添加元素,生成之后,是兄弟关系
删除元素:
删除方法 | 说明 |
---|---|
element.remove() | 删除匹配元素(本身) |
element.empty() | 删除匹配的元素集合中所有子节点 |
element.html(’’) | 清空匹配的元素内容 |
- remove 删除元素本身。
- empt() 和 html(’’’’) 作用等价,都可以删除元素里面的内容,只不过 html 还可以设置内容
2.7 jQuery尺寸、位置操作
jQuery尺寸
- 以上参数为空,则是获取相应值,返回的是数字型,不带单位。
- 如果参数为数字,则是修改相应值。
- 参数可以不必写单位。
jQuery位置
offest():设置或获取元素偏移
- offset() 方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系。
- 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离,offset().left 用于获取距离文档左侧的距离。
- 可以设置元素的偏移:offset( top: 10, left: 30 );
position():获取元素偏移
- position() 方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。
- 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离,position().left 用于获取距离定位父级左侧的距离。
- 该方法只能获取。
scrollTop()/scrollLeft() :设置或获取元素被卷去的头部和左侧
- scrollTop() 方法设置或返回被选元素被卷去的头部。
- 不跟参数是获取,参数为不带单位的数字则是设置被卷去的头部
3. jQuery事件
3.1 jQuery事件注册
单个事件注册语法:
element.事件(function())
$(“div”).click(function() 事件处理程序 )
其他事件和原生基本一致,如:mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll
若要给一个元素添加多个事件,只能再次注册一个事件,较为麻烦
3.2 jQuery事件处理
on()绑定事件
**on()**可实现在匹配元素上绑定一个或多个事件的事件处理函数
element.on(events,[selector],fn)
- events:一个或多个用空格分隔的事件类型,如"click"或"keydown" 。
- selector: 元素的子元素选择器 。
- fn:回调函数 即绑定在元素身上的侦听函数。
优势:
- 可以绑定多个事件,多个处理时间处理程序
$(“div”).on(
mouseover: function(),
mouseout: function(),
click: function()
);
若事件处理程序相同:
$(“div”).on(“mouseover mouseout”, function()
$(this).toggleClass(“current”);
);
- 可以事件委派操作(事件委托)。即把原来加给子元素身上的时间绑定在父元素身上,就是把事件委派给父元素。
$('ul').on('click', 'li', function()
alert('hello world!');
);
在此之前有 bind(), live() delegate() 等方法来处理事件绑定或者事件委派,最新版本的请用on替代他们。
- 动态创建的元素,click()没有办法绑定事件,on()可以给动态生成的元素绑定事件
$(“div").on("click",”p”, function()
alert("on可以给动态生成的元素绑定事件")
);
$("div").append($("<p>我是动态创建的p</p>"));
off()解绑事件
off()方法可通过移除on()方法添加的时间处理程序
若事件只想触发一次,可使用one()来绑定事件
$("p").off() 解绑p元素所有事件处理程序
或:
$(selector).unbind()
$("p").off( "click") 解绑p元素上面的点击事件
或:
$(selector).unbind("事件名")
$("ul").off("click", "li"); 解绑事件委托
只触发一次:
$("p").one("click",function()
alert(11);
)
模仿鼠标悬停事件:
$(selector).hover(over,out)
- over:回调函数,表示鼠标悬停时调用的函数
- out:回调函数,表示鼠标离开时调用的函数
trigger()自动触发事件
适用于希望自动触发的事件,例如轮播图的自动播放功能跟点击右侧按钮一致。可利用定时器自动触发右侧按钮点击事件,省略鼠标点击触发
-
element.click() -->第一种简写形式
-
element.trigger(“type”) -->第二种自动触发模式
$("p").on("click", function ()
alert("hi~");
);
$("p").trigger("click"); // 此时自动触发点击事件,不需要鼠标点击
- element.triggerHandler(type) -->第三种自动触发模式
区别:triggerHandler模式不会触发元素的默认行为(与前两种方法相比)如,表单控件中,点击会有焦点闪烁。
3.3 jQuery事件对象
事件被触发,就会有事件对象的产生。
事件对象可以做的行为有:
- 阻止默认行为:event.preventDefault() 或者 return false
- 阻止冒泡: event.stopPropagation()
element.on(events,[selector],function(event) )
$(function()
$(document).on("click",function()
console.log("点击了document");
)
$("div").on("click",function(event)
console.log("点击了div");
event.stopPropagation(); //阻止了该事件向上一层级document冒泡
)
)
4. jQuery其他方法
4.1 jQuery拷贝对象
若想要把某个对象拷贝(合并)给另一个对象使用,此时可以使用**$.extend()**方法
$.extend([deep], target, object1, [objectN])
参数说明:
- deep: 如果设为true 为深拷贝, ==默认为false浅拷贝 ==
- target: 要拷贝的目标对象(把object拷贝给target)
- object1:待拷贝到第一个对象的对象。
- objectN:待拷贝到第N个对象的对象。
- 浅拷贝是把被拷贝的对象(原来对象)复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象。
var targetObj =
id = 0;
;
var obj =
id = 1,
name = 'andy'
;
$.extend(targetObj,obj);
console.log(targetObj); //结果中id = 1 会覆盖targetObj里面原来的数据
- 深拷贝,前面加true, 完全克隆(拷贝的对象,而不是地址),修改目标对象不会影响被拷贝对象。
4.2 多库共存
由于:jQuery使用 $ 作为标识符,而其他JS库也会使用 $ 作为标识符,若一起使用就会引起冲突。
而:让jQuery库和其他JS库不存在冲突,可以同时存在,就叫做多库共存。
jQuery结局方案:
- 把里面的$符号统一改为jQuery。如jQuery(“div”)
- jQuery变量规定新的名称:$noConflict()。如:var xx = $.noConflict();
4.3 jQuery插件
由于jQuery功能比较有限,要想实现更复杂的特效效果,就可以借助jQuery插件完成
注:此类插件也是依赖于jQuery来完成的,因此必须要先引入jQuery文件
jQuery 插件常用的网站:
- jQuery 插件库 : http://www.jq22.com/
- jQuery 之家 : http://www.htmleaf.com/
jQuery 插件使用步骤:
- 引入相关文件。(jQuery 文件 和 插件文件)
- 复制相关html、css、js (调用插件)。
python知识点(史上最全)(代码片段)
Python期末考试知识点(史上最全)python简介Python是一种解释型语言Python使用缩进对齐组织代码执行,所以没有缩进的代码,都会在载入时自动执行数据类型:整形int无限大浮点型float小数复数complex由实数和虚... 查看详情
java知识点详解9,史上最全(代码片段)
tryif(true==b_chinese_file)//测试字节流读取中文乱码问题fis=newFileInputStream(ioTest.const_fileChinese);elsefis=newFileInputStream(ioTest.const_file);intread=0;while((read=fis.read())! 查看详情
python二级考试知识点(史上最全)(代码片段)
Python二级考试知识点(一)1、Python语言基本语法元素考点1.1程序的基本语法元素:程序的框架、缩进、注释、变量、命名、保留字、数据类型、赋值语句、库引用33个保留字6种数据类型4种引用方法:import库、from... 查看详情
史上最全sql基础知识语法(代码片段)
文章目录一、SQL基本介绍二、SQL基础1、SQL基本语法2、SQL库操作1)创建数据库2)显示数据库3)使用数据库4)修改数据库5)删除数据库6)总结3、SQL表(字段)操作1)创建数据表2)显示数据表3)查看数据表4)更改数据表5)更改字段①... 查看详情
23篇大数据系列sql基础知识(史上最全,建议收藏)(代码片段)
作者简介蓝桥签约作者、大数据&Python领域优质创作者。维护多个大数据技术群,帮助大学生就业和初级程序员解决工作难题。我的使命与愿景:持续稳定输出,赋能中国技术社区蓬勃发展!大数据系列文章ÿ... 查看详情
23篇大数据系列scala基础知识全集(史上最全,建议收藏)(代码片段)
作者简介:蓝桥签约作者、大数据&Python领域优质创作者。管理多个大数据技术群,帮助大学生就业和初级程序员解决工作难题。我的使命与愿景:持续稳定输出,赋能中国技术社区蓬勃发展!大数据系列文... 查看详情
史上最全干货!android面试大全总结(全文30w+字.200多个知识点.330张图.38个视频合集)(代码片段)
...ff0c;现在我以文档的方式为大家全面总结了Android所涉及的知识点,全文总共30万+字,涉及各种原理,以及源码分析,视频分析。图片是一张张绘制而出,欢迎大家进行解读!全文总计30万+字、200个知... 查看详情
史上最全面的springboot配置文件详解(代码片段)
SpringBoot在工作中是用到的越来越广泛了,简单方便,有了它,效率提高不知道多少倍。SpringBoot配置文件对SpringBoot来说就是入门和基础,经常会用到,所以写下做个总结以便日后查看。1.配置文件当我们构建完SpringBoot项目后,会... 查看详情
java史上最全知识点整理
偶然从一个网友群中发现了整理的这份资料,不论是从整个Java知识体系,还是从面试的角度来看,都是一份含技术量很高的资料。也不知道这位作者是谁,里面的内容也大多整理来自于互联网,但很明显的是这位作者为了整理... 查看详情
史上最全mysql基本操作(这一篇就够用了!!!)(代码片段)
基础知识请移步:数据库、MySQL基本知识欢迎学习交流!!!持续更新中…文章目录MySQL基本操作一、SQL语法规则二、SQL库操作1、创建数据库2、显示数据库3、使用数据库4、修改数据库5、删除数据库三、SQL表(... 查看详情
sentinel(史上最全)(代码片段)
文章很长,而且持续更新,建议收藏起来,慢慢读!总目录博客园版为您奉上珍贵的学习资源:sentinel基本概念开发的原因,需要对吞吐量(TPS)、QPS、并发数、响应时间(RT)几个概念做下... 查看详情
bytebuddy(史上最全)(代码片段)
ByteBuddy(史上最全)文章很长,建议收藏起来慢慢读!总目录博客园版为大家准备了更多的好文章!!!!推荐:尼恩Java面试宝典(持续更新+史上最全+面试必备)具体详情,... 查看详情
bytebuddy(史上最全)(代码片段)
ByteBuddy(史上最全)文章很长,建议收藏起来慢慢读!总目录博客园版为大家准备了更多的好文章!!!!推荐:尼恩Java面试宝典(持续更新+史上最全+面试必备)具体详情,... 查看详情
jvm逃逸分析(史上最全)(代码片段)
对于JVM“逃逸分析”特性,也是近年来大厂面试、高薪面试的常见面试题。和逃逸分析有关的常见面试题:Java中的对象一定是在堆上分配的吗?注:本文以PDF持续更新,最新尼恩架构笔记、面试题的PDF文件... 查看详情
史上最全的ideadebug调试技巧(超详细!建议收藏!)(代码片段)
来源:https://www.cnblogs.com/chiangchouDebug用来追踪代码的运行流程,通常在程序运行过程中出现异常,启用Debug模式可以分析定位异常发生的位置,以及在运行过程中参数的变化。通常我们也可以启用Debug模式来跟踪代... 查看详情
史上最全的ideadebug调试技巧(超详细!建议收藏!)(代码片段)
来源:https://www.cnblogs.com/chiangchouDebug用来追踪代码的运行流程,通常在程序运行过程中出现异常,启用Debug模式可以分析定位异常发生的位置,以及在运行过程中参数的变化。通常我们也可以启用Debug模式来跟踪代... 查看详情
javascript代码技巧——史上最全类型判断(代码片段)
1.typeof(不能区分复杂类型)console.log(typeofbool);//booleanconsole.log(typeofnum);//numberconsole.log(typeofstr);//stringconsole.log(typeofund);//undefinedconsole.log(typeofnul);//objectconsole. 查看详情
javascript代码技巧——史上最全类型判断(代码片段)
1.typeof(不能区分复杂类型)console.log(typeofbool);//booleanconsole.log(typeofnum);//numberconsole.log(typeofstr);//stringconsole.log(typeofund);//undefinedconsole.log(typeofnul);//objectconsole. 查看详情