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开发随笔一 preventDefault的必要
Nov 25 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
javascript实现随机抽奖功能
Dec 30 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实现图片缩放功能类
2013/12/18 PHP
PHP代码优化的53个细节
2014/03/03 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
python利用datetime模块计算时间差
2015/08/04 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
学python最电脑配置有要求么
2020/07/05 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
党支部创先争优活动总结
2014/08/28 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
化工见习报告范文
2014/10/31 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技