jQuery_index前面加个冒号-CSDN博客

本文链接：https://blog.csdn.net/pangyanying/article/details/124967034

jQuery笔记

文章目录

jQuery笔记

js框架和库

区别：

1.框架（framework）是为解决一个(一类)问题而开发的产品。

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

从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。
简单理解：就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。
比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。

常见的JavaScript 库

jQuery
Prototype
YUI
Dojo
Ext JS
移动端的zepto

jquery概述

jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

j 就是 JavaScript

Query 是查询；意思就是查询js

把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。

jquery的优点

1、轻量级。核心文件才几十kb，不会影响页面加载速度
2、跨浏览器兼容。基本兼容了现在主流的浏览器
3、链式编程、隐式迭代
4、对事件、样式、动画支持，大大简化了DOM操作
5、支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
6、免费、开源

jquery插件

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。
注意: 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件。

jQuery 插件常用的网站：

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

jQuery 插件使用步骤：

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

复制相关html、css、js (调用插件)。

jQuery 插件演示：

瀑布流

图片懒加载

（图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载）
当我们页面滑动到可视区域，再显示图片。
我们使用jquery 插件库 EasyLazyload。注意，此时的js引入文件和js调用必须写到 DOM元素（图片）最后面

全屏滚动（fullpage.js）

gitHub： https://github.com/alvarotrigo/fullPage.js
中文翻译网站： http://www.dowebok.com/demo/2014/77/

bootstrap JS 插件：

bootstrap 框架也是依赖于 jQuery 开发的，因此里面的 js插件使用，也必须引入jQuery 文件。

jquery入口函数

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

//方法1：重点
$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
 }) ;   

 //方法2：jQuery===$,所以可以替换，document可以省略
$(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});

jquery的顶级对象$

1.$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $ 。
2.$ 是jQuery 的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

jQuery 对象和 DOM 对象互换

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

用原生 JS 获取来的对象就是 DOM 对象。
jQuery 方法获取的元素就是 jQuery 对象。

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

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

$(this) $(“div”)

jQuery 对象转换为 DOM 对象（两种方式）：

$('div') .get(index)    index 是索引号      
$('div') [index]       index 是索引号

jq选择器

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

1.基本选择器

