jQuery思维导图

JQuery
简介
是一个对JavaScript进行了封装的库，简化了用户使用JavaScript
特点：写得少做的多
使用方法
在页面引入jQuery库：引入外部的JS文件
$:jQuery的全局对象，代表的就是jQuery
$(function(){})：jQuery代码的入口函数。原始的写法：
$(document).ready(function(){})---window.onload
简写为：$(function(){})
jquery的选择器
强调
jQuery的CSS()函数--作用
是jQuery中用于设置元素CSS样式的函数
CSS('样式属性名','属性值')：设置单个样式
css({属性名1：属性值1，属性名2：属性值2...})
eq(index)：匹配一个给定索引值的元素。页面中元素的索引值从0开始
基本选择器
id选择器：$('#id')
class选择器（类选择器）：$('.class')
标签名选择器：$('标签名')
*通配符选择器：$('*')
合并选择器：$('#id,.class,....')
过滤选择器：是通过特定的过滤规则来筛选出所需的DOM元素。以":"开头
基本过滤选择器
:first--选择第一个元素
:last--选择最后一个元素
:not(section)--去除所有与给定选择器相匹配的元素
:even--匹配所有索引值为偶数的元素，从索引0开始计数
:odd--匹配所有索引值为奇数的元素，从索引0开始计数
:eq(index)--匹配一个给定索引值的元素
:gt(index)--匹配一个大于给定索引值的元素
:lt(index)--匹配一个小于给定索引值的元素
内容过滤选择器
:contains--匹配包含给定文本的元素
:empty--匹配所有不包含子元素或文本的空元素
:has(selector)--匹配含有选择器所匹配的元素的元素
:parent--匹配含有子元素或文本的元素
可见性选择器
:hidden--匹配所有不可见的元素，或者type为hidden的元素。不仅包含样式属性display为none的元素，也包含文本隐藏域<input type="hidden">和visible:hidden之类的元素
:visible--匹配所有可见元素
属性过滤选择器
[attribute]：匹配包含给定属性的元素
[attribute=value]：匹配给定的属性是某个特定值的元素
[attribute!=value]：匹配所有不含某个指定的属性，或者属性不等于特定值的元素
[attribute^=value]：匹配给定的属性是以某些值开头的元素
[attribute$=value]：匹配给定的属性是以某些值结尾的元素
[attribute*=value]：匹配给定的属性是包含某些值的元素
子元素选择器：索引值从1开始
:first-child--匹配第一个子元素
:last-child--匹配最后一个子元素
:nth-child
:nth-child(even/odd)---选取父元素下索引值为奇数或偶数的元素
:nth-child(2)---选取父元素下索引值为2的元素
:nth-child(2n)---选取父元素下索引值为2的倍数的元素
表单选择器
:text--单行文本框
:password--密码框
jQuery的属性
操作属性
attr(name)：获取属性值。参数name是属性名
attr(key,fn)：修改属性值
参数key：代表元素的属性名
参数fn：是一个函数，将该函数的返回值作为作为key的属性
attr(key,value)：修改属性值，将value的值赋给key
removeAttr(name)：删除指定的属性
操作样式
css(key,value)、css({'属性名1':'属性值1','属性名2':'属性值2'...})
addClass(class|fn)：为匹配的元素添加指定的类名
removeClass(class|fn)：从所有匹配的元素中删除全部或指定的类
参数可以是类名，也可以是函数(将函数的返回值作为类名)
toggleClass(class|fn)：如果所匹配的元素存在某个类就删除，不存在就添加
操作元素的宽度高度
width()：获取元素的宽度
width(value):设置元素的宽度
height()：获取元素的高度
height(value)：设置元素的高度
操作元素的内容
html()：获取匹配元素的内容（底层使用的元素innerHTML）
html(val)：设置匹配元素的内容（可以识别标签）
text()：获取匹配元素的文本（底层使用的元素innerText属性，不能识别html标签）
text(val)：设置匹配元素的文本（不能设置标签）
操作值
val()：获取匹配元素的value属性值
val(args)：设置匹配元素的value属性值
查找
add()
find(exp):
jQuery的自定义动画
animate(params,[speed],[easing],[fn])
params:一组包含作为动画属性和终值样式属性及其值的集合
speed：三种预定速度之一的字符串('slow','normal','fast')
easing:动画的效果，要使用的擦除效果的名称（需要插件）
jQuery的对象访问
index([selector|element])：获取页面元素的索引值，索引值从0开始
jQuery的事件处理
事件绑定
bind(type,[data],fn):给匹配元素的事件绑定处理程序
参数type：事件类型
参数data：作为event.data传递事件处理程序的数据对象
参数fn：事件处理程序
模拟鼠标悬停事件：当鼠标悬停到目标对象上方、离开目标对象时触发
hover(over,out)
参数over：是一个函数，鼠标悬停到目标对象上方时触发
参数out：是一个函数，鼠标离开目标对象时触发
强调：在jQuery的应用中如果某个对象同时会触发mouseover、mouseout事件，建议使用hover
为匹配的元素绑定一个一次性的事件处理函数
one(type,[data|[fn]])
bind()的反向操作,从每一个匹配的元素中删除绑定事件，如果没有参数，则删除所有绑定事件
unbind(type,[data],fn)
on(events,[selector],[data],fn)
在选择元素上绑定一个或多个事件的事件处理函数
参数events：一个或多个用空格分隔的事件类型
off：(events,[selector],fn)
在选择元素上移除一个或多个事件的事件处理函数
事件类型
click：鼠标单击
blur：失去焦点
focus：获得焦点
change：元素的值发生改变时触发
jQuery的动画
显示/隐藏：show()、hide()
有三个参数(slow/normal/fast)
交替显示/隐藏：toggle(speed)
向上收缩/向下展开：通过高度的变化来显示/隐藏元素
slideUp([speed],[easing],fn)：向上收缩
slideDown([speed],[easing],fn)：向下展开
slideToggle([speed],[easing],fn)：交替
淡入淡出：通过改变匹配元素的透明度来显示和隐藏元素
fadeIn([speed],[easing],fn):通过不透明度的变化来实现所有匹配元素的淡入效果
fadeOut([speed],[easing],fn):通过不透明度的变化来实现所有匹配元素的淡出效果
fadeToggle([speed],[easing],fn)：交替实现元素的淡入和淡出

