jQuery属性的操作

最新推荐文章于 2023-08-28 21:50:54 发布

衰小孩、519

最新推荐文章于 2023-08-28 21:50:54 发布

阅读量390

点赞数

分类专栏： JavaWeb 文章标签： javaweb

本文链接：https://blog.csdn.net/A_JOKER___/article/details/121151383

版权

JavaWeb 专栏收录该内容

86 篇文章 0 订阅

订阅专栏

主要方法

html()：它可以设置和获取起始标签和结束标签中的内容。跟dom属性innerHTML一样。
text()：它可以设置和获取起始标签和结束标签中的文本。跟dom属性innerText一样。
val()：它可以设置和获取表单项的value属性值。跟dom属性value一样
attr()：可以设置和获取属性的值。不推荐操作checked、readOnly、 selected、disabled 等等
prop()：可以设置和获取属性的值。只推荐操作checked、readOnly、 selected、disabled 等等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jQuery包/jquery.min.js"></script>
    <script type="text/javascript">
        $(function (){
            //html()方法相当于dom中的innerhtml方法
            //不传参是获取对象
            // alert($("div").html());
            // //传参是赋值
            // $("div").html("hello world");

            // //text()方法相当于dom中的innertext方法
            // //不传参是获取对象
            // alert($("div").text());
            // //传参是赋值
            // $("div").text("hello");

            // //val()方法相当于dom中的value方法
            // $("button").click(function (){
            //     //无参即获取对象
            //     alert($("#username").val());
            //     //传参即赋值
            //     $("#username").val("abab");
            // })

            // //批量操作
            // //单选框
            // $(":radio").val(["radio1"]);

            // //多选框
            // $(":checkbox").val(["box1","box2"]);

            // //下拉多选
            // $("#multiple").val(["mul1","mul2","mul3"]);

            // //下拉单选
            // $("single").val(["sin2"]);

            //多重选择器，可以设置多个标签多个属性
            $(":radio,:checkbox,#multiple,#single").val(["radio2","box1","box2","mul2","mul4","sin2"]);
        })
    </script>
</head>
<body>
<div>我是div标签<span>我是div中的span标签</span></div>
<input type="text" name="username" id="username">
<button>操作输入框</button><br/>

单选：
<input type="radio" name="radio" value="radio1">radio1
<input type="radio" name="radio" value="radio2">radio2
<br/>

多选：
<input type="checkbox" name="check" value="box1">box1
<input type="checkbox" name="check" value="box2">box2
<input type="checkbox" name="check" value="box3">box3
<br/>

下拉单选：
<select id="single">
    <option name="sin1">mul1</option>
    <option name="sin2">mul2</option>
    <option name="sin3">mul3</option>
    <option name="sin4">mul4</option>
</select>
<br/>

下拉多选：
<select id="multiple" multiple="multiple" size="4">
    <option name="mul1">mul1</option>
    <option name="mul2">mul2</option>
    <option name="mul3">mul3</option>
    <option name="mul4">mul4</option>
</select>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../jQuery包/jquery.min.js"></script>
    <script type="text/javascript">
        $(function (){
            //attr
            // alert($(":checkbox:first").attr("value"));//获取属性
            // $(":checkbox:first").attr("value","box");//设置属性
            // alert($(":checkbox:first").attr("value"));

            //在获取复选框选中状态时
            //attr返回checked或者undefined,不推荐使用
            //prop返回true或者false,推荐使用
            alert($(":checkbox:first").attr("checked"));//返回undefined
            alert($(":checkbox:first").prop("checked"));//返回false

        })
    </script>
</head>
<body>
多选：
<input type="checkbox" name="checkbox" value="box1">box1
<input type="checkbox" name="checkbox" value="box2">box2
</body>
</html>

衰小孩、519

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery属性的操作

主要方法html()：它可以设置和获取起始标签和结束标签中的内容。跟dom属性innerHTML一样。text()：它可以设置和获取起始标签和结束标签中的文本。跟dom属性innerText一样。val()：它可以设置和获取表单项的value属性值。跟dom属性value一样attr()：可以设置和获取属性的值。不推荐操作checked、readOnly、 selected、disabled 等等prop()：可以设置和获取属性的值。只推荐操作checked、readOnly、 selected
复制链接

扫一扫

专栏目录