jQ对象是对DOM对象进行包装后产生的对象，DOM对象和jQ对象中的方法和属性不可互用
jQuery对象与DOM对象可相互转换，因此，可约定好定义变量的风格；
var $variable = jQ对象;
var variable = DOM对象;
相互转换：
//jQ对象转DOM对象
var variable = $variable[0];//数组方法
var variable = $variable.get(0);//jQuery中的get(index)方法
//DOM对象转jQ对象
var $variable = $(variable);
$()函数就是一个jQuery对象的制造工厂
jQ选择器
- 基本选择器
- 层次选择器
- 过滤选择器
1.基本过滤
2.内容过滤
3.可见性过滤
4.属性过滤
5.子元素过滤
6.表单对象属性过滤
e.q. $(".side-nav>ul")
jQ DOM操作
DOM Core并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它。——《锋利的jQuery》
DOM Core
getElementById();getElementsByTagName();getAttribute();setAttribute();
HTML-DOM（出现比DOM Core还要早）
document.forms;element.src;
CSS DOM
element.style.color = "red";
- 查找结点
1.结点元素
$("ul li:eq(1)");
2.结点属性
$para.attr("title"); - 创建结点
1.$()函数
$("<li title="text">text</li>"); - 插入结点
1.append();
$("p").append("<b>123</b>");//在元素内部最后追加<b>123</b>
2.prepend();
//元素内部前置内容
3.after();
$("p").after("<b>123</b>");//指定元素之后插入内容
4.before();
//指定元素之前插入内容 - 删除结点
1.remove();
$("ul li").remove("li[titile!=text]");
2.detach();
//不会把匹配元素从jQ对象中删除，绑定的事件和附加的数据都会保留下来
3.empty();
//清空结点，即清空元素后代结点，元素里的内容 - 复制结点
1.clone();
$("li").clone(true).append($("ul"));//复制的结点只有加上true参数才具有相应行为 - 替换节点
1.replaceWith();
$("p").replaceWith("<b>123</b>");//替换 - 包裹结点
1.wrap();
$("p").wrap("<b>123</b>");//用b元素将p元素包裹起来,单独包裹
2.wrapAll();
//统一包裹，若多个元素之间有其他元素，将放到包裹元素之后
3.wrapInner();
//包裹其子内容 - 结点属性操作
1.获取属性
attr()
2.删除属性
removeAttr() - 样式操作
1.设置属性
$("p").attr("class","high")//属性设置会覆盖原有class;
2.addClass();
$("p").addClass("another");//addClass()不会覆盖原有class
3.removeClass("high another");
//参数可删除一个或多个class，无参数则删除所有样式
4.toggleClass();toggle();
$("p").toggleClass("another")//切换样式,重复添加和删除
$btn.toggle(function(){ //显示元素 }.function(){ //隐藏元素})
5.hasClass();
//等价于is()方法,返回true或false - 获取HTML，文本和值
1.html();
//类似于innerHTML属性
2.text();
//类似于innerText属性
3.val();
//类似于value属性 - 遍历结点
1.children("");
var $ul = $("ul").children();//children()只考虑子元素不考虑子元素的后代元素,参数进行筛选
2.next();
//元素后紧邻的同辈元素
3.prev();
//元素前紧邻的同辈元素
4.siblings();
//匹配元素前后所有同辈元素
5.parent(''para");parents("para");closest("para")
//parent()从直接父级结点查找并返回一个父级元素
//parents()从从直接父级节点查找并返回多个祖先元素
//closest()从自身结点查找并返回第一个匹配元素 - CSS-DOM操作
1.css();
css("height");//获取单个属性值
css("backgroundColor","#fff");//设置单个属性值（驼峰命名法）
css({"fontSize":"30px","color":"red"});//设置多个属性值
css()中获得的高度宽度也是字符串
2.height(),width();
$("div").height()//获取
$("div").height(100);//设置100px
$("div").height(2em)；//设置为2em
3.offset();
//获取当前元素相对于视窗的偏移量,其对象包含left,top两个属性
4.position();
//获取当前元素相对于最近的一个position属性设置为relative或absolute的祖父节点的相对偏移
5.scrollTop();scrollLeft();
//获取当前元素滚动条相距顶端/左端的距离
jQ 事件
事件冒泡：嵌套元素中都绑定了事件，事件触发从最里层至最外层
event.stopPropagation()//阻止事件冒泡
event.preventDefault()//阻止事件默认行为
event.target//触发事件的元素
- 加载DOM
1.$(document).ready(function(){});$(function(){});$().ready(function(){});
//window.onload需要加载网页中所有元素，而$(document).ready()在DOM完全就绪时就可以调用
//window.onload只能保存对一个函数的引用，$(document).ready()可以多次调用
2.事件绑定
事件类型：blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keypress,keyup,error
bind(type,[data],fn);
var message = "text";
$("button").bind("click dbclick",{msg:message},function(event){//event：事件对象
$(this).show();//将事件主体DOM元素转换为jQ对象
alert(event.data.msg)})//data参数可选（一般不用
//可绑定多个事件
$(function(){
$("button").bind("mouseover",function(){
$(this).next().show();
}).bind("mouseout",function(){
$(this).next().hide();
})
})```
`one()函数同bind()相同，但只触发一次`
3.移除事件
unbind();
`//无参则删除所有绑定事件`
`//带一个参数则删除指定绑定事件`
`//两个参数则删除指定绑定事件的指定函数`
4.切换事件
1.hover(over,out);
$("a").hover(function(){
//code1
},function(){
//code2
})
//同mouseenter和mouseleave是等价的
2.toggle(fn,fn2,fn3,[...])
`//多个函数依次调用，一般用于2种状态切换`
5.模拟操作
trigger();
`$(#btn).trigger("click")//模拟单击操作`
6.自定义事件
###jQ动画
- show();hide();toggle()
`show()将display为none的元素设置为display样式为先前的显示状态（如block或inline）`
`hide()将display设置为none`
`参数为时间,show()和hide()同时改变元素的高度，宽度，不透明度`
- fadeIn();fadeOut;
`//只改变不透明度，直至display为none或先前状态`
- slideUp();slideDown();slideToggle();
`//只改变高度，直至display为none或先前状态`
- animate(params,[duration],[easing],[callback])
$("#btn").click(function(){
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000.function(){
$(this.css("border","5px solid blue"));
})
})
//综合动画，最后一步改变css样式：通过回调函数（否则动画刚开始就会改变css样式）
- stop();delay()
`//太多了，自己翻书吧`