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 相关文章推荐
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
Three.js学习之几何形状
Aug 01 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
vue.js循环radio的实例
Nov 07 Javascript
原生JavaScript实现拖动校验功能
Sep 29 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 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
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
javascript 短路法代码精简
2009/08/20 Javascript
JS与框架页的操作代码
2010/01/17 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
Python实现购物车程序
2018/04/16 Python
python自动化生成IOS的图标
2018/11/13 Python
Python数据库小程序源代码
2019/09/15 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
网络专业学生个人的自我评价
2013/12/16 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
2014年领班工作总结
2014/11/25 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
golang slice元素去重操作
2021/04/30 Golang