jQuery 笔记

来源：互联网发布：淘宝是下订单扣钱编辑：程序博客网时间：2024/06/05 00:12

1.在web开发中，我们在向页面添加动态功能时，一般都会按照一个固定的模式，查找页面元素或者元素组并在它们只上进行相关操作。

2.jQuery语句的强大真正来源于它的selector，选择器。它能够让我们快速准确的在页面中找到我们想要操作的元素。可以是单个，也可以是元素集合。

3.是CSS的出现，让我们在程序编写时把元素定义和样式定义分离开来。Document Object Model[DOM]

4.Unobtrusive JavaScript认为任何嵌入到<body>标签内部的javascript表达式或者语句，(无论是作为HTML元素的属性，还是独立的<script>块),都是不正确的。我们不能把元素的行为直接嵌入到元素定义的标签中。我们应该把它分离出来放到页面的<head>节，而非<body>里面。

5.jQuery的核心集中于如何从HTML页面中获取元素并对元素进行相关操作。同CSS分离元素定义和元素样式定义原理一样，jQuery也是通过同样的道理，把元素的行为同元素的定义分离开来。而且他们使用同样的选择器，即通过元素的属性或者位置来联系把它的行为跟页面元素联系起来。

6.jQuery首先解决的是跨主流浏览器兼容问题，并且解决了之前一直困扰javascript的必须等页面元素全部加载才能对其进行操作的时间点选择问题。

7.跟CSS在定义元素的样式时对元素的引用方式一样，jQuery中也是通过元素的属性或者在页面中的位置来锁定目标元素。
比如 p a 指的是定义在<p>元素内部的所有<a>元素。jQuery在支持CSS原有选择器的同时，有对其进行了扩展。
在jQuery中定义的获取一组页面元素最简单的语法 $(selector) 或者 jQuery（selector）它返回一个特定的JavaScript对象，包含了匹配selector定义的一个DOM元素数组。该对象还掌握着大量预定义的可用户改组元素的方法。在编程用语中这被称为wrapper，因为它用一些扩展的功能包裹了一些匹配的元素。
选择器返回的对象，我们一般称为jQuery wrapper或者wrapped set。
$("div.notLongForThisWorld").fadeOut(); 属性class=notLognForThisWorld的所有div。
我们通常把返回wrapper对象带有的方法称为jQuery commands，它执行后将会返回原有对象集合，所以可以继续执行其它操作。
$("div.notLongForThisWorld").fadeOut().addClass("removed");
$(selector)返回的这个特殊的JavaScript对象，我们可以通过处理对象的方式处理，同样我们也可以把它看成一个传统的目标元素数组，以数组的方式来处理它。
$("#someElement").html("I have added some text to an element");
或者
$("#someElement")[0].innerHTML ="I have added some text to an element");

$("div.fillMeIn").html("I have added some text to a group of nodes");
等同于
var elements = $("div.fillMeIn");
for(i=0;i<elements.length;i++)
elements[i].innerHTML ="I have added some text to a group of nodes";

获取所有的偶数<p>元素集： $("p:even");
获取每个table中第一行的集合：$("tr:nth-child(1)");
获取<body>标签的所有直系<div>： $("body > div");
获取所有指向PDF文件的链接:$("a[href$=pdf");
获取包含<a>的所有属于<body>元素直系div的<div>集合:$("body > div:has(a)");

8.通用功能
$()除了能够为执行某些操作获取指定的页面元素外，它还可以作为元素的命名空间前缀使用。

$.trim(someString); 或者 jQuery.trim(someString);

9. 文档准备处理器，在前面我们说过，在Unobtrusive JavaScript运动中面对的一个问题是，我们必须等素有的DOM元素被完全加载后才能对这些元素执行操作。
传统上我们使用window实例的onload处理器，在整个页面完全加载后执行该事件处理。

window.onload= function(){
$("table tr:nth-child(even)").addClass("even");
};
但是，不幸的事，浏览器会延迟onload事件的执行，直到所有的DOM树被创建并且等到所有的图片或者其它额外资源都加载，页面显示在浏览器窗口上时，采取触发onload事件。这样的结果可想而知，如果页面的某个图片或者资源占用了大量的加载时间，那么onload事件的触发将会被无限期的延迟。这样的用户体验肯定糟糕极了。一个最好的触发时间点应该是在文本结构完全解析完成并且浏览器把HTML转换到它的DOM书形式后执行这些脚本。但是要跨浏览器来完成这个比较困难，所以jQuery提供了一个简单的监视器，来监视一点DOM树被加载完成，脚本代码就会被执行。而不是等到所有的外部图片资源被加载完成。
该语法使用：
$(document).ready(function(){
$("table tr:nth-child(even)").addClass("even");
});

