jQuery属性/CSS操作

2019-09-29  本文已影响0人  董二干先生

属性相关

.val([value])
这是一个读写双用的方法,用来处理input的value,当方法没有参数的时候返回input的value值,当传递了一个参数的时候,方法修改input的value值为参数值

$('input').val()
$('input').val('newValue');

.attr()
获取元素特定属性的值

var title = $( "em" ).attr( "title" );

.attr(attributeName,value)
为元素属性赋值

$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );

.removeAttr()
为匹配的元素集合中的每个元素中移除一个属性(attribute)

.removeAttr() 方法使用原生的 JavaScript removeAttribute() 函数,但是它的优点是可以直接在一个 jQuery 对象上调用该方法,并且它解决了跨浏览器的属性名不同的问题。

$('div').removeAttr('id');

.prop()/.removeProp()
这两个方法是用来操作元素的property的,property和attibute是非常相似的概念

CSS相关

.css()
这是个和attr非常相似的方法,用来处理元素的css
.css(propertyName) / .css(propertyNames)
获取元素style特定property的值

var color = $( this ).css( "background-color" );

.css(propertyName,value)
设置元素style特定property的值

$( this ).css( "background-color", "yellow" );

.addClass(className) / .addClass(function(index,currentClass))
为元素添加class,不是覆盖原class,是追加,也不会检查重复

$( "p" ).addClass( "myClass yourClass" );

$( "ul li" ).addClass(function( index ) {
  return "item-" + index;
});

removeClass([className]) / ,removeClass(function(index,class))
移除元素单个/多个/所有class

$( "p" ).removeClass( "myClass yourClass" );

$( "li:last" ).removeClass(function() {
  return $( this ).prev().attr( "class" );
});

.hasClass(className)
检查元素是否包含某个class,返回true/false

$( "#mydiv" ).hasClass( "foo" )

.toggleClass(className)
toggle是切换的意思,方法用于切换,当元素没有某个class就添加,有,就移除

$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble bounce">Some text.</div>
$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble">Some text.</div>
上一篇 下一篇

猜你喜欢

热点阅读