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)  // 设定包装集元素的内容,会把<翻译成&lt;。。。

 

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相匹配的选项选中

 

posted @ 2014-07-29 22:57  VoctrALs  阅读(123)  评论(0编辑  收藏  举报