jQuery笔记（锋利的jQuery）

知识：

jQuery对象和DOM对象不是互通的
相互转换的方法：

//jQuery转换DOM
//法一：使用数组下标[index]
var $cr=$("#cr");                    //jQuery对象
var $cr=$cr[0];   	            	 //DOM对象
//法二：使用jQuery的get(index)方法
var $cr=$("#cr");                    //jQuery对象
var $cr=$cr.get(0);         		 //DOM对象

//DOM转换jQuery
//用$()把DOM对象包装起来
var cr=document.getElementById("cr");      //DOM对象
var $cr=$(cr);                             //jQuery对象

检测jQuery对象是否存在的方法

if($("#tt").length>0){
}
if($("#tt")[0]){
}

jQuery选择器

//基本选择器
$("#id")                                            //单个元素
$(".class")   								        //集合元素
$("element")                                        //集合元素
$("*")   									        //集合元素
$("selector1，selector2，……，selectorN")            //集合元素

//层次选择器
$("ancestor descendant")                             //后代选择器，集合元素
$("parent>child")                                    //子元素选择器，集合元素
$("prev+next")                                       //同辈相邻选择器，集合元素  
$("prev~siblings")                                   //同辈之后所有选择器，集合元素

//过滤选择器
//基本过滤选择器
$("selector:first")                                 //选取目标元素中的第一个元素，单个元素
$("selector:last")                                  //选取目标元素中的最后一个元素，单个元素
$("selector1:not（selector2）")                     //去除所有与给定选择器匹配的元素，集合元素 
$("selector:even")                          //选取索引是偶数的所有元素，集合元素     
$("selector:odd")                           //选取索引是奇数的所有元素，集合元素
$("selector:eq(index)")                     //选取索引是index的元素，单个元素，从0开始
$("selector:gt(index)")                     //选取索引大于index的元素，集合元素
$("selector:lt(index)")                     //选取索引小于index的元素，集合元素
$("selector:header")                        //选取所有h1、h2、……，集合元素
$("selector:animated")                      //选取正在执行动画的目标元素，集合元素
$("selector:focus")                                 //选取当前获取焦点的元素，集合元素
//内容过滤选择器
$("selector:contains(text)")                        //选取含有文本内容text的目标元素，集合元素
$("selector:empty")                                 //选取没有子元素和文本的目标元素，集合元素
$("selector1:has(selector2)")                       //选取含有selector2元素的目标元素，集合元素
$("selector:parent")                                //选取含有子元素的目标元素，集合元素
//可见性过滤选择器
$("selector:hidden")                                //选取所有不可见的目标元素，集合元素
$("selector:visible")                               //选取所有可见的目标元素，集合元素
//属性过滤选择器
$("selector[attribute]")                            //选取拥有此属性的目标元素，集合元素        
$("selector[attribute=value]")                      //选取属性等于value值的目标元素，集合元素 
$("selector[attribute!=value]")                     //选取属性不等于value值的目标元素，集合元素
$("selector[attribute^=value]")                     //选取属性以value开头的目标元素，集合元素
$("selector[attribute$=value]")                     //选取属性以value结尾的目标元素，集合元素    
$("selector[attribute*=value]")                     //选取属性含有value值的目标元素，集合元素        
$("selector[attribute|=value]")         //选取属性等于value或者以之为前缀的目标元素，集合元素        
$("selector[attribute~=value]")         //选取属性用空格分隔得值中包含value的目标元素，集合元素   
$("selector[attribute1][attribute2][attributeN]")    //选取属性为以上属性组合的目标元素，集合元素 
//子元素过滤选择器      
$("selector:nth-child(index/even/odd/equation)")   //选取每个目标父元素下的第index个子元素
                                                   //或者奇偶个子元素，集合元素，从1开始
$("selector:first-child")                          //选取每个父元素的第一个子元素，集合元素  
$("selector:last-child")                           //选取每个父元素的最后一个子元素，集合元素
$("selector:only-child")                           //选取每个目标父元素中的唯一子元素，集合元素    
//表单对象属性过滤选择器
$("selector:enabled")                            //选取所有可用元素，集合元素   
$("selector:disabled")                           //选取所有不可用元素，集合元素  
$("selector:checked")                            //选取所有被选中的元素（单/复选框），集合元素    
$("selector:selected")                           //选取所有被选中的选项元素（下拉列表），集合元素
//表单选择器
$("selector:input")                              //选取目标表单中所有<input><textarea>
                                                 //<seledct><button>，集合元素  
