jquery获取java对象的属性_04-jQuery的属性操作

jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作

html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()

DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()

类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()

值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()

attr()

设置属性值或者 返回被选元素的属性值

//获取值：attr()设置一个属性值的时候 只是获取值

var id = $(‘div‘).attr(‘id‘)

console.log(id)var cla = $(‘div‘).attr(‘class‘)

console.log(cla)//设置值

//1.设置一个值 设置div的class为box

$(‘div‘).attr(‘class‘,‘box‘)//2.设置多个值，参数为对象，键值对存储

$(‘div‘).attr({name:‘hahaha‘,class:‘happy‘})

removeAttr()

移除属性

//删除单个属性

$(‘#box‘).removeAttr(‘name‘);

$(‘#box‘).removeAttr(‘class‘);//删除多个属性

$(‘#box‘).removeAttr(‘name class‘);

prop()

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时，则返回第一个匹配元素的值。

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

语法：

返回属性的值：

$(selector).prop(property)

设置属性和值：

$(selector).prop(property,value)

设置多个属性和值：

$(selector).prop({property:value, property:value,...})

关于attr()和prop()的区别

女

提交

var el = $(‘input‘).first();//undefined 因为attr是获取的这个对象属性节点的值，很显然此时没有这个属性节点，自然输出undefined

console.log(el.attr(‘style‘));//输出CSSStyleDeclaration对象，对于一个DOM对象，是具有原生的style对象属性的，所以输出了style对象

console.log(el.prop(‘style‘));

console.log(document.getElementById(‘test‘).style);

$(‘button‘).click(function(){

alert(el.prop("checked") ? "男":"女");

})

})

什么时候使用attr()，什么时候使用prop()？

1.是有true,false两个属性使用prop();

2.其他则使用attr();

addClass(添加多个类名)

为每个匹配的元素添加指定的类名。

$(‘div‘).addClass("box");//追加一个类名到原有的类名

还可以为匹配的元素添加多个类名

$(‘div‘).addClass("box box2");//追加多个类名

removeClass

从所有匹配的元素中删除全部或者指定的类。

移除指定的类(一个或多个)

$(‘div‘).removeClass(‘box‘)；

移除全部的类

$(‘div‘).removeClass();

可以通过添加删除类名，来实现元素的显示隐藏

代码如下：

var tag = false;

$(‘span‘).click(function(){if(tag){

$(‘span‘).removeClass(‘active‘)

tag=false;

}else{

$(‘span‘).addClass(‘active‘)

tag=true;

}

})

案例：

代码如下：

.active{color:red;

}

张三

李四

王五

$(function(){

$(‘ul li‘).click(function(){//this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象

$(this).addClass(‘active‘).siblings(‘li‘).removeClass(‘active‘);

})

})