JQuery的常用知识总结
目录
(一)jQuery是什么?
(二)jQuery的使用
(三)jQuery的顶级对象:$符号
(四)jQuery对象与DOM对象
(五)选择器
(六)排他思想
(七)链式编程
(八)样式操作
(九)jQuery效果
(十)jQuery的属性操作
(十一)jQuery的内容文本值
(十二)jquery元素操作
(十三)jQuery的尺寸
(十四)jQuery的位置(偏移)
(十五)jQuery事件
(十六)jQuery事件对象
(十七)jQuery对象拷贝
(十八)jquery的多库共存
(十九)jQuery插件
(二十)图片懒加载技术
(一)jQuery是什么?
jQuery是一个轻量级的JavaScript库,里面封装了许多JS函数,它的设计宗旨是“write Less,do More”。
(二)jQuery的使用:
在了解了什么是jQuery之后,我们就要了解怎么去使用。
(1)首先我们要到 https://jquery.com/download/ 里去下载jQuery,这里有两种选择:
然后将下载的jQuery文件放到我们的js文件夹下,并且通过<script src="./js/jquery-3.5.0.min.js"></script>
引入到HTML页面中。
(2)了解jQuery的入口函数:都是等页面的DOM加载完成之后就可以执行,不必等到所有的外部资源加载完成,相当于原生js中的DOMContentLoaded
,不同于原生中的load()
需要将HTML、css、图片等加载完之后才加载。
- 第一种:
$(document).ready(function(){ ......});
- 第二种:
$(function(){ ......});
(推荐使用这种)
(三)jQuery的顶级对象:$符号
$
是jQuery的别称,代码中$
与jquery
是一样的- $是jQuery的顶级对象,相当于原生js中的window
(四)jQuery对象与DOM对象
- DOM对象:用原生js获取的对象,比如
var btn = document,getElementById("btn01")
; - jQuery对象:用jQuery的方式获取的对象,本质是通过
$
把DOM元素进行包装,是一种伪数组的形式,比如$("div")
; - 二者之间的属性和方法不能混合使用
- 相互转换:
- DOM对象 —> jquery对象:①直接用
$("选择器")
获取;②已经使用原生js获取过来的DOM对象,用$(DOM对象)
进行转换 - jQuery对象 —> DOM对象:①因为jQuery对象是一种伪数组的形式,所以可以用
$()[index]
来进行转换;②使用$().get(index)
进行转换。这里的index以0开始。
- DOM对象 —> jquery对象:①直接用
<div>
</div>
<script>
// DOM对象与jQuery之间各自的属性和方法不能混合使用
// DOM操作
var mydiv = document.querySelector('div');
// DOM转换为jQuery操作
$('div'); //直接使用jQuery获取
$(mydiv); //在使用dom对象之后获取
// jQuery转换为DOM
$('div')[0].style.display = 'none'; //使用$()[index]
$('div').get(0); //使用$().get(index)
</script>
(五)选择器
(1)基础选择器:$("选择器")
,选择器的格式与css、css3的选择器相同,比如类选择器$(".hobe")
,属性选择器$(“#id”)
等等;
(2)筛选选择器:
elm:first
选择第一个
elm:last
选择最后一个
elm:eq(index)
选择索引号为index的
elm:odd
选择奇数的
elm:even
选择偶数的
(3)筛选方法
parent()
:选择最近的一个父级children(s)
:选择子代元素,相当于子代选择器,里面的参数s可有可无,有就是指定元素 ,如ul > p
find(s)
:相当于后代选择器,所有后代都会选中,如ul li
siblings(s)
:查找兄弟节点,不包括自身nextAll([expr])
:查找当前元素之后所有的同辈元素prevtAll([expr])
:查找当前元素之前所有的同辈eq(index)
:查找索引为index的元素hasClass(类名)
:查找当前袁姗姗是否具有某个类,有则返回true
(六)排他思想:
排他思想就是当前的元素做一种操作,而其他兄弟元素做另一种操作,比如给当前元素修改背景颜色,其他兄弟元素的背景颜色修改为另一种颜色。
$(function(){
$("button").click(function(){
$(this).css("backgroundColor","pink");//给当前元素修改
$(this).siblings("button").css("backgroundColor","blue");//其他兄弟元素修改
});
});
在这里补充一下jquery中的几个方法:
$(this)
:jquery的当前对象,this不加引号show()
显示元素;hide()
隐藏元素index()
获取索引号,如获取当前对象的索引号:$(this).index()
(七)链式编程:
链式编程可以节省代码,使代码看起来更加地优雅。
如上面的代码可以修改为:
$(this).css("backgroundColor","pink").siblings("button").css("backgroundColor","blue");
(八)样式操作:
(1)操作css方法:修改简单元素样式
css("属性名")
参数只写属性名,则返回该属性值,如$(this).css("width")
- 如果使用
css("属性名","属性值")
表示修改属性,里面的引号不能少,属性名与属性值用逗号分隔,若值是数字则可以省略单位和引号 - 如果参数以对象的形式,则可以一次修改多个样式,如
$(this).css({width:400,height:400,backgroundColor:"red"});
以这种对象形式里面的属性和数字可不用引号,但是如果是复合属性则用驼峰命名法。
(2)修改类操作样式:作用等同于classList,注意操作类里的参数不用加. 还有一个注意的地方是,原生js中的className
会覆盖原来的整个类名,而jQuery中的 addClass()
不影响原来的类名。
- 添加类
addClass()
如$(this).addClass("current");
- 移除类
removeClass()
- 切换类
toggleClass()
(九)jQuery效果:只能给元素做动画,比如要给document添加动画,可以改给给body或者html元素添加动画。
(1)显示与隐藏效果:
- 显示:
show([speed],[easing],[fn])
,第一个参数是速度,参数值有slow、normal、fast或者写毫秒;第二个参数是切换的效果,默认是swing,也可以是匀速“linear”;第三个参数是动画执行后的回调函数。参数说明以下相同,三个参数都可省略!!! - 隐藏:
hide([speed],[easing],[fn])
- 显示与隐藏来回切换:
toggle([speed],[easing],[fn])
(2)滑动效果:
- 下拉滑动:
slideDown([speed],[easing],[fn])
- 上拉滑动:
slideUp([speed],[easing],[fn])
- 滑动切换:
slideToggle([speed],[easing],[fn])
(3)淡入淡出效果:
- 淡入:
fadeIn([speed],[easing],[fn])
- 淡出:
fadeOut([speed],[easing],[fn])
- 淡入淡出切换:
fadeToggle([speed],[easing],[fn])
- 渐进方式调到指定的不透明度:
fadeTo(speed,opacity,[easing],[fn])
opacity的取值为0-1。
(4)自定义动画效果:animate
animate(params,[speed],[easing],[fn])
params:想要更改的样式属性,以对象的形式传递,必须写。属性名不用带引号,若是复合属性需用驼峰命名法,其他三个参数可以省略。
//3秒内向右下角移动,并且透明度变为原来的40%
$("div").animate({left:500,top:500,opacity:0.4},3000);
事件切换 hover([over],out)
over是鼠标经过事件,out是鼠标离开事件,如果只写一个函数,则鼠标经过和离开都会触发这个函数。
$(".nav li").hover(function(){
//over函数
$(this).children("ul").slideDown(200);},
function(){
//out函数
$(this).children("ul").slideUp(200);
});
效果同上:
$(".nav li").hover(function(){
$(this).children("ul").slideDown(200);});
排队问题
动画或效果队列:动画一旦触发就执行到完,,若快速触发多个动画或者效果就会连在一起进行。
取消动画队列:在动画之前写stop()
,相当于停止结束上一次的动画
$(this).children("ul").stop().slideToggle();
(十)jQuery的属性操作:
(1)获取或设置元素的固有属性值:prop()
- 设置:
element.prop("属性名",“属性值”)
- 获取:
element.prop("属性名")
(2)设置或获取元素的自定义属性值:attr()
- 设置:
element.attr("属性名",“属性值”)
- 获取:
element.attr("属性名")
(3)数据缓存:data()
:在指定的元素上存取数据,但不会修改DOM元素结构,一旦页面刷新,之前存放的数据就会被移除。可以用这个方法获取h5的自定义属性:data-index,获取时直接写index,data("index")
返回的是数字型。
(十一)jQuery的内容文本值:
- 设置元素内容:
html("内容")
获取元素内容:html()
相当于原生js中的innerHTML - 设置元素文本内容:
text("内容")
获取元素文本内容:text()
相当于原生js中的innerText - 设置或获取表单值:
val()
相当于原生中的value
(十二)jquery元素操作:
(1)遍历元素:
ele.each(function(index,domEle){xxx;})
domEle是DOM元素对象,转为jQuery对象:$(domEle)$.each(元素,function(index,domEle){xxx;})
v主要用于数据处理,如数组、对象,相当于for(i in 数组)
(2)创建元素:直接用$("")
创建 如$("<li></li>")
创建了一个li
(3)添加元素:
- 内部添加(父子关系):
ele.append("内容")
把内容放到元素内部的最后面,类似于原生的appendChild;prepend("内容")
添加到内部的最前面 - 外部添加(兄弟关系):
ele.after("内容")
把内容添加到目标元素的后面;ele.before("内容")
把内容添加到目标元素的前面
(4)删除元素:
- 删除本身:
ele.remove()
- 删除匹配元素集合中所有的子节点:
ele.empty()
- 清空匹配元素里子节点内容:
ele.html("")
(十三)jQuery的尺寸:
- 获取设置元素width和height的大小:
width()
、height()
- 获取设置元素width和height+padding的大小:
innerWidth()
、innerHeight()
- 获取设置元素width和height+padding+border的大小:
outerWidth()
、outerHeight()
- 获取设置元素width和height+padding+margin的大小:
outerWidth(true)
、outerHeight(true)
(十四)jQuery的位置(偏移)
(1)offset()
:设置或获取距离文档的位置,与父盒子无关,有top、left两个属性,如设置offset({top:300,left:400})
获取距离文档头部的距离:元素.offset().top
(2)position()
:获取距离带有定位父级的位置(偏移),若父级无定位则以文档为标准,position()只能获取不能设置偏移。
(3)scrollTop()
:被卷去的头部,scroolLeft()
:被卷去的左侧
(4)页面滚动事件:$(window).scrool(function(){});
(5)文档滚动:$(document).scrollTop();
(十五)jQuery事件:
(1)单个事件注册:element.事件(function(){});
(2)用on(events,[selectors],fn)
绑定一个或多个事件处理程序,语法:element.on({事件1:function(){},事件2:function(){},...});
如果事件处理的程序相同则用:element.on("事件1" "事件2" ..."事件n",function(){})
事件间用空格隔开;用on绑定事件的最大优势就是可以给动态创建的元素绑定事件
on还可以实现事件委托(委派),提高效率,如
//给ul绑定事件,触发的对象是ul下的li
$("ul").on("click","li",function(){alert("hello");});
(3)解绑:off()
可解除通过on()绑定的事件
ele.off();
解除元素所有的绑定事件ele.off("事件");
解除元素指定的绑定事件- 解除事件委托:如
$("ul").off("click","li")
(4)若事件只想触发一次,用one()
绑定事件
(5)自动触发事件:tigger()
- 方式1:
元素.事件() ;
会触发元素的默认行为 - 方式2:
元素.trigger("事件");
会触发元素的默认行为 - 方式3:
triggerHandler("事件");
不会触发元素的默认行为
(十六)jQuery事件对象:
元素.on("事件",function(event){...});
这里的event就是事件对象,它有许多属性和方法,如:
- 阻止默认行为:
event.preventDefault()
或return false
- 阻止冒泡:
event.stopPropagation()
(十七)jQuery对象拷贝
对象拷贝:把一个对象复制到另一个对象(合并对象),相同的会覆盖
语法:$.extend([deep],targetObj,obj,[objN]);
- targetObj : 要拷贝的目标对象
- [deep] : 如果设为true为深拷贝,默认为false浅拷贝
- obj1 : 待拷贝到的第一个对象
浅拷贝:把被拷贝对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象,如果obj1原来有内容,但是拷贝后不会保存原有的内容;
深拷贝:完全克隆(拷贝对象而不是地址),修改目标对象不会影响被拷贝对象,且目标对象中的原有内容会保存,若里面有不冲突的属性会合并到一起,有冲突的则变为拷贝后的。
(十八)jquery的多库共存:
jQuery的多库共存就是让jQuery与其他js库不存在冲突,因为很多库$符号也是在使用的。
jQuery的解决方法:
- 方法1:用jQuery代替$
- 方法2:用
$.noConflict()
或jquery.noConflict()
来定义一个新的名称代替$,如:
var zzm = $.noConflict();//定义zzm来代替$
zzm("div");
(十九)jQuery插件:
推荐两个网站:
- http://www/jq22.com/
- http://www.htmleaf.com/ (推荐用这个)
使用方法: - 首先引入相关的文件(jQuery文件和插件文件);
- 然后复制相关的html、css、js代码(调用插件)
(二十)图片懒加载技术:
图片的懒加载技术就是当页面滑到的地方那里的图片才显示出来,可以提高网页的性能。
这里记录一个全屏滚动的插件:fullPage.js
获取的地址:
- gitHub: https://github.com/alvarotrigo/fullPage.js
- 中文翻译网:http://www.dowebok.com/demo/2014/77/
这次的总结到这啦,期待下次的起笔~