jQuery实战学习笔记（二）-用jQuery为页面添加活力

3.1 使用元素属性与特性

1.获取特性值：

attr(name):第一个匹配元素的特性值。若为空或第一个不存在此特性，返回underfined。

2.设置特性值：

attr(name,value):返回包装集。将包装集中所有元素已命名的特性设置为传入的值。
attr(attributes):返回包装集。用传入的对象指定的属性和值来设置匹配集中所有元素相应的特性值。

例如：

$('input').attr({    value:'',    title:'this is a title'});

3.删除特性：

removeAttr(name):返回包装集。从每个匹配的元素中删除指定的特性。

4.特性实例使用场景：

实例1：强制在新窗口中打开链接：

<a href='http://ww.baidu.com' target='_blank'>www.baidu.com</a>

$("a[href^='http://']").attr('target','_blank');

实例2：解决双重提交问题：

$('form').submit(function(){    $(":submit",this).attr('disabled',true);});

5.在元素上存储自定义数据：

data(name,value):返回包装集。将传入的值添加到为所有包装元素准备的jQuery托管数据仓库中。

data(name):返回获取的数据，若无则返回undefined。

removeData(name):返回包装集。

---

3.2 改变元素样式

1 .添加和删除类名

addClass(name):返回包装集。为包装集中的所有元素添加指定的单个或多个类名。

removeClass(name):返回包装集。从包装集中的每个元素上删除指定的单个或多个类名。

toggleClass(names):返回包装集。无则添，有则删。

jQuery也提供了toggleClass()方法的另一种变体：根据任意的布尔表达式来添加或删除类。

toggleClass(names,switch):返回包装集。switch表达式的计算结果为true，则添加类名，false则删除类名。

判断元素是否包含特殊的类：

hasClass(name):若包装集中有元素拥有传入的类名则返回true，否则返回false。

注意：和is()方法相比，实现效果相同，但hasClass()方法更直观高效。

扩展jQuery:以数组的形式返回特定元素的类名列表

