jQuery笔记

:input	$(":input")	所有 <input> 元素
:text	$(":text")	所有 type="text" 的 <input> 元素
:password	$(":password")	所有 type="password" 的 <input> 元素
:radio	$(":radio")	所有 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的 <input> 元素
:submit	$(":submit")	所有 type="submit" 的 <input> 元素
:reset	$(":reset")	所有 type="reset" 的 <input> 元素
:button	$(":button")	所有 type="button" 的 <input> 元素
:image	$(":image")	所有 type="image" 的 <input> 元素
:file	$(":file")	所有 type="file" 的 <input> 元素

1.2.7 jQuery筛选方法

（1）父 $().parent() //返回的是最近一级的父级标签

（2）子

亲儿子：$().children() //选择亲儿子（相当于子代选择器）
所有孩子：$().find() //类似于后代选择器
- 必须要写参数，不写的话无法选择到
- *写" * "代表选择全部

（3）兄 可以不写参数

siblings（）可以找出所有的亲兄弟元素，但是不包括自己
nextAll （）找出当前元素之后的所有元素
prevAll（）找出当前元素之前的所有元素
next（）获取下一个兄弟元素
prev（）获取上一个兄弟元素

（4）特殊

hasClass（class）检查当前的元素是否含有某个特定的类，如果是，则返回true

eq（index）相当于$（“li：eq（index）”）

重点记住：parent（） children（） find（） siblings（） eq（）

1.2.8 jQuery绑定事件

jQuery对象.事件名（事件处理函数）

this代表当前元素$(this),不加引号，要绑定当前事件，仍要用this，this属于DOM事件不能用jQuery方法一般会把this转换为jQuery对象来使用——$(this)

show是显示元素，hide是隐藏元素

$(对象).index();获取当前元素的索引号，获取的索引号是真实的兄弟结构，无论是否同类标签

1.2.9 链式编程

元素设置方法后仍会返回调用该元素

2 jQuery样式操作

2.1 操作css方法$(对象).css()

（1）只写属性名，则返回属性值

获取的是jQuery对象伪数组中第一个对象的样式值

属性名后没有：

js中获取的是样式起作用的值（计算后样式）

div.style.属性：对应的是行内样式，只能获取行内式的样式属性值，无法获取嵌入式和外链式的样式

（2）写属性名加属性值，修改样式。必须加引号，且用“，”分割，属性值为是数字的时候，可以不用引号也可以不加“，”。

（3）以对象的形式进行修改的时候，可以不加引号，用“，”分割，如果是复合属性则必须采用驼峰命名法，且属性值不是数字的时候必须加引号

2.2 设置类样式方法

（1）添加类

$(“div”).addClass("current")

（2）删除类

$(“div”).removeClass("current")

（3）切换类

$(“div”).toggleClass("current")

class的C必须大写，类名不加点

（4）hasClass判断有没有类名

2.3 jQuery类操作和className的区别

（1）className会覆盖原先的类名，而jQuery不会，className要想不覆盖需要将原有的类也新增的类都写上

（2）jQuery删除类不影响原先的类名

3 jQuery的动画效果

3.1 显示隐藏和切换

（1）显示隐藏

语法规范：show（[speed,[easing],[fn]]）

参数都可以省略
speed：三种预定速度之一的字符串（“slow”，“normal”，“fast”）或表示动画时长的毫秒数值
easing：（Optional）用来指定切换效果，默认是“swing”，可用参数“linear”
fn：回调函数，在动画完成执行的函数，每个元素执行一次

（2）切换toggle（）语法规范和参数和显示隐藏一致。

一般情况下，我们不加参数，直接使用

3.2 下拉上拉和切换

（1）语法规范：和显示隐藏相同

slideDown slideUp slideToggle

3.3 hover事件切换

（1）

（2）hover(function，function) 鼠标经过和离开分别触发不同的函数

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

3.4 动画排队问题解决

（1）停止stop（）

谁做动画就写在谁的前面，stop结束的是前面的动画

3.5 淡入淡出动画

fadeIn fadeOut fadeTo fadaTaggle

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

其中fadeTo速度和时间必须写

3.6 animate（）自定义动画

animate（params，[speed]，[easing

],[fn]）

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

其余参数都可以省略

不能改变没有中间状态的样式，颜色也无法做动画

鼠标经过某个item时，宽度变为600px，让其他item变为100px

animate函数的原理是定时器，而定时器声明有先有后，会造成一个问题，变化的过程中，总宽度会大于1000px，使得原来1000px宽的盒子装不下子盒子，一部分子盒子掉下去

4 jQuery属性操作

4.1 设置或获取元素的属性

（1）固有属性值prop（）操作的是元素的属性（标签的固有属性会被浏览器翻译为对象的属性）

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

（2）标签的自定义属性attr（）操作的是标签的属性，参数写的是标签属性名，获取到的属性值一般是字符串

也可以获取H5自定义属性

因为设置的新标签属性不被翻译为对象的属性，所以prop无法获取其属性值，结果为undefined

（3）数据缓存data（）这个里面的数据是存在元素的内存里面的

data为一个方法，会为对象创建一个属性，将数据存在其中，并且可以获取其属性值，不会改变其数据类型

获取与设置的方式与前两个相同

这个方法获取H5自定义属性，不用写data-开头，（data-开头的自定义属性存在对象dataSet属性中，）而且返回的是数字型

（4）（选择器：checked）属性，判断表单元素被选中的个数,返回的是伪数组。.length可以获取其长度

