1. jQuery 的属性操作

html() 它可以设置和获取起始标签和结束标签中的内容。跟 dom 属性 innerHTML 一样。
text() 它可以设置和获取起始标签和结束标签中的文本。跟 dom 属性 innerText 一样。
val() 它可以设置和获取表单项(input) 的 value 属性值，即可以设置多选框、单选框，下拉列表是否被选中，也可以设置和获得text文本框中的值(注意区分value值在input标签不同type下的含义)。跟 dom 属性 value 一样。

<script type="text/javascript">
不传参数，是获取，传递参数是设置
alert( $("div").html() );// 获取
$("div").html("<h1>我是div中的标题 1</h1>");// 设置

alert( $("div").text() ); // 获取
$("div").text("我是div中的标题"); // 设置

$("button").click(function () {
     
     
	alert($("#username").val());//获取
	$("#username").val("陆亿行-2021-01-31");// 设置
});
</script>

<body>
    <div>我是div标签 <span>我是div中的span</span></div>
    <input type="text" name="username" id="username" />
    <button>操作输入框</button>
</body>

val属性演示：

同时设置多个表单项的选中状态：
　　通过val属性分别选中单选框、多选框、下拉列表(单选、多选)。

注意对比和text、html属性以及val设置表单项type为text时的区别：多一个中括号[ ]
$(":checkbox").val([“value1”,“value2”]); 　指选中value值为value1和value2的选项。
这里假设只有一个多选框，否则用id选中。

初始代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery-2021-01-31</title>
    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>   引入jQuery的js文件
    <script type="text/javascript">
  -----------------在里面补充代码-----------------
    </script>
</head>
<body>
    单选：
    <input name="radio" type="radio" value="radio1" />radio1
    <input name="radio" type="radio" value="radio2" />radio2
    <br/>

    多选：
    <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
    <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
    <br/>

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

    下拉单选 ：
    <select id="single">
        <option value="sin1">sin1</option>
        <option value="sin2">sin2</option>
        <option value="sin3">sin3</option>
    </select>
</body>
</html>

界面效果如下：

JS部分

<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
    //在里面补充代码
    $(function () {
     
     
       //1.批量操作单选框：要求选中value值为radio2的单选框
       $(":radio").val(["radio2"]);   //这里要多一个中括号呦，里面填属性值。
        //2. 批量操作筛选框的选中状态，要求同时选中 value值为checkbox1 checkbox2
        $(":checkbox").val(["checkbox2","checkbox1"]);
                          //实际选中的顺序和里面填入的顺序无关，而与其在body中出现的上下顺序有关
        //3.批量操作多选的下拉框选中状态 要求选中value值为mul1 和 mul3的选项
        $("#multiple").val(["mul1","mul3"]);//由于有两个select，一个多选，一个单选通过id选中select标签
        //4.操作单选的下拉框选中状态，选中value值为sin2的选项
        $("#single").val(["sin2"]);
    });
</script>

上面4条语句也可以放在一条语句里同时完成：

 <script>
  $(":radio,:checkbox,#multiple,#single").val(
            ["radio2","checkbox2","checkbox1","mul1","mul3","sin2"]
        );
    });
 </script>

注意，前面的(":radio,:checkbox,#multiple,#single")和后面的[“radio2”,“checkbox2”,“checkbox1”,“mul1”,“mul3”,“sin2”]不需要一一对应匹配，有即可。

<script>
 $("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]);
</script>

jQuery(四)——jQuery 的属性操作：html()、text()、val()

1. jQuery 的属性操作

val属性演示：

初始代码

JS部分

猜你喜欢