$.fn.getClassNames=function(){    var name=this.attr('className');    if(name!=null){        return name.split(' ');    }else{        return [];//没有任何类则返回空数组    }};

2.获取和设置样式

css(name,value):返回包装集。设置每个匹配元素的已命令CSS样式属性为指定的值。value可以是字符串或函数

css(name)::返回包装集。获取包装集中第一个元素的css属性的已计算值。（带单位！！！）

css(properties):返回包装集。设置所有匹配元素的css属性为传入对象的多个键值。

width()和height()：获取包装集中第一个元素的宽度或高度。（不带单位！！！）

width(value)和height(value):返回包装集。设置匹配集中所有元素的宽度和高度。

例：若传入函数，则有两个参数：元素下标和css属性的当前值。

$('div.expandable').css("width",function(index,currentWidth){    return currentWidth+20;});

例：传入对象

$('img').css({    cursor:'pointer',    border:'1px solid red',    padding:'5px',    ...});

其他与尺寸相关的jQuery方法：

innerHeight()：不包含边框但含内边距的内部高度。

innerWidth()：不包含边框但含内边距的内部宽度。

outerHeight(margin)：包含边框和内边距的外部高度，margin为true，则包含外边距，否则不包含外边距。

outerWidth(margin)：包含边框和内边距的外部宽度，margin为true，则包含外边距，否则不包含外边距。

注意：要获取 window对象的宽度,我们只能使用一下方法输出电脑屏幕的宽度

$(window).width();//正确姿势$(window).css("width"); //输出 undifined

3.定位和滚动

offset()和position()都是返回一个javascript对象，但一个是浮点数（四舍五入为最近的整数）,一个是整数。

offset()：返回一个用浮点数来表示left和top属性的javascript对象，描述相对于文档源的以像素为单位的位置。

position()：返回一个用整数来表示left和top属性的javascript对象，描述相对于最近偏移父元素为参照源的相对位置。

参考博客文章：http://kb.cnblogs.com/page/48103/

offset()和position()的区别：

1. 使用position()方法时，事实上是把该元素当绝对定位来处理，获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。

2. 使用position()方法时，如果其所有的父元素都为默认定位（static）方式，则其处理方式和offset()一样，是当前窗口的相对偏移。

3. 使用offset()方法不管该元素如何定位，也不管其父元素如何定位，都是获取的该元素相对于当前视口的偏移。

4. 获取匹配元素在当前视窗(整个document的，包括滚动条隐藏)的相对偏移，其父元素是document的，建议用offset()；‘

5. 若要获取同一个相对父元素下的兄弟结点元素，使用position()是比较合适。

   3.3 设置元素内容

1.替换HTML或文本内容

html()：返回第一个匹配元素的html内容，包括html标签等！

html(content):返回包装集。设置传入的HTML片段，可传入字符串或函数，若为函数，则设置当前元素为上下文，传递两个参数：元素的下标和当前元素的内容。

text()：返回连接而成的字符串。将包装集元素中的所有文本内容连接起来，并作为结果返回。

text(content)：返回包装集。可传入字符串或函数，若为函数，则设置当前元素为上下文，传递两个参数：元素的下标和元素现有的文本内容。

2.移动和复制元素

append(content)：返回包装集。将传入的html片段或元素追加到所有匹配元素的内容中（内容尾部）。content(字符串|元素|jQuery|函数)，若为函数，设置当前元素为函数上下文，传两参：元素下标和原先的内容。

prepend(content)：返回包装集。添加到所匹配元素的内容的开头。

before(content)：返回包装集。将传入的html片段或元素插入为目标元素的兄弟节点，位于目标元素之前。

after(content)：返回包装集。插入为目标元素的同级节点，位于目标元素之后。

注意：以上四种方法在移动位置需要区分好！分别在内容尾部、内容开头、目标元素之前、目标元素之后

接下来，jQuery还提供了其他四种方法：反转源元素和目标元素的顺序。

appendTo(targets)：返回包装集。将源元素追加到目标元素内容的末尾!有比较方便的应用：一步删除并添加元素！无需先删除后添加元素

prependTo(targets)：返回包装集。将源元素插入到目标元素内容的开头

insertBefore(targets)：返回包装集。将源元素添加到目标元素前面

insertAfter(targets)：返回包装集。将源元素添加到目标元素后面

3.包裹与反包裹元素

wrap(wrapper)：返回包装集。使用传入的HTML标签或元素的副本将匹配集中的元素包裹起来。

wrapAll(wrapper)：将匹配集中的元素作为一个整体包裹起来。用于包裹多个元素组成的整体。

warpInner(wrapper)：将匹配集中的元素内容（包括文本节点）包裹起来。

unwrap()：删除包装元素的父元素。子元素和其所有同级节点一起替换了DOM中的父元素。

4.删除元素

remove(selector)：从页面DOM中删除包装集中的所有元素。但并不会将匹配元素从jQuery对象中删除，后续还可以使用！！！

detach(selector)：从页面DOM中删除包装集中的所有元素，保留绑定的事件和jQuery数据。

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

5.复制元素

clone(copyHandlers)：返回新建的包装集。copyHandlers为true，则复制事件处理器，若为false或省略，则不复制事件处理器。

例：插入副本之后，选择原包装集并隐藏。

$("ul").clone().insertBefore('#box').end().hide();

6.替换元素

replaceWidth(content)：返回被替换元素的jQuery包装集。

replaceAll(selector)：用匹配集中的内容，替换所有与传入d选择器相匹配的元素。、

注意：replaceWith() 与replaceAll() 方法都可以实现元素节点的替换，二者最大的区别在于替换字符的顺序，前者是用括号中的字符替换所选择的元素，后者是用字符串替换括号中所选择的元素。同时，一旦完成替换，被替换元素中的全部事件都将消失。

3.4 处理表单元素值

val()：返回匹配集中第一个元素的value特性。多选元素则返回所有选择项所组成的数组。

val(value)：返回包装集。

val(values)：返回包装集。values：一个数组，用来确定应该选中或者选择哪些元素。

例：

$('input,select').val(['one','two','three']);

以上会搜索所有的input和select元素，只要这些元素的值与输入字符串’one’,’two’,’three’任何一个相匹配。任何匹配的复选框或单选按钮都会变成选中状态，而任何匹配的可选项将会变为选择状态。