4.2 获取html值和表单值的内容

(1) 普通获取

ele.innerHTML

input.value

(2) jQuery获取

text获取的是选择出元素全部的值,不是第一个元素的值

(3) parents()可以找到当前元素的祖级(包括body,hrml)

closest("")获取离当前元素最近的符合选择器的祖先元素,不写参数无法获取元素

(4) toFixed(num)保留num位小数,超过的会四舍五入

5 jQuery元素操作

5.1 遍历元素

(1)语法一: $("div").each(function(index,domEle){})

可以自己指定参数index,domEle名称
第二个参数一定是DOM对象,需要使用DOM方法无法使用jQuery方法,需要转换
jQuery对象调用each方法
也可以使用for循环来遍历jQuery对象(得到的是伪数组)
$(domEle)等价于$("选择器").eq(index)

(2)语法二:$:each({目标数据},function(i,ele)) 遍历数组时,i表示索引,ele表示数组元素

第一个参数表示遍历到的属性名
第二个参数表示遍历到的属性值

5.2 创建添加删除元素

(1)创建元素

var li = $("<li></li>")
创建出来的是jQuery对象,是可以调用jQuery方法的
新添加的元素li是以伪数组的形式表现，要想直接选取出来需要li[0]来选取

5.2.1 添加元素

(1)内部添加

$("ul").append(li) //添加到内容最后面
$("ul").preppend(li) //添加到内容最前面

(2)外部添加

var div = $("<div></div>")
element.after/before("内容")
内部添加,生成之后他们是父子关系
外部添加,生成之后他们是兄弟关系

5.2.2 删除元素

elelment.remove() //删除匹配的元素
element.empty(); //删除匹配子元素的子节点(清空元素的所有内容)
element.html("") //和第二个相似

6 jQuery尺寸和位置操作

6.1尺寸

以上参数为空,为获取
以上参数为数字,是修改
参数不必写代码

6.2 jQuery位置

(1)offset设置的距离文档的距离

和父级没有关系(无论父级有没有定位)
返回的是一个对象,包括left和top
offset().top/left获取顶部和左边
如果设置的盒子在父盒子中,添加offset需要其在父盒子定位时,会自动为其添加定位

(2)position()带有定位的父级坐标,父级没有定位,以文档为标准

只能获取不能设置偏移

(3)scrollTop和ScrollLeft被卷去的头和左边,不止获取也可以设置,

做动画时只能是html和body元素做动画,因为document

$(document).stop().animate({

// scrollTop: 0

// }); 不能是文档做动画，而应是html和body元素做动画化,document包含的东西太多,只需页面做动画

案例bug原因:

JS代码执行速度大于UI引擎渲染的速度

js执行完毕后,UI渲染速度过慢,第四个li的点击事件执行完毕,li变色,但页面仍在滚动中,继续执行滚动的事件,由于滚动只滚动到第四个li之前,所以最后导致变色停留着第三个li那里

7 jQuery事件

7.1 事件注册

7.1.1 jQuery单个事件注册

（1）语法： $(ele).click(function() {})

（2）内部使用侦听addEventListener注册事件，所以同名事件可以依次触发

（3）只能给已经存在的元素注册事件，新添加的不可以

7.1.2 事件处理on

on（）方法在匹配元素绑定一个或多个事件处理函数

（1）语法一：$("div").on({

事件一: function(){

};

事件二:function() {

};

});

事件处理程序一样时,可以采用下面的写法,语法二:

$("div").on("事件类型一事件类型二",function(){

})

(2)on可以实现事件委托(为新添加的元素绑定事件)

$("父选择器").on("事件类型","后代选择器(触发对象)",function(){

});

this指向的是触发对象
选择器可以是类名,id名
click绑定在父元素身上,触发对象是后代元素
可以给未来动态创建的元素绑定事件

7.1.3 off()事件解绑

(1)off()为空这个是解除了元素上的所有事件

(2)off("事件类型"/"事件类型",“触发对象”)解除指定的事件类型/事件委托

解绑事件委托,事件本身还存在

(3)one()事件,只能触发一次事件,其余特性和on相似

7.1.4 事件自动触发

(1)$("选择器").事件();

(2)$("选择器").trigger("事件");

(3)$("选择器").triggerHandler("事件"); //不会触发元素的默认行为

自动触发事件相当于,调用对象的方法函数()

7.2 事件处理

7.2.1 阻止默认和冒泡

8 插件的使用

8.1 插件常用网址

8.2 插件使用

8.3 图片的懒加载

当我们图片滑动到可视区域,再显示图片

此插件必须写在所有DOM元素(图片)的下面或者写在页面加载事件里

8.4 bootstrap插件

(1)引入bootstrapcss文件

(2)引入jQuery文件

(3)引入bootstrapjs文件

(4)复制组件代码

8.5 本地存储问题

把我们的数组对象转换为字符串格式JSON.stringify()(数据的格式有严格要求，所以最好使用此方法转换)
获取本地存储的数据,我们需要把里面的字符串数据转换为对象格式JSON.parse()
当本地储存为空时,getIem获取的值是null

jQuery中index()获取的是其在父元素中的索引值,而不是$获取的元素数组中的索引.

dblclick双击事件

9 jQuery扩展

9.1 多库共存

（1）别人已经使用$，使用jQuery

（2）别人使用了jQuery和$，在失效之前传递控制权给别的变量，var XX = $.noConflict()

半自动学习机丶

关注

5
点赞
踩
3

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录