jQuery中常见函数用法

2019-06-21  本文已影响0人  清苑折纸

.val()
.attr()
.removeAttr()
.prop()
.css()
.addClass()
.removeClass()
.hasClass()
.toggleClass()

.val()

有参数时是设置input的value,无参数值是获取input的value

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

.attr()

获取元素属性的值
var title = $( "em" ).attr( "title" );
为元素属性赋值

$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );
//json类型
$( "#greatphoto" ).attr({
  alt: "Beijing Brush Seller",
  title: "photo by Kelly Clark"
});

$( "#greatphoto" ).attr( "title", function( i, val ) {
  return val + " - photo by Kelly Clark";
});

.removeAttr()

移除属性
$('div').removeAttr('id');

.prop()

操作元素的property,用于检测元素属性值

.css()

处理元素的css
获取css

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

var styleProps = $( this ).css([
  "width",
  "height",
  "color",
  "background-color"
]);

设置css值

$( "div.example" ).css( "width", function( index ) {
  return index * 50;
});

$( this ).css( "width", "+=200" );

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

$( this ).css({
  "background-color": "yellow",
  "font-weight": "bolder"
});

.addClass()

为元素添加class

.removeClass()

为元素移除class

.hasClass()

判断当前元素是否有该class值

.toggleClass()

class切换

<div class="tumble">Some text.</div>
第一次执行

$( "div.tumble" ).toggleClass( "bounce" )

<div class="tumble bounce">Some text.</div>
第二次执行

$( "div.tumble" ).toggleClass( "bounce" )

<div class="tumble">Some text.</div>
上一篇下一篇

猜你喜欢

热点阅读