20-jQuery-标签处理BOM/DOM操作、事件对象

最新推荐文章于 2022-09-20 20:47:36 发布

陌上人故玉

最新推荐文章于 2022-09-20 20:47:36 发布

阅读量168

点赞数

本文链接：https://blog.csdn.net/fafaffafaff/article/details/120570965

版权

这篇博客详细介绍了jQuery中关于标签样式的处理，包括样式设置、BOM操作和DOM操作。内容涵盖创建、插入、删除、替换和克隆标签，以及事件对象和事件绑定的使用。同时，提供了综合案例和练习，帮助读者巩固学习。

摘要由CSDN通过智能技术生成

1、标签样式处理

1、标签样式处理

(1)样式设置

jQuery提供了样式设置函数，用于获取/设置单个/多个样式

selector：选择器

$(selector).css(name [, value]):获取指定名称name的样式数据或者设置样式数样式

$(selector).addClass(name)：给指定标签对象添加一个class属性值 ,

$("#box").addClass("bg color");

添加class，也可以一次添加多个，在原先class的基础上追加

$(selector).removeClass(name)：删除指定标签上指定的class属性值，删除

$(selector).toggleClass(name)：判断指定标签上没有class某个值添加|有的话就删除

$("#box").toggleClass("color")

如果#box没有这个color，则添加。如果有，则删除，达到一个切换效果

$(selector).hasClass(name)：判断指定标签上是否存在class某个值，存在返回true，不存在返回false

$(selector).css(name [, value]):获取指定名称name的样式数据或者设置样式数样式

① 直接设置央

<body>
    <button id="btn1">JS获取样式（宽度）</button>
    <button id="btn2">JS设置样式（宽度:500px）</button>
    <p>样式数据：<span id="show"></span></p>
    <hr>
    <button id="btn3">jQuery获取样式</button>
    <button id="btn4">jQuery设置样式</button>
    <p>样式数据：<span id="show2"></span></p>
    <div id="box"></div>
    <script src="js/libs/jquery/jquery.js"></script>
    <script>
        // 1、原生js
        var _btn1 = document.getElementById("btn1")
        var _btn2 = document.getElementById("btn2")
        var _box = document.getElementById("box")
        var _show = document.getElementById("show")

        _btn1.onclick = function() {
            // 获取样式：需要考虑兼容性问题
            var _width = _box.currentStyle?box.currentStyle.width:getComputedStyle(box).width
            _show.innerText = _width
        }
        _btn2.onclick = function() {
            // 设置样式：直接设置行内样式
            _box.style.width = "500px"
        }

        // 2、jQuery操作样式
        $("#btn3").click(function() {
            // 获取样式
            var $width = $("#box").css("width")
            $("#show2").text($width)
        })
        $("#btn4").click(function() {
            // 设置样式
            $("#box").css({
                "width": "1000px",
                "background-c