jQuery权威指南_学习笔记_1

1.$(document).ready(function(){})和window.onload=function(){}

二者执行时间不同。$(documnet).ready(function(){})在页面框架下载完毕后就执行；而window.onload=function(){}必须在页面全部加载完毕后才能执行。

二者执行数量不同。$(document).ready(function(){})可以重复写多个，并且每次执行结果不同；而window.onload=function(){}也可执行多次，但每次只输出最后一个结果。

2.js和jQuery的检测机制

在js中，给页面中某元素设置事物时必须先找到该元素，然后赋予相应的属性或事件，若该元素不存在，则浏览器会报错；在jQuery中，无需考虑所定位的元素在页面中是否存在。

3.向html中输出信息

jsvarxxx=document.getElementById("xxx");xxx.innerHTML="msg";

jQuery$("#xxx").html("msg");

4.jQuery选择器

根据所获取页面中元素不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器。过滤选择器又分为简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。

基本选择器：它由元素id、class、元素名、多个选择符组成。

#id根据给定id匹配一个元素

element根据给定的元素名匹配所有元素

.class根据给定的类匹配所有元素

*匹配所有元素

selector1,selectorN将每一个选择器匹配到的元素合并后一起返回

层析选择器：通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系。通过其中某类关系可以方便快捷的定位元素。

ancestordescendant根据祖先元素匹配所有的后代元素

parent>child根据父元素匹配所有的子元素

prev+next匹配所有紧跟在prev元素后的相邻元素可以用.next()代替

prev~siblings匹配prev元素之后的所有兄弟元素可以用.nextAll()代替

简单过滤选择器：根据某类过滤规则进行元素匹配，书写时以冒号开头(:)。

first():first获取第一个元素

last():last获取最后一个元素

:not(selector)获取除给定选择期外的所有元素

:even获取所有索引值为偶数的元素索引号从0开始

:odd获取所有索引号值为奇数的元素索引号从0开始

:eq(index)获取指定索引值的元素索引号从0开始

:gt(index)获取所有大于给定索引值的元素索引号从0开始

:lt(index)获取所有小于给定索引值的元素索引号从0开始

:header获取所有标题类型的元素

:animated获取正在执行动画效果的元素

内容选择器：根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位。

:contains(text)获取包含给定文本的元素

:empty获取所有不包含资源死或者文本的空元素

:has(selector)获取含有选择器所匹配的元素的元素

:parent获取含有子元素或者文本的元素

可见性过滤选择器：根据元素是否可见的特征获取元素

:hidden获取所有不可见元素或者type为hidden的元素

:visible获取所有的可见元素

属性过滤选择器：根据元素的某个属性获取元素

[attribute]获取包含给定属性的元素

[attribute=value]获取等于给定的属性是某个特定值的元素

[attribute!=value]获取不等于给定的属性是某个特定值的元素

[attribute^=value]获取给定的属性是以某些值开始的元素

[attribute$=value]获取给定的属性是以某些值结尾的元素

[attribute*=value]获取给定的属性是以包含某些值的元素

[selector1][selector2][selectorN]获取满足多个条件的复合属性的元素

子元素过滤选择器：获取所有父元素中指定的某个元素。

:nth-child(eq|even|odd|index)获取每个父元素下的特定位置元素，索引号从1开始

:first-child获取每个父元素下第一个子元素

:last-child获取每个父元素下最后一个子元素

:only-child获取每个父元素下的仅有一个子元素

表单对象属性过滤器：通过表单中的某对象属性特征获取该元素

:enabled获取表单中所有属性为可用的元素

:disabled获取表单中所有属性为不可用的元素

:checked获取表单中所有被选中的元素

:selected获取表单中所有被选中option的元素

表单选择器

:input获取所有input、textarea、select

:text获取所有单行文本框

:password获取所有密码框

:radio获取所有单选按钮

:checkbox获取所有复选框

:submit获取所有提交按钮

:image获取所有图像域

:reset获取所有重置按钮

:button获取所有按钮

:file获取所有文件域

5.元素属性操作

在jQuery中，可以对元素的属性执行获取、设置、删除的操作，通过attr()方法可以对元素属性执行获取和设置操纵，removeAtrt()方法则可以轻松删除某一指定的属性。

语法：

attr(name)获取属性的值

attr(key,value)设置属性语法格

attr(key,function(index))通过函数返回的值作为属性的值

6.元素内容操作

在jQuery中，操作元素内容的方法包括html()和text()。前者获取或设置元素的HTML内容，后者获取或设置元素的文本内容。

语法：

html()获取元素的HTML内容

html(val)设置元素的HTML内容

text()获取元素的文本内容

text(val)设置元素的文本内容

7.获取或设置元素的值

获取元素的值

语法:

val()获取某元素的值

val(val)将参数的值赋给某元素

val().join(",")获取select标记中的多个选项值

8.元素样式操作

元素样式操作包含：直接设置样式、增加CSS类别、类别切换、删除类别。

直接设置元素样式值:css(name,value)

增加CSS类别：addClass(class1class2...)可以增加多个类别的名称

