jQueryDOM操作笔记

attr(name[,value])：value（任意｜函数）

$('*').attr('title',function(index,previousValue){
    return previousValue+' I am element '+index+' and my name is '+(this.id || 'unset');
});

也可以用传入的对象指定的属性和值来设置匹配集中所有元素相应的特性值。（参数值也可以是一个函数引用）

$('input').attr({
    value:'',
    title:'Please enter a value'
});

removeAttr(name)：删除一个特性不会删除JavaScript DOM元素相应的属性。比如，从元素中删除readonly特性，会导致元素的readonly属性值true变为false。但属性本身不会从元素中删除。

data(name,value)：将传入的值添加到为所有包装元素准备的jQuery托管数据仓库中。value（对象｜函数）

data(name)：通过指定的名称来获取之前在包装集的第一个元素上保存的任何数据。（如果没有，则返回undefined）

removeData()

addClass(names)：如果有多个，用空格分隔。names（字符串｜函数）

removeClass(names)

toggleClass(names[,switch])：如果有多个，用空格分隔。names（字符串｜函数），如果switch存在且为true则添加类名，false则删除类名。

//添加斑马条纹，鼠标移入和移出切换样式
function swapThem(){
　　$(tr).toggleClass('striped');
}
$(function(){
    $('table tr:nth-child(even)').addClass("striped");
    $("table").mouseover(swapThem).mouseout(swapThem);
});

hasClass(name)：返回true或false。实际上调用了is()方法，可以用is(.name)方法来代替。

css(name[,value])：value（字符串｜数字｜函数），也可以传入一个对象参数。（css()方法总是返回字符串）

$('<img>',{src:'images/little.bear.png',alt:'Little Bear',title:'I woof in your general direction',click:function(){alert($(this).attr('title'));}})
.css({
    cursor:'pointer',
    border:'1px solid black',
    padding:'12px 12px 20px 12px',
    backgroundColor:'white'
});

width([value])、height([value])：value（数值｜字符串｜函数），value如果不指定单位，默认为px ，否则要加单位。获取方法以数值形式返回值。

innerHeight()、innerWidth()：不包含边框但包含内边距。

outerHeight([margin])、outerWidth([margin])：包含边框和内边距，如果margin为true，则包含外边距。

注：$(window).innerHeight()会抛出异常，而$(window).outerHeight()则返回NaN。

offset()：返回包装集中第一个元素相对于文档参照源的位置（以px为单位）。可以对它应用left和top属性。

position()：返回以元素的最近偏移父元素（拥有显式定位规则relative或absolute的最近祖先元素）为参照源的相对位置 （以px为单位）。

scrollLeft([value])、scrollTop([value])

html([content])：content（字符串｜函数）

text([content])：尖括号（<和>）或&会被替换其相应的HTML实体字符。

append(content)、prepend(content)、before(content)、after(content)、appendTo(targets)、prependTo(targets)、insertBefore(targets)、insertAfter(targets)：content（字符串｜元素｜jQuery｜函数），targets（字符串｜元素） 。

wrap(wrapper)、wrapAll(wrapper)、wrapInner(wrapper)：wrapper（字符串｜元素）

unwrap()：删除包装元素的父元素。

注：append()、prepend()、replaceWith()、before()、after()这五个方法接受函数参数，元素的索引值将作为第一参数，该元素当前内容的HTML字符串形式作为第二参数。对于before()和after()，它们在调用时没有第二个参数。

remove(sel)：从页面DOM中删除包装集中的所有元素，如何传入参数，该参数会被当成选择器，jQuery对象中只有匹配该选择器的元素才会被移除，返回结果是包装集，表示已删除的元素，所以依然可以用新包装集进行一些操作，如appendTo()、prependTo()、insertBefore()、insertAfter()等。但同时绑定到元素上的任何jQuery数据或事件也会被同时删除。如果不想删除，可以使用detach()方法。

detach(sel)

empty()：删除匹配集中所有DOM元素的内容。

clone()：若传入参数true，则复制事件处理器。

replaceWith(content)：content（字符串｜元素｜函数）

replaceAll(sel)

val()：返回匹配集中第一个元素的value特性。如果此元素是一个可以多选的元素时，返回值是所有选择项所组成的数组。比如<select id="list" multiple="multiple">，则表达式$('#list').val()返回包含一个或多个元素的数组。

$('[name="radioGroup"]:checked').val()

//val()只考虑包装集中的第一个元素，因此并不适用于可能选中多个控件的复选框组。可以这样
var checkboxValues=$('[name="checkboxGroup"]:checked').map(function(){return $(this).val();}).toArray();

val(value)：value（字符串｜函数），设置传入的值为所有匹配的表单元素的value。

$('input').bind('blur', function() {
    $(this).val(function( i, val ) {
        return val.toUpperCase();
    });
});　　　　//失去焦点后，input中的文本变为大写

val()的一个变体可以用来选中复选框或者单选按钮元素，或者选择<select>元素中的可选项。

$('input,select').val(['one','two','three']);
//这个语句会搜索页面上所有的<input>和<select>元素，只要这些元素的值与输入字符串'one'、'two'和'three'
//任何一个相匹配。任何匹配的复选框或者单选按钮都会变成选中状态，而任何匹配的可选项将会变为选择状态。
//也可以通过attr('selected',true); 和 attr('checked',selected); 来选中

代码片段集

//list1
//以数组的形式返回特定元素的类名列表
$('p:first').attr('className').split(' ');

//如果特性不存在，attr()方法会返回undefined，因此p没有类名就会抛出错误
//可以通过检查特性是否存在来解决这个问题
$.fn.getClassNames=function(){
   var name=this.attr('className');
   if(name!=null){
        return name.split(' ');
   }else{
        return [];
   }
};　　　　　　//之后就可以用getClassNames()方法来获取由类名组成的数组了。

//list2
//文本框提示文本自动显示与隐藏
$('#address').focus(function(){
    var txt_value=$(this).val();
    if(txt_value==this.defaultValue){     //this.defaultValue就是当前文本框的默认值
        $(this).val('');
    }
});
$('#address').blur(function(){
    var txt_value=$(this).val();
    if(txt_value==''){
        $(this).val(this.defaultValue);
    }
});