`
wangshaofei
  • 浏览: 281549 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

jQuery - Selectors - lastChild选择最后一个子元素

jquery 
阅读更多


Selectors/lastChild

From jQuery JavaScript Library

:last-child

  • Overview

Matches all elements that are the last child of their parent.
While :last matches only a single element, this matches more then one: One for each parent.

  • Demo

Finds the last span in each matched div and adds some css plus a hover state.

$("div span:last-child")
.css({color:"red", fontSize:"80%"})
.hover(function () {
$(this).addClass("solast");
}, function () {
$(this).removeClass("solast");
});

  • View Source

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function(){

$("div span:last-child")
.css({color:"red", fontSize:"80%"})
.hover(function () {
$(this).addClass("solast");
}, function () {
$(this).removeClass("solast");
});

});
</script>
<style>
span.solast { text-decoration:line-through; }
</style>
</head>
<body>
<div>
<span>John,</span>
<span>Karl,</span>
<span>Brandon,</span>
<span>Sam</span>
</div>
<div>
<span>Glen,</span>
<span>Tane,</span>
<span>Ralph,</span>
<span>David</span>
</div>
</body>
</html>

[jQuery - Selectors - lastChild选择最后一个子元素 - 文档]

http://docs.jquery.com/Selectors/lastChild 

[jQuery - 官方网站]

http://jquery.com/

[jQuery - download下载]

当前版本, http://docs.jquery.com/Release:jQuery_1.3.1 
下载列表, http://docs.jquery.com/Downloading_jQuery
最新代码, http://code.jquery.com/nightlies/jquery-nightly.js

[jQuery - 相关论坛]

http://groups.google.com/group/jquery-en
http://WebDev.board.newsmth.net/
http://WebGeeks.board.newsmth.net/
http://bbs.pku.edu.cn/, homepage看版
http://forum.csdn.net/SList/JavaScript/

[jQuery - 关键词]

jQuery

[jQuery - 文档]

http://docs.jquery.com/Main_Page

[jQuery - Core核心]

each迭代, http://docs.jquery.com/Core/each
jQuery, http://docs.jquery.com/Core/jQuery

[jQuery - Ajax]

jQuery的Ajax文档, http://docs.jquery.com/Ajax/jQuery.ajax
jQuery的Ajax选项，http://docs.jquery.com/Ajax/jQuery.ajax#options
dataType选项，设置返回值类型
timeout选项，用于设置超时
与PHP集成可以使用json_encode返回结果, http://www.php.net/manual/zh/function.json-encode.php

readyState获取请求操作的当前状态, http://msdn2.microsoft.com/en-us/library/ms534361.aspx

[jQuery - 特效]

jQuery淡入特效,http://docs.jquery.com/Effects/fadeIn

[jQuery - Selectors选择器]

表单元素选择器, http://docs.jquery.com/DOM/Traversing/Selectors#Form_Selectors
属性相等选择器，http://docs.jquery.com/Selectors/attributeEquals
checked选中, http://docs.jquery.com/Selectors/checked

:input匹配所有input, textarea, select和button元素, http://docs.jquery.com/Selectors/input

选择器在选择body中出现的title标记时，会出现和预期不同的效果。

element按指定名称匹配所有元素, http://docs.jquery.com/Selectors/element

lastChild选择最后一个子元素, http://docs.jquery.com/Selectors/lastChild

 

[jQuery - Attributes属性]

val获取第一个匹配元素value属性的内容, http://docs.jquery.com/Attributes/val

[jQuery - 常用函数]

attr访问自定义属性，减少javascript脚本中代码和数据的耦合
filter, 用于在集合中过滤元素

[jQuery - Events事件]

hover, http://docs.jquery.com/Events/hover
submit提交, http://docs.jquery.com/Events/submit

focus响应每个匹配元素的焦点事件, http://docs.jquery.com/Events/focus

click单击, 触发每个匹配元素的单击事件, 绑定函数到每个匹配元素的单击事件, http://docs.jquery.com/Events/click

[jQuery - Manipulation操作]

after在每个匹配的元素之后插入内容, http://docs.jquery.com/Manipulation/after

[jQuery - Traversing遍历器]

filter过滤, http://docs.jquery.com/Traversing/filter
find查找, http://docs.jquery.com/Traversing/find

[jQuery - Tutorials教程]

Introducing $(document).ready(), http://docs.jquery.com/Tutorials:Introducing_%24%28document%29.ready%28%29

[jQuery - plugins插件]

Easing动画, http://jquery.com/plugins/project/easing
jCarouseLite, 走马灯效果, http://jquery.com/plugins/project/jCarouselLite
tableFilter, 表过滤器, http://jquery.com/plugins/project/tableFilter
Rounded Corner圆角矩形, http://docs.jquery.com/Tutorials:Rounded_Corners#Rounded_Corners_Without_Images

Jeditable原位置编辑器插件, http://plugins.jquery.com/project/jeditable

Cookie, http://plugins.jquery.com/project/Cookie

[jQuery - Utilities实用工具]

trim去掉字符串前后的空格, http://docs.jquery.com/Utilities/jQuery.trim

[jQuery - UI]

UI, http://docs.jquery.com/UI
UI/Theming, http://docs.jquery.com/UI/Theming

[jQuery - 参考资料]

http://www.json.org/, http://www.json.org/json.js

JScript (Windows Script Technologies):, http://msdn2.microsoft.com/en-us/library/hbxc2t98.aspx

prototype Property (JScript 5.6):, http://msdn2.microsoft.com/en-us/library/f5s9ycex.aspx

parseInt Method (JScript 5.6):, http://msdn2.microsoft.com/en-us/library/x53yedee.aspx

toString Method (JScript 5.6):, http://msdn2.microsoft.com/en-us/library/k6xhc6yc.aspx

HTTP Status Codes (Windows):, http://msdn2.microsoft.com/en-us/library/Aa384325.aspx

HTML+TIME:, http://msdn2.microsoft.com/en-us/library/ms533112.aspx

HTA:APPLICATION对象, http://msdn2.microsoft.com/en-us/library/ms536495.aspx

About Cross-Frame Scripting and Security:关于跨框架脚本和安全, http://msdn2.microsoft.com/en-us/library/ms533028.aspx

How to Build Tables Dynamically:如何动态构建表格, http://msdn2.microsoft.com/en-us/library/ms532998.aspx

Filter Property (Tabular Data Control): - Filter属性(表格数据控件), http://msdn2.microsoft.com/en-us/library/ms531364.aspx

close Method (window):, http://msdn2.microsoft.com/en-us/library/ms536367.aspx

ECMA标准下载, http://www.ecma-international.org/publications/standards/Ecma-262.htm

parseInt Method (JScript 5.6): - IE标准, http://msdn2.microsoft.com/en-us/library/x53yedee.aspx

complete Property (IMG, INPUT, INPUT type=image):, http://msdn2.microsoft.com/en-us/library/ms533688.aspx

fireEvent Method (A, ABBR, ACRONYM, ...):, http://msdn2.microsoft.com/en-us/library/ms536423.aspx

SunSpider JavaScript Benchmark: JavaScript性能测试, http://webkit.org/perf/sunspider-0.9/sunspider.html

onbeforeunload Event (BODY, FRAMESET, window):, http://msdn2.microsoft.com/en-us/library/ms536907.aspx

 

 

 

[jQuery - 综合实例]

实现前一个和后一个效果

跨窗口调用函数

定时刷新

下拉列表框打开指定网站

生成在两个边界间的随机数
文本输入框与标签自动更换

密码输入框与标签自动更换

文本输入区域与标签自动更换

Pre标签在IE与Firefox下效果相对理想的换行处理

固定表头，滚动表格内容

分享到：
| javascript代码，定时
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery-Selectors-源码.rar

    在jQuery-Selectors-源码.zip中，我们可以深入学习jQuery选择器的实现原理。 1. **选择器的基本概念** jQuery选择器基于W3C的CSS选择器标准，包括ID选择器（#id）、类选择器（.class）、标签选择器（tagname）、...

    testcafe-react-selectors, 用于响应应用的TestCafe选择器扩展.zip

    testcafe-react-selectors, 用于响应应用的TestCafe选择器扩展 testcafe-react-selectors这个插件提供了选择器扩展，使得使用 TestCafe 测试ReactJS组件变得更容易。 这些扩展允许你以React的方式选择页面元素。安装...

    jquery-3.2.0.js，jquery-3.2.0.min.js

    - **选择器（Selectors）**：jQuery 提供了类似 CSS 的选择器，如 `$("#id")` 用于选取 ID 为 id 的元素，`$(".class")` 用于选取所有 class 为 class 的元素。 - **属性操作（Attributes）**：通过 `.attr()` 方法...

    jquery-1.11.3.js 、jquery-1.11.3.min.js 【官方jquery包 js】

    jQuery的一个显著特点是链式操作，一个jQuery对象可以连续调用多个方法，这使得代码更加紧凑，如 `$("#element").addClass("active").slideDown();` 7. **插件扩展（Plugins）** jQuery的生态体系强大，拥有无数...

    postcss-icss-selectors, 用于本地范围类和id的css模块的PostCSS插件.zip

    postcss-icss-selectors, 用于本地范围类和id的css模块的PostCSS插件 postcss-icss-selectors 用于本地范围类和id的css模块的PostCSS插件用法postcss([ require('postcss-icss-selectors')(options) ])有关环

    jquery-1.5.1.js;jquery-1.5.1.min.js 框架

    1. **选择器（Selectors）**：jQuery支持CSS1至CSS3的选择器，可以方便地定位DOM元素，如`$("#id")`选取ID为`id`的元素，`$(".class")`选取所有class为`class`的元素。 2. **DOM操作（DOM Manipulation）**：jQuery...

    jQuery-1.8.1.js jQuery-1.8.0 API

    jQuery 是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。1.8.1.js 和 1.8.0 API 提供了关于这个版本的完整功能和接口文档，对于开发者来说是极其重要的参考资料。 **...

    jquery-1.3.2.min.js

    - **选择器（Selectors）**：jQuery简化了DOM元素的选择，如$("#id")、$(".class")和$("tag")等，使得代码更易读，查找元素更为便捷。 - **链式操作（Chaining）**：jQuery对象允许连续调用多个方法，如$("#...

    jquery-1.2-UnCompressed

    jQuery是由John Resig在2006年创建的一个开源JavaScript库，旨在简化DOM操作、事件处理、动画制作以及Ajax交互。jQuery 1.2是该库的一个里程碑版本，它在前代基础上进行了许多优化和增强，使得JavaScript开发更加...

    jquery-1.6.1最新版

    这里的“jquery-1.6.1最新版”指的是jQuery库的1.6.1版本，这是一个在2011年发布的版本，虽然现在可能不是最新的，但在当时它是具有先进特性和优化的版本。 jQuery的核心理念是“Write Less, Do More”，它简化了...

    JQuery-latest-Chinese-document.rar_jquery_jquery-latest

    jQuery 是一个广泛使用的JavaScript库，它极大地简化了JavaScript编程，尤其是在处理网页DOM操作、事件处理、动画效果以及Ajax交互等方面。这个“JQuery-latest-Chinese-document.rar”压缩包包含了jQuery的最新中文...

    jquery-2.2.4

    1. **选择器（Selectors）**：jQuery提供了CSS样式的选择器，如$("#id")选择ID为id的元素，$(".class")选择所有class类名的元素，以及$("tag")选择所有特定类型的元素。 2. **链式调用（Chaining）**：jQuery对象...

    jquery-1.9.1

    1. **选择器（Selectors）**：jQuery提供了丰富的CSS选择器，如类选择器、ID选择器、属性选择器等，让开发者能够快速准确地选取DOM元素。 2. **DOM操作（DOM Manipulation）**：jQuery简化了DOM元素的添加、删除、...

    PostCSS插件list-selectors.zip

    list-selectors 可以列出你在 CSS 使用的 selector，它可作为一个独立的函数，CLI, 或者 PostCSS 插件。使用示例：var listSelectors = require('list-selectors'); listSelectors(  ['style/**/*.css', '!...

    jquery-1.3.2.min js包

    1. **选择器（Selectors）**：jQuery提供了丰富的CSS选择器，如ID选择器、类选择器、属性选择器等，使得元素选取更为方便。例如，`$("#elementID")`可以快速获取ID为"elementID"的元素。 2. **DOM操作（DOM ...

    jquery-3.2.1 API参考手册.chm

    1. **选择器（Selectors）**：jQuery提供了丰富的CSS选择器，如ID选择器(#id)，类选择器(.class)，元素选择器(element)，以及组合选择器，如后代选择器、子元素选择器、相邻兄弟选择器和通用选择器等，使得选取DOM...

    testcafe-react-selectors：用于React应用程序的TestCafe选择器扩展

    这个插件提供了选择器扩展，使使用测试ReactJS组件变得更加容易。 这些扩展允许您以React固有的方式选择页面元素。 安装 $ npm install testcafe-react-selectors 用法 等待应用程序准备运行测试 要等到React的组件...

    postcss-combine-duplicated-selectors:自动使CSS选择器保持唯一

    Postcss合并重复的选择器 自动检测并合并重复CSS选择器，因此您不必 :grinning_face_with_smiling_eyes:用法要求为了使用此功能，您将需要安装 。 根据是否要使用CLI，需要安装 。 npm install --save-dev postcss ...

    jquery-1.3.1.js

    jQuery 是一个轻量级的 JavaScript 库，以其简洁的语法、强大的功能和高效的性能赢得了开发者们的广泛喜爱。在这一版本，jQuery 1.3.1 提供了丰富的 API 和改进，使得网页动态交互的开发变得更加容易。本文将深入...

Magicbox
Global site tag (gtag.js) - Google Analytics