jQuery资料之常用方法

◆ 设置样式：

$('div').css('属性', '值')    

示例：

$(function() {
    console.log($("div").css("width"));
    // $("div").css("width", "300px");
    // $("div").css("width", 300);
    // $("div").css(height, "300px"); 属性名一定要加引号
    $("div").css({
        width: 400,
        height: 400,
        backgroundColor: "red"
            // 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
    })
})

◆ 设置类样式：

常用的三种设置类样式方法：

// 1.添加类
$("div").addClass("current");

// 2.删除类
$("div").removeClass("current");

// 3.切换类
$("div").toggleClass("current");

◆ 获取当前元素索引号：

$("div").index()

◆ 元素固有属性值 prop()：

所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。

prop("属性")  //获取属性

prop("属性","属性值")  //设置属性 

注：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。

◆ 元素自定义属性值 attr()：

用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。

attr("属性")  //获取属性，类似原生的getAttribute()

attr("属性","属性值")  //设置属性，类似原生的setAttribute()

注：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）

◆ 数据缓存 data()：

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

data("name") //向被选元素获取数据

data("name","value")  //向被选元素附加数据

注：可以读取 HTML5 自定义属性 data-index ，得到的是数字型。

◆ 内容文本值：

常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作。

1、普通元素内容 html()（相当于原生的inner HTML）

html()  //获取元素的内容

html("value")  //设置元素的内容

2、普通元素文本内容 text()（相当于原生的innerText）

text()  //获取元素的文本内容

text("value")  //设置元素的文本内容

3、表单的值 val()（相当于原生的value）

val()  //获取表单的值

val("value")  //设置表单的值

注：html() 可识别标签，text() 不识别标签。