jQuery二 Li.069

jQuery DOM

常用方法

方法        作用
html()      获取标签的文本
html(value) 设置标签的文本内容,解析标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作文本</title>
</head>
<body>
    <div id="div">我是div</div>
    <input type="button" id="btn1" value="获取div的文本">
    <input type="button" id="btn2" value="获取div的文本">
</body>
<script src="../jQuery/jquery-3.6.0.js"></script>
<script>
    // html()      获取标签的文本
    let div = $("div");

    // html(value) 设置标签的文本内容,解析标签
    let btn1 = $("#btn1")
    btn1.click(cc1)

    function cc1() {
        alert(div.html())
    }

    let btn2 = $("#btn2")
    btn2.click(cc2)
    function cc2(){
        div.html("<b>小明</b>")
    }

</script>
</html>

jQuery 操作对象

方法               作用
$("元素")          创建指定元素
append(element)    添加成最后一个子元素,由添加者对象调用
appendTo(element)  添加成最后一个子元素,由被添加者对象调用
prepend(element)   添加成第一个子元素,由添加者对象调用
prependTo(element) 添加成第一个子元素,由被添加者对象调用
before(element)    添加到当前元素的前面,两者是兄弟关系,由添加者对象调用
after(element)     添加到当前元素的后面,两者之间是兄弟关系,由添加者对象调用
remove()           删除指定元素(自己移除自己)
empty()            清空指定元素的所有子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作对象</title>
</head>
<body>
<div id="div"></div>
<input type="button" id="btn1" value="添加一个span到div">
<br><br><br>

<input type="button" id="btn2" value="将加油添加到城市列表最下方"><br/>
<input type="button" id="btn3" value="将加油添加到城市列表最上方"><br/>
<input type="button" id="btn4" value="将加油添加到上海下方"><br/>
<input type="button" id="btn5" value="将加油添加到上海上方"><br/>

<ul id="city">
    <li id="bj">北京</li>
    <li id="sh">上海</li>
    <li id="gz">广州</li>
    <li id="sz">深圳</li>
</ul>
<br>

<ul id="desc">
    <li id="xg">新冠</li>
    <li id="xq">雄起</li>
</ul>

<input type="button" id="btn6" value="清除新冠"><br>
<input type="button" id="btn7" value="描述列表删除"><br>
<br>
</body>
<script src="../jQuery/jquery-3.6.0.js"></script>
<script>

    let div = $("#div");

    // $("元素")           创建指定元素
    // append(element)    添加成最后一个子元素,由添加者对象调用
    // 添加一个span到div
    let btn1 = $("#btn1");
    btn1.click(cc1)
    function cc1(){
        let span = $("<span>span</span>")
        div.append(span)
    }

    // appendTo(element)  添加成最后一个子元素,由被添加者对象调用
    // 将加油添加到城市列表最下方
    let city = $("#city")
    let btn2 = $("#btn2")
    btn2.click(cc2)
    function cc2(){
        let jy = $("<li id=\"jy\">加油</li>")
        jy.appendTo(city)

    }

    // prepend(element)   添加成第一个子元素,由添加者对象调用
    // 加油添加到城市列表最上方
    let btn3 = $("#btn3")
    btn3.click(cc3)
    function cc3(){
        let jy = $("<li id=\"jy\">加油</li>")
        city.prepend(jy)
    }

    // prependTo(element) 添加成第一个子元素,由被添加者对象调用


    // before(element)    添加到当前元素的前面,两者是兄弟关系,由添加者对象调用
    // 将加油添加到上海下方
    let btn5 = $("#btn5")
    btn5.click(cc5)
    function cc5(){
        let jy = $("<li id=\"jy\">加油</li>")
        let sh = $("#sh")
        sh.before(jy)
    }


    // after(element)     添加到当前元素的后面,两者之间是兄弟关系,由添加者对象调用
    let btn4 = $("#btn4")
    btn4.click(cc4)
    function cc4(){
        let jy = $("<li id=\"jy\">加油</li>")
        let sh = $("#sh")
        sh.after(jy)
    }

    // remove()           删除指定元素(自己移除自己)
    let btn6 = $("#btn6")
    btn6.click(cc5)
    function cc5(){
        let xg = $("#xg")
        xg.remove()
    }

    // empty()            清空指定元素的所有子元素
    let btn7 = $("#btn7")
    btn7.click(cc6)
    function cc6(){
        let desc = $("#desc")
        desc.empty()
    }

