JQuery 学习笔记 选择器之三

所属分类: 网络编程 / JavaScript 阅读数: 1057
收藏 0 赞 0 分享

复制代码 代码如下:

<!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);

更多精彩内容其他人还在看

深入解析Vue 组件命名那些事

本篇文章主要介绍了深入解析Vue 组件命名那些事,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue学习笔记进阶篇之vue-cli安装及介绍

这篇文章主要介绍了Vue学习笔记进阶篇之vue-cli安装及介绍,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

jquery版轮播图效果和extend扩展

这篇文章主要为大家详细介绍了jquery版轮播图效果,以及extend扩展的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

jQuery Validate格式验证功能实例代码(包括重名验证)

本文通过实例代码给大家介绍了jQuery Validate格式验证功能,代码中包括重名验证的方法,需要的的朋友参考下吧
收藏 0 赞 0 分享

Angular.js中angular-ui-router的简单实践

本篇文章主要介绍了Angular.js中angular-ui-router的简单实践,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript实现二维坐标点排序效果

这篇文章主要为大家详细介绍了JavaScript实现二维坐标点排序效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

深入理解vue2.0路由如何配置问题

本篇文章主要介绍了vue2.0路由配置问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

基于bootstrap实现多个下拉框同时搜索功能

这篇文章主要为大家详细介绍了基于bootstrap实现多个下拉框同时搜索功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

JavaScript 值类型和引用类型的初次研究(推荐)

这篇文章主要介绍了JavaScript 值类型和引用类型的初次研究,需要的朋友可以参考下
收藏 0 赞 0 分享

利用jQuery异步上传文件的插件用法详解

这篇文章主要介绍了利用jQuery异步上传文件的插件用法详解,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多