Learning JQuery 读书笔记——第一、二章

最新推荐文章于 2024-09-20 09:04:24 发布

iteye_389

最新推荐文章于 2024-09-20 09:04:24 发布

阅读量108

点赞数

分类专栏： javascript 文章标签： jQuery 读书 CSS 正则表达式 XML ViewUI

本文链接：https://blog.csdn.net/iteye_389/article/details/81696936

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

[b][size=large]第一章入门[/size][/b]
[b]1.jquery作用
2.加载：[/b]
$(document).ready();
结构预定DOM加载完成后（不必等待图像加载完成）触发的函数调用。传统方式（<body οnlοad=””>）缺点:1)为添加行为而修改了HTML代码，导致结构和功能紧密耦合的做法，会代码混乱。2）函数可能需要被多处调用，那么在添加新的行为将涉及不同位置上的改动，增加了出错的可能性，也使设计者与编程人员间的并行工作流程趋于复杂化。
[b]3.匿名函数（lambda函数）：[/b]
$(document).ready(function(){
$(‘.poem-stanza’).addClass(‘emphasized’);
});
[b]4.闭包：[/b]
[b][size=large]第二章 CSS选择符[/size][/b]
[b] 1.工厂函数$() [/b]
[b][color=red]$()[/color][/b]会将放到（）中的任何元素自动执行循环遍历，并会被保存到一个jQuery对象中。
如：
标签名：$(‘p’)
ID： $(‘#some_id’)
类：$(‘.some_class’)
[color=red][b]$(expr)[/b][/color]
说明：该函数可以通过css选择器，Xpath或html代码来匹配目标元素，所有的jQuery操作都以此为基础
参数：expr：字符串，一个查询表达式或一段html字符串
eg：$("div > p")
[b][color=red]$(elem)[/color][/b]
说明：限制jQuery作用于一个特定的dom元素，这个函数也接受xml文档和windows对象
参数： elem：通过jQuery对象压缩的DOM元素
eg：$(document)
[b][color=red]$(elems)[/color][/b]
说明：限制jQuery作用于一组特定的DOM元素
参数： elem：一组通过jQuery对象压缩的DOM元素
eg：$(form1.elements )
[b]2.CSS选择符：[/b]
子元素组合符（[color=red]>[/color]）
[color=green]$('#selected-plays > li')[/color].addClass('horizontal');
否定式伪类选择符（:not(.some_class)）
$('#selected-plays > li:not(.horizontal)').addClass('sub-level');
[b]3.Xpath选择符：[/b]
XML Path Language，XML路径语言。在XML文档中识别不同元素或者元素值的一种语言。
[]另一种用途：在不带前置@符号的情况下，用来指定包含在另一个元素中的元素。如：[color=green]$('div[ol]')[/color]取包含一个ol元素的所有div元素
属性选择符
[color=green]$('a[@title]')[/color] 选择所有带title属性的链接
• 可以以类似正则表达式的语法来标识字符串的开始(^)和结尾($)。也可以使用星号(*)表示字符串中的任意位置。
如：
[color=green]$('a[@href^="mailto:"]')[/color] 寻找所有带href属性且以mailto开头的锚元素
[color=green]$('a[@href$=".pdf"]') [/color]寻找所有带href属性并以.pdf结尾的链接
[color=green]$('a[@href*="mysitle.com"]')[/color] 寻找所有内部链接
自定义选择符
与CSS中的伪类选择符语法相同，以一个冒号(:)开头。如
$('div.horizonal:eq(1)') 从匹配的带有horizonal类的div集合中选择第二项
注：javascript数组从0开始的编号方式。而CSS则是从1开始。
常用：:odd和:even 奇偶
$('tr:odd').addClass('odd');
:contains() 包含
[b]4.DOM遍历方法[/b]
.filter()
.parent()
.find()