阅读(3111)
赞(2)
jQuery 类与属性的控制
2017-07-21 17:37:21 更新
- .addClass() .hasClass() .removeClass()
- 添加一个类,判断是否有指定类,删除类
$('body').addClass('test'); $('body').addClass(function(index, current){return current + 'new'}); $('body').removeClass('test'); $('body').removeClass(function(index, current){return current + ' ' + 'other'});
- .toggleClass()
- 类的开关式转换,它的使用方法有多种:
<img class="test other" /> $('img').toggleClass(); //对所有类的开关 $('img').toggleClass('test'); //对指定类的开关 $('img').toggleClass(isTrue); //根据isTrue判断所有类的开关 $('img').toggleClass('test', isTrue); //根据isTrue判断指定类的开关 //同 $('img').toggleClass('test') 只是类名由函数返回 $('img').toggleClass(function(index, class, isTrue){return 'name'}); //isTrue会作为函数的第三个参数传入 $('img').toggleClass(function(index, class, isTrue){return 'name'}, isTrue);
- .attr()
- 获取或者设置一个属性值,它的使用方法有多种:
<img id="greatphoto" src="brush-seller.jpg" alt="brush seller" /> $('#greatphoto').attr('alt'); //获取属性 $('#greatphoto').attr('alt', 'Beijing Brush Seller'); //设置属性 //同时设置多个属性 $('#greatphoto').attr({ alt: 'Beijing Brush Seller', title: 'photo by Kelly Clark' }); //设置属性为函数返回值, 函数的上下文为当前元素 $('#greatphoto').attr('title', function(i, val) { return val + ' - photo by Kelly Clark'; });
- .prop()
- 用法同 .attr() ,只是对象变成了 properties
- .removeAttr() .removeProp()
- 删除属性
- .val()
- 设置或获取元素的表单值,通常用于表单元素。
<input type="hidden" value="test" /> $('input').val(); $('input').val('other');
- .html()
- 设置或获取元素的节点文件本值。
<div><span>测试</span></div> $('div').html(); $('div').html('<div>测试</div>'); $('div').html(function(index, old){return old + '<span>另外的内容</span>'});