jQuery学习笔记--选择器、过滤器片
2016-05-26 14:10
459 查看
选择器
根据ID选择$('#id').css('color','red');
根据标签选择
$('div').css('color','red');
根据class选择
$('.class-div').css('color','red');
通配符选择
$('*').css('color','red');
后代选择
$('div p').css('color','red'); //等价于 $('div').find('p').css('color','red');
子代选择
$('div > p').css('color','red'); //等价于 $('div').children('p').css('color','red');
next选择
$('div + p').css('color','red'); //等价于 $('div').next('p').css('color','red');
nextAll选择
$('#box ~ p).css('color','red'); //等价于 $('#box').nextAll('p').css('color','red');
jQuery提供的其他选择器方法
$('#box').prev('p').css('color','red');//向前选择一个 $('#box').prevAll('p').css('color','red');//向前选择所有 $('#box').siblings('p').css('color','red');//选择同级所有 $('#box').nextUntil('p').css('color','red');//选择后面第一个'P'标签之前的所有 $('#box').prevUntil('p').css('color','red');//选择前面第一个'p'标签之后的所有
属性选择器
$('a[title]').css('color','red');//选择有title属性的<a >标签 $('a[title=num1]').css('color','red');//选择title属性为num1的<a>标签 $('a[title^=num]').css('color','red');//title以num开头 $('a[title$=num]').css('color','red');//title以num结尾 $('a[title|=num]').css('color','red');//title=num,或者title以num-开头 $('a[title!=num1]').css('color','red');//title不等於num1 $('a[title~=num1]').css('color','red'); /* title以空格进行分组,分组中包含num1,如 <a title="no1 num1 test1'></a>则匹配'no1'、'num1'任一项 */ $('a[title*=num]').css('color','red');//title属性包含num $('a[aaa][title=num]').css('color','red');//多属性匹配
其他
11.
过滤器
基本过滤$('li:first').css('color','red');//选取第一个元素 $('li').first().css('color','red');//同上一行 $('li:last').css('color','red');//选取最后一个元素 $('li').last().css('color','red');//同上一行 $('li:not(.red)').css('color','blue');//选取class不是red的元素 $('li').not('.red').css('color','blue');//同上一行 $('li:even').css('color','blue');//选取偶数索引元素 $('li:odd').css('color','blue');//选取奇数索引元素 $('li:eq(2)').css('color','blue');//选取指定索引元素,负数从后面开始,最后一个为-1 $('li').eq(2).css('color','red');//同上一行 $('li.gt(2)').css('color','blue');//选取索引大于值的元素 $('li.lt(2)').css('color','blue');//选取索引小于值得元素 $('div :header').css('color','blue');//选取H1-H6的标题元素 $(':focus').css('color','blue');//选取焦点元素
内容过滤器
$('div:contains("youku.com")').css('color','red');//包含文本 $('div:empty').css('color','red');//空元素 $('ul:has(.red)').css('color','red');//子元素含有class $('ul').has('.red').css('color','red');//同上一行 $('div:parent').css('color','red');//非空元素
不同于parent过滤器的parent方法
$('li').parent().css('color','red');//选取父元素 $('li').parents().css('color','red');//选取祖先元素 $('li').parentsUntil('body').css('color','red');//选取祖先元素到body停止
可见性过滤器
$('div:hidden').size();//隐藏元素 $('div:visible').size();//可见元素
子元素过滤器
$('li:first-child').css('background-color','#ccc');//每个父元素的第一个li元素 $('li:last-child').css('background-color','#ccc');//每个父元素最后一个li元素 $('li:only-child').css('background-color','#ccc');//每个父元素只有一个li元素 $('li:nth-child(even)').css('background-color','#ccc');//每个父元素偶数li元素 $('li:nth-child(odd)').css('background-color','#ccc');//每个父元素奇数li元素 $('li:nth-child(1)').css('background-color','#ccc');//每个父元素第一个li元素 $('li:nth-child(2n').css('background-color','#ccc');//每个父元素2*n个元素,n从1开始 $('li:nth-child(2n+1').css('background-color','#ccc');//每个父元素2*n+1个元素,n从1开始
其他方法
$('li').filter('.red,:first,:last').css('background-color','#ccc');//多条件过滤 $('li').filter(function(){//自定义方法 return $(this).attr('class')=='red' && $(this).attr('title')=='列表3'; }).css('background','#ccc'); $('div:first').contents().size();//含文本和子元素 $('div:first').children().size();//只包含子元素 $('li').slice(0,2).css('background-color','#ccc');//开始索引0(从0开始),结束索引2(从1开始,负数则从后往前数,最后一个-1) $('.red').is('li');//选择器 $('.red').is($('li').get(2));//dom对象 $('.red').is($('li').eq(2));//jQuery对象 $('.red').is($('li'));//jQuery对象集合 $('.red').is(function(){//自定义方法 return $(this).attr('title')=='列表3'; })
相关文章推荐
- jquery中attr和prop的区别
- jQuery EasyUI filebox的文件路径错误
- jquery ajax请求方式与提示用户正在处理请稍等,等待数据返回时loading的显示
- JQuery开发3-jQuery中图片动画效果
- JQuery快速学三之一(事件)
- JQuery快速学二(DOM操作)
- JQuery快速学三之一(事件)
- Javascript、Jquery获取浏览器和屏幕各种高度宽度
- jQuery对象入门级介绍
- jQuery设计思想
- jQuery设计思想
- jQuery控制文本框只能输入数字和字母及使用方法
- jquery获取html元素的绝对位置和相对位置的方法
- 基于jquery的固定表头和列头的方法
- Jquery实现select multiple左右添加和删除功能的简单实例
- jquery实现复选框案例
- 一些常用的jquery数字正则表达式
- [置顶] 彻底征服jQuery 插件开发
- jquery获取复选框的值的简单实例
- jQuery接受后台传递的List