jQuery整理

最新推荐文章于 2022-10-02 14:55:22 发布

Penguins_0

最新推荐文章于 2022-10-02 14:55:22 发布

阅读量190

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/Penguins_0/article/details/108943986

版权

jQuery

概念

jQuery>>>javaScript库

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

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

学习Query本质：学习调用这些函数（方法）

加快前端开发速度

使用jQuery之前要引入jQuery库

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

//1.11.3版本   报错？？？
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

基本使用

入口函数

$(function(){
	...//此处是页面DOM加载完成的入口
})

$(document).ready(function(){
	...//此处是页面DOM加载完成的入口
})

等到DOM结构渲染完毕即执行可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。
相当于原生js的DOMContentLoaded。
不同于原生js中的load事件是等页面文档、外部js文件、css文件、图片加载完毕才执行内部代码。
如果放在body后，就不需要写入口函数

顶级对象$

$是 j Q u e r y 的别称，在代码中可以使用 j Q u e r y 代替$ ，但一般为方便直接使用$。
$是 j Q u e r y 的顶级对象，相当于原生 j s 中的 w i n d o w ，把元素利用$ 包装称Query对象，就可以调用jQuery的方法。

jQuery对象和DOM对象

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

var myDiv=document.querySelector('div');  
//myDiv是DOM对象
var mySpan=document.querySelector('span'); 
//mySpan是DOM对象

jQuery对象：用jquery方式获取的对象，以伪数组的方式存储

本质：通过$把DOM元素进行了包装
```
$('div');   //$('div')是一个jQuery对象
$('span');  //$('span')是一个jQuery对象
```

jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScript属性和方法

myDiv.style.display='none'; //正确
myDiv.hide();  //错误，DOM对象不能使用jQuery里的hide方法
$('div').style.dispaly='none'; //错误，jQuery对象不能使用原生js的属性和方法

DOM对象和jQuery对象的相互转换

因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要使用这些属性和方法需要将jQuery对象转换成DOM对象。
- DOM对象>>jQuery对象：$(DOM对象)
  
  $(‘标签’) || $(已获取的DOM对象)
- jQuery对象>>DOM对象（两种方式）
  1. $(‘div’)[index] index是索引号
  2. $(‘div’).get(index) index是索引号

jQuery选择器

基础选择器

用法： $(“选择器”) //里面直接写CSS选择器即可，但是注意要加引号

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

层级选择器

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

⭐隐式迭代

遍历内部DOM元素（伪数组形式存储）的过程

理解：不用我们再进行循环，简化操作

jQuery筛选选择器

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

⭐jQuery筛选方法

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

注：一般选择eq(index)，筛选选择器中的index是字符串，需要转换

事件：mouseover():鼠标经过 mouseout: 鼠标离开

排他思想

当前元素设置样式，其余的兄弟清除样式

（通常用到sublings()方法）

样式操作

操作css方法

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

参数只写属性名>>>>返回属性值

$(this).css(“color”);
参数是属性名，属性值，逗号分隔，，是设置一组样式，属性必须加引号，数字可以不用跟单位和引号

$(this).css(“color”,“red”);
参数可以是对象形式，方便设置多组样式，属性名和值用冒号隔开，属性可不加引号

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

设置类样式方法

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

添加类

$(“div”).addClass(“current”)； //添加div中类名current 相当于追加类名
移除类

$(“div”).removeClass(“current”); //移除div类名current
切换类

$(“div”).toggleClass(“current”); //切换有无类名两种状态

类操作与className区别

原生js中className会覆盖元素里原先的类名

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

jQuery效果

显示隐藏：show() hide() toggle() >>切换

滑动：slideDown() slideUp() slideToggle()

淡入淡出：fadeln() fadeOut() fadeToggle() fadeTo()

自定义动画:animate()

显示隐藏效果

显示语法：show([speed],[easing],[fn])
参数都可省略，无动画直接显示，

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

一般情况下都不加参数显示隐藏就可以

淡入淡出效果

淡入语法：fadeIn([speed],[easing],[fn])；
speed：三种预定速度之一的字符串或表示动画市场的毫秒数值
渐进方式调整到指定透明度：fadeTo([speed],opacity,[eassing],[fn])

opacity：透明度必须写，取值0~1

speed:三种预定速度之一的字符串（”show“，”normal“，or”fast“）或表示动画市场的毫秒数值,必须写

easing:默认swing，可用linear

注意：解决排队效果，所有动画前面加stop()

eg: .stop().fadeIn()

自定义动画animate

语法：animate(params,[speed],[easing],[fn])
params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不带引号，如果是复合属性则需要采用驼峰命名，其余参数可省略。

注意：移动元素位置时要给元素设定position

案例：手风琴效果（未做

属性操作

设置或获取元素固有属性prop()

固有属性：元素本身自带的属性，例如元素里面的href
获取属性：element.prop(“属性”);

设置属性：element.prop(“属性”，“属性值)

设置或获取元素自定义属性attr()

自定义属性：用户自己给元素添加的属性
获取：element.attr(“属性”);

设置：element.attr(“属性”，“属性值)
该方法也可用于H5自定义属性 data-index

内容文本值

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

普通元素内容html()

相当于原生innerHTML

html() //获取元素内容

$("div").html();

html(“内容”) //设置元素内容

&("div").html("change");

普通元素文本内容text()

相当于原生innerText

text() //获取元素文本内容
text(“文本内容”) //设置元素文本内容

表单的值val()

相当于原生value

val()
val(“值”)

元素操作

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

遍历元素

隐式迭代对同一类元素做了同样的操作，如果想对同一类元素做不同操作，就需要用到遍历（类似for，但比for强大）

