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中的escape及unescape函数的php实现代码
Sep 04 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
Exjs 入门篇
Apr 07 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
基于Layer+jQuery的自定义弹框
May 26 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
JavaScript实现简单计时器
Jun 22 Javascript
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
php桌面中心(三) 修改数据库
2007/03/11 PHP
php的curl实现get和post的代码
2008/08/23 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
Node学习记录之cluster模块
2017/05/31 Javascript
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
vue实现信息管理系统
2020/05/30 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
Python必须了解的35个关键词
2020/07/16 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
表彰先进集体通报
2014/01/12 职场文书
销售冠军获奖感言
2014/02/03 职场文书
企业精神口号
2014/06/11 职场文书
片区教研活动总结
2014/07/02 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
普通党员对照检查材料
2014/09/24 职场文书
欢迎词范文
2015/01/27 职场文书
上诉状格式
2015/05/23 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers