jQuery属性操作和快捷操作

最新推荐文章于 2021-07-22 11:08:44 发布

原创最新推荐文章于 2021-07-22 11:08:44 发布 · 665 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jQuery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了jQuery中常见的操作技巧，包括属性操作、class属性值操作、标签内容操作、css样式操作等。详细展示了如何通过jQuery简化DOM操作，提高网页开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.属性操作

<body>
    <input type="text" class="apple" id="username" value="tom" address="beijing" />
</body>

    <script type="text/javascript">
        $("#username").attr("value");// 获取属性值
        $("#username").attr("value", "jack");// 设置属性值
        $("#username").removeAttr("address");// 删除属性
        //$("#username").removeAttr("type");// type属性禁止删除和修改！！！

        var jn = {name:'zhangsan', class:'banana'};
        $("#username").attr(jn);// 同时给多个属性设置值

        // 设置某个属性的值为某个函数的返回值
        $("#username").attr("value", getValue());
        function getValue() {
            return "lisi";
        }
    </script>

2.快捷操作

2.1 class属性值操作

<body>
    <div class="apple orange" id="div_1">This is jquery subject.</div>
</body>
    <script type="text/javascript">
        $("#div_1").attr('class', 'banana');// 赋值
        $("#div_1").attr('class');// 取值
        $("#div_1").removeAttr('class');// 删除class属性


        $("#div_1").addClass('apple');// 给class属性追加值
        $("#div_1").addClass('orange');// 给class属性追加值
        // class属性可以有多个值！！！
        $("#div_1").removeClass('apple');// 删除class属性的某个值
        $("#div_1").toggleClass('banana');// 开关效果，有就删除，没有就添加
    </script>

2.2 标签包含内容操作

<body>
    <div>This is <p>jquery <span>subject</span></p></div>

    <input type="button" value="获取" onclick="getContent()" />
    <input type="button" value="设置" onclick="setContent()" />
</body>
<script>
    function getContent() {
        // 获取普通文本和html标签
        // 结果：This is <p>jquery <span>subject</span></p>
        console.log($("div").html());

        // 获取普通文本内容
        // 结果：This is jquery subject
        console.log($("div").text());
    }

    function setContent() {
        // 设置普通文本和html标签，且html标签可以被浏览器正常解析
        // $("div").html("欢迎访问<a href='http://www.baidu.com'>百度</a>");

        // 设置普通文本，如果有html标签，浏览器不能正常解析，显示的是符号实体
        $("div").text("欢迎访问<a href='http://www.baidu.com'>百度</a>");
    }
</script>

html()和text()的区别：

获取内容
html()可以获取html标签和普通字符串内容
text()只能获取普通字符串内容
设置内容
html()可以设置html标签和普通字符串内容
text()只能设置普通字符串内容
html()和text()如果针对的操作内容是纯字符串内容，则使用的效果一样

2.3 css样式操作

$(...).css(key, value);// 设置值
$(...).css(key);// 获取值
$(...).css(json对象);// 一次设置多个css样式

2.4 value属性快捷操作

$(...).val();// 获取value属性值
$(...).val(value);// 设置value属性值

val()方法在复选框、单选按钮、下拉列表中都有突出表现

2.4.1 复选框

<body>
    <h1>复选框操作</h1>
    爱好:
    <input type="checkbox" class="hby" name="hobby" value="2"/>篮球&nbsp;
    <input type="checkbox" class="hby" name="hobby" value="4"/>足球&nbsp;
    <input type="checkbox" class="hby" name="hobby" value="6"/>排球&nbsp;
    <input type="checkbox" class="hby" name="hobby" value="8"/>乒乓球&nbsp;

    <br><br>
    <input type="button" value="获取" onclick="getContent()" />
    <input type="button" value="设置" onclick="setContent()" />
</body>

<script>
    // 获取复选框的选中情况
    function getContent() {
        var s = "";
        for(var i = 0; i < $(".hby:checked").length; i++) {
            s += $(".hby:checked:eq(" + i + ")").val() + ",";
        }
        // 删除最后的逗号","
        s = s.substr(0, s.length - 1);
        console.log(s);
    }

    // 设置复选框的选中情况
    function setContent() {
        // 设置复选框的多个元素为选中状态
        $(".hby").val([2,4,8]);// 设置value为2、4、8为选中状态

        // 注意：val([value1,value2])参数是一个数组，即使只选中一个也是数组！！！
        // $(".hby").val([6]);// 设置value为6为选中状态
    }
</script>

2.4.2 下拉列表操作

<body>
    <h1>下拉列表操作</h1>

    学历:
    <select multiple="multiple">
        <option value="0">请选择</option>
        <option value="1">小学</option>
        <option value="2">中学</option>
        <option value="3">大学</option>
    </select>

    <br><br>

    <input type="button" value="获取" onclick="getContent()" />
    <input type="button" value="设置" onclick="setContent()" />
</body>

<script>
    function getContent() {
        // 获得选中情况
        console.log($("option:selected").val());// 单选情况
        console.log($("select").val());// 多选情况
    }

    function setContent() {
        // 设置选中情况
        $("select").val([1]);
        // $("select").val([1,3]);
    }
</script>

2.4.3 单选按钮操作

<body>
    <h1>单选按钮操作</h1>

    性别:
    <input type="radio" class="sx" name="sex" value="a" />男&nbsp;
    <input type="radio" class="sx" name="sex" value="b" />女&nbsp;
    <input type="radio" class="sx" name="sex" value="c" />保密&nbsp;

    <br><br>

    <input type="button" value="获取" onclick="getContent()" />
    <input type="button" value="设置" onclick="setContent()" />
</body>

<script>
    function getContent() {
        // 获得选中情况
        console.log($(".sx:checked").val());
    }

    function setContent() {
        // 设置选中情况
        $(".sx").val(["b"]);
    }
</script>

2.5 复选框全选、全不选、反选操作

$(...).attr('checked', true);// 设置复选框选中
$(...).attr('checked', false);// 取消复选框选中
$(...).attr('checked');// 判断复选框选中情况，返回布尔值

<body>
    <h1>复选框全选、全不选、反选操作</h1>
    爱好:
    <input type="checkbox" class="hby" name="hobby" value="2"/>篮球&nbsp;
    <input type="checkbox" class="hby" name="hobby" value="4"/>足球&nbsp;
    <input type="checkbox" class="hby" name="hobby" value="6"/>排球&nbsp;
    <input type="checkbox" class="hby" name="hobby" value="8"/>乒乓球&nbsp;

    <br><br>
    <input type="button" value="全选" onclick="setAll()" />
    <input type="button" value="全不选" onclick="setAllNot()" />
    <input type="button" value="反选" onclick="setFan()" />
</body>

<script>
    // 全选
    function setAll() {
        $(".hby").attr("checked", true);
    }

    // 全不选
    function setAllNot() {
        $(".hby").attr("checked", false);
    }

    // 反选
    function setFan() {
        for(var i = 0; i < $(".hby").length; i++) {
            var flag = $(".hby:eq(" + i + ")").attr("checked");
            $(".hby:eq(" + i +")").attr("checked", !flag);
        }
    }
</script>