jQuery语法和常用函数总结

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()
  //太多了，自己翻书吧