jQuery基本过滤选择器使用介绍


Posted in Javascript onApril 18, 2013
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<!-- 
1.简单过滤选择器:根据某类过滤规则进行元素的匹配,书写时都以冒号(:)开头;简单过滤选择器是过滤选择器中使用最广泛的一种 
jQuery选择器详解 
根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中,在过滤选择器中有可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种 
--> 
<title>使用jQuery基本过滤选择器</title> 
<!--使用jQuery基本过滤选择器选择元素:在页面中,设置一个<h1>标记用户显示主题,创建<ul>标记并在其中放置四个<li>,再创建一个<span>标记,用于执行动画效果。通过简单过滤选择器获取元素,将选中的元素改变其类名称,从而突出其被选中的状态--> 
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<style type="text/css"> 
body{font-size:12px;text-align:center;} 
div{width:240px;height:83px;border:solid 1px #eee} 
he{font-size:13px;} 
ul{list-style-type:none;padding:0px} 
.DefClass,.NotClass{height:23px;width:60px;line-height:23px;float:left;border-top:solid 1px #eee;border-bottom:solid 1px #eee} 
.GetFocus{width:58px;border:solid 1px #666;background-color:#eee} 
#spnMove{width:234px;height:23px;line-height:23px;} 
</style> 
<script type="text/javascript"> 
$(function () { //增加第一个元素的类别 
$('li:first').addClass('GetFocus'); 
}) 
$(function () { //增加最后一个元素的类别 
$('li:last').addClass('GetFocus'); 
}) 
$(function () { //增加去除所有与给定选择器匹配的元素类别 
$('li:not(.NotClass)').addClass('GetFocus'); 
}) 
$(function () { //增加所有索引值为偶数的元素类别,从0开始计数 
$('li:even').addClass('GetFocus'); 
}) 
$(function () { //增加所有索引值为奇数的元素类别,从0开始计数 
$('li:odd').addClass('GetFocus'); 
}) 
$(function () { //增加一个给定索引值的元素类别,从0开始计数 
$('li:eq(1)').addClass('GetFocus'); 
}) 
$(function () { //增加所有大于给定索引值的元素类别,从0开始计数 
$('li:gt(1)').addClass('GetFocus'); 
}) 
$(function () { //增加所有小于给定索引值的元素类别,从0开始计数 
$('li:lt(4)').addClass('GetFocus'); 
}) 
$(function () { //增加标题类元素类别 
$('div h1').css('width', '238'); 
$(':header').addClass('GetFocus'); 
}) 
$(function () { 
animateIt(); //增加动画效果元素类别 
$('#spnMove:animated').addClass('GetFocus'); 
}) 
function animateIt() { //动画效果 
$('#spnMove').slideToggle('slow', animateIt); 
} 
</script> 
</head> 
<body> 
<div> 
<h1>基本过滤选择器</h1> 
<ul> 
<li class="DefClass">Item 0</li> 
<li class="DefClass">Item 1</li> 
<li class="NotClass">Item 2</li> 
<li class="DefClass">Item 3</li> 
</ul> 
<span id="spnMove">Span Move</span> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 #Javascript
jQuery随机切换图片的小例子
Apr 18 #Javascript
JS 各种网页尺寸判断实例方法
Apr 18 #Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 #Javascript
JS隐藏参数post传值实例
Apr 18 #Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 #Javascript
JS打开新窗口的2种方式
Apr 18 #Javascript
You might like
PHP.MVC的模板标签系统(五)
2006/09/05 PHP
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
深入探究node之Transform
2017/07/20 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
Python 3 判断2个字典相同
2019/08/06 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
英国手机零售商:Metrofone
2019/03/18 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
解释下面关于J2EE的名词
2013/11/15 面试题
酒店管理毕业生自我鉴定
2014/03/02 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
街道办残联2016年助残日活动总结
2016/04/01 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js