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]) 

 

 

1.显示与隐藏 
js:  document.getElementById("p1").sytle.display="block"; 
     document.getElementById("p1").style.display="none"; 
jQuery:  
show()和hide() 
  hide()  $("#p1").css("display":"none"); 
  show()  $("#p1").css("display":"block"); 
2.动画效果: 
hide(speed,[callback])  speed:slow normal fast 
show(speed,[callback]) 
toggle 
  toggle() 
  toggle(swith)  swith:true  false  
  toggle(speed,[callback]) 
slideDown()和slideUp() 
  slideDown(speed,[callback]) 
  slideUp(speed,[callback]) 
  slideToggle(speed,[callback]) 
fadeIn()和fadeOut()  
  fadeIn(speed,[callback]) 
  fadeOut(speed,[callback]) 
  fadeTo(speed,opacity,[callback])  指定透明度的值 
animate() 
  animate(params,[duration],[easing],[callback])   params:制作动画效果的属性样式和值的集合   duration:slow normal fast  easing:动画插件使用 通常有linear和swing字符 
stop([clearQueue],[gotoEnd])停止所选元素中正在执行的动画  clearQueue 布尔 是否停止所选元素中正在执行的动画  gotoEnd 布尔 是否立即完成正在执行的动画 
delay(duration,[queueName]) 
3.加载异步数据 
load(url,[data(key/value)],[callback]) 
getJSON()  用于调用JSON格式的数据 
   $.getJSON(rul,[data],[callback]) 
$.getJSON("xx.json",function(data){ 
      $("#divTip").empty(); 
      var strHTML=""; 
      $.each(data,function(InfoIndex,Info){ 
            strHTML += "name" + Info["name"] + "<br>"; 
            strHTML += "sex" + Info["sex"] + "<br>"; 
}) 
      $("#divTip").html(strHTML); 
}) 
$.getScript(url,[callback]) 
$.get(url,[data],[callback],[type]) 

$.get(url,[data],[callback],[type])向服务器请求数据 
$.post(url,[data],[callback],[type])向服务器请求数据 
get方式不适合传递数据量较大的数据,同时,其请求的历史信息会保存在浏览器的缓存中,有一定的安全风险。 
serialize()序列化表单 
$.ajax([options])