jQuery 学习笔记

jQuery JS库
小
强大选择器
DOM操作
事件处理
兼容性
完善的Ajax处理
链式操作
隐式迭代
完善的文档
丰富的插件

下载页面
https://code.jquery.com/
https://github.com/jquery/jquery/releases
线上引用
https://www.bootcdn.cn/jquery/

jQuery API手册
https://api.jquery.com/

基本语法
$(selector).action()
美元符号$定义jQuery
选择符selector查询/查找HTML元素
action()执行对元素的操作

为了防止文档在完全加载(就绪)之前运行代码
js window.onload=function(){}
jQuery $(document).ready(function(){...})
       $(function(){...})

将DOM对象转换为jQuery对象
$(DOM对象) 例如$(document) $(this)
将jQuery对象转换为DOM对象
jQuery对象[n] 或 jQuery对象.get(n)

jQuery选择器
$(CSS选择器字符串)
例如 $('p') $('.abc') $('#aaa') $('div#test') $('h1.abc') $('[href]') $('[href="#"]') ...

jQuery CSS方法
css(属性名,属性值) 设置一个属性
css({属性名:属性值,属性名:属性值...}) 设置多个属性
css(属性名) 获取一个属性的值

jQuery 事件
单击事件
click(function(){...})
鼠标事件
mousemove当鼠标指针在指定的元素中移动时
mouseover(fn) mouseout(fn) hover(fn,fn)
获取焦点 失去焦点
focus(fn) blur(fn)
让事件只执行一次
one(事件名,fn)
让事件反复执行
on(事件名,fn)

jQuery 效果
?(速度，回调函数)
回调函数是效果执行完毕之后执行的代码
hide()隐藏 show()显示 toggle()切换显示和隐藏
fadeIn()淡入 fadeOut()淡出 fadeToggle()淡入淡出互相切换
fadeTo()渐变为给定的不透明度(0-1)
slideDown()下滑 slideUp()上滑 slideToggle()切换上下滑动

animate({参数},速度,回调函数) 动画
参数 形成动画的CSS属性，动画最终状态的CSS属性
使用驼峰法书写CSS属性名，例如marginLeft paddingTop
属性设置可以提供具体值，也可以使用+=或-=的形式
可以调节的属性一般是数值，不包含色彩动画
如果希望动画能先后执行而不是同时执行，查阅“animate queue”或“animate 队列”

jQuery 获得内容和属性
text() 设置或获取所选元素的文本内容
html() 设置或获取所选元素的内容(包括HTML标记)
val() 设置或获取表单字段的值
attr() 设置或获取属性值和css()方法类似，可以一次设置一个属性，也可以一次设置多个属性

jQuery 添加元素
append() 在被选元素的结尾插入内容
prepend() 在被选元素的开头插入内容
after() 在被选元素之后插入内容
before() 在被选元素之前插入内容

jQuery 删除元素
remove() 删除被选元素(以及子元素)
empty() 清空被选元素(删除子元素)

jQuery 添加或删除CSS类
addClass() 向被选元素添加一个或多个类
removeClass() 向被选元素删除一个或多个类
toggleClass() 对被选元素进行添加/删除类的切换操作

jQuery 尺寸
width() 设置或获取元素的宽度(不包括margin,padding,border的尺寸)
height() 设置或获取元素的高度(不包括margin,padding,border的尺寸)
innerWidth() 获取元素的宽度(包括padding的尺寸)
innerHeight() 获取元素的高度(包括padding的尺寸)
outerWidth() 获取元素的宽度(包括padding,border的尺寸)
outerHeight() 获取元素的高度(包括padding,border的尺寸)

jQuery 遍历
eq() 指定序号的元素，首个元素的序号是0
index() 获取被选元素的序号，首个元素的序号元素是0
parent() 获取被选元素的直接父元素
parents() 获取被选元素的所有祖先元素，一直到文档的根元素
children() 获取被选元素的直接子元素
find() 获取被选元素的所有后代元素，一直到最后一个后代
siblings() 获取被选元素的所有同胞元素(同级元素)
next() 获取被选元素的下一个同胞元素
prev() 获取被选元素的上一个同胞元素
first() 获取被选元素中的第一个元素
last() 获取被选元素中的最后一个元素
filter() 获取被选元素中符合条件的元素
not() 获取被选元素中不符合条件的元素

点击事件嵌套的解决办法
问题：每次点击外部的click事件后，内部的click事件都会绑定一次，因此会遍历很多次？
unbind() 方法移除被选元素的事件处理程序。
该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。
ubind() 适用于任何通过 jQuery 附加的事件处理程序。
one() 方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。
当使用 one() 方法时，每个元素只能运行一次事件处理器函数。