</script>
</html>

iQuery DOM

常用方法

方法               作用
css(name)          根据样式名称获取css样式
css(name,value)    设置CSS样式
addClass(value)    给指定的对象添加样式类名
removeClass(value) 给指定的对象删除样式类名
toggleClass(value) 如果没有样式类名,则添加,如果有,则删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作样式</title>
    <style>
        .cls1{
            background: pink;
            height: 30px;
        }
    </style>
</head>
<body>

<div style="border: 1px solid red;" id="div">我是div</div>
<input type="button" id="btn1" value="获取div样式"><br/>
<input type="button" id="btn2" value="设置div的背景色为蓝色"><br/>
<input type="button" id="btn3" value="给div设置cls1样式"><br/>
<input type="button" id="btn4" value="给div删除cls1样式"><br/>
<input type="button" id="btn5" value="给div设置或删除cls1样式"><br/>

</body>
<script src="../jQuery/jquery-3.6.0.js"></script>
<script>

    let div = $("#div")
    // css(name)          根据样式名称获取css样式
    let btn1 = $("#btn1")
    btn1.click(get1)
    function get1(){
        alert(div.css("border"))
    }

    // css(name,value)    设置CSS样式
    // div背景色为蓝色
    let btn2 = $("#btn2")
    btn2.click(get2)
    function get2(){
        div.css("background","blue")
    }

    // addClass(value)    给指定的对象添加样式类名
    let btn3 = $("#btn3")
    btn3.click(get3)
    function get3(){
        div.addClass("cls1");
    }

    // removeClass(value) 给指定的对象删除样式类名
    let btn4 = $("#btn4")
    btn4.click(get4)
    function get4(){
        div.removeClass("cls1");
    }

    // toggleClass(value) 如果没有样式类名,则添加,如果有,则删除
    let btn5 = $("#btn5")
    btn5.click(get5)
    function get5(){
        div.toggleClass("cls1");
    }

</script>
</html>

jQuery DOM 操作属性

方法               作用
attr(name,[value]) 获得/设置属性的值
prop(name,[value]) 获得/设置属性的值(checked,selected)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作属性</title>
</head>
<body>
<input type="text" id="username">
<br>
<input type="button" id="btn1" value="获取输入框的id属性">
<br/>
<input type="button" id="btn2" value="给输入框设置value属性">
<br/>

<input type="radio" name="gender" id="gender1">男
<input type="radio" name="gender" id="gender2">女
<br/>

<input type="button" value="选中女" id="btn3">
<br/>


<select>
    <option>---请选择---</option>
    <option id="bk">本科</option>
    <option id="zk">专科</option>
</select>
<br/>

<input type="button" value="选中本科" id="btn4">
</body>
<script src="../jQuery/jquery-3.6.0.js"></script>
<script>
    // 获取输入框的id属性
    let username = $("#username")
    let btn1 = $("#btn1")
    btn1.click(test1)
    function test1(){
        alert(username.attr("id"))
    }

    // 给输入框设置value属性
    let btn2 = $("#btn2")
    btn2.click(test2)
    function test2(){
        username.attr("value","哈哈")
    }

    // 选中女
    $("#btn3").click(function (){
        $("#gender2").prop("checked",true)
    })

    // 选中本科
    let bk = $("#bk")
    let btn4 = $("#btn4")
    btn4.click(test4)
    function test4(){
        bk.prop("selected",true)
    }
</script>
</html>

