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 相关文章推荐
Javascript延迟执行实现方法(setTimeout)
Dec 30 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 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中进行身份认证
2006/10/09 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
理解Javascript_08_函数对象
2010/10/15 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
python调用shell的方法
2013/11/20 Python
调试Python程序代码的几种方法总结
2015/04/28 Python
python自动裁剪图像代码分享
2017/11/25 Python
python实现整数的二进制循环移位
2019/03/08 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
2013/08/11 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
党委领导班子整改方案
2014/09/30 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python