普通属性

1.设置属性：

设置单个属性：$(选择器).attr("属性名","属性值")
设置多个属性：$(选择器).attr({属性名:"属性值",属性名:"属性值"…}) 这里的属性名可加引号也可不加引号

2.获取属性：

$(选择器).attr("属性名")

3.删除属性：

$(选择器).removeAttr("属性名")

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body >

    <img id="img" src="20171122191603_896cd9.jpg" disabled/>

<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script>
    //设置属性
    $("#img").attr("width","300px");
    $("#img").attr({"border":"3px",title:"love"})

    //获取属性
    var v1=$("#img").attr("src");

    //删除属性
    $("#img").removeAttr("disabled")

    console.log(v1)

</script>
</body>

</html>

运行结果：

css属性

1.设置css属性：

设置单个css属性：$(选择器).css("属性名","属性值")
设置多个css属性：$(选择器).css({属性名:"属性值",属性名:"属性值"…}) 这里属性名的引号可加可不加

2.获取css属性：

$(选择器).css("属性名")

3.添加样式：

$(选择器).addClass("样式名")

4.删除样式：

$(选择器).removeClass("样式名")

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .clr{
        background: red;
    }
    .cor{
        color: #00AAEE;
    }
</style>

<body >

    <div id="test" class="cor" >
        <h1>hello world</h1>
    </div>

<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script>

    //设置css属性
    $("#test").css("background","green")
    $("#test").css({
        background:"yellow",
        color:"pink"
    })
    
    //获取css属性
    console.log($("#test").css("color"))

    //添加样式
    $("#test").addClass("clr")

    //删除样式
    $("#test").removeClass("cor")


</script>
</body>

</html>

运行结果：

元素内容

1.设置元素内容：

设置的内容不会被html解析：$(选择器).text("内容")
设置的内容会被html解析：$(选择器).html(''内容')

2.获取元素内容：

获取的内容是呈现在页面上的：$(选择器).text()
获取的内容是元素里的源代码内容：$(选择器).html()

通常text()方法用于元素里的内容是纯文本，html()方法用于元素里的内容含有html标记。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body >

    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test">
        <h1>&gt;hello world&lt;</h1>
    </div>

<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script>

    $("#test1").text("<h1>&gt;hello world&lt;</h1>")
    $("#test2").html("<h1>&gt;hello world&lt;</h1>")

    var v1=$("#test").text();
    var v2=$("#test").html()

    console.log(v1)
    console.log(v2)
    
</script>
</body>

</html>

运行结果：

表单对象value值

1.设置value值：

$(选择器).val("value值")

2.获取value值

$(选择器).val()

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body >

    <input id="username" type="text" name="username" value="哈哈">

<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script>

    var v1=$("#username").val()

    $("#username").val("嘻嘻")

    console.log(v1)

</script>
</body>
</html>

运行结果：

JQuery设置元素属性和内容

普通属性

css属性

元素内容

表单对象value值

猜你喜欢