基本选择器	语法	功能
ID选择器	$(‘#ID’)	找到匹配指定ID的元素
元素(标签)选择器	$(‘element’)	找到指定的元素
class选择器	$(‘.class’)	找到匹配指定class的元素
通配符选择器	$(‘*’)	匹配所有元素
并集(组合)选择器	$(‘sel,sel’)	多个选择器匹配的元素合并

2.层级选择器

层级选择器	语法	功能
后代选择器	$(‘parent child’)	当前元素的所有后代元素
直接后代选择器	$(‘parent>child’)	当前元素所有的子元素
下一个兄弟	$(‘prev+next’)	当前元素的下一个元素
后面所有兄弟	$(‘prev~siblings’)	当前元素后面的所有兄弟元素

3.基本筛选选择器

基本筛选选择器	语法
获取第一个元素	$(‘ele:first’)
获取最后一个元素	$(‘ele:last’)
获取指定索引的元素	$(‘ele:eq(index)’) 方法eq(index)
获取所有元素除某个	$(‘ele:not(selector)’)
获取索引为偶数的元素	$(‘ele:even’)
获取索引为奇数的元素	$(‘ele:odd’)
获取大于该索引元素	$(‘ele:gt(index)’)
获取小于于该索引元素	$(‘ele:lt(index)’)
获取所有标题类型元素	$(‘ele:header’)

4.jq筛选方法（重点）

parent()方法

$(selector).parent() 表示选择所有匹配的唯一父级

children() 方法

$(selector).children() 表示选中某个元素的所有子级元素。括号内写元素就表示选中子级中某个元素。相当于子级选择器。

siblings() 方法

$(selector).siblings() 表示选中某个元素的所有兄弟元素。括号内写元素就表示选中某个兄弟元素。

find() 方法

$(selector).find(selector) 表示选中被选元素的某个后代元素。相当于后代选择器。

.eq() 方法

$(‘li’).eq(2) 相当于 $(‘li:eq(2)’) 下标从0开始

jq里面的排他思想

$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

链式编程

是为了节省代码量，看起来更优雅。可是可读性比较差。

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

$(this).css('color', 'red').sibling().css('color', '');

隐式迭代

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

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

jq样式操作

1.操作css方法

获取属性值

//参数只写属性名，则是返回属性值
$(this).css(''color'');

设置属性值

//1.参数是属性名和属性值，逗号分隔，是设置一组样式，**属性必须加引号**，值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');

//2.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号，有连接符-才要加引号
$(this).css({ "color":"white","font-size":"20px"});

2.操作类方法

区别：

原生 JS 中 className 会覆盖元素原先里面的类名。
jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

添加类 addClass()

$(“div”).addClass(''current'');

移除类 removeClass()

$(“div”).removeClass(''current'');

切换类 toggleClass()

$(“div”).toggleClass(''current'');

索引值 index()

$(this).index()

jq效果

1.显示和隐藏

show() 显示

$(selector).show(speed时间,easing速度曲线,callback回调函数)

一般不写参数，不动画直接显示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$(".btn1").click(function(){
		$("p").hide(1000,function(){
			alert("Hide()方法已完成!");
		});
	});
	$(".btn2").click(function(){
		$("p").show(1000,function(){
			alert("Show()方法已完成!");
		});
	});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">隐藏</button>
<button class="btn2">显示</button>
</body>
</html>

hide() 隐藏

参数和显示方法一样

toggle() 切换

参数和显示方法一样

2.滑动

slideDown() 下滑方法

$(selector).slideDown(speed时间,easing速度曲线,callback回调函数)

slideUp() 上滑方法

slideToggle() 滑动切换方法

3.淡入和淡出

fadeIn() 淡入

$(selector).fadeIn(speed时间,easing速度曲线,callback回调函数)

fadeOut() 淡出

fadeToggle 淡入淡出切换

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

$(selector).fadeIn(speed时间,opacity透明度,easing速度曲线,callback回调函数)

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

4.自定义动画animate()

$(selector).animate(params属性名,speed时间,easing速度曲线,callback回调函数)

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

$(".king li").mouseenter(function () {
    // 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
    $(this).stop().animate({
        width: 224
    }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
    // 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
    $(this).siblings("li").stop().animate({
        width: 69
    }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})

 $("button").click(function() {
     $("div").animate({
     left: 500,
     top: 300,
     opacity: .4,
     width: 500
     }, 500;
 })

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

1.动画或效果队列

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

2.stop() 停止排队

注意：如果stop() 方法写在动画或效果的前面，相当于停止结束上一次的动画

事件切换 hover()

hover(over,out)

over:必须，鼠标移到元素时要触发的函数

out:可选，鼠标移出元素时要触发的函数

*注意：*必须要写一个参数，只写一个函数时，鼠标经过和离开都会触发它

// 第一种写法：
$('li').mouseenter(function () {                			 $(this).children('p').hide().siblings('img').show()
}).mouseleave(function () {             	$(this).children('p').show().siblings('img').hide()
 })

// 第二种写法： .hover()
//hover() 方法规定当鼠标指针悬停在被选元素上时要运行两个函数。
$('li').hover(function () {               		$(this).children('p').hide().siblings('img').show()
}, function () {               	$(this).children('p').show().siblings('img').hide()
})

// 第三种 简写：  toggle() 切换
$('li').hover(function () {
	$(this).children().toggle()
	}, function () {
	$(this).children().toggle()
})

// 第四种 简写：hover里面只指定一个函数，那mouseenter和mouseleave都执行它
$('li').hover(function () {
	$(this).children().toggle()
})

jq属性操作

1.设置获取元素的固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如元素里面的 href ，比如元素里面的 type,checked。

（1）获取属性语法：

$(‘选择器’).prop(‘‘属性名’’)

（2）设置属性语法：

$(选择器).prop(‘属性名’, ‘属性值’)
用对象语法 $(选择器).prop({属性名1：“属性值1”，属性名2：“属性值2”})

2.设置获取自定义属性值 attr()

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

（1）获取自定义属性语法：

$(选择器).attr(’属性名‘) //类似于原生js的getAttribute()

（2）设置自定义属性语法

$(选择器).attr(‘属性名’, ‘属性值’) //类似于原生js的setAttribute()
用对象语法 $(选择器).attr({属性名1：“属性值1”，属性名2：“属性值2”})

3.数据存储 data()

(1) 附加数据语法：

data(‘‘name’’,‘‘value’’) // 向被选元素附加数据

(2) 获取数据语法：

date(‘‘name’’) // 向被选元素获取数据

//向元素附加数据，然后取回该数据：
$("#btn1").click(function(){
  $("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
  alert($("div").data("greeting"));
});

jq内容文本值

1.普通元素的内容 html() 相当于原生innerHTML()

.html() //获取内容

.html(“内容”) //设置内容

2.普通元素的文本内容 text() 相当于原生innerText()

.text() //获取文本

.text(“文本内容”) //设置文本内容

3.表单的值 val() 相当于原生value()

.val() //获取表单的值

.val(“内容”) //设置表单的值

4.表单输入时去掉前后空格

方法1： $.trim(字符串)

方法2：字符串.trim()

jq元素操作

1.创建

$(‘

’); //动态创建了一个li标签

2.添加

(1)内部添加 (父子关系)

append(“内容”)
- 把内容放在匹配元素内部最后面，类似于原生appendChild
prepend(“内容”)
- 把内容放在匹配元素内部最前面
(2)外部添加 (兄弟关系)

before(“内容”)
- 把内容放在目标元素前面
after(“内容”)
- 把内容放在目标元素后面
3.删除

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

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

html(“”) 清空匹配的元素内容

区别：

1.remove 删除元素本身。
2.empt() 和 html(‘’‘’) 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。

4.遍历 each()

jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。

语法1：.each()
- $(“div”).each(function (index, domEle) { xxx; }）
1. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
2. 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
3. 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)
语法2：$.each()
- $.each(object，function (index, element) { xxx; }）
1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2. 里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容
jq尺寸、位置操作

jq尺寸

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-odFy0X3K-1653463549053)(F:\1叩丁狼前端\04-jquery、ajax\总结\image\image-20220512230910640.png)]

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

jq位置

1.offset() 设置或获取元素偏移

(1)offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
(2)该方法有2个属性 left、top 。
- offset().top 用于获取距离文档顶部的距离
- offset().left 用于获取距离文档左侧的距离。
(3)可以设置元素的偏移：offset({ top: 10, left: 30 });

2.position() 获取元素偏移

(1)position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
(2)该方法有2个属性 left、top。
- position().top 用于获取距离定位父级顶部的距离。
- position().left 用于获取距离定位父级左侧的距离。
(3)该方法只能获取。

3.scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧

(1) scrollTop() 方法设置或返回被选元素被卷去的头部。
(2) 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

jq事件绑定

1.单个事件注册

语法： element.事件类型(function(){事件处理程序})

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

2.事件处理 on() 绑定事件

语法： element.on(事件类型,[selector],fn)

如 $(‘button’).on(“click”, function () { })

（1）事件类型可以绑定多个，用逗号隔开

（2）selector: 元素的子元素选择器 ,填上的时候是事件委托。[]中括号表示可选

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数,如果有的事件只想触发一次，可以使用 one() 来绑定事件。

on()方法优势：

1.可以绑定多个事件，多个处理事件处理程序。
```
 $(“div”).on({
  mouseover: function(){}, 
  mouseout: function(){},
  click: function(){}	
});       

//如果事件处理程序相同
 $(“div”).on(“mouseover mouseout”, function() {
   $(this).toggleClass(“current”);
  });  
```
2.可以事件委托

在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。
```
$('ul').on('click', 'li', function() {
    alert('hello world!');
});       
```
3.可以给动态创建的元素添加事件绑定

动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件
```
 $("div").append($("<p>我是动态创建的p</p>"));
 $('div').on('click','p', function(){
     alert("俺可以给动态生成的元素绑定事件")
 });       
```
4.jq没有封装的方法可以用on触发

touchstart方法只能用on()在手机端才可以触发
```
$('button').on('touchstart', function () {
    console.log(this)
});
```
jq事件的解绑 off()
```
$("p").off() // 解绑p元素所有事件处理程序

$("p").off( "click")  // 解绑p元素上面的点击事件

$("ul").off("click", "li");   // 解绑事件委托
```
自动触发事件trigger()

有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。
1. element.click() // 第一种简写形式
2. element.trigger(“type”) // 第二种自动触发模式
```
$("p").on("click", function () {
  alert("hi~");
}); 

$("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击
```
3. element.triggerHandler(type) // 第三种自动触发模式
  
  triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。
阻止默认行为和阻止冒泡

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

键盘事件和键码
```
$(selector).keydown(function(){...});// 键盘按下事件
$(selector).keyup(function(){...});// 键盘松开事件
```
e.keyCode键码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nf6daSip-1653463549055)(F:\1叩丁狼前端\04-jquery、ajax\总结\image\keycode.png)]

记住回车的键码===13就可以

jquery拷贝对象$.extend()

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

$.extend([deep], target, object1, [objectN])
1. deep: 如果设为true 为深拷贝，默认为false 浅拷贝
2. target: 要拷贝的目标对象
3. object1:待拷贝到第一个对象的对象。
4. objectN:待拷贝到第N个对象的对象。
5. 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
6. 深拷贝，前面加true，完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被拷贝对象。
) // 第三种自动触发模式

triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。

阻止默认行为和阻止冒泡

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

键盘事件和键码
```
$(selector).keydown(function(){...});// 键盘按下事件
$(selector).keyup(function(){...});// 键盘松开事件
```
e.keyCode键码

[外链图片转存中…(img-nf6daSip-1653463549055)]

记住回车的键码===13就可以

jquery拷贝对象$.extend()

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

$.extend([deep], target, object1, [objectN])
1. deep: 如果设为true 为深拷贝，默认为false 浅拷贝
2. target: 要拷贝的目标对象
3. object1:待拷贝到第一个对象的对象。
4. objectN:待拷贝到第N个对象的对象。
5. 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
6. 深拷贝，前面加true，完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被拷贝对象。