jQuery中的DOM基础与CSS方法
一、jQuery中的一些DOM方法
1、html()方法
可以获得元素中的html内容 包括html标签
html()方法中的value属性 可以将里面的html内容
进行更改 会将里面的html中的标签自动进行解析
2、text()方法
可以获得元素中的文本内容
text()方法中的value值会将html代码进行转化显示在页面上 所以在text()
方法内部最好不要写html元素的标签名或者html的代码
3、val()方法 获得表单中的文本内容
val()方法中的value值可以改变表单中的文本的内容
val()方法中以数组的形式传入表单元素中的value值可以使它实现默认选
中的效果
代码如下：
html代码：
<input type="radio" value="男" />男
<input type="radio" value="女" />女
<input type="checkbox" value="编程" />编程
jQuery代码：
$(function(){
$('input').val(['男','编程']);
});
实现的效果为 男 编程为默认选中的状态
4、attr()方法
可以获得元素的属性里面的值
如：alert($('div').attr('class'));
可以获得div元素的class的名称
可以在里面传入两个参数 给元素添加属性
如：$('div').attr('title','我是标题');
可以给div元素添加title属性
可以通过键值对的方法向里面传入多个属性值
不要使用此方法向元素内部传入class属性与id属性
如：$('div').attr({
data:'123',
title:'我是标题',
});
可以在attr()方法中传入function(index,value)函数
index参数表示的是元素的索引值(索引值从0开始)
value参数表示的是获得元素内部有的值
5、removeAttr()方法
可以删除元素的属性值
二、css()方法
里面可以传入两个参数 第一个参数为属性名 第二个参数为属性值 改变元
素的CSS样式
1、里面可以以数组的形式传入多个属性值
1)可以通过for...in的方法获得里面的属性值
代码如下：
var box = $('div').css(['color''height']);
for(i in box){
alert(i + ':' + box[i]);
}jQuery中提供了可以遍历数组的方法$.each()方法
2)each()方法
既可以遍历JavaScript中的数组 也可以遍历jQuery中的数组
里面可以传入function()函数 第一个参数为元素的值
function(attr,value);
attr参数为元素的属性名 value参数为元素的属性值
代码如下：
var box = $('div').css(['color''height']);
//each()方法遍历JavaScript中的数组
$.each(box,function(attr,value){
alert(attr + ':' + value);
});
each()方法遍历jQuery中的数组
function(index,element);
index参数为此元素的索引值(索引值从0开始)
element参数为获得的DOM对象
代码如下：
$('div').each(function(index,element){
alert(index + ':' + element);
});2、css()方法中可以通过键值对的方法向一个css里面传入多个属性值
height、width只传入数字
代码如下：
$('div').css({
'color':'red',
'background-color':'pink',
'width':200,
'height':100,
});
3、css()方法中还可以传入function(index,value)
通过function()方法可以在里面进行一些计算 把全局的方法转换为局部的
方法
4、addClass()方法
可以通过class名添加class
多个class名之间用空格隔开
5、removeClass()方法
可以通过class名移除class
多个class名之间用空格隔开
6、toggleClass()方法
toggleClass()方法与click()联用
实现指定样式与默认样式之间的点击切换 多个class名之间用空格隔开
第二个参数可以传入布尔值 默认为真 false时则不可以点击切换
也可以自己定义点击的频率
代码如下：
var count = 0;
$('div').click(function(){
$(this).toggleClass('red size',count++%2==0);
});
7、width()方法、height()方法
可以获得元素的宽、高
可以在()内部直接传入数值 默认单位为px 可以对元素的属性值进行改变
也可以在()内部传入function(index,value) 对属性值进行设置
8、innerWidth()、innerHeight()方法
获得元素的宽度值 可以包括元素的padding值
9、outerWidth()、outerHeight()方法
获得元素的宽度值 包括元素的border、padding值
10、outerWidth(true)、outerHeight(true)方法
可以获得元素的border+padding+margin值
11、offset()方法
可以获得相对于窗口左上角的距离有.top.left两个值
12、position()方法
可以获得相对于父级元素的距离有.top.left两个值
13、scrollTop(value)方法
获得滚动条距离上面的距离 可以通过value值对其里面的默认值进行修改
直接传入数值就可以
14、scrollLeft(value)方法
获得滚动条距离左边的距离 可以通过value值对其里面的默认值进行修改
直接传入数值就可以
