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 相关文章推荐
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
JS event使用方法详解
Apr 28 Javascript
JavaScript DOM学习第四章 getElementByTagNames
Feb 19 Javascript
用js读、写、删除Cookie代码续篇
Dec 03 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
Feb 21 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 Javascript
vue v-model的用法解析
Oct 19 Javascript
vue 封装面包屑组件教程
Nov 16 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
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
php中的动态调用实例分析
2015/01/07 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
JS实现网页上随机产生超链接地址的方法
2015/11/09 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
ES6中新增的Object.assign()方法详解
2017/09/22 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
2019/02/18 jQuery
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
python Zmail模块简介与使用示例
2020/12/19 Python
Django视图类型总结
2021/02/17 Python
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
名人演讲稿范文
2013/12/28 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
培训计划通知
2015/07/15 职场文书
创业计划书介绍
2019/04/24 职场文书
八年级作文之友谊
2019/12/02 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python