jQuery是 JavaScript 的类库
jQuery特点
写得少 干得多
jQuery优势
① 开源
② 便捷 的 选择器
③ 方便的dom操作
④ 丰富的动画操作
⑤ 简单的ajax操作
⑥ 兼容性
⑦ 方便的插件机制
jQuery缺点
额外的 添加 jQuery文件，增加网络传输量
jQuery版本
jQuery 1.X 支持IE
jQuery 2.X IE9+ 其他...
jQuery的基本语法
jquery标准的使用方式
$(document).ready(function(){
JS code
});
$(function(){
JS code
});
ready和onload的区别
1. ready 文档中的dom加载完就触发
onload 文档中的一切都加载完才触发
2. ready 可以绑多个事件,都会触发执行
onload 后面的事件 会覆盖前面的.
链式操作风格
jQueryDOM 与 JSDOM 的区别 以及相互转化
区别
JQDOM 通过$()获取到一个数组
JSDOM 通过get..Id()获取到一个对象
互相转化
JSDOM ===> JQDOM $(jsdom)
JQDOM ===> JSDOM jqdom[index]
jquery命名冲突
jQuery的选择器
基本选择器
* 通配符选择器
#ID ID选择器
.class 类选择器
TagName 标签选择器
selector1,selector2.. 组合选择器/分组选择器
层级选择器
selector selector 所有的后代元素
selector>selector 所有的子元素
selector+selector 紧邻着的下一个元素
selector~selector 紧邻着的所有元素
过滤选择器
:first 首个
:last 最后一个
:eq(index) 指定第几个
:lt(index) 索引小于
:gt(index) 索引大于
:odd 索引为奇数
:even 索引为偶数
:header 所有的h标签
:not(selector) 排除
内容选择器
:contains(text) 匹配包含指定文本的元素
:has(selector) 匹配含有指定选择器选择的元素的元素
:parent 匹配含有子元素或文本 的元素
:empty 匹配所有不包含有子元素的元素
可见性选择器
:hidden 匹配所有不可见元素
:visible 匹配所有可见元素
属性选择器
selector[attrname] 选择有指定属性名的元素
selector[attrname='value'] 属性值等于value
selector[attrname!='value'] 属性值不等于value
selector[attrname^='value'] 属性值必须以value开头的
selector[attrname$='value'] 属性值必须以value结尾的
selector[attrname*='value'] 属性值包含value
[][][].... 做进一步筛选
子元素选择器
:nth-child(n) 是否为父元素的第N个子元素
:first-child 是否为首个子元素
:last-child 是否为最后一个子元素
:only-child 是否为唯一的子元素(独苗)
表单选择器
:input 现在所有的表单控件
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
表单对象选择器
:enabled
:disabled
:checked
:selected
筛选
过滤
eq(index) 过滤出指定的某个
first() 过滤出首个
last() 过滤出最后一个
filter(selector) 从前面的集合中 过滤出满足后面条件
not(selector) 排除
slice(start, end) 从前面的集合中 截取出指定的一部分
has(selector) 含有指定选择器的元素的元素
hasClass() 判断前面的集合是否包含有某个类
is() 判断前面的集合 是否有元素 符合指定的表达式
map() 对JQDOM遍历,并获取一部分值出来.
查找
查找都是具有破坏性的操作,得到的对象 可能就不是前面集合的子集.
往里找
children() 子元素
find() 后代元素
往外找
parent() 父元素
parents() 父元素们
parentsUntil() 父元素们,直到指定的为止
offsetParent() 获取已定位的父元素
往后找
next() 紧邻着的一个同辈元素(后)
nextAll() 紧邻着的所有同辈元素(后)
nextUntil() 紧邻着的同辈元素,直到指定的某个为止(后)
往前找
prev() 紧邻着的一个同辈元素(前)
prevAll() 紧邻着的所有同辈元素(前)
prevUntil() 紧邻着的同辈元素,直到指定的某个为止(前)
其他
siblings() 除了自己以外的所有同辈节点
串联
add() 向集合内追加新元素
andSelf() 之前选中的集合,加入到当前集合内
enbd() 返回最后一个破坏性操作之前的状态
contents() 获取所有的子节点(包括文本)
文档操作
内部插入
append() 内部最后
appendTo() --
prepend() 内部最前
prependTo() --
外部插入
after() 外部之后
insertAfter() --
before() 外部之前
insertBefore() --
包裹
wrap() 将整个集合内的每个元素 包裹在指定元素内
wrapAll() 将整个集合元素 包裹在指定元素内
unwrap() 去掉包裹
wrapInner() 包裹在里面
替换
replaceWith() 替换谁
replaceAll() 谁被替换
删除
remove() 删除元素
empty() 清空子节点
复制
clone()
属性
属性操作
prop() HTMLDOM 系统
removeProp() --
attr() 系统 + 自定义
removeAttr()
class类
addClass() 添加一个类属性
removeClass() 移除一个类属性
toggleClass() 以上俩来回切换
HTML代码/文本/值
html() innerHTML
text() innerText
val() .value
CSS 操作
CSS
JQDOM.css(attr,value);
JQDOM.css({
attr : value,
attr : value,
attr : value
});
位置
offset() 获取/设置 元素相对于整个文档的位置 .left .top
position() 获取 已定位的父元素的元素位置
scrollLeft() 获取/设置 滚动条距离 左边的像素
scrollTop() 获取/设置 滚动条距离 上边的像素
尺寸
height([val|fn]) 获取/设置 CSS中设置的元素的高
width([val|fn]) 获取/设置 CSS中设置的元素的宽
innerHeight() 获取/设置 内容 + 内边距 的高
innerWidth() 获取/设置 内容 + 内边距 的宽
标准盒子模型:
outerHeight([soptions]) 获取/设置 内容+内边距+边框 的高
outerWidth([options]) 获取/设置 内容+内边距+边框 的宽
