一、设置元素及内容
html() 获取元素中的HTML内容
html(value) 设置元素中的HTML内容
text() 获取元素中的文本内容
text(value) 设置元素中的文本内容
val() 获取表单中的文本内容
val(value) 设置表单中的文本内容
注意:当使用html()和text()设置元素的内容时,会清空原来的数据。如果希望追加信息,需要先获取原来的数据。
$('#box').html($('#box').html + 'extra html');
如果想设置多个选定状态,比如下拉列表、单选复选框等,可以通过数组传递操作。
$("input").val(["check1","check2","radio1"]); //value值是这些的将被选定
二、元素属性操作
attr(key) 获取某个元素key属性的属性值
attr(key,value) 设置某个元素key属性的属性值
attr({key1:value1,key2:value2...}) 设置某个元素多个key属性的属性值
atrr(key,function(index,value){}) 设置某个元素key通过函数来设置
注意:attr()方法里面的function() {}可以不传参数。可以只传一个参数index,表示当前元素的索引(从0 开始),也可以传递两个参数index、value,第二个参数表示原本属性的值。
删除指定的属性,就不可以使用匿名函数。
三、元素样式操作
css(name) 获取某个元素行内的CSS样式
css([name1,name2,name3]) 获取某个元素行内多个CSS样式
得到多个CSS样式的数组对象数组
js遍历元素
for (var i in box) {
alert(i +':' +box[i]);
}
jq $.each()方法遍历原生的js对象数组
$.each(box,function(attr,value) {
alert(attr+ ':' +value);
});
,each()方法遍历jq对象数组
$('div').each(box,function(attr,value) { //index为索引,element为元素DOM
alert(arrt+':'+value);
});
css(name,value) 设置某个元素行内的CSS样式
css(name,function(index,value)) 设置某个元素行内的CSS样式
css({name1:value1,name2:value2}) 设置某个元素行内的多个CSS样式
addClass(class) 给某个元素添加一个CSS类
addClass(class1 class2 class3...) 给某个元素添加多个CSS类
removeClass(class) 删除某个元素一个CSS类
removeClass(class1 class2 class3...) 删除某个元素多个CSS类
toggleClass(class) 来回切换默认样式和指定样式
toggleClass(class1 class2 class3...) 同上
toggleClass(class,switch) 来回切换的时候设置频率
toggleClass(function () {}) 通过匿名函数设置切换规则
togglecClass(function () {},switch) 在匿名函数设置时也可以设置频率
toggleClass(funtion(i,c,s) {} switch) 在匿名函数设置时传递三个参数
.toggleClass()方法的第二个参数可以传一个布尔值,ture表示切换到class类,false表示返回默认class类,这个特性可以用来设置切换频率。
var count = 0;
$('div').click(function() {
$(this.toggleClass('red',count++%3 == 0));
});
样式1和样式2的切换方法1:
$('div').click(function() {
//只是click的局部,又是toggleClass的全局
$(this).toggleClass('red'); //切换到样式2
if($(this).hasClass('red')) { //判断样式2存在后
$(this).removeClass('blue'); //删除样式1
} else {
$(this).toggleClass('blue'); //添加样式1,这里也可以用addClass
}
});
样式1和样式2切换方法2:
$('div').click(function() {
//局部
$(this).toggleClass(function () {
if($(this).hasClass('red')) {
$('this').removeClass('red');
return 'green';
} else {
$(this).removeClass('green');
return red;
}
});
});
方法2比方法1更好
四、CSS方法
width() 获取某个元素的宽度 返回的类型是number
width(value) 设置某个元素的宽度 直接传数值,默认加px
width(function (index,value) {}) 通过匿名函数设置某个元素的宽度
height() 获取某个元素的高度
height(value) 设置某个元素的高度
height(functiong (index, value) {}) 通过匿名函数设置某个元素的高度
innerWidth() 获取某个元素的宽度,包含内边距padding
innerHeight() 获取某个元素的高度,包含内边距padding
overWidth() 获取某个元素的宽度,包含边框border和内边距padding
overHeright() 获取某个元素的高度,包含边框border和内边距padding
overWidth(true) 获取某个元素的宽度,包含边框border、内边距padding和外边距margin
overHeight(true) 获取某个元素的高度,包含边框border、内边距padding和外边距margin
offset() 获取某个元素相对视口的偏移量
position() 获取某个元素相对于父元素的偏移量
scrollTop() 获取垂直滚动条的值
scrollTop(value) 设置垂直滚动条的值
scrollLeft() 获取水平滚动条的值
scrollLeft(value) 设置水平滚动条的值