jQuery思维导图相关推荐

5张思维导图，jQuery知识点梳理
好记性不如烂笔头,有人帮你,是你的幸运,没人帮你,才是正常的生活. 整理了以前的jquery思维导图,个别添加了小案例,有需要的小伙伴自行下载查看哦~ 一.关于选择器二.关于DOM操作三.关于事件 ...
jQuery 选择器汇总-思维导图-选择器
jQuery 选择器汇总通过思维导图让你更加系统全面的了解jQuery的选择器具体参考官网:jQuery中文网 http://www.baidu.com/link?url=9X1e6hj8jpAP ...
全网最全的JQuery框架思维导图来了
也许有人会问,都21年了前端仔还要学习jq框架吗?我的答案是,你可以不学,但个人建议还是学习了解一下.学了jQuery对写代码和封装库都有帮助,一些老项目维护也需要用到.既然是学习了解不必太深究的,看 ...
嵌套思维导图_Python 这方面，8张思维导图助你转身变大牛！
思维导图是整理知识的一种非常有效的手段,这里分享几张 Python 基础学习的思维导图,可以帮助自己巩固下基础,有需要的小伙伴可以加紧时间收藏哦! 评论区扣1 即可领取以下学习教程! 下面是北京大学毕 ...
python变量命名规则思维导图_Python思维导图详解
Python思维导图 Python思维导图详解第一阶段:学习Python基础语法,主要学习变量的使用以及类型.变量的计算和输入输出.变量的命名.运算符.if判断语句.while循环语句.字符串.常量 ...
【SpringBoot项目实战+思维导图】瑞吉外卖①(项目介绍、开发环境搭建、后台登陆/退出功能开发)
文章目录软件开发整体介绍软件开发流程角色分工软件环境瑞吉外卖项目介绍项目介绍产品原型技术选型功能架构角色开发环境搭建数据库环境搭建创建数据库数据库表导入数据库表介绍 Ma ...
前端学习路线图--陆神版本思维导图
说起前端届IT教育老大,怎么能没有千锋的名字,学前端,来千锋,入股不亏,学习带飞! 你可能兜兜转转看了不少路线图只是得到了罗列的知识点和一张思维导图,但是学这些能做些什么?学到这个程度可以找到什么样的 ...
15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)
前言设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经验的凝练和总结,能更大限度的优化代码以及对已有代码的合理重构.作为一名合格的前端工程师 ...
Java精美思维导图
前言只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 在学习的过程中画了几份脑图,都是我认认真真画的,现在 ...

jQuery思维导图

jQuery思维导图相关推荐

最新文章

热门文章