首先通过选择器找到document对象实例，然后调用jQuery的扩展方法ready(),传入一个当decument准备好时要执行的操作。
我们称这种形式为formal syntax，而我们通常简写为：
$(function() {
$("table tr:nth-child(even)").addClass("even");
});
我们通知浏览器等到DOM全部加载后执行的代码。更有用的是我们可以在同一个HTML document中多次使用该方法。
而浏览器会按照我们定义它的顺序在DOM加载完成时执行它们。而window的onload事件，一个document只允许使用一次。

10.生成DOM元素，我们可以通过向$()传入一个包含HTML标签的字符串来为页面创建新的元素。
比如：$("<p>Hi there!</p>");
$(function(){
$("<p>Hi there!</p>").insertAfter("#followMe");
});
在ready处理器定义中，定义了在id为followMe元素的后面插入<p>元素。

11.jQuery的扩展
$.fn.disable = function() {
return this.each(function() {
if (typeof this.disabled != "undefined") this.disabled = true;
});
}
其中$.fn.disable 意思是说我们扩展$包装器一个叫做disable的方法。
在function体内部，this是指被包裹的将被操作的DOM元素集合。
该集合的each()方法被调用来遍历集合的每一个元素。在each()方法体内，
this则变成了一个指向当前循环的特定DOM元素的指针。
我们返回each()方法的结果，以方便disable方法能够支持链操作。

12. jQuery和其它类库共用
比如与预定义$的Prototype类库共用时，可以通过
jQuery.noConflict();
它将把$回复到非jQuery类库定义的原意上。

创建Wrapped 元素集
使用jQuery定义的选择器选择并包装元素，在DOM树中创建新的HTML元素，操作被封装的元素集。通过selector选择DOM元素和创建新的DOM元素是$()最为核心和常用的功能。开发富浏览器应用最主要的目标是操作构成页面的DOM元素，在操作这些元素之前首要的就是识别并选中它们。这些便是jQuery最为核心的功能。

1.为操作处理选择元素：我们只有通过jQuery的选择器首先选中目标元素，然后返回一个被jQuery包装后的JavaScript对象后，才能在这些元素上使用jQuery方法（也就是我们通常说的jQuery commands)。

2.这些选择器包括基础的CSS选择器：包括一个元素的ID，CSS class名称，标签名称，以及页面元素的DOM层级;
HTML Tag: a p
Element ID: #specialID
Element CssClass Name: .specialClass
Page Element DOM hierarchy： a#specialID.specialClass 一个ID=specialID，并且CssClass=specialClass的<a>
p a.specialClass 一个cssClass值为specialClass，并且包含在<p>元素内部的<a>

3.使用child，container和attribute选择器：
child selector： > 选择某一元素的直接子元素，而不包括更深一级的子元素。
$("p > a");

Attribute selector: [] 选择具有某一属性的元素
$("a[href^=http://]");
$("for[method]"); 选择具有显式声明method的表单。
$("input[type=text]"); 选择所有类型为text的input元素。
$("div[title^=my]"); 选择title开头为my的div。
$("a[href$=.pdf]"); 选择属性href值以.pdf为结尾的<a>
$("a[href*=jquery.com]"); 选择指向jquery.com的所有<a>

Container selector: has() 选择包含某些元素的元素
$("li:has(a)"); 选择包含<a>元素的所有<li>。
$("li a"); 则表示选择包含在<li>中的所有<a>

注意，该函数只支持单层嵌套，比如$("foo:not(bar:has(baz))"); 而$("foo:not(bar:has(baz:eq(2)))");将不被支持。

$("*"); 选择所有元素。
$("E"); 选择tag名为E的所有元素。
$("E F"); 选择所有包含在<E>元素内的<F>.
$("E>F"); 选择所有作为<E>元素直接子元素的<F>，不包括更深一级的<F>。
$("E+F"); 选择所有跟<E>元素紧靠的同级兄弟元素<F>。
$("E~F"); 选择所有<E>元素后面的同级元素<F>.
$("E:has(F)"); 选择所有拥有<F>元素的<E>元素。
$("E.C"); 选择所有class名为C的<E> 元素，或者 *.C 表示class名为C的所有元素。
$("E#I"); 选择所有ID为I的<E> 元素，或者*#I 表示所有ID为I的元素。
$("E[A]"); 选择所有包含属性A的<E>元素。
$("E[A=V]"); 选择所有包含A属性值为V的<E>元素。
$("E[A^=V]"); 选择所有包含A属性值是以V开头的<E>元素。
$("E[A$=V]"); 选择所有包含A属性值是以V结尾的<E>元素。
$("E[A*=V]"); 选择所有包含A属性值中包含V的<E>元素。

4.通过元素位置选择
我们可以通过元素在页面中的位置或者其相对于某个元素的位置来选择元素。比如页面中的第一个Link，或者每个List中最后一个Item等等。
$("a:first"); 选择页面中第一个<a>
$("p:odd"); 选择所有的奇数<p>
$("p:even"); 选择所有的偶数<p>
$("li:last-child"); 选择每一个<ul>元素中的最后一个<li>元素。

