首页  思维导图  详情

Jquery

2021-02-07 09:44:19   34  举报





AI智能生成

jQuery思维导图

思维导图

JQuery

读书笔记

作者其他创作

大纲/内容

jQuery简介与使用方式

http://jquery.com
一个优秀的JS函数库
封装简化DOM操作

引入jQuery库

引入方式

本地引入

CDN远程引入

引入版本

测试版（未压缩版）

生产版（压缩版）

使用jQuery

使用jQuery函数：$/jQuery

使用jQuery对象：$xxx(执行$()得到的)

jQuery的功能

HTML元素选取（选择器）

HTML元素操作

CSS操作

HTML事件处理

JS动画效果

链式调用

可以通过 . 不断调用jQuery对象的方法

读写合一

读数据与写数据用的是一个函数

浏览器兼容

易扩展插件

ajax封装

使用jQuery核心函数

jQuery函数：$/jQuery

作为一般函数调用：$(param)

param是function: 相当于window.onload = function(文档加载完成的监听)

param是选择器字符串: 查找所有匹配的DOM元素, 返回包含所有DOM元素的jQuery对象

param是DOM元素: 将DOM元素对象包装为jQuery对象返回 $(this)

param是标签字符串: 创建标签DOM元素对象并包装为jQuery对象返回

作为对象使用: $.xxx()

例如：
$.each():隐式遍历数组
$.trim():去除俩段空格

选择器

说明

选择器本身只是一个有特定语法规则的字符串，没有实质用处

它的基本语法规则使用的就是CSS的选择器语法，并对其进行了扩展

只有调用$()，并将选择器作为参数传入才能起作用

$(selector)作用：
根据选择器规则在整个文档中查找所有匹配的标签的数组，并封装成jQuery对象返回

分类

基本选择器

基本常用的选择器

#id
ID选择器
根据给定的id匹配元素

$(" #title")
选取id为title的元素

element
标签选择器
根据给定的标签名匹配元素

$("h2" )
选取所有h2元素

.class
类选择器
根据给定的class匹配元素

$(" .title")
选取所有class为title的元素

*
通配符
匹配所有元素

$("*" )
选取所有元素

selector1,selector2,selectorN
并集选择器
将每一个选择器匹配的元素合并后一起返回

$("div,p,.title" )
选取所有div、p和拥有class为title的元素

selector1selector2selectorN
交集选择器
匹配指定class或id的某元素或元素集合

$("h2.title")
选取所有拥有class为title的h2元素

层次选择器

用来查找子元素，后代元素，兄弟元素的选择器

ancestor descendant
后代选择器
选取ancestor元素里的所有descendant（后代）元素

$("#menu span" )
选取#menu下的<span>元素

parent >child
子选择器
选取parent元素下的child（子）元素

$(" #menu>span" )
选取#menu的子元素<span>

prev+next
相邻元素选择器
选取紧邻prev元素之后的next元素

$(" h2+dl " )
选取紧邻<h2>元素之后的同辈元素<dl>

prev~sibings
同辈元素选择器
选取prev元素之后的所有siblings元素

$(" h2~dl " )
选取<h2>元素之后所有的同辈元素<dl>

过滤选择器

在原有选择器匹配的元素中进一步进行过滤的选择器

基本过滤选择器
可以选取第一个元素、最后一个元素、索引为偶数或奇数的元素
可以根据索引的值选取元素
还支持一些特殊的选择方式

:first
选取第一个元素

$(" li:first" )
选取所有<li>元素中的第一个<li>元素

:last
选取最后一个元素

$(" li:last" )
选取所有<li>元素中的最后一个<li>元素

:even
选取索引是偶数的所有元素（index从0开始）

$(" li:even" )
选取索引是偶数的所有<li>元素

:odd
选取索引是奇数的所有元素（index从0开始）

$(" li:odd" )
选取索引是奇数的所有<li>元素

:eq(index)
选取索引等于index的元素（index从0开始）

$("li:eq(1)" )
选取索引等于1的<li>元素

:gt(index)
选取索引大于index的元素（index从0开始）

$(" li:gt(1)" )
选取索引大于1的<li>元素（注：大于1，不包括1）