操作复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复选框</title>
</head>
<body>
    <table id="tab1" border="1" width="800" align="center">
        <tr>
            <th style="text-align: left">
                <input style="background:lightgreen" id="selectAll" type="button" value="全选">
                <input style="background:lightgreen" id="selectNone" type="button" value="全不选">
                <input style="background:lightgreen" id="reverse" type="button" value="反选">
            </th>

            <th>分类ID</th>
            <th>分类名称</th>
            <th>分类描述</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>1</td>
            <td>手机数码</td>
            <td>手机数码类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>2</td>
            <td>电脑办公</td>
            <td>电脑办公类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>3</td>
            <td>鞋靴箱包</td>
            <td>鞋靴箱包类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>4</td>
            <td>家居饰品</td>
            <td>家居饰品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
    </table>
</body>
<script src="../jQuery/jquery-3.6.0.js"></script>
<script>
    //全选
    //1.为全选按钮添加单击事件
    $("#selectAll").click(function(){
        //2.获取所有的商品复选框元素，为其添加checked属性，属性值true
        $(".item").prop("checked",true);
    });


    //全不选
    //1.为全不选按钮添加单击事件
    $("#selectNone").click(function(){
        //2.获取所有的商品复选框元素，为其添加checked属性，属性值false
        $(".item").prop("checked",false);
    });


    //反选
    //1.为反选按钮添加单击事件
    $("#reverse").click(function(){
        //2.获取所有的商品复选框元素，为其添加checked属性，属性值是目前相反的状态
        let items = $(".item");
        items.each(function(){
            $(this).prop("checked",!$(this).prop("checked"));
        });
    });
</script>
</html>

随机图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机图片</title>
</head>
<body>
<!-- 小图 -->
<div style="background-color:red;border: dotted; height: 50px; width: 50px">
    <img src="img/01.jpg" id="small" style="width: 50px; height: 50px;">
</div>
<!-- 大图 -->
<div style="border: double ;width: 400px; height: 400px; position: absolute; left: 500px; top:10px">
    <img src="" id="big" style="width: 400px; height: 400px; display:none;">
</div>

<!-- 开始和结束按钮 -->
<input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="开始">
<input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="停止">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //1.准备一个数组
    let imgs = [
        "img/01.jpg",
        "img/02.jpg",
        "img/03.jpg",
        "img/04.jpg",
        "img/05.jpg",
        "img/06.jpg",
        "img/07.jpg",
        "img/08.jpg",
        "img/09.jpg",
        "img/10.jpg"];

    //2.定义计数器变量
    let count = 0;

    //3.声明定时器对象
    let time = null;

    //4.声明图片路径变量
    let imgSrc = "";

    //5.为开始按钮绑定单击事件
    $("#startBtn").click(function(){
        //6.设置按钮状态
        //禁用开始按钮
        $("#startBtn").prop("disabled",true);
        //启用停止按钮
        $("#stopBtn").prop("disabled",false);

        //7.设置定时器，循环显示图片
        time = setInterval(function(){
            //8.循环获取图片路径
            let index = count % imgs.length; // 0%10=0  1%10=1  2%10=2 .. 9%10=9  10%10=0

            //9.将当前图片显示到小图片上
            imgSrc = imgs[index];
            $("#small").prop("src",imgSrc);

            //10.计数器自增
            count++;
        },10);
    });


    //11.为停止按钮绑定单击事件
    $("#stopBtn").click(function(){
        //12.取消定时器
        clearInterval(time);

        //13.设置按钮状态
        //启用开始按钮
        $("#startBtn").prop("disabled",false);
        //禁用停止按钮
        $("#stopBtn").prop("disabled",true);

        //14.将图片显示到大图片上
        $("#big").prop("src",imgSrc);
        $("#big").prop("style","width: 400px; height: 400px;");
    });

</script>
</html>

jQuery DOM#

jQuery 操作对象#

iQuery DOM#

jQuery DOM 操作属性#

操作复选框#

随机图片#

jQuery DOM

jQuery 操作对象

iQuery DOM

jQuery DOM 操作属性

操作复选框

随机图片