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入门·图片对象(无刷新变换图片)\滚动图像
Oct 01 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
JS方法调用括号的问题探讨
Jan 24 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
jQuery封装的屏幕居中提示信息代码
Jun 08 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
浅析vue-router原理
Oct 19 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
小程序实现点击tab切换左右滑动
Nov 16 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+XML 制作简单的留言本 图文教程
2009/11/02 PHP
PHP递归调用的小技巧讲解
2013/02/19 PHP
php递归实现无限分类的方法
2015/07/28 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
PHP分享图片的生成方法
2018/04/25 PHP
asp.net和php的区别点总结
2019/10/10 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
使用python实现接口的方法
2017/07/07 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
Python应用库大全总结
2018/05/30 Python
Sanic框架路由用法实例分析
2018/07/16 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
Ranorex通过Python将报告发送到邮箱的方法
2020/01/12 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
简历上的自我评价
2014/02/03 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
《赶海》教学反思
2014/04/20 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
开学典礼观后感
2015/06/15 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers