HTML5移动开发之路（35）——jQuery中的过滤器详解

本文为兄弟连IT教育机构官方 HTML5培训教程，主要介绍：HTML5移动开发之路（35）——jQuery中的过滤器详解

1、基本过滤选择器

:first
:last
:not(selector) :selector匹配的节点之外的节点
:even :偶数
:odd ：奇数
:eq(index)
:gt(index) :比他大的

:lt(index) ：比他小的

[html] view plain copy

print?

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<script>

$(function(){

$(‘#b1‘).click(function(){

//$(‘tr:first‘).css(‘background-color‘,‘#cccccc‘);

//$(‘tbody tr:first‘).css(‘background-color‘,‘#cccccc‘);

//$(‘tbody tr:not(#tr2)‘).css(‘background-color‘,‘#cccccc‘);

//$(‘tbody tr:even‘).css(‘background-color‘,‘#cccccc‘);

$(‘tbody tr:eq(2)‘).css(‘background-color‘,‘#cccccc‘);

});

});

</script>

</head>

<body>

<table border="1" cellpadding="0" cellspacing="0" width="60%">

<thead>

<tr>

<td>name</td><td>age</td>

</tr>

</thead>

<tbody>

<tr><td>zs</d><td>22</td></tr>

<tr id="tr2"><td>ls</d><td>22</td></tr>

<tr><td>ww</d><td>22</td></tr>

<tr><td>ll</d><td>22</td></tr>

</tbody>

</table>

<input type="button" value="clickMe" id="b1"/>

<body>

</html>

2、内容过滤选择器

:contains(text)
:empty:没有子节点的节点或者文本内容为空的节点
:has(selector)
:parent :包含有父节点的节点

[html] view plain copy

print?

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<script>

$(function(){

$(‘#b1‘).click(function(){

$(‘:contains(hello)‘).css(‘background‘,‘red‘);

//$(‘:empty‘).css(‘‘,‘‘);

//$(‘div :has(p)‘).css(‘‘,‘‘);

});

});

</script>

</head>

<body>

<div>

<div>hello</div>

<div>你好</div>

<div>

<p>java</p>

<div>

<input type="button" value="clickMe" id="b1"/>

</div>

</body>

</html>

其实我的目的并不是让全部屏幕变成红色，为什么全部变成红色的呢？再看下面代码，我在contains(hell0)前面加一个div

[html] view plain copy

print?

$(‘div:contains(hello)‘).css(‘background‘,‘red‘);

可以看到虽然不是全屏了，但是还不是我想要的结果，怎么才能只将hello下面的背景变成红色呢？可以这样做

[html] view plain copy

print?

$(‘div div:contains(hello)‘).css(‘background‘,‘red‘);

3、可见性过滤选择器

:hidden

找到input type="hidden" 以及display=none

:visible

[javascript] view plain copy

print?

$(function(){

$(‘#a1‘).click(function(){

$(‘div:hidden‘).css(‘display‘,‘block‘);

//如过有这个样式则去掉，没有则加上

$(‘#d1‘).toggleClass(‘show‘);

});

//每点击一次，执行一个函数，循环执行

$(‘#a1‘).toggle(function(){

//$(‘#d1‘).css(‘display‘,‘block‘);

$(‘#d1‘).show(400); //在400毫秒种打开

//或者使用slow fast normal三个参数

$(‘#d1‘).show(slow);

},function(){

//$(‘#d1‘).css(‘display‘,‘none‘);

$(‘#d1‘).hide();

});

});

4、过滤选择器

(1)属性过滤选择器

[attribute]
[attribute=value]
[attribute!=value]

[html] view plain copy

print?

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<script>

$(function(){

$(‘#b1‘).click(function(){

$(‘p[id=p1]‘).html(‘hello java‘);

});

});

</script>

</head>

<body>

<p id="p1">hello</p>

<p>world</p>

<input type="button" value="click" id="b1"/>

</body>

</html>

(2),子元素过滤选择器：返回所有匹配的父节点下的子节点
:nth-child(index/even/odd)
n从1开始

[html]view plain copy print?

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<script>

$(function(){

$(‘#b1‘).click(function(){

$(‘ul li:nth-child(1)‘).html(‘item100‘);

});

});

</script>

</head>

<body>

<ul>

<li>item1</li>

<li>item2</li>

<li>item3</li>

</ul>

<ul>

<li>item4</li>

