26@ajax_day03
二、jquery选择器
1、理解选择器及优势:
类似于css选择器(定位元素,施加样式),jquery选择器(定位元素,施加行为)。
这样做,可以内容与行为分离。
2、基本选择器
#id
.class
element
selector1,select2..selectn
*
3、层次选择器
select1 select2
select1>select2
select1+select2
select1~select2
4、过滤选择器
(1)基本过滤选择器
:first
:last
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:lt(index)
(2)内容过滤选择器
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has(selector) 匹配含有选择器所匹配的元素的元素
:parent 匹配含有子元素或者文本的元素
(3)可见性过滤选择器
:hidden 匹配所有不可见元素,或者type为hidden的元素
:visible 匹配所有的可见元素
(4)属性过滤选择器
[attribute]
[attribute=value]
[attribute!=value]
(5)子元素过滤选择器
:nth-child(index/even/odd)
(6)表单对象属性过滤选择器
:enabled
:disabled
:checked
:selected
5、表单选择器
:input
:text
:pasword
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
三、dom操作
1、查询
利用选择器找到节点之后,访问节点的html内容、节点的text内容、节点的值以及节点的属性值。
html(): 访问或者修改节点的html内容
text():访问或者修改节点的text内容
val():访问或者修改节点的值
attr():访问或者修改节点的属性值
2、创建
$(html);
3、插入节点
append():向每个匹配的元素内部追加内容
prepend():向每个匹配的元素内部前置内容
after():在每个匹配的元素之后插入内容
before():在每个匹配的元素之前插入内容
4、删除节点
remove()
remove(selector)
empty():清空节点(节点之间的html内容清除了)
5、复制节点
$(function(){
//当浏览器将html解析完毕,会执行这儿的代码
});
$('#d1').click(function(){
});
以上代码相当于
var d1 = document.getElementById('d1');
d1.onclick=function(){
};
clone():
clone(true):使复制的节点也具有行为
6、属性操作
读取:attr('');
设置:attr('','') 或者一次设置多个 attr({"":"","":""});
删除:removeAttr('')
7、样式操作
获取和设置: attr("class","")
追加:addClass('')
移除:removeClass('')
或者removeClass('s1 s2')
或者removeClass()//会删除所有样式
切换样式:toggleClass()
是否有某个样式 hasClass('')
读取css('')
设置css('','')或者css({'':'','':''})//设置多个样式
8、遍历节点
children():/children(selector) 只考虑子元素,不考虑其它后代元素。
next():/next(selector):
prev()/prev(selector):
siblings()/siblings(selector):
find(selector):
练习:
1、表格隔行显示
2、表格当中,点击加亮某一行(注意,要将选中的那一行的单选按钮要显示为选中的状态)