$("selector:x")  
//x可以为：text/password/radio/checkbox/submit/image/reset/button/file
//分别选中目标表单中所哟：单行文本框/密码框/单选框/多选框/提交按钮/图像按钮/重置按钮/按钮/上传域

如果表达式中含有特殊字符，使用转义符\\

jQuery中的DOM操作

//创建节点
//创建元素节点
var $li_1=$("<li></li>");
var $li_2=$("<li></li>");

//创建文本节点
var $li_1=$("<li>香蕉</li>");
var $li_2=$("<li>雪梨</li>");

//创建属性节点
var $li_1=$("<li title='香蕉'>香蕉</li>");
var $li_2=$("<li title='雪梨'>雪梨</li>");

//插入节点
$a.append($b)                  //往a中追加b
$a.appendTo($b)                //往b中追加a
$a.prepend($b)                 //往a中前置b
$a.prependTo($b)               //往b中前置a
$a.after($b)                   //往a后插入b
$a.insertAfter($b)             //往b后插入a
$a.before($b)                  //往a前插入b
$a.insertBefore($b)            //往b前插入a

//删除节点
$a.remove()                    //将获取的a删除（append等方法会先删除再移动）
//同时remove方法也提供筛选eg：$("li").remove("li[title!=菠萝]");
$a.detach()                    //与remove的方法区别是remove会删除与之绑定的所有事件和数据
                               //而detach不会把之从jQuery对象中删除，可以再使用。
                               
$a.empty()                     //清空节点，内容全部删除，自身保留


//复制节点
$a.clone()                     //可设置参数true同时复制元素中所绑定的事件

//替换节点（绑定的事件会消失）
$a.replaceWith($b)             //将a换为b
$a.replaceAll($b)              //将b换未a

//包裹节点
$a.wrap($b)                    //把每个a用b包裹
$a.wrapAll($b)                 //把所有a用b一起包裹
$a.wrapInner($b)               //把每个a的子内容用b包裹

//属性操作
//获取和设置属性
$a.attr("attribute")                                          //获取属性
$a.attr("attribute","value")                                  //设置单个属性值
$a.attr({"attribute":"value","attribute":"value"}")           //设置多个属性值
//.prop()用法一致。
//attr 是从页面搜索获得元素值，所以页面必须明确定义元素才能获取值，相对来说较慢。 
//prop是从属性对象中取值，属性对象中有多少属性，就能获取多少值，不需要在页面中显示定义。 
//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。快速，准确。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//删除属性
$a.removeAttr("attribute")

//样式操作
$a.addClass("classname")                 //为元素追加class
$a.removeClass("classname")              //为元素删去class

//切换样式
$a.toggleClass("classname")              //在匹配的元素集合中的每个元素上添加或删除一个或
//多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类。
$a.hasClass("classname")                 //判断是否含有某个样式

//设置和获取html、文本和值
$a.html()                                //获取、设置a的html代码
$a.text()                                //获取、设置a的文本内容
$a.val()                                 //获取、设置a的value内容

//遍历节点
$a.children()                            //获取匹配元素的子元素集合
$a.next()                                //获取匹配元素后面紧邻的同辈元素
$a.prev()                                //获取匹配元素前面紧邻的同辈元素
$a.siblings()                            //获取匹配元素前后所有的同辈元素
$a.closest("$b")                         //获取a最近的b元素，先检查当前元素再由下至上查找
$a.parent("$b")                          //获取集合中每个匹配元素的父级元素，单个元素
$a.parents("$b")                         //获取集合中每个匹配元素的祖先元素，多个父节点元素
$a.find("$b")                            //通过一个选择器，jQuery对象，
                                         //或元素过滤，得到当前匹配的元素集合中每个元素的后代。
$a.filter(b)                             //在a中获取满足条件b的元素，b可以为selector、
                                         //function(index){}、element、jQueryObject

//CSS-DOM操作
$a.css("css")                            //获取样式属性
$a.css("css","value")                    //设置单个样式属性值
$a.css({"css":"value","css":"value"}")   //设置多个样式属性值
$a.height()
$a.height(100)
$a.height("10em")                        //直接获取、设置高度
$a.width()                               //宽度同理
$a.offset()                              //获取a在当前视窗的相对偏移，拥有两个属性top、left
var offset=$("p").offset();
var left=offset.left
$a.position()