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 相关文章推荐
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
Jquery优化效率 提升性能解决方案
Sep 06 Javascript
高亮显示web页表格行的javascript代码
Nov 19 Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
JavaScript字符串删除重复字符的方法
Dec 25 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
js中的数组对象排序分析
Dec 11 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
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
PHP教程 预定义变量
2009/10/23 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
PHP实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
Git命令之分支详解
2021/03/02 PHP
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
python版本的读写锁操作方法
2016/04/25 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
python版本的仿windows计划任务工具
2018/04/30 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
Python对象与引用的介绍
2019/01/24 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
打架检讨书100字
2014/01/19 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
公证委托书格式
2014/09/13 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
2014年学生会工作总结
2014/11/07 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
Django实现翻页的示例代码
2021/05/24 Python
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python