1、css选择器
1)标签选择器: p{} h1{}
2)ID选择器:#menu{}
3)class选择器:.has_children{}
4)群组选择器: h1,h2,h3,p,#menu{}
5)后代选择器:div span{}
6)通配选择器:*{}
7)子选择器:div > span{}
8)相邻选择器:label + input{}
9)伪选择器:a:active{}
10)同辈选择器 form ~ input{}
其中前六种主流浏览器都支持,jquery的选择器完全继承了css的风格,除了支持css选择器外,也有少量独有的选择器。
2、松耦合
css 使得网页的内容与样式相分离,css找到元素后给元素添加样式。
jquery 使得网页的内容与行为相分离,jquery找到元素后给元素添加行为。
3、判断某个元素是否存在
不管指定的元素是否存在,返回的jquery对象都不会为空,所以要判断jquery对象是否存在需要这样判断
if($('#ff').length>0) // to do ... 或者 if($('#ff')[0]) // to do ...
4、jquery选择器
1)基本选择器
$("#one").css('background-color', '#bbffaa'); // id选择器
$('div.mini').css('background-color','#bbffaa'); // class选择器
$('div').css('background-color','#bbffaa'); // 标签选择器
$('*').css('background-color','#bbffaa'); // 通配选择器,匹配页面中所有元素
$('span, #two').css('background-color','#bbffaa'); // 群组选择器,将span的匹配结果与#two的匹配结果合并在一起
2)层次选择器
$('body div').css('background-color','#bbffaa'); //后代选择器
$('body > div').css('background-color','#bbffaa'); //子代选择器
$('#one + div').css('background-color','#bbffaa'); //相邻选择器向后匹配,完全等价与 $('#one').next("div").css('background-color','#bbffaa');
$('#two ~ div').css('background-color','#bbffaa'); //后续兄弟选择器,完全等价与 $('#two').nextAll('div').css('background-color','#bbffaa');
$('#two').siblings('div').css('background-color','#bbffaa'); // 兄弟选择器,匹配所有#two的同辈div,不分前后顺序,要区别去后续兄弟选择器
3)过滤选择器
(1)基本过滤
$('div:first').css('background-color','#bbffaa'); // 第一个div元素
$('div:last').css('background-color','#bbffaa'); // 最后一个div元素
$('div:not(.one)').css("background-color","#bbffaa"); // 不排除指定选择器的div元素
$('div:even').css("background-color","#bbffaa"); // 索引为偶数的元素
$('div:odd').css("background-color","#bbffaa"); // 索引为奇数的元素
$('div:eq(3)').css("background-color","#bbffaa"); // 索引为3的元素,从0开始
$('div:gt(3)').css("background-color","#bbffaa"); // 索引大于3的元素
$('div:lt(3)').css("background-color","#bbffaa"); // 索引小于3的元素
$(':header').css("background-color","#bbffaa"); // <h>系列标题元素
$(':animated').css("background-color","#bbffaa"); // 正在活动的
(2)内容过滤
$('div:contains("two")').css("background-color","#bbffaa"); // 含有指定文本的div元素
$('.mini:empty').css("background-color","#bbffaa"); // 不含有任何子元素或者文本的class="mini"的元素
$('span:has(.mini)').css("background-color","#bbffaa"); // 含有子元素为.mini的span元素
$('div:parent').css("background-color","#bbffaa"); // 含有任何子元素或者文本的div元素
(3)可见性过滤
$('div:hidden').show(3000).css("background-color","red"); // 选取所有不可见的元素 $('input:hidden')可以选取隐藏域
$('div:visiable').css("background-color","#bbffaa"); // 选取所有可见的元素
(4)属性过滤
$('div[title]').css('background-color','#BBFFAA'); // 包含title属性的div元素
$('div[title=test]').css('background-color','#BBFFAA'); // 包含title属性并且值为test的div元素
$('div[title!=test]').css('background-color','#BBFFAA'); // 包含title属性并且值不为test的div元素与不包含title属性的div元素的集合
$('div[title^=te]').css('background-color','#BBFFAA'); // 包含title属性并且值以te开头的div元素
$('div[title$=est]').css('background-color','#BBFFAA'); // 包含title属性并且值以est结尾的div元素
$('div[title*=es]').css('background-color','#BBFFAA'); // 包含title属性并且值包含es的div元素
$('div[id][title*=es]').css('background-color','#BBFFAA'); // 包含id属性与title属性并且title属性值包含es的div元素
(5)子元素过滤
$(':nth-child(2)').css('background-color','#BBFFAA'); // 为每个父元素匹配索引为2的子元素,索引从1开始
$(':nth-child(odd)').css('background-color','#BBFFAA'); // 为每个父元素匹配索引为奇数的子元素, even为偶数
$(':nth-child(3n+1)').css('background-color','#BBFFAA');// 为每个父元素匹配索引为3n+1的子元素, n从0开始
$(':first-child').css('background-color','#BBFFAA'); // 为每个父元素匹配第一个子元素
$(':last-child').css('background-color','#BBFFAA'); // 为每个父元素匹配最后一个子元素
$(':only-child').css('background-color','#BBFFAA'); // 为每个父元素匹配有且仅有一个的子元素
(6)表单元素属性过滤
$('#form1 :enabled'); // 表单中所有可用的元素
$('#form1 :disabled'); // 表单中所有不可用的元素
$('#form1 input:checked'); // radio或checkbox的选中项
$('#form1 select :selected'); // 下拉列表或多选框的选中项
4)表单选择器
$("#form1 :input") // 匹配所有表单元素包括input、select、textarea、button,注意与$("#form1 input")的区别
$("#form1 :text") // 匹配 <input type="text"/>元素
$("#form1 :password") // 匹配 <input type="password"/>元素
$("#form1 :radio") // 匹配 <input type="radio"/>元素
$("#form1 :checkbox") // 匹配 <input type="checkbox"/>元素
$("#form1 :submit") // 匹配 <input type="submit"/>和<button>元素
$("#form1 :image") // 匹配 <input type="image"/>图像按钮
$("#form1 :reset") // 匹配 <input type="reset"/>元素
$("#form1 :button") // 匹配 <input type="button"/>和<button>元素
$("#form1 :file") // 匹配 <input type="file"/>元素
$("#form1 :hidden") // 匹配 <input type="hidden"/>和所有不可见的元素,如<div style="display:none;">元素
5、选择器的一些注意事项
1)选择器中含有".","[","("等特殊字符,这种情况下需要对特殊字符转义才行
<div id="id.a">aa</div> // 获取方式$("#id\\.a")
<div id="id#b">bb</div> // 获取方式$("#id\\#b")
<div id="id[1]">cc</div> // 获取方式$("#id\\[1\\]")
2)一些常用的方法
$category.is(":hidden") // 判断当前元素是否为隐藏的 is() 返回boolean值
$("ul li").filter(":contains('佳能'),:contains('尼康')") // 筛选出与指定表达式匹配的元素集合,其中表达式可以是多个选择器的组合
addClass("promoted") // 可以为匹配的元素添加类名
$("div.showmore > a").toggle(fun,fun); // 可以给匹配的元素添加一组交互事件
二、jquery选择器
最新推荐文章于 2023-04-23 17:34:04 发布