jQueryInAction Reading Note 3.
属性和特性
操作元素属性
jQuery没有用于获取或者修改元素属性的命令。需要利用javascript，首先需要做的就是获得元素的引用。
each(function)
对包装集中的各个元素，进行function操作，function有默认的参数为当前元素的位置，function具有当前对象this的引用。
$("img").each(function(n){
this.alt = "this is " + n+1 + "th img, id is " + this.id;
});
获取元素特性
attr(name)
返回当前包装集中第一个元素的name属性的值，如果没有设定该属性返回值为undefined。其中name不区分大小写
$('div').attr("name")
this.id vs. $('#id').attr('id')
this.id 返回值为DOM中的值，如果没有设定id，那么id为空""；
$('#id').attr('id')，它的返回值为html中指定的id的值，如果没有指定的话，返回值为undefined。
属性和特性的区别
属性是与生俱来的，即使用户没有设定值他也是有默认值的，能够通过javascript直接改变或者获取；
特性是用户设定的，标准的特性能够通过javascript获取，非标准的只能通过attr(name)来获取。
设置元素特性
attr(name, value)
这个方法的作用是把value的值设定
name跟上面一样；
value可以是一个字符串，这很简单
value可以是一个函数，这能够理解，就是把返回值作为值
attr(attributes)
attributes是一个对象，而这个对象是一个属性<->值所组成的对象，如{id:"some", value:"0"}。
以上两个方法会把包装集中所有的元素的属性都进行修改。
IE中input元素的name属性是不能够进行修改的，如果想要达到相同的效果的话，需要移除原来的input，再追加一个新的input。
删除特性
removeAttr(name)
移除包装集元素中的name特性。特性是能够被删除的，但是属性还是存在的，只不过值发生变化了。
元素样式修改
元素样式，属性为className，特性为class。
对它的修改或者操作不使用className属性或者attr(name)命令，jQuery提供了更加优雅的方式。
追加样式
addClass(names)
给所有的包装集元素追加names样式类。
names可以是一个classs样式，也可以是以空格分隔的多个class样式。
删除样式
removeClass(names)
把指定的样式从包装集元素的样式中移除。
names可以是一个classs样式，也可以是以空格分隔的多个class样式。
样式更迭
toggleClass(name)
对于包装集元素，如果有name指定的样式类，那么删除这个样式类，如果没有这个样式类的话，追加这个样式类。
function swap() { $('tr').toggleClass("bg-blue"); }
直接操作css
css(name, value)
css(properties)
这两个跟attr很像，相当直接了。
css(name)
返回包装集中第一个元素的css中name属性的值。
width(value) / width
height(value) / height
用来设定和获取元素的高度或高度，单位为px
hasClass(name)
name是一个样式类的名称，不带"."。
is(selector) vs. hasClass(name)
他俩在样式判断这方面可以替换，只不过is的参数是一个jQuery选择器，而hasClass的参数是一个样式类；
selector的基本样式为：.className
name的基本样式为className
操作HTML
html() // 获取包装集第一个元素的html
html(text) // 设定包装集元素的html
text() // 获取包装集里元素的所有文本(连不连接起来，不知道。。。)
text(content) // 设定包装集元素的内容，会把<翻译成<。。。
append(content)
content可以是html片段或者是元素(需要用$("")选择出来，，，)
会把content追加到包装集元素内，所有的既有元素之后。
$('table').append("<h1>some</h1>"); // 生成的h1会存在于table里面，这里需要注意
appendTo(target)
target是一个jQuery选择器，或DOM元素
该方法会把包装集里的所有元素追加到target获得的所有的元素内，既有元素之后。
$("source selector").appendTo("target selector")
如果target有一个的话，那么source会被移动；
如果target有多个的话，那么source会被复制。
与append和appendTo相似的有
prepend和prependTo
在目标元素内，所有元素之前插入；
before和insertBefore
在目标元素之外，前面插入；
after和insertAfter
在目标元素值外，后面插入。
A.append(B), A.prepend(B), A.before(B), A.after(B) : 在A中处理B，A是目标，B是处理对象；
A.appendTo(B), A.prependTo(B), A.innertBefore(B), A.innertAfter(B): 把A处理到B中，A是处理对象，B是目标。
包裹元素
实在不知道这个东西的用途。。。
...可以实现全文搜索，将搜索结果用某种特殊的样式表现出来。。。
wrap(wrapper)
wrapper是包装器，用来包装包装集元素的
包装集中的每一个元素都会被包装器包装
wrapAll(wrapper)
包装集中的每一个元素都会被包装在一个包装器中
wrapInner(wrapper)
把包装集中的每一个元素的内容用包装器包装起来
<ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> $('li')wrap("<div></div>") ----------------------------------------- <ul> <div><li title="苹果">苹果</li></div> <div><li title="橘子">橘子</li></div> <div><li title="菠萝">菠萝</li></div> </ul> $('li')wrapAll("<div></div>") ----------------------------------------- <ul> <div> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </div> </ul> $('li')wrapInner("<div></div>") ----------------------------------------- <ul> <li title="苹果"><div>苹果</div></li> <li title="橘子"><div>橘子</div></li> <li title="菠萝"><div>菠萝</div></li> </ul>
删除元素
remove()
将DOM中的包装集元素删除
这个方法仍然对包装集元素具有引用，这些元素可以进行其它操作，如insertAfter等。
$("div.elementToReplace").after("<p>New Element!</p>").remove();// 新建的p，放到div.elementToReplace后，然后把div.elementToReplace删除；
$("div.elementToReplace").remove().after("<p>New Element!</p>");// 先把div.elementToReplace删除了，又把它放到了新建的p之后。。。
empty()
将包装集元素的内部节点都删除
克隆元素
clone(copyHandlers)
将包装集中的元素进行克隆，进而进行其它的操作。
copyHandlers是一个boolean型的值，是否将节点上的事件一起克隆，一起克隆的话，true，反之，false。
表单元素
val()
获取包装集中第一个元素的value的值，注意，如果第一个元素不存在value属性的话，会抛出javascript错误。
对radio不友好，因为它总会获得第一个radio的value值，但是可以这么获取：$('input[type=radio, name=some]:checked').val();
如果radis一个也没有选择的话，上述代码返回值为undefined。
val(value)
把value的值设定给包装集中的每一个元素，需要注意！！！
设置的貌似只限于输入型的
val(values)
values是一个数组，数组中提供多个值[a, b, c]
这个方法会作用于各种类型的input，select等。但是结果挺乱的
输入型的input：会把值a, b, c输入到文本框内
select的话，会把value相匹配的选项选中
radio的话，没有找到什么规律，不敢乱讲
checkbox的话，会把value相匹配的选项选中
