1.jQuery [www.jquery.com]
(1)jQuery的特点
利用选择器查找要操作的节点,然后将
查找到的节点封装成一个jQuery对象。
通过调用jQuery对象的方法或者属性来
实现对底层被封装的节点的操作。
这样做的好处:
a.兼容性更好:jQuery对象考虑了浏览器的
差异性。
b.代码更简洁
(2)编程步骤 (hello.html)
step1,使用jQuery提供的选择器来查找
要操作的节点。
step2,调用jQuery对象的方法或者属性。
(3)jQuery对象与dom对象之间的转换(hello.html)
1)dom对象 —> jQuery对象
var
obj=
(obj);
2)jQuery对象 —> dom对象
obj.get(0)或者
obj.get()[0]或者$obj[0]
2,选择器 selector
(1)基本选择器 (s1.html)
1)#id
2)class
3)element
4)selector1,selector2,..
5)*
(2)层次选择器 (s2.html)
1)selector1 selector2 查找后代(满足selector2的要求)
2)selector1>selector2 只查找子节点
3)selector1+selector2 查找下一个兄弟
4)selector1~selector2 查找下面所有兄弟
(3)过滤选择器
1)基本过滤 (s3.html)
:first
:last
:eq(index)
:gt(index)
:lt(index)
:odd
:even
:not(selector)
2)内容过滤 (s4.html)
:contains(text)
:empty 节点没有文本内容,也没有子节点。
:parent 不为空的节点(有文本内容或者有子节点)。
:has(selector) 后代当中有符合selector要求的
节点。
3)可见性过滤 (s5.html)
:visible
:hidden
4)子元素过滤 (s6.html)
:nth-child(index/even/odd)
注: 下标从1开始。
5)表单属性过滤(s7.html)
:enabled 可用
:disabled 禁用
:checked 被选中
:selected 被选中
6)属性过滤(s8.html)
[attribute]
[attribute=value]
[attribute!=value]
(4)表单选择器
:input
:text
:password
:button
:radio
:checkbox
:submit
:reset
:image
:hidden
:file
3.dom操作 dom
(1)读取或者修改节点的html内容,文本
内容,属性和value。(d1.html)
html() 等价于innerHTML
text() 等价于innerText
attr()
val() 等价于value
(2)创建节点
$(html)
(3)添加节点
append() 作为最后一个孩子添加进来。
prepend()作为第一个孩子添加进来。
after() 作为下一个兄弟添加进来。
before()作为上一个兄弟添加进来。
(4)删除节点 (d3.html)
remove()
empty() 清空
(5)将javascript和html分离 (d4.html,d5.html)
$(fn);
注:
fn可以是一个函数名,也可以是一个
匿名函数。
比如
$(function(){
})
等价于
window.onload=function(){
}
(6)拷贝
clone()
clone(true) 复制行为(将事件处理代码
一块复制)。
(7)样式
css()
addClass(),removeClass()
toggleClass() 样式的切换
hasClass() 判断这个节点有没有这个样式,
有就返回true,否则返回false。
attr() 可以设置style,class属性
(8)遍历
children()/children(selector) 子节点
parent() 父节点
siblings()/siblings(selector) 其它兄弟
next()/next(selector) 下一个兄弟
prev()/prev(selector) 上一个兄弟
find(selector) 查找符合选择器要求的后代