jQuery基本过滤选择器用法示例


Posted in Javascript onSeptember 09, 2016

本文实例讲述了jQuery基本过滤选择器用法。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="js/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript">
$(document).ready(function(){
  //选择第一个div元素.
  $('#btn1').click(function(){
    $('div:first').css("background","#bfa");
  })
  //选择最后一个div元素.
  $('#btn2').click(function(){
    $('div:last').css("background","#bfa");
  })
  //选择class不为one的 所有div元素.
  $('#btn3').click(function(){
    $('div:not(.one)').css("background","#bfa");
  })
  //选择 索引值为偶数 的div元素。
  $('#btn4').click(function(){
    $('div:even').css("background","#bfa");
  })
  //选择 索引值为奇数 的div元素。
  $('#btn5').click(function(){
    $('div:odd').css("background","#bfa");
  })
  //选择 索引等于 3 的元素
  $('#btn6').click(function(){
    $('div:eq(3)').css("background","#bfa");
  })
  //选择 索引大于 3 的元素
  $('#btn7').click(function(){
    $('div:gt(3)').css("background","#bfa");
  })
  //选择 索引小于 3 的元素
  $('#btn8').click(function(){
  $('div:lt(3)').css("background","#bfa");
  })
  //选择 所有的标题元素.比如h1, h2, h3等等...
  $('#btn9').click(function(){
    $(':header').css("background","#bfa");
  })
  //选择 当前正在执行动画的所有元素.
  $('#btn10').click(function(){
    $(':animated').css("background","#bfa");
  });
});
</script>
</head>
<body>
<h3>基本过滤选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/>
<label for="isreset">点击下列按钮时先自动重置页面</label>
<br />
<br />
<input type="button" value="选择第一个div元素." id="btn1"/>
<input type="button" value="选择最后一个div元素." id="btn2"/>
<input type="button" value="选择class不为one的 所有div元素." id="btn3"/>
<input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
<input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
<input type="button" value="选择索引值等于3的元素." id="btn6"/>
<input type="button" value="选择索引值大于3的元素." id="btn7"/>
<input type="button" value="选择索引值小于3的元素." id="btn8"/>
<input type="button" value="选择所有的标题元素." id="btn9"/>
<input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
<br />
<br />
<!-- 测试的元素 -->
<div class="one" id="one" > id为one,class为one的div
  <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" > id为two,class为one,title为test的div.
  <div class="mini" title="other">class为mini,title为other</div>
  <div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini"></div>
</div>
<div class="one">
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div> 包含input的type为"hidden"的div
  <input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>

效果图:

jQuery基本过滤选择器用法示例

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
js canvas实现五子棋小游戏
Jan 22 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 #Javascript
javascript比较语义化版本号的实现代码
Sep 09 #Javascript
js防阻塞加载的实现方法
Sep 09 #Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 #Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 #Javascript
Vuejs第十三篇之组件——杂项
Sep 09 #Javascript
jQuery属性选择器用法示例
Sep 09 #Javascript
You might like
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
一个图形显示IP的PHP程序代码
2007/10/19 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
详解微信小程序调用支付接口支付
2019/04/28 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
python学习之matplotlib绘制散点图实例
2017/12/09 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
《太阳》教学反思
2014/02/21 职场文书
《画风》教学反思
2014/04/16 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
2014年手术室工作总结
2014/11/26 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python