<li>item5</li>

<li>item6</li>

</ul>

<input type="button" value="click" id="b1"/>

</body>

</html>

(3),表单对象属性过滤选择器
:enabled
:disabled //文本输入框不能输入
:checked//被选择的节点
:selected

5、表单选择器

:input $(‘:input‘);返回所有的input
:text
:pasword
:checkbox
:radio
:submit
:image
:reset
:button

时间： 2024-07-30 10:11:51

HTML5移动开发之路（35）——jQuery中的过滤器详解的相关文章

HTML5移动开发之路（14）——Video标签详解

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(14)--Video标签详解一.使用技巧在HTML5中可以使用<audio>或者<video>标签播放html5媒体,使用方式如下: [html] view plaincopyprint? <video src="move.mp4"></video> video标签中有很多属性,例如controls属性可以控制是否有控制台. [html] vie

jquery中的deferred详解

1.deferred的英文意思是:延期的 2.deferred的思想:当遇到处理耗时很多的js数据请求时,同步或者异步的操作都可能会碰到,客户端不能一直等待下去,这时候我们的处理思路是给该请求注册一个回调事件,等服务器有结果返回时执行.总之,deferred就是回调方法的解决方案. 3.故事背景: 当去超市定购一台家电,因为超市暂时没货需要从别的仓库调货(这时就产生了一个deferred),货到后就会立即给配送,但是需要一个约定(promise)即购物单上需标明货物型号.产品外观.价格等等参数,

JQuery中on()函数详解

JQuery API中定义的on方法,专业名词很多,读起来并不是那么容易,而对于开发人员知道函数怎么使用就可以了.本文将JQuery的说明翻译如下: on(events,[selector],[data],fn) events:事件名,必写参数 [selector]:子元素选择器名,选填参数 [data]:事件触发时,传入函数的参数,可通过event.data对象获取,选填参数 fn:事件触发时所执行的动作,必写参数示例:<!DOCTYPE html><html><head

jQuery中的冒号详解

冒号可以理解为 “匹配” 或 “选取”的意思. $(":button") 表示匹配所有的按钮.$("input:checked")表示匹配所有选中的被选中元素(复选框.单选框等,不包括select中的option). $("div.container")中的'.'号表示class, $("div #msg")中的'#'表示id.那么$(":button") 中的':'表示类型(type),如$(&quo

[Java开发之路]（7）RandomAccessFile类详解

RandomAccessFile适用于大小已知的记录组成的文件,提供的对文件访问,既可以读文件,也可以写文件,并且支持随机访问文件,可以访问文件的任意位置.文件中记录的大小不一定都相同,只要我们知道记录的大小和位置.但是该类仅限于操作文件. RandomAccessFile不属于InputStream和OutputStream继承层次结构中的一部分.除了实现DataInput和DataOutput接口之外(DataInputStream和DataOutputStream也实现了这两个接口),它和

HTML5移动开发之路（34）——jQuery中的选择器

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(34)--jQuery中的选择器一.jQuery是什么? jQuery是由美国人John Resig创建,至今吸引了来自世界各地的众多JavaScript高手加入其中. jQuery的创始人和技术领袖,目前在Mozilla担任JavaScript工具开发工程师.著有<Pro JavaScript Techniques>(即<精通JavaScript>)等经典JavaScript书籍. jQu

HTML5移动开发之路（36）——jQuery中的DOM操作

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(36)--jQuery中的DOM操作 1.查询利用选择器查找节点使用 html() / text() / attr() 输出节点文本和属性值. 注意:下拉列表使用 val() [html] view plain copy print? <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery

HTML5移动开发之路（52）——jquerymobile中的触控交互

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(52)--jquerymobile中的触控交互当使用移动设备进行触控操作时,最常用的就是轻击.按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为. 一.轻击与按住直接上代码(一切皆在代码中,细细品吧!) [html] view plain copy print? <!DOCTYPE html> <html> <head> <t

HTML5移动开发之路（23）—— jQuery Mobile入门

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(23)-- jQuery Mobile入门一.下载jQuery Mobile 下载地址:http://jquerymobile.com/ 点击Download 下载如下zip包下载成功后如下图解压目录如图: 点击index.html进入demo主页,这里面有很多例子. 二.创建JQuery Mobile的Helloword 1.创建demo 2.新建站点 3.站点建立成功后将生成的demo拷贝到站点中