- http://jquery.cuishifeng.cn/ jquery使用的API
- https://www.bootcdn.cn/ jquery下载地址
- https://jqueryvalidation.org/ 表单验证插件,官网
- www.jqueryui.com jqueryUI官方插件，功能多且全面
- http://www.jeasyui.net/ 是一组基于jQuery的UI插件集合,Demo
- http://v3.bootcss.com/ HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目
jquery的基本使用
-
获取jquery对象jQuery(选择器|dom节点,上下文对象)==>$(css选择器|dom节点,上下文对象)
(1) 上下文对象可以是css选择器、jquery对象
(2) jquery对象只能用jquery的方法
(3) jquery对象得到的是类数组
a) length 若length为0，说明获取不到该jquery对象
b) jquery 得到版本号，用于判断是否为jquery对象
c) [索引] 获取dom节点 -
dom节点与jquery对象的转换
(1) jquery对象转成dom节点
[索引]
(2) dom节点转成jquery对象
jquery(dom节点) -
延迟代码执行
a) 第一种方式：jQuery( function($){} )
b) 第二种方式：jQuery(document).ready(function(){})
jquery选择器
1. 基本选择器
- ID选择器$(“#save”)
- 类选择器$(“.class”)
- 标签选择器$(“div”)
- 复合选择器 $(“div,span,p.myClass”)
- 属性选择器$(‘[id=box]’)
$ (‘li[data-index]’):获取有data-index属性的所有元素
$ (‘li[data-index!=10]’):data-index属性不等于10的元素,css目前未支持
$ (‘li[data-index^=10]’):data-index属性以10开头的元素
$ (‘li[data-index$=10]’):data-index属性以10结尾的元素
$ (‘li[data-index*=10]’):data-index属性包含10的元素
2. 表单选择器
:text
:radio //匹配所有单选按钮
:checkbox //匹配所有复选按钮
:selected //获取已选择的option元素
:checked //匹配所有被选中的元素(复选框、单选框等,option选项)
3. 可见性
:hidden //匹配所有不可见元素(display:none)，或者type为hidden的元素
:visible //匹配所有可见元素
4. 筛选选择器
:odd/:even, :gt(n)/:lt(n) 筛选范围（索引支持负数）
例：$("#output li:even").css(‘background’, ‘blue’);
:contains(奥巴马) 筛选出包含“奥巴马”这三个字的元素
5. 筛选方法
(1) first() / last() 获取集合中第一个/最后一个元素
(2) eq(index|-index) 获取第N个元素,n支持负数(表示从后面查找)
(3) filter(选择器|jq对象|dom节点) 缩小匹配范围，将被匹配到的jq对象进行过滤，得到过 滤后的jq对象
(4) not(选择器|jq对象|dom节点) 缩小匹配范围，将被匹配到的jq对象进行过滤,除去过滤后 的jq对象
(5) has(选择器|dom节点) 将匹配到的jq对象进行过滤，匹配到有这个儿子的jq对象
例：$("#output li").has(".aa").css(‘background-color’,‘red’);
元素关系方法
1. 查找子元素
- find(expr|obj|ele): 查找后代元素
ele.find(‘*’) 获取ele元素的所有后代 - children([expr]): 取得匹配元素的所有子元素
2. 查找父级元素
- parent([expr]): 获取父元素
- parents([expr]): 取得所有父级元素
- closest(expr|obj|ele): 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素
- offsetParent(): 返回第一个有定位属性(absolute,relative,fixed)* 的父元素,如 果没有定位父级，则返回html元素
3. 查找兄弟元素
- next([expr]): 返回下一个同辈元素 ==> nextElementSibling
- prev([expr]): 获取前一个同辈元素 ==> previousElementSibling
- nextAll([expr]): 获取当前元素之后所有的同辈元素
- prevAll([expr]) 获取当前元素之前所有的同辈元素
- siblings([expr]) 获取当前元素的所有兄弟元素（除自身以外的所有兄弟元素 = * prevAll + nextAll）
DOM节点操作
1. 增删改
(1) 创建jquery对象
$('<div/>');
$('<div>生成一个div</div>');
(2) 元素添加
① 内部元素添加(添加为子元素)
a) append(content|obj|ele|fn): 在元素内部最后面追加内容(后置)
b) prepend: 向元素内部增加内容(前置)
c) appendTo(父元素) //在父元素最后面插入子元素
d) prependTo(父元素) //在父元素最前面插入子元素
② 外部插入内容（添加为兄弟元素）
a) after: 在元素后面插入内容
b) before: 在元素前面插入内容
c) insertAfter(兄弟元素)
d) insertBefore(兄弟元素)
(3) 元素删除
① remove() 删除元素
② empty() 清空内容
(4) 元素复制
① clone([Event[,deepEvent]])
a) Event：（true 或 false）是否复制元素的行为，默认为false
b) deepEvent: （true 或 false）是否复制子元素的行为，默认为Event的值
2. 盒模型属性
(1) offset() 获取匹配元素相对于根元素的偏移量
返回一个对象，包含当前元素的top,left值
(2) position()
获取匹配元素相对(有定位属性)父元素的偏移量，如果没有定位父级，则相对于根元素(html)，返回一个对象，包含当前元素的top,left值。
(3) width(v) = width
取值/赋值,当传入v时，相当于css(‘width’,v)
(4) innerWidth() = width + padding; <==> clientWidth
(5) outerWidth() = width + padding + border; <==> offsetWidth
(6) outerWidth(true) = width + padding + border + margin