类别切换：toggleClass(class)当元素中含有名称为class的CSS类别时，删除该类别，否则增加一个该名称的CSS类别。

删除类别：removeClass([class])删除类别

9.创建节点元素

整个界面是一个DOM模型，页面中的个元素通过模型的节点相互关联形成树状，若要在页面中增加某个元素，只需要找到元素的上级节点，通过函数$(html)完成元素的创建后，增加到该节点中。

语法：$(html)动态创建页面元素html代表用于动态创建DOM元素的HTML标签

10.插入节点

在页面中动态创建元素需要执行节点的插入或追加操作。

内部插入节点方法：

append(content)向所选择的元素内部插入内容

append(function(index,html))向所选择的元素内部插入function函数返回追的内容

appendTo(content)把所选择的元素追加到另一个指定的元素集合中

prepend(context)向每个所选择的元素内容前置内容

prepend(function(index,html))向所选择的元素内部前置functio函数所返回的内容

prependTo(content)将所选择的元素前置到另一个指定的元素集合中

外部插入节点方法：

after(content)向所选择元素外部后面插入内容

after(function)向所选择元素外部后面插入function函数所返回的内容

before(content)向所选择元素外部前面插入内容

before(function)向所选择的元素外部前面插入function函数所返回的内容

insertAfter(content)将所选择的元素插入另一个指定的元素外部后面

insertBefore(content)将所选择的元素插入另一个指定的元素外部前面

11.复制节点

语法：

clone()该方法仅是复制元素本身，被复制后的锌元素不具有任何元素行为。

clone(true)不仅复制DOM元素，而且将元素的全部行为也进行复制。

12.替换节点

语法：

replaceWith(content)将所有选择的元素替换成指定的HTML或DOM元素。

replaceAll(selector)将所有选择的元素替换成指定selector

13.包裹节点

语法：

wrap(html)把所有选择的元素用其他字符串代码包裹起来

wrap(elem)把所有选择的元素用其他DOM包装起来

wrap(fn)把所有选择的元素用function函数返回的代码包裹起来

unwrap()移除所选元素的父元素或包裹标记

wrapAll(html)把所有选择的元素用单个元素包裹起来

wrapAll(elem)把所有选择的元素用单个DOM元素包裹起来

wrapInner(html)把所有选择的元素的子内容用字符串代码包裹起来

wrapInner(elem)把所有选择的元素的子内容用DOM元素包裹起来

wrapInner(fn)把所有选择的元素的子内容用function函数返回的代码包裹起来

14.遍历元素

语法：each(callback)callback可以是一个function函数，也可以是一个index

15.删除元素

语法：

remove([expr])删除

empty()清空

16.事件

事件在出发后被分为两个阶段，一个是捕获，另一个则是冒泡。（jQuery不支持捕获）冒泡其实质就是事件执行中的顺序。冒泡不仅仅是触发所指定id本身，而且它的外围元素的事件也将被触发。可以用event.stopPropagation()或returnfalse组织冒泡过程。

17.页面载入事件

ready()方法的工作原理：在jQuery脚本加载到页面时，会设置一个isReady的标记，用于监听页面加载的进度，当遇到执行ready()方法时，通过查看isReady值是否被设置，如果未被设置，那么就说明页面并未加载完成，在此情况下，将未完成的部分用一个数组缓存起来，当全部家在完成后，再将未完成的部分通过缓存一一执行。

在jQuery中，还可以使用bind()方法进行事件的绑定，其语法格式是：bind(type,[data],fn)可以使用bind()绑定多个事件，在type中用空格隔开就好。

在jQuery中，有两个方法用于事件的切换，一个是方法hover()，另一个是方法toggle()。所谓切换事件，即有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换。hover()功能是当鼠标移动到所选的元素上面，执行第一个制定函数；当鼠标移出这个元素时，执行指定的第二个函数。hover(over,out)。toggle()方法中，可以依次调用N个指定的函数，直到最后一个函数，然后重复对这些函数轮番调用。toggle(fn,fn2,fn3,[fn4,fn5,...])

移除事件：unbind([type],[fn])type为移除的事件类型，fn为需要移除的事件处理函数。如果该方法没有参数，则移除所有绑定的事件。

one():为所选元素绑定一个仅触发一次的处理函数

语法：one(type,[data],fn)

trigger():在所选择的元素上触发制定类型的事件。

语法：trigger(type,[data])

可能是分配的任务太简单了，以至于我现在都没什么事情，不过这样也可以学学习，可是也不是每个小时都能静下心来，这个有点小郁闷呢...今天看了看jQuery，只是看了看，了解了大概，没有动手做例子，可能还是没有心情~~这样下去不行啊~~不过今天就到这里吧看来没有被逼的日子效率不高呀~要努力才行~~~~

p.s:今天在公司的论坛上看到了一个帖子，一个人求认识一位女性，描述的过程是天蓝色裤子、人字拖。下面就有人评论，穿人字拖的一定是开发女。瞬间我觉得我就躺枪了。不过我确实比较喜欢穿凉拖，果然潜意识我还是女汉子.....