jQuery

最新推荐文章于 2024-11-12 11:19:19 发布

xiongxinyu10

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量51

点赞数

分类专栏：客户端和浏览器的数据交互文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_66706006/article/details/132405135

版权

客户端和浏览器的数据交互专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一. jQuery基础

1. jQuery的下载

官方网址：jQuery

2. jQuery的使用步骤

1. 引入jQuery文件

2. 使用即可

3. jQuery的入口函数

$(function() {

...//此处是页面DOM加载完成的入口

});

$(document).ready(function() {

...//此处是页面DOM加载完成的入口

});

1. 等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。

2. 相当于原生js中的DOMContentLoaded

3. 不同于原生js中的load事件是等页面文档，外部的js文件，css文件，图片加载完毕才执行内部代码

4. jQuery的顶级对象$

1. $是jQuery的别称，在代码中可以使用jQuery代替$，但一般为了方便，通常都直接使用$

2. $是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成jQuery对象（例如 $(‘div’)），就可以调用jQuery的方法。

二. jQuery概述

1. 什么是JavaScript库

JavaScript库：即library，是一个提前封装好的特定的集合（方法和函数）。

就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate,hide,show,比如获取元素等

简单理解：就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。

2. 常见的JavaScript库

jQuery，Prototype，YUI，Dojo，Ext JS，移动端的zepto

这些库都是对原生JavaScript的封装，内部都是用JavaScript实现的，我们主要学习的是jQuery。

3. jQuery是JavaScript库

jQuery是一个快速，简洁的JavaScript库

j就是JavaScript；Query查询；意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。

jQuery封装了JavaScript常用的功能代码，优化了DOM操作，事件处理，动画设计和Ajax交互。

学习jQuery本质：就是学习调用这些函数（方法）

三. jQuery常用API

jQuery选择器
jQuery样式操作
jQuery效果
jQuery属性操作
jQuery文本属性值
jQuery元素操作
jQuery尺寸，位置操作

原生JS获取元素方式很多，很杂，而且兼容性情况不一致。因此jQuery给我们做了封装，使获得元素同一标准。

$(“选择器”) //里面选择器直接写CSS选择器即可，但要加引号