:lt(index
选取索引小于index的元素（index从0开始）

$(“li:lt(1)” )
选取索引小于1的<li>元素（注：小于1，不包括1）

:not(selector)
选取去除所有与给定选择器匹配的元素

$(" li:not(.three)" )
选取class不是three的元素

:header
选取所有标题元素，如h1~h6

$(":header" )
选取网页中所有标题元素

:focus
选取当前获取焦点的元素

$(":focus" )
选取当前获取焦点的元素

:not(selector)
选取去除所有与给定选择器匹配的元素

$(" li:not(.three)" )
选取class不是three的元素

:header
选取所有标题元素，如h1~h6

$(":header" )
选取网页中所有标题元素

:focus
选取当前获取焦点的元素

$(":focus" )
选取当前获取焦点的元素

可见性过滤选择器
可以通过元素显示状态来选取元素

:visible
选取所有可见的元素

$(":visible" )
选取所有可见的元素

:hidden
选取所有隐藏的元素

$(":hidden" )
选取所有隐藏的元素

内容选择器

:contanins(text)
匹配包含给定文本的元素

$("div:contains('John')")
查找所有包含 "John" 的 div 元素

:empty
匹配所有不包含子元素或者文本的空元素

$("td:empty")
查找所有不包含子元素或者文本的td元素

:has(selector)
匹配含有选择器所匹配的元素的元素

$("div:has(p)").addClass("test")
给所有包含 p 元素的 div 元素添加一个 text 类

:parent
匹配含有子元素或者文本的元素

$("td:parent")
查找所有含有子元素或者文本的 td 元素

属性选择器
通过HTML元素的属性来选择元素

[attribute]
选取包含给定属性的元素

$(" [href]" )
选取含有href属性的元素

[attribute=value]
选取等于给定属性是某个特定值的元素

$(" [href ='#']" )
选取href属性值为“#”的元素

[attribute !=value]
选取不等于给定属性是某个特定值的元素

$(" [href !='#']" )
选取href属性值不为“#”的元素

[attribute^=value]
选取给定属性是以某些特定值开始的元素

$(" [href^='en']" )
选取href属性值以en开头的元素

[attribute$=value]
选取给定属性是以某些特定值结尾的元素

$(" [href$='.jpg']" )
选取href属性值以.jpg结尾的元素

[attribute*=value]
选取给定属性是以包含某些值的元素

$(" [href* ='txt']" )
选取href属性值中含有txt的元素

[selector] [selector2] [selectorN]
选取满足多个条件的复合属性的元素

$("li[id][title=新闻要点]" )
选取含有id属性和title属性为新闻要点的<li>元素

表单选择器

表单

:input
匹配所有 input, textarea, select 和 button 元素

$(":input")
查找所有的input元素

:text
匹配所有的单行文本框

$(":text")
查找所有文本框

:password
匹配所有密码框

$(":password")
查找所有密码框

:radio
匹配所有单选按钮

$(":radio")
查找所有单选按钮

:checkbox
匹配所有复选框

$(":checkbox")
查找所有复选框

:submit
匹配所有提交按钮

$(":submit")
查找所有提交按钮

:image
匹配所有图像域

$(":image")
匹配所有图像域

:reset
匹配所有重置按钮

$(":reset")
查找所有重置按钮

:file
匹配所有文件域

$(":file")
查找所有文件域

表单对象属性

:enabled
匹配所有可用元素

$("input:enabled")
查找所有可用的input元素

:disabled
匹配所有不可用元素

$("input:disabled")
查找所有不可用的input元素

:checked
匹配所有选中的被选中元素

$("input:checked")
查找所有选中的复选框元素

:selected
匹配所有选中的option元素

$("select option:selected")
查找所有选中的选项元素

工具

$.each()
遍历数组或对象中的数据

$.trim()
去除字符串两边的空格

$.type(obj)
得到数据的类型

$.isArray(obj)
判断是否是数组

$.isFunction(obj)
判断是否是函数

$.parseJSON(json)
解析json字符串转换为js对象/数组

ajax

使用jQuery对象

即执行jQuery核心函数返回的对象
jQuery对象内部包含的是dom元素对象的伪数组（可能只有一个元素）
jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作dom

. 属性和方法

基本行为

size()/length
得到dom元素的个数

[index]/get(index)
得到指定下标对应的dom元素

each(function(index, domEle){})
遍历所有dom元素

index()
得到当前dom元素在所有兄弟中的下标

属性

操作内部标签的属性或值

attr()
removeAttr()
prop()
操作任意属性

addClass()
removeClass()
操作class属性

html()
val()
操作HTML代码/文本/值

CSS

操作标签的样式

css()
设置css样式/读取css值

css(styleName):
根据样式名得到对应的值

css(styleName, value):
设置一个样式

*$('p:eq(1)').css({
color: '#ff0011',
background: 'blue',
width: 300,
height: 30
})
设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)

css({多个样式对}):
设置多个样式

位置坐标

offset():
读/写当前元素坐标(原点是页面左上角)

position():
读当前元素坐标(原点是父元素左上角)

scrollTop()/scrollLeft():
读/写元素/页面的滚动条坐标

尺寸

