jQuery-初识④

jQuery操作元素的属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        function testField(){
            //获取元素对象
            var uname = $("#uname");
            //获取属性的类型
            alert(uname.attr("type"));
        }
    </script>
</head>
<body>
    <h3>jQuery操作元素的属性值</h3>
    <input type="button" value="测试获取元素属性" onclick="testField()">
    <hr>
    用户名：<input type="text" name="uname" id="uname">
</body>
</html>

获取元素属性类型的时候调用一个attr的方法

2.如何拿到实时数据，用户名输入的数据在点击按钮的时候可以显示，也就是把他存到计算机中

jQuery操作元素属性：

获取：

对象名.attr（“属性名”）//返回当前属性值

注意此种方法不能获取value属性的实时数据，使用对象名.val()进行获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        function testField(){
            //获取元素对象
            var uname = $("#uname");
            //获取属性的类型
            alert(uname.attr("type")+":"+uname.val());
        }
    </script>
</head>
<body>
    <h3>jQuery操作元素的属性值</h3>
    <input type="button" value="测试获取元素属性" onclick="testField()">
    <hr>
    用户名：<input type="text" name="uname" id="uname">
</body>
</html>

3.对操作元素进行修改：

修改：

对象名.attr（“属性名”，“属性值”）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        function testField(){
            //获取元素对象
            var uname = $("#uname");
            //获取属性的类型
            alert(uname.attr("type")+":"+uname.val());
        }
        function testField2() {
            //获取元素对象
            var uname = $("#uname");
            uname.attr("type","button");
        }
    </script>
</head>
<body>
    <h3>jQuery操作元素的属性值</h3>
    <input type="button" value="测试获取元素属性" onclick="testField()">
    <input type="button" value="测试修改元素属性" onclick="testField2()">

    <hr>
    用户名：<input type="text" name="uname" id="uname" value="haha">
</body>
</html>

点击：测试修改元素属性——

jQuery操作元素的属性值

猜你喜欢