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对象模型-执行模型
Apr 28 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
JavaScript中实现map功能代码分享
Jun 11 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
Jul 01 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
js实现的在本地预览图片功能示例
Nov 09 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购物网站支付paypal使用方法
2010/11/28 PHP
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
PHP错误处理函数
2016/04/03 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
Vue 数据响应式相关总结
2021/01/28 Vue.js
实例讲解Python中的私有属性
2014/08/21 Python
python输出指定月份日历的方法
2015/04/23 Python
利用python获取Ping结果示例代码
2017/07/06 Python
Django自定义manage命令实例代码
2018/02/11 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
春游踏青活动方案
2014/08/14 职场文书
手机被没收的检讨书
2014/10/04 职场文书
质检员岗位职责范本
2015/04/07 职场文书
学前教育见习总结
2015/06/23 职场文书
初三数学教学反思
2016/02/17 职场文书