jQuery过滤选择器用法示例


Posted in Javascript onSeptember 12, 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 type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
  //$('li:first').css('background','#ccc');
  //$('li:last').css('background','#ccc');
  //$('#box li:last').css('background','#ccc');
  //$('ul:first li:last').css('background','#ccc');
  //$('li:not(.red)').css('background','#ccc');
  //$('li:even').css('background','#ccc'); //偶数隔行变色
  //$('li:odd').css('background','#ccc'); //奇数隔行变色
  //$('li:eq(-2)').css('background','#ccc');
  //$('li:gt(5)').css('background','#ccc');
  //$('li:lt(5)').css('background','#ccc');
  //$('div :header').css('background','#ccc');
  //$('input').get(0).focus();
  //$(':focus').css('background','#c00');
  //$('li').first().css('background','#ccc');
  //$('li').last().css('background','#ccc');
  //$('li').not('.red').css('background','#ccc');
  //$('li').eq(2).css('background','#ccc');
  //$('div:contains("www")').css('background','#ccc');
  //$('div:empty').css('background','#ccc').css('height','20px');
  //$('ul:has(.red)').css('background','#ccc');
  //$('div:parent').css('background','#ccc');
  //$('ul').has('.red').css('background','#ccc');
  //$('li').parent().css('background','#ccc');
  //alert($('li').parent().size());
  //alert($('li').parent().get(0));
  //$('li').parents().css('background','#ccc');
  //$('li').parentsUntil('body').css('background','#ccc');
  //alert($('div:hidden').size());
  //$('div:hidden').css('background','#ccc').show(1000);
  alert($('div:visible').size());
});
</script>
</head>
<body>
<div style="display:none;">我们的域名为:http://3water.com/</div>
<div>我们的域名为:https://3water.com/</div>
<div> </div>
<div></div>
<ul id="box">
  <li>列表1</li>
  <li>列表2</li>
  <li class="red">列表3</li>
  <li>列表4</li>
  <li>列表5</li>
  <li>列表6</li>
</ul>
<ul>
  <li>列表1</li>
  <li>列表2</li>
  <li>列表3</li>
  <li>列表4</li>
  <li>列表5</li>
  <li>列表6</li>
</ul>
<div>
  <h4>我是标题</h4>
</div>
<input type="text" />
</body>
</html>

运行效果如下图所示:

jQuery过滤选择器用法示例

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

Javascript 相关文章推荐
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
javascript常用的方法分享
Jul 01 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
javascript实现2016新年版日历
Jan 25 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
微信小程序反编译的实现
Dec 10 Javascript
强大Vue.js组件浅析
Sep 12 #Javascript
超详细的JS弹出窗口代码大全
Apr 18 #Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 #Javascript
关于javascript的一些知识以及循环详解
Sep 12 #Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 #Javascript
Javascript6中字符串的四个新用法分享
Sep 11 #Javascript
JavaScript制作简单分页插件
Sep 11 #Javascript
You might like
德生1994机评
2021/03/02 无线电
PHP Mysql编程之高级技巧
2008/08/27 PHP
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
php类常量用法实例分析
2015/07/09 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
node.js超时timeout详解
2014/11/26 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
pymongo中group by的操作方法教程
2019/03/22 Python
django rest framework 过滤时间操作
2020/07/12 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
综合素质的自我鉴定
2013/10/07 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
反腐倡廉标语
2014/06/24 职场文书
学习保证书
2015/01/17 职场文书
2015年女生节活动总结
2015/02/27 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
2016新年感言
2015/08/03 职场文书