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中输出信息
js var xxx=document.getElementById("xxx"); xxx.innerHTML="msg";
jQuery $("#xxx").html("msg");
4.jQuery选择器
  根据所获取页面中元素不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器。过滤选择器又分为简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。
基本选择器：它由元素id、class、元素名、多个选择符组成。
#id       根据给定id匹配一个元素
element   根据给定的元素名匹配所有元素
.class    根据给定的类匹配所有元素
*         匹配所有元素
selector1,selectorN  将每一个选择器匹配到的元素合并后一起返回
层析选择器：通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系。通过其中某类关系可以方便快捷的定位元素。
ancestor descendant  根据祖先元素匹配所有的后代元素
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(class1  class2...) 可以增加多个类别的名称
类别切换：  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()或return false组织冒泡过程。
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:今天在公司的论坛上看到了一个帖子，一个人求认识一位女性，描述的过程是天蓝色裤子、人字拖。下面就有人评论，穿人字拖的一定是开发女。瞬间我觉得我就躺枪了。不过我确实比较喜欢穿凉拖，果然潜意识我还是女汉子.....