* width()/height(): width/height
* innerWidth()/innerHeight(): width + padding
* outerWidth()/outerHeight(): width + padding + border

文档

对标签进行增删改操作

offset() 读/写当前元素坐标
相对页面左上角的坐标

position() 读写当前元素坐标
相对于父元素左上角的坐标

scrollTop()/scrollLeft() 读/写元素/页面的滚动条坐标

添加/替换元素

append(content)/appendTo(content)
向当前匹配的所有元素内部的最后插入指定内容

prepend(content)/prependTo(content)
向当前匹配的所有元素内部的最前面插入指定内容

before(content)
将指定内容插入到当前所有匹配元素的前面

after(content)
将指定内容插入到当前所有匹配元素的后面替换节点

replaceWith(content)
用指定内容替换所有匹配的标签删除节点

删除元素

empty()
删除所有匹配元素的子元素

remove()
删除所有匹配的元素

筛选

根据指定的规则过滤内部的标签

first()
获取第一个元素

last()
获取最后一个元素

eq(index|-index)
获取下标位置元素

filter(selector) 对当前元素提要求
筛选出与指定表达式匹配的元素集合。
这个方法用于缩小匹配的范围。用逗号分隔多个表达式

not(selector) 对当前元素提要求，并取反
从匹配元素的集合中删除与指定表达式匹配的元素

has(selector) 对子孙元素提要求
保留包含特定后代的元素，去掉那些不含有指定后代的元素。

在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签
children(): 子标签中找
find() : 后代标签中找
parent() : 父标签
prevAll() : 前面所有的兄弟标签
nextAll() : 后面所有的兄弟标签
siblings() : 前后所有的兄弟标签

事件

处理事件监听相关

eventName(function(){})
绑定对应事件名的监听

例如：$('#div').click(function(){});

on(eventName, funcion(){})
通用的绑定事件监听

例如：$('#div').on('click', function(){})

事件解绑：
off(eventName)

事件的坐标

event.clientX, event.clientY 相对于视口的左上角
event.pageX, event.pageY 相对于页面的左上角
event.offsetX, event.offsetY 相对于事件元素左上角

事件相关处理

停止事件冒泡 : event.stopPropagation()
阻止事件默认行为 : event.preventDefault()

区别mouseover与mouseenter

mouseover: 在移入子元素时也会触发, 对应mouseout
mouseenter: 只在移入当前元素时才触发, 对应mouseleave
hover()使用的就是mouseenter()和mouseleave()

事件委托
将子元素的事件委托给父元素处理

jQuery的事件委托API
* 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)
* 移除事件委托: $(parentSelector).undelegate(eventName)

例如
//事件委托
$('ul').delegate('li', 'click', function () {
this.style.background = 'red'
})

$('#btn1').click(function () {
$('ul').append('<li>xxxxxxxxx</li>')
})

$('#btn2').click(function () {
// 移除事件委托
$('ul').undelegate()
})

效果

实现一些动画效果

淡入淡出:
不断改变元素的透明度来实现的

fadeIn():
带动画的显示

fadeOut():
带动画隐藏

fadeToggle():
带动画切换显示/隐藏

滑动动画

slideDown():
带动画的展开

slideUp():
带动画的收缩

slideToggle():
带动画的切换展开/收缩

显示隐藏，
默认没有动画

show():
(不)带动画的显示

hide():
(不)带动画的隐藏

toggle():
(不)带动画的切换显示/隐藏

jQuery动画本质 :
在指定时间内不断改变元素样式值来实现的

animate():
自定义动画效果的动画

stop():
停止动画

window.onload与 $(document).ready()的区别

window.onload
* 包括页面的图片加载完后才会回调(晚)
* 只能有一个监听回调

$(document).ready()
* 等同于: $(function(){})
* 页面加载完就回调(早)
* 可以有多个监听回调

多库共存

如果有2个库都有$, 就存在冲突

jQuery库可以释放$的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQuery了
API : jQuery.noConflict()

jQuery插件

扩展插件

扩展jQuery的工具方法

$.extend(object)
扩展jQuery的工具方法

//扩展$
$.extend({
min: function (a, b) {
return (a < b) ? a : b
},
max: function (a, b) {
return (a > b) ? a : b
}
})

扩展jQuery对象的方法

$.fn.extend(object)
扩展jQuery对象的方法

$.fn.extend({
checkAll: function () {
// console.log('checkAll')
this.prop('checked', true)
},
unCheckAll: function () {
this.prop('checked', false)
}
})

jQuery插件

理解

基于jQuery编写的扩展库

http://plugins.jquery.com/

jquery-validation

表单插件

jquery UI
http://jqueryui.com

手风琴

自动搜索匹配

选项卡

laydate
http://www.layui.com/laydate

日期插件