jQuery对象和DOM对象的相互转换

DOM(Document Object Model，文档对象模型)，每一份DOM都可以表示成一棵树
    jQuery对象是通过jQuery包装DOM对象后产生的对象

jq对象转DOM：[index]和get(index)

例：

var $cr = $("#cr") //jq对象
var cr = $cr[0]    //DOM对象
var cc = $cr.get(0)//DOM对象

DOM对象转jq：

var cr = document.getElementById("cr")  // DOM对象
var $cr = $(cr)  //jq对象

解决jq与其他库的冲突

var $j = jQuery.noConflict()           //自定义一个快捷方式
$j(function(){                                 //使用这个快捷方式代替jquery
    $j("p").click(function(){
        console.log($j(this).text())
    })
})
$("pp").style.display = 'none'  //使用prototype

jq选择器

基础选择器

层次选择器

基本过滤选择器

表单对象属性过滤实例

jq中的DOM操作

DOM操作分为3个方面，DOM core, HTML-DOM,CSS-DOM
查找节点：通过jq选择器完成
查找属性节点：

attr()   //var title = $("#id").attr("title")

创建节点：

$(html)  //var li  = $("<li></li>");    $("ul").append(li)

插入节点：

append()
appendTo()
prepend()
prependTo()
after()
insertAfter()
before()
insertBefore()

复制节点：

clone()   //clone(true) 事件也复制

替换节点：

replaceWith()
replaceAll()   //两者效果一样，写法相反

包裹节点：

wrap()
wrapAll()   //两者区别如图

< strong title = "选择你最喜欢的水果."＞你最喜欢的水果是？ < / strong > 
< strong title = "选择你最喜欢的水果."＞你最喜欢的水果是？ < / strong > 
< ul > 
       < li title="苹果"＞苹果＜ / li >
       < li title="橘子"＞橘子＜ / li >
       < li title="菠萝"＞菠萝＜ / li >   
< / ul > 
如果使用wrap()方法包裹＜ strong ＞元素， jQuery 代码如下：
 $ ( " strong " ) .wrap ( " < b > < / b > " ) ;
将会得到如下结果：
 < b > <strong title = "选择你最喜欢的水果．" ＞你最喜欢的水果是？ < / strong > < / b >
 < b > < strong title="选择你最喜欢的水果．" ＞你最喜欢的水果是？ < / strong > < / b >

属性操作：

$("p").attr("title","you")  //设置单个属性
$("p").attr({"title":"you","name":"test"})  //设置单个属性
$("p").removeAttr("title")   //删除属性

样式操作：

//可以通过attr添加class属性
//addClass()
//removeClass()

$("a").toggle(function(){},function(){})    //toggle():交替一组动作

//hasClass()

设置和获取HTML、文本和值

html()
text()
val()

遍历节点：

children()
next()
prev()
siblings()   // 取得元素前后所有的同辈元素
 closest()  //取得最近的匹配元素

CSS-DOM操作

$("p").css("color") //获取样式颜色
$("p").css("color","red")  //设置单个样式
$("p").css({"color":"red","fontSize":"10px","background-color":"#000",borderRadius:"5px"})  //设置多个样式

事件和动画

加载DOM：

$(document).ready()   //DOM就绪时就可以调用  window.onload是页面所有元素包括关联文件都加载到浏览器才执行
$(funtion(){})   //前者的简写

事件绑定：

bind(type [,data] , fn)
//第一个参数是事件类型   blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error等，也可以是自定义名称
//第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象
//第三个参数是绑定的处理函数

click() //简写  mouseover()  ...
hover() //合成事件
toggle()  //合成事件

one()

unbind()

事件对象的属性：

even.type()  //事件类型
event.preventDefault() //阻止默认事件
event.stoPropagation() //阻止事件冒泡
even.target()  //获取触发事件的元素
event.relatedTarget() //获取触发事件的相关元素
event.pageX() 
event.pageY() 
event.which() //在鼠标单击事件中获取到鼠标的左、中、右键，
event.metaKey()   //获取ctrl按键
event.originalEvent()  //指向原始的事件对象

动画

show()
hide()
fadeIn()
fadeOut()
slideUp()
slideDown()
animate()

jq中的ajax

load()
$.get()
$.post()
$.getScript()
$.getJson()
$.ajax()

注意
( 1 ) jquery自动把 URL 里的回调函数，例如“ url ? callback = ? ”中的后一个“ ? " 替换为正确的函数名，以执行回调函数．
( 2 ) jsonp( JSON with Padding ）是一个非官方的协议，它允许在服务器端集成 script tags 返回至客户端，通过 Javascript Callback 的形式实现跨域访问．由于 json 只是一种含有简单括号结构的纯文本，因此许多通道都可以交换 json 消息．而由于同源策略的限制，开发人员不能在与外部服务器进行通信的时候使用 XMLHttpRequest．而 JSONP是一种可以绕过同源策略的方法，即通过使用 JSON 与＜ script> 标记相结合的方法，从服务器端直接返回可执行的 Javascript 函数调用或者 Javascript 对象．目前 jsonp 已经成为各大公司的 web 应用程序跨域首选，例如 Youtube Gdata 、 Google social Graph 、 Digg 、豆瓣、 Del . icio . us 等．

$.ajax()参数详解

常用

$.each
each()
$.cookie()   //需要引入cookie插件
$.ajaxPrefilter   //jQuery.ajaxPrefilter()函数用于指定预先处理Ajax参数选项的回调函数