语法1

$(“div”).each(function(index,domEle) { xxx; } )
1. each()方法遍历匹配的每一个元素，主要用DOM处理，each每一个
2. index是索引号(可以自己指定索引号名称)，domEle是每个DOM元素对象，不是jQuery对象
3. 要想使用jQuery方法，需要给这个DOM对象转换成jQuery对象$(ddomEle)
语法2

$.each(object,function (index,element) { xxx; } )
1. $.each()方法可用于遍历任何对象，主要用于数据处理，比如对象、数组
2. index：索引号 element：遍历内容

创建、添加、删除元素

创建元素

var li = $("<li></li>");

动态创建了一个<li>,但并不会在页面中出现，需要添加到页面

添加元素

内部添加
- element.append(“内容”) //放到内容最后面
- element.prepeng(“内容”) //最前面
$(“ul”).append(li);
外部添加
- element.after(“内容”) //目标元素后面
- element.before(“内容”) //目标元素前面

删除元素

element.remove() //删除匹配元素自身
element.empty() //删除匹配元素集合中所有子节点(孩子)
element.html() //清空匹配元素集合中所有子节点(孩子)

注：empty()和html()作用相同

jQuery事件

事件处理

单个事件注册：element.事件( function() {} )

$(“div”).click(function() { 事件处理程序 } )

事件处理on()绑定事件

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

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

events:一个或多个用空格隔开的事件类型，如click或keydown
selector：元素的子元素选择器
fn：回调函数即绑定在元素身上的侦听函数

//on绑定多个事件，且多个事件处理函数不同时使用对象的方式
$("div").on({
    mouseenter:function() {
        $(this).css("background","red");
    },
    click:function() {
        $(this).css("background","greeb");
    },
    mouseleave:function(){
        $(this).css("background","blue");
    }
})
//多个事件处理函数相同
$("div").on("mouseouver mouseleave",function(){
    alert(11);
})

on()方法优势1：

可以绑定多个事件，多个事件处理程序
优势2：

可以实现事件委派（委托）操作——把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素
```
//click是绑定在ul身上，但是触发对象是ul中的li，事件委托
$("ul").on("click","li",function() {

	  alert("hello world");    

});
```

优势3：

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

<ol></ol>

$("ol").on("click","li",function() {
	alert(11);
})
var li=$("<li>我是后来创建的</>");
$("ol").append(li);

//不能用
//$("ol li").click(function(){
//	alert(11);
//})

事件处理0ff()解绑事件

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

$("p").off();      //解绑p元素所有事件处理程序
$("p").off("click");  //解绑p元素的点击事件  后面的foo是侦听函数名
$("p").off("click","li");  //解绑事件委托

只触发一次事件one()

事件只想出发一次，可直接使用one（）方法，不必绑定解绑，更加方便

$("p").one("click",function(){
	alert(1);
})

自动触发事件trigger()

元素.事件() //会触发元素默认行为
element.trigger(“事件”) //会触发元素默认行为
element.triggerHandler(“事件”) //不会触发元素的默认行为

jQuery事件对象

事件被触发就会有事件对象产生

element.on(events,[selector],function(event) {} )

阻止默认行为：event.preventDefault() 或者 return false

阻止冒泡:event.stopPagation()

jQuery其他方法

jQuery拷贝对象

语法：

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

deep:如果设为true为深拷贝，默认为false浅拷贝
target：要拷贝的目标对象
object1：待拷贝到第一个对象的对象
objectN：第N个
浅拷贝：把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
深拷贝：前面加true，完全克隆（拷贝的对象而不是地址），修改目标对象不会影响被拷贝对象（如果李米娜有不冲突的属性，会合并到一起
有同名简单类型数据时（冲突属性），拷贝后会覆盖target里面原来的数据

多库共存

让jQuery和其他js库不存在冲突

解决方法：

统一把$改成jQuery
jQuery遍历规定新的名称: $.noConflict() var xx=$.noComflict()

jQuery插件

jQuery插件常用网站

jQuery插件库 http://www.jq22.com/
⭐jQuery之家 http://www.htmleaf.com

jQuery插件使用步骤

引入相关文件。（jQuery和插件文件）
复制相关html、css、js（调用插件）

在demo里复制相关源代码会好一点

图片懒加载

当页面滑动到可视区域，再显示图片

使用jQuery插件库 EasyLazyload。注意此时的js引入文件和js调用必须写在DOM元素（图片）最后面<<必须先有图片才可以懒加载

全屏滚动（fullPage.js）

github:https://github.com/alvarotrigo/fullPage.js

中文翻译网站：http://www.dowebok.com/demo/2014/77/

bootstrap JS插件

https://v3.bootcss.com

jQuery尺寸、位置操作

jQuery尺寸

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

以上参数为空，则是获取相应数值，放回的是数字型
如果参数为数字，则是修改相应值
参数可以不必写单位

jQuery位置

主要有三个：offset()、position()、scrollTop()/scrollLeft()

offset()设置或获取元素偏移
- offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系（即使父子之间有定位关系）
- 该方法有2个属性left、top。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离
- 可以设置元素的偏移:offset({
  
  top:10,
  
  left:30
  
  });
position()获取元素偏移
- position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准
- 这个方法只能获取不能设置
scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
- scrollTop()方法设置或返回被选元素被卷去的头部
- 参数为空，放回数值，有参数设置偏移量坐标

案例：带有动画的返回顶部：利用动画和scrollTop

注意：不能是文档而是html和body元素做动画

//错误
//$(doucument).stop().animate({
//	scrollTop:0;
//})

$("body,html").stop().animate({
	scrollTop:0;
})

Penguins_0

关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