jquery基本功能 jquery基本知识

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开始。

<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");