JQ & HTML
JQ作为一个JS库，很好地继承了JS和HTML互动的特点，并且还给出了包装得更好，操作层次更高的方法。和之前JQ的内容一样，方法的表现形式是$(selector).action()。下面根据操作分类来进行一些罗列
■ 文档 & 属性操作
● 获得/设置内容
text(...) 当没有参数时返回被选元素的文本内容，当设置有参数时指设置被选元素的内容为参数值
html(...) 和text类似，只不过获取/设置的对象是html代码
val(...) 用于获取/设置表单中输入框的值
● 属性操作
attr("attribute") 返回被选元素某个属性的值，如果选择到多个元素就返回第一个匹配元素的相关值。
attr("attribute","value") 设置所有被选元素某个属性的值，如果需要设置多个属性的值，可以传进一个对象（{"attribute1":"value1","attribute2":"value2"...}）作为参数
removeAttr("attribute") 删除被选元素的一个属性
addClass("className") 向被选元素添加一个class，其类名是className
removeClass("className") 删除指定被选元素的一个class，如果参数为空则删除所有类
toggleClass("className"[, switch]) 如果被选元素有名为className的类，就删除之，如果没有则添加之。switch设置为true时只添加不删除，false时只删除不添加。
以上三个类相关的方法中，"className"这个位置的参数也可以换成一个函数function(index,class)。规定这个函数必须返回需要添加或删除的一个或多个类名。
hasClass("className") 检查是否含有指定的那个类
除了attr之外，在比较新的jquery版本中还引入了一种新的属性操作方法，prop。prop和attr的区别在于，attr主要用于设置/获取我们自定义的属性，而prop则主要针对那些html自带的属性。比方说用jquery获取一个checkbox的input是否被选中了。我记得在另外文我提到过可以用$(element).is(':checked')，这固然是一种办法，不过略僵硬。更加好的办法可以这样:
$('input[type=checkbox]').prop('checked')，设置可以通过prop('checked',true/false)来进行
类似的，select，radio等组件也可以通过prop而非attr来进行设置
● 添加元素
append(...) 在元素末尾，在元素内部增加若干个新元素，新元素可以以html代码、jQuery创建的新元素对象，JS创建的新元素对象等形式体现，并且各个新元素间用逗号隔开。比如：
function appendText() { var txt1="<p>Text.</p>"; // 以 HTML 创建新元素 var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素 var txt3=document.createElement("p"); // 以 DOM 创建新元素 txt3.innerHTML="Text."; $("p").append(txt1,txt2,txt3); // 追加新元素 }
prepend(...) 在元素开头，在元素内部增加若干个新元素，同上
after(...) 在元素后面追加若干新元素，新元素和被选元素是并列关系，新元素的形式也是以上三种方式。
before(...) 在元素前追加若干新元素。。
insertAfter(...) 这个略微特殊一些。之前的所有方法都是选定一个元素后在这个元素的周边一些位置进行新增元素的操作，且新元素由方法的参数指明。但是这个方法选定元素和方法参数都是选择器，即$(selector1).insertAfter(selector2)。这个的意思就是说，把selector1选中的所有元素作为新增元素移动到selector2选中的所有元素后面。同时，被selector1选中元素从原来的位置被删除。实例：
*注意点：前面的selector里要是写的就是html代码的话那么可以往selector2指定的元素周边增加上一个新元素了。
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("h1,h2").insertAfter("p"); }); }); </script> </head> <body> <h1>title1</h1> <h2>title2</h2> <p>paragraph1</p> <p>paragraph2</p> <button>在每个 p 元素之后插入 h1与h2 元素</button> </body> </html>
点击按钮后，新的段落顺序是paragraph1,title1,title2,paragraph2,title1,title2。感受一下。。
insertBefore(...) 和前者相反
appendTo(...) 和上面两个一样，前后两个selector，当然和insert不同是插入在selector2选中元素内部的末尾
preappendTo(...) 和上者相反
● 替换元素
replaceWith(...) 将被选中的元素替换成参数中的一段html代码所代表的内容,另外参数可以是一个函数，返回一些内容。
$(content).replaceAll(selector) replaceAll的格式和经典的$(selector).action不同，它把content放在方法前面，就是说把selector选中的元素替换成content的内容，相当于和replaceWith的参数顺序反了反。另外replaceAll不能用函数作为参数
● 删除元素
detach() 从DOM中删除所有匹配的元素,但是在jQuery中会保留下这些元素的所有性质，包括绑定的事件和其他数据。
empty() 删除被选中元素的所有子节点，注意：文本也属于其所属节点的子节点（所谓文本节点）。所以$("p").empty()会删掉所有p里面的文字的
remove() remove也是从DOM中删除元素，和detach的不同在于它在删除DOM中的元素后再jQuery中只保留元素对象本身而不保留绑定的事件等其他数据。
$("button").click(function{alert("Message Ari!")});
var temp = $("button").detach() //detach有返回值，是因为所有不是获取类的jQuery方法都会返回this
$("body").append(temp[0]) //加下标0是因为之前得到的temp是个jQuery对象，其通过下标访问来得到具体的DOM节点
//此时点击按钮仍然会跳出提示框来
var temp = $("button").remove()
$("body").append(temp[0])
//此时点击按钮不会有反应，因为remove的时候把事件等也一起从button上删掉了
● 包裹元素
wrap(wrapper) 将被选中元素用wrapper包裹起来。wrapper通常是个可以盛放别的东西的容器元素比如div,span之类的。然后wrapper可以用html代码表示也可以用JS/JQ代码创建的新元素，还可以是JQselector选出的一些元素（现有的元素）。比如$("p").wrap("<div></div>")。当选择器选到的不止一个元素的情况，每个被选中的元素都会单独得被一个单独的wrapper包裹起来。
unwrap() 解开元素的包裹，即删除所有被选中元素的父元素。
wrapAll(wrapper) 将所有被选中元素包裹在一个wrapper中,如果被选中的元素不是连续的话，那么就把所有元素的在文档流中的位置聚集到第一个匹配的元素的位置，然后在那个位置进行包裹。
● 复制元素
clone(withEvents) 复制一份所有被选中元素的副本，withEvents是一个boolean，默认是false，其控制副本是不是也复制原元素的事件和事件处理函数等属性。
■ 外观变化操作
● CSS操作
JQ可以对CSS做出调整。说到CSS调整，最先想到的就是通过类的变化来调整了，那么通过类的变化在上面对类的操作方法中都已经提过了，就不在多提了。
如果想要对CSS做出更加灵活细致的调整，可以用css()方法。和前面一些方法一样，css()方法有两种形式的使用，当只对单一的CSS属性作调整时只要用css("attribute","value")即可，如果要对多个CSS属性作调整那么就需要css({"attribute1":"value1","attribute2":"value2"})这样的object作为参数的方式。
*为防混淆，特意再提下JQ动画方法animate中的属性设置。之前在JQ基础篇中提到过，animate方法也是接受一个object作为参数，且它有几个要注意的地方（http://www.cnblogs.com/franknihao/p/6682810.html）。这些注意点中的一部分，放到css()方法中也是通用的。比如属性名没有引号引起来的话要用驼峰形式写，属性值要用引号引起来。总之需要记住，这里的object类型的参数，虽然看起来和CSS样式表都有大括号长得很像，但是完全是语法不同的两个东西。
下面给出一个实例：
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").css({backgroundColor:"yellow","font-size":"200%","padding":"10px"}); }); }); </script> </head> <body> <h2>这是标题</h2> <p style="background-color:#ff0000">这是一个段落。</p> <p style="background-color:#00ff00">这是一个段落。</p> <p style="background-color:#0000ff">这是一个段落。</p> <p>这是一个段落。</p> <button>为 p 元素设置多个样式</button> </body> </html>
● 尺寸操作
JQ另一个可操作的东西就是尺寸了。JQ不仅可以获取设置窗口的尺寸，也可以对元素进行尺寸操作。（之前应该也说过，如果选择窗口就是$(window)即可）
width(...) 有参数就设置，无则获取被选物宽度
height(...) 设置/获取被选物高度
innerWidth,innerHeight()
outerWidth,outerHeight() 不多说了。。
scrollLeft(...) 设置或获取被选元素相对滚动条左侧的位移（如果是设置，相当于是自动滚动滚动条咯？）
scrollTop(...) 设置或获取被选元素相对于滚动条顶侧的位移
jQuery 遍历
遍历方法，是指通过调用一个方法来得到一些和当前元素有特殊关系的元素。当然有时候被选元素有许多具备这种关系的其他元素，这时候我们的方法得到的就是一个相关元素的元素集合。在选出这样一个集合之后直接调用一些方法，可以把这个方法应用到这个集合中的所有元素身上。这是因为大多JQ方法都是自带遍历性质的。例子，比如$("p").parents().css({"color":"red"})会让所有p元素的所有前辈元素都变成红色。
在JQ中遍历，往往是链式调用的，一般的模式就是$(selector).action1().action2().action3()...每个action可以对当前的选择结果集合的堆栈做出增删改，最后来一个总结的action_final，这个才是真正的操作，统一对修改过后的选择结果集合中所有选择结果进行统一的实质性的操作。
■ 对前辈的遍历
即向上遍历元素。向上遍历元素主要用到的方法是:
parent() 返回被选元素的父元素
parents() 返回所有被选元素的前辈元素。
parentsUntil(s) 返回从被选元素的父元素开始到s这个选择器指定的某个前辈元素为止，之间的所有前辈元素。
■ 对后辈的遍历
即向下遍历
children() 返回被选元素的所有子元素。
find(s) 返回被选元素的所有匹配s选择器的后辈元素
■ 对同辈的遍历
即水平遍历
siblings() 返回被选元素的所有同辈元素
next() 返回被选元素的下一个同辈元素，如果被选元素已经是最后一个同辈元素了，自然就没有next()了，返回一个空对象
nextAll() 返回被选元素之后的所有同辈元素
nextAllUntil(s) 返回被选元素后一个开始到s这个选择器匹配的元素为止，之间的所有同辈元素
和next系列三个方法类似的还有prev(),prevAll(),prevAllUntil()三个方法，不在赘述。
■ 对选择结果的过滤
JQ自带一些过滤方法，可以对选择器得到的结果进行过滤。所以过滤方法不仅仅局限于遍历出来的结果，也适用于普通情况下选择器选择出来的结果。所以，把这一节放到遍历的章里面不太合理。。有如下基本的过滤方法：
first() 返回选择结果中的第一个元素，相当于var selection = $(selector);var result = selection[0]的意思吧
last() 最后一个。。
eq(n) 返回被选元素的返回结果中index是n的那个元素。
*这里我想提一句。。要搞清楚JS中元素对象和JQ中元素对象的区别。从形式上来说，console.log(JSobject)得到的就是一个标签，而console.log(JQobject)得到的会是一个像字典一样的东西，而其中有一些item是index:JSObject。（相当于JQ的元素对象把一个JS元素对象封装，同时还增加了一些其他的指标）。从功能上说，JSobject的操作要遵照原生的JS规则，比如想要改背景色应该JSObject.style.backgroundColor = xxx，但是JQObject可以调用JQ方法比如css({"background-color":"yellow"})。在eq(n)中，返回的依然是JQ对象，所以可以$("p").eq(1).css(xxx)但是不能$("p")[1].css(xxx)而应该$("p")[1].style.backgroundColor=xxx。其他的JQ方法也是，返回的对象都是JQ对象而不是JS对象。
JQ对象可以用.get()方法来转换成一个数组，这样也就是转换成一个JS对象
filter(selector) filter方法参数也是一个选择器，意思是进行双重选择，从第一个选择器的选择结果中再选择一次。
not(selector) 对第一个选择器选择得到的结果进行反选
■ 其他一些遍历中可以用的方法（http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp）
andSelf() 之前的遍历方法，基本上是先定位一些元素再以这些元素为起点找其他元素。这样就导致最后得到的选择结果中，最开始定位器定位到的那些元素不被包括在内。andSelf方法的作用就是把最开始定位器选择到的元素也加入到选择结果的堆栈中
add() add方法可以手动地给选择结果堆栈加入一些元素。之前的所有遍历方法，都只能有一个选择器，如果想要额外地让其他一些元素也被选中，那么就需要另写一条语句，而add方法可以让你直接在这条语句里解决，比如$("div").add("p").css(xxx)这样就可以在一条语句里同时对所有div和p改变CSS。（当然就这个实例而言你可以$("div,p")，在这我只是想说明add方法的意思）
each(func) 对多个被选元素中的每一个执行一次func函数。
end() end方法可以让最近的一个选择/定位操作失效从而让整个堆栈返回到更久之前的状态。end方法可以让整个动作链更加自然，比如$(selector).find(selector2).css(xxx).end().find(selector3).css(xxx)，第一个css方法旨在改变selector2选择到的那些元素的CSS，然后调用end让find(selector2)失效，把堆栈重回最开始的selector状态，然后在find(selector3)，把selector3匹配的元素的CSS变化掉。
is(selector) is方法参数是一个selector，其作用是检查前面的selector选择出来的结果是否也能匹配这个参数selector，返回true/false
map(func(index,object)) map方法参数是第一个函数，将selector选择到的结果中一个个元素传递给函数func，然后将返回结果一一放入一个JQ对象，map方法返回这个对象。可以通过调用get()方法来把这个对象转化成一个JS数组然后在处理这个数组。参数func的两个参数，index代表当前遍历元素的index是多少，object代表当前遍历元素的对象。
4660
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
