处理元素（jQuery）
Posted Lazy的笔记
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了处理元素（jQuery）相关的知识，希望对你有一定的参考价值。
在本章中我们将一起学习使用jQuery处理元素的各种方法
比如设置元素的属性，处理样式类和css属性、获取和设置元素的html或文本内容，为元素关联数据！
一、处理元素属性
1、attr方法
获取匹配的元素集合中的第一个元素的属性的值 或 设置匹配元素指定的属性
使用说明：
1）只传一个参数的情况：
1>字符串（属性名称）
只传一个字符串属性名称 表示获取匹配的元素集合中的第一个元素的属性的值
$('img').attr('src');获取的是第一个src=img.png;
<img >
<img >
2>属性 - 值 集合对象
一次性设置多个属性
2）传两个参数的情况:
1>第一个参数：
字符串属性名称
2>第二个参数：
①属性的值
②函数(index, attr) 这个函数返回用来设置的值，this指向当前的元素
接收表示元素在匹配集合中的索引位置的参数和表示元素上原来的 该属性 值的参数
return的数据就是这个属性的值
$('img').attr('src',function(i,v){
if(i==1)
{
return 'img4.jpg';
}
else{
return 'img5.jpg';
}
})
2、removeAttr方法
为匹配的元素集合中的每个元素中移除指定的属性
$('img').removeAttr('src');移除Img中的src属性
<img >
参数类型说明：
要移除的属性名,它可以是一个空格分隔的多个属性
3、prop方法
prop也是用来获取和设置属性的值，但和attr也有一些使用场合的区别
1.添加属性名称该属性就会生效应该使用prop
2.prop()方法适用于Boolean值的属性
3.其他则使用attr
简单点说：我们建议以下属性使用prop方法
checked、readonly、selected、disabled、autofocus等
$('#form1 input:eq(0)').prop('checked',true);
<form id='form1'>
<input type="checkbox">
</form>
4、removeProp方法
删除自定义属性
对于原生的属性checked、selected、disabled等建议设置为false而不是直接删除
使用较少，因为我们一般直接prop方法设置为false就可以了！
$('#form1 input:eq(0)').prop('checked',false);
二、处理class属性
1、addClass方法
为每个匹配的元素添加指定的样式类名
参数类型说明：
1）class名称（字符串）
每个匹配元素添加的一个或多个用空格隔开的样式名
2）function(index, currentClass)
有多少个匹配元素，这个函数就会执行多少次！
函数可以接受到两个参数：第一个是当前元素的序号、第二个是当前元素拥有class
函数内部this代表当前的html元素对象
return 的数据就是类名
$('div').addClass(function(i,currentClass){
if(i==0)
{
return 'bg-red';
}
else{
return 'font-blue';
}
});
----------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第六章处理元素</title>
<script type="text/javascript" ></script>
<style type="text/css">
div {
width: 100px;
height: 100px;
border: :1px solid #ccc;
}
/*自定义的类css样式*/
.bg-red{
background: red;
}
.font-blue {
color:blue;
}
</style>
</head>
<body>
<script type="text/javascript">
$(function(){
$('div').addClass('bg-red font-blue');
});
</script>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>
2、hasClass方法
确定任何一个匹配元素是否含有给定的（样式）类，返回true或false
可用于多个拥有多个类名的元素
参数类型说明
alert($('div').hasClass('a'));
<div class="a">div1</div>
类名称
3、removeClass方法
移除集合中每个匹配元素上一个，多个或全部样式
1）class名称（字符串）
$('div').removeClass();不传参数，移除所有选中的class
$('div').removeClass('b');移除class='b'；
<div class="a">div1</div>
<div class='b a'>div2</div>
每个匹配元素移除的一个或多个用空格隔开的样式名
2）function(index, className)
有多少个匹配元素，这个函数就会执行多少次！
函数可以接受到两个参数：第一个是当前元素的序号、第二个是当前元素拥有class
函数内部this代表当前的html元素对象
返回一个或多个(用空格隔开)将要被移除的样式名
/*setInterval(function(){
$('#div1').toggleClass();
},1000);*/
<div id='div1' class="bg-img">div1</div>
可以设置图片的切换
.bg-red{
background: red;
}
setInterval(function(){
$('#div1').toggleClass();
},1000);每个隔一秒将样式出现与消失
<div id='div1' class="bg-red">div1</div>
4、toggleClass方法
切换！如果存在（不存在）类就删除（添加）这个类
使用说明：
1）使用方式一：
不传参数
对已有的class进行切换！
2）使用方式二：
传入类型: String
在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名。$('#div1').toggleClass('font-blue');若指定的元素#div1有font-blue样式，那么就删除，否则就添加该样式
3）使用方式三
传入函数：
Function( Integer index, String className )
String className：当前元素拥有的class
返回应该显示的样式
可以人工控制是应该加上指定的样式，还是移除指定的样式！
可以给该参数传第二个参数（布尔值），用来表示判断样式类是否应该被添加或删除：
true表示添加样式，false表示移除样式!
$('div').toggleClass(function(i,j)
{
if(i%2==0){
return 'bg-red';
}
else{
return 'bg-blue';
}
});
<div id='div1'>div1</div>
<div class='b'>div2</div>
<div>div3</div>
三、处理css样式
1、css方法
获取匹配元素集合中的第一个元素的样式属性的值 或 设置每个匹配元素的一个或多个CSS属性
1）获取并设置单个css值
jQuery对象.css('css属性');$('#div').css('width');获取width属性值
jQuery对象.css('css属性','值');alert($('#div1').css('width','200px'));
2）获取多个css属性
jQuery对象.css(css属性数组);
3）一次设置多个css样式属性,,$('#div1').css['width','height'];
jQuery对象.css(css属性与值的对象);
$('#div1').css({'width':'200px',
'height':'300px',
'background':'blue'});一次设置多个css属性值
4）以相对值设置样式属性
jQuery对象.css('css属性','+=10');//数字值之前加上+=或者-=
$('#div1').css('width','+=10');
这种方式仅适用于数值单位表示的css属性
5）给第二个参数传入函数来设置样式属性
函数接受两个参数
第一个参数表示当前元素的序号
第二个参数表示当前元素当前属性的值
函数内部this代表当前的html元素对象
返回设置的样式
$('#div1').css('background',function(i,currentValue){
return 设置的属性值;
});
$('#div1').css('width',function(i,j){
return '300px';
});
2、针对具体属性的css便捷方法
除了css方法之外，jQuery还定义了许多方法，用来获取或设置常用css属性及其相关信息！
1）width方法
参数说明：
1>无参数 $('div').width()
得到jQuery对象中第一个元素的宽度
2>数值或者字符串 $('div').width('200px')
设置jQuery对象中所有元素的宽度
3>传入函数
使用函数来设置jQuery对象中所有元素的宽度
两个参数：第一个表示当前元素序号，第二个参数表示当前元素的当前宽度
函数内部this代表当前的html元素对象返回要设置的值
$('div').width(function(i,j){
return '300px';
});
2）height方法
使用方法同上
作用，获取元素的高度
设置元素的高度
3）scrollTop方法/前提需要由滚动条，当内容超过设置的宽高时，用overflow:auto滚动条
参数说明：
1>无参数
得到jQuery对象中第一个元素垂直滚动条的位置
2>数值$('#div1').scrollTop(100)
设置jQuery对象中所有元素的垂直滚动条的位置
4）scrollLeft方法 $('#div1').scrollLeft(40)
使用方法同上
作用，获取/设置 页面或者具体元素水平方向滚动条的位置
5）outerWidth方法
得到jQuery对象中第一个元素的宽度，包括内边距和边界
参数说明：
false：默认，表示不包括外边距
true：表示包括外边距
传入长度字符串或者数值来设置outerWidth
传入函数进行设置
函数接收元素的索引位置的设置和旧的outerWidth作为参数
this代表当前元素的对象
6）outerHeight方法
使用方法同上
得到jQuery对象中第一个元素的高度，包括内边距和边界
参数同上
7）innerWidth方法
得到jQuery对象中第一个元素的内部宽度，包括内边距，但不包括边界和外边距
参数说明：
传入长度字符串或者数值来设置innerWidth
传入函数进行设置
函数接收元素的索引位置的设置和旧的innerWidth作为参数
this代表当前元素的对象
8）innerHeight方法
使用方法同上
得到jQuery对象中第一个元素的内部高度，包括内边距，但不包括边界和外边
四、处理元素内容
1、text方法
使用说明：
1）不传参数
得到jQuery对象内所有元素及其后代元素的文本内容
2）传入用于设置匹配元素的文本内容
3）传入function
使用函数来设置jQuery对象中每个元素的文本
两个参数：第一个表示当前元素序号，第二个参数表示当前元素的文本
函数内部this代表当前的html元素对象
返回要设置的内容
2、html方法
取得第一个匹配元素的html内容 或 设置元素的html内容
使用方式同上
五、处理表单元素
1、val方法
使用说明：
1）不传参数
得到jQuery对象内第一个元素的值
2）传入用于设置jQuery对象内所有元素的值
$('form input:eq(0)').val('张三');
3）传入function
使用函数来设置jQuery对象中每个元素的值
两个参数：第一个表示当前元素序号，第二个参数表示当前元素的当前值函数内部this代表当前的html元素对象
返回要设置的值
alert($src=$('img').attr('data-src'));
$('img').attr('src',$('img').attr('data-src'));
<img src="/img?url=img4.jpg" width="200px">；在加载页面时，data-src不能执行，需要去设置属性src，在去获取路径。
先加载HTML元素，通过$中的function在去加载需要外部链接的资源。
六、为元素关联数据
把元素的一些数据，保存到对应的元素上面去!
使用data-属性名称可以给元素里面存储对应的属性！
jQuery还提供了一个data这个方法，专门用来给元素关联数据（把数据存储到对应的元素里面去）
存储的数据可以是各种类型
1、data方法
在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值
使用说明：
1）存数据
data(key,value)或者data(键值对象)$('img').data('src','img4.jpg')
2）取数据$('img').data('src') 取出上面的img4.jpg;
<img width="200px" data-src='img4.jpg'> 这样也可以用('img').data('src')获取img4.jpg
data(key)：得到jQuery对象中第一个元素指定键的数据
data()：得到jQuery对象中第一个元素关联的所有键值对数据
存储多个数据
$('img').data({'name':'zhangsan','age':20});
2、removeData方法
移除数据
removeData(key)：删除jQuery对象内所有元素中键key对应的数据
removeData()：删除jQuery对象中所有元素的所有关联数据
以上是关于处理元素（jQuery）的主要内容，如果未能解决你的问题，请参考以下文章