JQuery 学习笔记 选择器之三


Posted in Javascript onJuly 23, 2009
<!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.3.2.js"></script> 
<script type="text/javascript"><!-- 
$(function(){ 
$("#aFirst").click(function(){ 
$("#Result").html(""); 
$("#Result").html($("ul:first").html()); 
}) 
$("#aLast").click(function(){ 
$("#Result").html(""); 
$("#Result").html($("ul:last").html()); 
}) 
$("#aNot").click(function(){ 
$("#Result").html(""); 
$("#Result").html($("input:not(:checked)").attr("id")); 
}) 
$("#aEven").click(function(){ 
$("#Result").html(""); 
$("ul:even").each(function(){ 
$("#Result").html($("#Result").html() + $(this).html()); 
}) 
}) 
$("#aOdd").click(function(){ 
$("#Result").html(""); 
$("ul:odd").each(function(){ 
$("#Result").html($("#Result").html() + $(this).html()); 
}) 
}) 
$("#aEq").click(function(){ 
$("#Result").html(""); 
$("ul:eq(3)").each(function(){ 
$("#Result").html($("#Result").html() + $(this).html()); 
}) 
}) 
$("#aGt").click(function(){ 
$("#Result").html(""); 
$("ul:gt(3)").each(function(){ 
$("#Result").html($("#Result").html() + $(this).html()); 
}) 
}) 
$("#aLt").click(function(){ 
$("#Result").html(""); 
$("ul:lt(3)").each(function(){ 
$("#Result").html($("#Result").html() + $(this).html()); 
}) 
}) 
$("#aHeader").click(function(){ 
$("#Result").html(""); 
$(":header").each(function(){ 
$("#Result").html($("#Result").html() + $(this).html()); 
}) 
}) 
}) 
// --></script> 
</head> <body> 
<div> 
<h1>h1</h1> 
<h2>h2</h2> 
<li>li1 
<ul>1</ul> 
<ul>2</ul> 
<ul>3</ul> 
<ul>4</ul> 
</li> 
<li>li2 
<ul>5</ul> 
<ul>6</ul> 
</li> 
<li>li3 
</li> 
</div> 
<input type="checkbox" id="checkbox1" />checkbox1 
<input name="flower" type="checkbox" id="checkbox2" checked="checked" />checkbox2 
<br /> 
<a href="#" id="aFirst">显示第一个ul节点的值</a> 
<a href="#" id="aLast">显示最后一个ul节点的值</a> 
<a href="#" id="aNot">显示未选择中checkbox的ID</a> 
<a href="#" id="aEven">显示索引为偶数的ul内容</a> 
<a href="#" id="aOdd">显示索引为奇数的ul内容</a> 
<a href="#" id="aEq">显示索引为3的ul内容</a> 
<a href="#" id="aGt">显示索引大于3的ul内容</a> 
<a href="#" id="aLt">显示索引小于3的ul内容</a> 
<a href="#" id="aHeader">显示页面标题内容</a> 
<br /> 
Result: 
<br /> 
<div id="Result"> 
</div> 
</body> 
</html>

这节好像没有什么课外知识点,哈,那现在就进入正题咯
1.$("TabName:first")
描述:可获取某种节点的第一个节点,如例子中有6个ul,使用$("ul:first")即可获取到首个ul结点
返回值:Element;
2.$("TabName:Last")
描述:与上一个用法差不多,区别只在于此方法用于获取最后一个节点
返回值:Element;
3.$("TabName:not(:attribute)")
描述:此方法可实现一些简单的选择器过滤,如例子中,$("input:not(:checked)")就选择了未选择的checkbox元素,此方法尚在实践中,好像就只能对些值为bool的属性进行过滤,例子中相当于选择checked为false的input。
返回值:Array(Element);
4.$("TabName:even")
描述:用于获取某种节点的偶数索引节点的集合,这边要强调一点,这边的索引是从0开始的所以例子中aEven点击后所获取的是第1、3、5的ul结点
返回值:Array(Element);
5.$("TagName:odd")
描述:与上个方法类似,唯一的区别就是这获取的是奇数节点的集合。
返回值:Array(Element);
6.$("TagName:eq(index)")
描述:用于获取某种节点集合中的index索引位置的节点
返回值:Array(Element);
7.$("TagName:gt(index)")
描述:用于获取某种节点集合中,索引大于index的节点集合
返回值:Array(Element);
8.$("TagName:lt(index)")
描述:用于获取某种节点集合中,索引小于index的节点集合
返回值:Array(Element);
9.$(":header")
描述:用于获取页面中h1, h2, h3之类的标题节点集合
返回值:Array(Element);
Javascript 相关文章推荐
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
layui select动态添加option的实例
Mar 07 Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 Javascript
node-red File读取好保存实例讲解
Sep 11 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
vue路由分文件拆分管理详解
Aug 13 Javascript
JQuery 学习笔记 选择器之二
Jul 23 #Javascript
JQuery 学习笔记 选择器之一
Jul 23 #Javascript
javascript IFrame 强制刷新代码
Jul 23 #Javascript
jQuery TextBox自动完成条
Jul 22 #Javascript
JavaScript 动态生成方法的例子
Jul 22 #Javascript
模仿jQuery each函数的链式调用
Jul 22 #Javascript
js 代码集(学习js的朋友可以看下)
Jul 22 #Javascript
You might like
PHP实现文件安全下载
2006/10/09 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
python实现基本进制转换的方法
2015/07/11 Python
Python标准库之collections包的使用教程
2017/04/27 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
简单谈谈python中的语句和语法
2017/08/10 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
python简单贪吃蛇开发
2019/01/28 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
党校学习思想汇报
2014/01/06 职场文书
构建高效课堂实施方案
2014/03/13 职场文书
国庆横幅标语
2014/10/08 职场文书
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB