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、表格当中，点击加亮某一行(注意，要将选中的那一行的单选按钮要显示为选中的状态)