jQuery操控DOM元素-访问页面的元素

访问页面的元素

访问页面时需要与页面中的元素进行交互式的操作，在操作中元素的访问时最频繁，最常见的。主要包括对元素属性、内容、值、css的操作

元素属性操作

在jQuery中可以对元素的属性执行获取、设置和删除的操作。通过attr方法可以对元素属性执行获取和设置操作，而removeAttr方法则可以轻松删除某一指定的属性

获取元素的属性

语法--- attr(name);

获取img标签的src属性,并弹出alert

设置元素的属性

attr方法不仅可以获取元素的属性，也可以设置元素的属性

语法--- attr(key,value);

其中key表示属性的名称，value标书属性的值，设置多个属性的值，也可以通过attr实现

语法--- attr({key0:value0,key1:value1});

鼠标经过改变图片，在鼠标经过的时候，通过attr方法设置图片的src值实现

删除元素的属性

jQuery中，使用removeAttr方法可以删除元素的属性

语法--- removeAttr(name);

鼠标经过删除img标签的src属性，鼠标经过之后图片消失

元素内容操作

在jQuery中操作元素内容的方法包括html方法和text方法

获取或设置元素的html内容

html();

无参数，用于获取元素的html内容

*获取id="wrapper"标签的html内容

html(val);

有参数，用于设置元素html内容

鼠标经过改变id="wrapper"标签的html内容

获取或设置元素的文本内容

text();

不带参数，用于获取元素的文本内容

获取p元素的文本内容

元素的文本内容

text(val);

带参数，用于设置元素的文本内容

鼠标经过，设置p元素的文本内容

元素的文本内容

获取或设置元素值

在jQuery中，要获取或设置元素的值是通过val方法实现的,改方法通常用于设置获取表单的值

语法--- val(val);

如果val方法不带参数，则是获取元素的值，如果val方法带参数，则是设置元素的值

另外val方法可以获取select标记中的多个选项值，其语法格式如下：

val.join(",");

获取元素的值

xuanxiang:
1 2 3 4 5

点击按钮重新设置元素的值

xuanxiang:
1 2 3 4 5

元素样式操作

元素样式的操作包含：直接设置样式、增加css样式表、切换样式表和删除样式表

直接设置元素样式

在jQuery中，通过css方法为某各指定的元素设置样式，语法如下：

css(name,value);

如果要同时改变多个样式，语法：css({name1:value1,name2:value2,...})

鼠标经过文字，改变文字的颜色为红色

颜色改变

增加css样式表

语法：addClass(class);

如果需要增加多个样式表，用空格隔开

样式切换

通过toggleClass方法切换样式，语法：toggleClass(class);

这个函数的功能是：当元素中含有名称为class的样式表时，删除该样式，否则增加该类

toggleClass方法实现音乐图标的点击切换打开和关闭

删除样式表

语法：removeClass(class);

如果需要删除多个样式表，用空格隔开