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>