编程 Javascript

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程序设计有所帮助。

jQuery过滤选择器用法示例

- Author -

onestopweb

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载

Jul 21 Javascript

11款新鲜的jQuery插件[附所有demo下载]

Jan 24 Javascript

各情景下元素宽高的获取实现代码

Sep 13 Javascript

Jquery+CSS3实现一款简洁大气带滑动效果的弹出层

May 15 Javascript

Javascript 修改String 对象增加去除空格功能(示例代码)

Nov 30 Javascript

深入理解Javascript中this的作用域

Aug 12 Javascript

jQuery中height()方法用法实例

Dec 24 Javascript

浅谈setTimeout 与 setInterval

Jun 23 Javascript

JS实现上下左右对称的九九乘法表

Feb 22 Javascript

微信小程序实现action-sheet弹出底部菜单功能【附源码下载】

Dec 09 Javascript

vue.js的vue-cli脚手架中使用百度地图API的实例

Jan 21 Javascript

JS+HTML5本地存储Localstorage实现注册登录及验证功能示例

Feb 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