首页  思维导图  详情

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下的元素

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

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

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

日期插件