jQueryInAction Reading Note 3.

浏览数：18 / 时间：2015年06月09日

属性和特性

操作元素属性

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>