jquery基本Dom操作

1 html()获取所有的html内容

2 html(value) 设置html内容，有html自动解析

3 text() 获取文本内容

4 text(value) 设置文本内容，有html自动转义

5 val()获取表单的值

6 val(value) 设置表单的值

7 attr(key) 获取元素的key属性的属性值

8 attr(key,value) 设置元素的key属性并赋值value

9 attr({key:value,key2:value2,key3:value3})对一个对象设置多个属性值

10 attr(function(index,value){ })

11 css()获取css样式值

12 css('key','value') 设置css样式值

////获取一个元素的多个css样式利用数组 for in
//var cssvalues = $('div').css(['color', 'height', 'width', 'border'])
////1 利用for in
////for (var a in cssvalues) {
//// console.log(a + ' ' + cssvalues[a]);
////}
//// 2 使用 each方法 jquery原生态的遍历数组的方法
//$.each(cssvalues, function (attr, value) {
// console.log(attr + ":" + value);
//})
////color rgb(204, 204, 204)
////height 300px
////width 800px
////border 1px solid rgb(204, 204, 204)
//// each 遍历jquery对象数组
//$('div').each(function (index, element) {
// console.log(index + ':' + element);
//})

//css 可以传递多个键值对的方式来设置样式的值
//$('div').css({
// 'color': 'red',
// 'height':'30px'
//})
//// css function() 计算样式值返回一个值再设置
//$('div').css('width', function (index, value) {
// return parseInt(value) - 500 + 'px';
//})

//添加样式 addClass 同时添加多个样式
//$('div').addClass('red bg size');
////删除样式 removeClass 同时删除多个样式
//$('div').removeClass('bg size');
//css 样式的切换 toggleClass 与默认样式的切换
//$('div').click(function () {
// $(this).toggleClass('red');
//})

//两种自定义样式的切换
$('div').click(function () {
$(this).toggleClass(function () {
if ($(this).hasClass('green')) {
$(this).removeClass('green');
return 'red'
} else {
$(this).removeClass('red');
return 'green'
}

})
})
})

巴特西

jquery基本Dom操作

最新文章

热门文章