名称	用法	描述
ID选择器	$(“#id”)	获取指定ID的元素
全类选择器	$(“*”)	匹配所有元素
类选择器	$(“.class”)	获取同一类class的属性
标签选择器	$(“div”)	获取同一类标签的所有元素
并集选择器	$(“div,p,li”)	选取多个元素
交集选择器	$(“li.current”)	交集元素

jQuery层级选择器

名称	用法	描述
子代选择器	$(“ul>li”);	使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

jQuery设置样式

$(‘div’).css(‘属性’,’值’)，例如： $(‘div’).css(‘background’, ’pink’);

隐式迭代（重要）

遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不再用我们进行循环，简化我们的操作，方便我们调用。

jQuery筛选选择器

语法	用法	描述
:first	$(‘li:first’)	获取第一个li元素
:last	$(‘li:last’)	获取最后一个li元素
:eq(index)	$(‘li:eq(2)’)	获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd	$(‘li:odd’)	获取到的li元素中，选择索引号为奇数的元素
:even	$(‘li:even’)	获取到的li元素中，选择索引号为偶数的元素

jQuery筛选方法（重点）

语法	用法	说明
parent()	$(‘li’).parent();	查找父级
children(selector)	$(‘ul’).children(‘li’)	相当于$(‘ul>li’),最近一级（亲儿子）
find(selector)	$(‘ul’).find(‘li’);	相当于$(‘ul li’)，后代选择器
siblings(selector)	$(‘.first’).siblings(‘li’)	查找兄弟节点，不包括自己本身
nextAll([expr])	$(‘.first’).nextAll()	查找当前元素之后所有的同辈元素
prevtAll(class)	$(‘.first’).prevAll()	查找当前元素之前所有的同辈元素
eq(index)	$(‘div’).hasClass(‘protected’)	检查当前的元素是否含有某个特定的类，如果有，则返回true
eg(index)	$(‘li’).eg(2);	相当于$(‘li:eq(2)’),index从0开始

链式编程

链式编程是为了节省代码量，看起来更优雅。

$(this).css(‘color’,’red’).sibling().css(‘color’,’’);

使用链式编程一定要注意是哪个对象执行样式

四. jQuery对象

1. DOM对象

用原生js获取过来的对象就是DOM对象

例如：var myDiv=document.querySelector(‘div’); //myDiv是DOM对象

2. jQuery对象

用jquery方式获取过来的对象是jQuery对象。本质：通过$把DOM元素进行了包装

$(‘div’); //$(‘div’)是一个jQuery对象

1. jQuery对象本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）

2. jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScript属性和方法（不可以相互调用）

3. 相互转换

jQuery对象和DOM对象之间是可以相互转换的。

因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

1. DOM对象转换为jQuery对象：$(DOM对象)

2. jQuery对象转换为DOM对象：

$(‘div’)[index] index是索引号

$(‘div’).get(index) index是索引号

五. jQuery属性操作

1. 固有属性prop()

所谓元素固有属性就是元素本身自带的属性。比如<a>元素里面的href，比如<input>元素里面的type。

获取属性语法：prop(‘属性’)

设置属性语法：prop(‘属性’,’属性值’)

2. 自定义属性值attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给div添加index=’1’。

获取属性语法：attr(‘属性’) //类似原生getAttribute

设置属性语法：attr(‘属性’,’属性值’) //类似原生setAttribute()

该方法也可以获取H5自定义属性

3. 数据缓存data()

data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。

六. jQuery元素操作

主要是遍历，创建，添加，删除元素操作

1. 遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作。

如果想要给同一类元素做不同操作，就需要用到遍历

语法1：

$(‘div’).each(function (index,doEle) {xxx;})

each()方法遍历匹配的每一个元素。主要用DOM处理。each每一次

里面的回调函数有2个参数：index是每个元素的索引号;demEle是每个DOM元素对象，不是jquery对象。

所以想要使用jQuery方法，需要给这个DOM元素转换为jquery对象$(domEle)

语法2：

$.each(object,function(index,element) { xxx;})

1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象

2. 里面的函数有2个参数：index是每个元素的索引号；element遍历内容

2. 创建元素

语法：

$(“<li></li>”)

3. 添加元素

内部添加

element.append(“内容”)，把内容放入匹配元素内部最后面，类似原生appendChild

element.prepend(li)，把内容放入匹配元素内部最前面

内部添加元素，生成之后，它们是父子关系

外部添加

element.after(‘内容’)，把内容放入目标元素后面

element.before(‘内容’)，把内容放入目标元素前面

外部添加元素，生成之后，它们是兄弟关系

4. 删除元素

element.remove() //删除匹配的元素（本身）

element.empty() //删除匹配的元素集合中所有的子节点

element.html(‘’) //清空匹配的元素内容

七. jQuery样式操作

jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式。

1. 操作css方法

1. 参数只写属性名，则是返回属性值

$(this).css(‘color’);

2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css(‘color’,’red’);

3. 参数可以是对象形式，方便设置多组形式。属性名和属性值用冒号隔开，属性可以不用加引号。

$(this).css({‘color’:’white’,’font-size’:’20px’});

2. 设置类样式的方法

作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点

1. 添加类

$(‘div’).addClass(‘current’);

2. 删除类

$(‘div’).removeClass(‘current’);

3. 切换类

$(‘div’).toggleClass(‘current’);

3. 类操作与className区别

原生JS中className会覆盖元素原先里面的类名。

jQuery里面类操作只是对指定类进行操作，不影响原先类名

八. jQuery效果

jQuery给我们封装了很多动画效果，最常见的有：

显示隐藏	滑动	淡入淡出	自定义动画
show()	slideDown()	fideIn()	animate()
hide()	slideUp()	fadeOut()
toggle()	slideToggle()	fadeToggle()
		fadeTo()

1. 显示隐藏效果

显示语法规范：show([speed,[easing],[fn]])

显示参数（隐藏和切换也是一样的）

参数都可以省略，无动画直接显示

1. speed:三种预定速度之一的字符串(“show”,”normal”,or”fast”)或表示动画时长的毫秒数值（如：1000）

2. easing:(Optional)用来指定切换效果，默认是”swing”,可用参数”linear”。

3. fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

2. 滑动效果

跟显示隐藏一样写，参数也一样

3. 事件切换

hover([over,]out)

1. over:鼠标移到元素上要触发的函数（相当于mouseenter）

例如：（第一个是鼠标经过函数，第二个是鼠标离开函数）

$(“.nav>li).hover(function(){

    $(this).children(‘ul’).slideDown(200);

    },function(){

        $(this).children(‘ul’).slideUp(200);

});

事件over 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数

$(“.nav>li).hover(function(){

    $(this).children(‘ul’).slideToggle();

})

4. 动画队列及其停止排队方法

动画或效果队列

动画或效果一旦触发就会执行，如果多次触发，就造成多个动画或效果排队执行。

停止排队，stop()

1. stop()方法用于停止动画或效果

2. 注意，stop()写到动画或者效果的前面，相当于停止结束上一次的动画

$(“.nav>li).hover(function(){

    $(this).children(‘ul’).stop().slideToggle();

})

5. 淡入淡出效果

淡入效果语法规范（淡出和切换也是一样的）

fadeIn([speed,[easing],[fn]])

显示参数（隐藏和切换也是一样的）

1. 参数都可以省略，无动画直接显示

1. speed:三种预定速度之一的字符串(“show”,”normal”,or”fast”)或表示动画时长的毫秒数值（如：1000）

2. easing:(Optional)用来指定切换效果，默认是”swing”,可用参数”linear”。

3. fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

渐进方式调整到指定的不透明度

fadeTo([speed,opacity,[easing],[fn]])

效果参数

1. opacity透明度必须写，取值0-1之间

2. speed:三种预定速度之一的字符串(“show”,”normal”,or”fast”)或表示动画时长的毫秒数值（如：1000）。必须写

3. easing:(Optional)用来指定切换效果，默认是”swing”,可用参数”linear”。

6. 自定义动画animate

语法：animate(params,[speed],[easing],[fn])

参数：

1. params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。

2. speed:三种预定速度之一的字符串(“show”,”normal”,or”fast”)或表示动画时长的毫秒数值（如：1000）

3. easing:(Optional)用来指定切换效果，默认是”swing”,可用参数”linear”。

4. fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

例如：

$(‘button’).click(function(){

    $(‘div’).animate({

        left:500,

        top:300,
    
        opacity:.4;
    
    },500);

})

九. jQuery尺寸，位置操作

1. jQuery尺寸操作

语法	用法
width()/height()	取得匹配元素宽度和高度值只算width/height
innerWidth()/inner Height()	取得匹配元素宽度和高度值包含padding
outerWidth()/outerHeight()	取得匹配元素宽度和高度值包含padding,border
outerWidth(true)/outerHeight(true)	取得匹配元素宽度和高度值包含padding,border,margin

2. jQuery位置

位置主要有三个：offset(),position(),scrollTop(),scrollLeft()

1. offset()方法

offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。

该方法有2个属性left,top。offset().top用于获取距离文档顶部的距离，offset().left用于获取文档左侧的距离。可以设置元素的偏移：offset({top: 10, left: 30});

2. position()方法

position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。

3. scrollTop(),scrollLeft()

设置或获取元素被卷去的头部和左侧

十. jQuery内容文本值

主要针对元素的内容还有表单的值操作

1. 普通元素内容html()

相当于原生inner HTML

html() //获取元素内容

html('内容') //设置元素内容

2. 普通元素文本内容text()

相当于原生inner Text

text()

text('内容')

3. 表单的值val()

相当于原生value

val()

val('内容')

十一. jQuery事件

1. 事件注册

单个事件的注册

语法：element.事件(function() {})

例如：$(‘div’).click(function() { 事件处理程序 })

其他事件和原生基本一致

比如mouseover,mouseout,blur,focus,change,keydown,keyup,resize,scroll等

2. 事件处理

1. on()绑定事件

on()方法在匹配元素上绑定一个或多个事件的事件处理函数。

语法：element.on(events,[selector],fn)

1. events:一个或多个用空格分隔的事件类型，如”click”或”keydown”

2. selector:元素的子元素选择器

3. fn:回调函数即绑定在元素身上的侦听函数

例如，我既想给鼠标绑定鼠标划过，又想绑定鼠标点击事件，就可以这样写

$(‘div’).on({

    mouseenter:function() {

        $(this).css(‘background’,’skyblue’);

    },click:function() {

        $(this).css(‘background’,’purple’);

      }

});

综上：

on()方法优势1：

可以绑定多个事件，多个事件处理程序

如果事件处理程序相同，还可以这样写：

$(‘div’).on(‘mouseover mouseout’,function() {

    $(this).toggleClass(‘current’);

});

on()方法优势2：

可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。例如：

$(‘ul’).on(‘click’,’li’,function() {

    alert(‘hello word!’);

});

注意：click是绑定在ul身上的，但是触发的对象是ul 里面的小li

在此之前有bind(),live(),delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。

on()方法优势3：

动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件

例如以前的写法：以前这种写法，并不能给动态生成的元素绑定事件，点击li时并不会弹出11

$(‘ol li’).click(function() {

    alert(11);

})

var li=$(‘<li>我是后来创建的</li>’);

$(‘ol’).append(li);

现在的写法：现在这种写法，可以给动态生成的元素绑定事件，点击li时会弹出11

$(‘ol’).on(‘click’,’li’,function() {

    alert(11);

})

var li=$(‘<li>我是后来创建的</li>’);

$(‘ol’).append(li);

2. off()解绑事件

off()方法可以移除通过on()方法添加的事件处理程序

1. 解除div身上所有的事件：$(‘div’).off();

2. 解除了div身上的点击事件：$(‘div’).off(‘click’);

3. 解除事件委托：$(‘ul’).off(‘click’,’li’);

3. one()绑定事件

如果有的事件只想触发一次，可以使用one()来绑定事件

$(‘p’).one(‘click’,function(){

    alert(11);

})

4. 自动触发事件tigger()

有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

1. element.click() //第一种简写形式

$(‘div’).click();

2. element.trigger(‘type’) //第二种自动触发模式

$(‘div’).trigger(‘click’);

3. element.triggerHandler(type) //第三种自动触发模式（不会触发元素的默认行为）

$(‘div’).triggerHandler(‘click’);

十二. jQuery其他方法

1. jQuery对象拷贝

如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend()方法

语法：$.extend([deep],target,object1,[objectN])

1. deep:如果设为true为深拷贝，默认为false浅拷贝

2. target：要拷贝的目标对象

3. object1:待拷贝到第一个对象的对象

4. 浅拷贝是把被拷贝的对象负载数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。

5. 深拷贝，前面加true，完全克隆（拷贝的是对象，而不是地址），修改目标对象不会影响被拷贝对象。

2. jQuery多库共存

jQuery使用$作为标示符，随着jQuery的流行，其他js库也会用$作为标识符，这样一起使用会引起冲突。

客观需求：

需要一个解决方案，让jQuery的其他的js库不存在冲突，可以同时存在，这就叫多库共存。

jQuery解决方案：

1. 把里面的$符号统一改为jQuery。比如jQuery(‘div’)

2. jQuery变量规定新的名称：$.noConflict() var xx=$.noConflict();

3. jQuery插件

jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成

注意：这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为jQuery插件。

1. jQuery插件常用的网站：

1. jQuery插件库 jQuery插件库-收集最全最新最好的jQuery插件

2. jQuery之家 jQuery之家-自由分享jQuery、html5、css3的插件库

2. jQuery插件使用步骤：

1. 引入相关文件。（jQuery文件和插件文件）

2. 复制相关html,css,js（调用插件）

xiongxinyu10

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录