$("a:last"); 选择页面中最后一个<a>
$("li:first-child"); 选择每一个<ul>元素中的第一个<li>元素。
$("li:only-child"); 选择所有没有兄弟的<li>元素。
$("li:nth-child(n)"); 选择每一个<ul>元素中的第n个<li>元素。
$("li:nth-child(even|odd)"); 选择每一个<ul>元素中的偶数项<li>元素或者奇数项<li>元素。
$("li:nth-child(Xn+Y)"); 选择每一个<ul>元素中的第Xn+Y表达式结果的元素，比如li:nth-child(3n) 表示每第三个元素，3的倍数； li:nth-child(5n+1) 表示每5倍数后面的元素。
$("li:has(a:eq(n))"); 选择第n次匹配包含<a>元素的<li>元素。
$("li:has(a:gt(n))"); 选择所有第n次匹配包含<a>元素以后的所有的<li>元素，不包含第n次匹配本身的<li>。
$("li:has(a:lt(n))"); 选择所有第n次匹配包含<a>元素之前的所有的<li>元素, 不包含第n次匹配本身的<li>。

注意nth-child选择器从1开始计数，而其它选择器则是从0开始计数。

5.使用自定义jQuery选择器
比如我们可能需要选择所有被选中的checkbox，可以使用jQuery提供的自定义选择器 :chek
$(":animated"); 选择当前处在动态的控件
$(":button"); 选择所有button（包括input[type=submit],input[type=reset],input[type=button],button).
$(":checkbox"); 选择所有的checkbox 等同于input[type=checkbox]
$(":checked"); 选择所有被选中的checkbox或者radio button元素。
$(":contains(foo)"); 选择包含foo文本内容的元素
$(":disabled"); 选择界面上所有不可用的表单元素
$(":enabled"); 选择界面上所有可用的表单元素
$(":file"); 选择所有的file元素,等同于input[type=file]
$(":header"); 选择所有属于页头的元素比如<h1>到<h6>
$(":hidden"); 选择所有隐藏元素
$(":image"); 选择所有表单图片元素，等同于input[type=image]
$(":input"); 选择所有表单元素(包括 input,select,textarea,button等)
$(":not(filter)"); 取消特定过滤
$(":parent");选择拥有子元素包括文本的所有非空元素。
$(":password"); 选择密码类型的表单元素,等同于input[type=password]
$(":radio"); 选择所有单选按钮元素，等同于input[type=radio]
$(":reset"); 选择所有重置按钮，等同于input[type=reset]或者button[type=reset]
$(":selected"); 选择所有被选中的可选项
$(":submit"); 选择提交按钮，等同于button[type=submit]或者input[type=submit]
$(":text"); 选择所有文本表单元素，等同于input[type=text]
$(":visible"); 选择所有可视化元素。

大部分的自定义选择器都是跟Form表单有关的，我们可以组合使用：
:checkbox:checked:enabled

使用not filter，如果我们想取消一个过滤器，可以使用 :not filter
input:not(:checkbox) 除checkbox之外的所有input表单元素。

查找选择器包括：派生选择器空格，孩子选择器 >, 兄弟选择器 +等。在这里，基于一个已被选中的元素的关系而去寻找另外的元素比限制匹配元素的范围更有效。div p:not(:hidden) 受支持，但是 div :not(p:hidden)是不受支持的。

所有派生于div的并且非隐藏的p都被选中，而第二种表示，是不合法的，因为它视图应用:not 到一个选择器而不是一个过滤器（其中p：hidden 中的p不是一个filter）。

6.使用$()创建新DOM元素，比如创建一个空div可以直接 $("<div>");

注意我们不能直接通过$("")来创建<script>元素。
$("<div class='foo'>I have foo!</div><div>I don't</div>")
.filter(".foo").click(function() {
alert("I'm foo!");
}).end().appendTo("#someParentDiv");
这里的end()方法可以让返回的对象恢复到filter（）之前的全集。并把它们追加到一个id为someParentDiv的元素。

7. 管理包装元素集，提炼（refine)，扩展(extend)或者抽取子集等操作。
确定包装元素集的大小，jQuery为返回对象定义了一个length属性和一个size()方法，它们将返回同一个结果。
$('#someDiv').html('There are '+$('a').size()+' link(s) on this page.');

从包装元素集中获取元素：
$('img[alt]')[0] 或者调用jQuery定义的方法get(index)。
$('img[alt]').get(0);
get()方法可以用于获取一个所有包装元素的原始javascript数组；
var allLabeledButtons = $('label+button').get();
我们还可以执行一个反转操作，来查找一个特定说有的元素。

var n = $('img').index($('img#findMe')[0]);//使用index方法返回指定元素在包装对象中的索引

0 0