jQuery 学习

最新推荐文章于 2024-08-21 17:47:38 发布

qq_37623020

最新推荐文章于 2024-08-21 17:47:38 发布

阅读量42

点赞数

文章标签： jquery ajax

本文链接：https://blog.csdn.net/qq_37623020/article/details/130363582

版权

这篇文章详细介绍了jQuery的基本用法，包括如何引入jQuery库，DOM对象与Jquery包装集对象的区别，各种选择器（基础选择器、层次选择器、表单选择器）的使用，以及操作元素的属性、样式、内容的方法。此外，还涵盖了元素的创建、添加、删除以及事件绑定（bind）的示例。

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

git地址https://gitee.com/dbp666/jquery-learning

Jquery的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 在需要使用jQuery的页面引入jQuery的核心js文件 -->
    <script src="js/jquery-3.4.1.js" type="text/javascript">
    </script>
</body>

</html>

Dom对象与Jquery包装集对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="mydiv">这是一个div</div>
    <!-- Dom对象：通过js方式获取的元素对象 -->
    <!-- jQuery对象：通过jquery方法获取的元素对象，返回的是jQuery包装集 -->
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8">
    </script>
    <script type="text/javascript">
        let divDom = document.getElementById("mydiv");
        console.log(divDom);
        let divDoms = document.getElementsByTagName("div");
        console.log(divDoms);

        /*Jquery对象*/
        //通过id选择获取元素对象 $("#id属性值")
        let divJquery = $("#mydiv");
        console.log(divJquery);
        //js获取不存在的元素
        let spanDom = document.getElementsByTagName("span");
        console.log(spanDom);
        //jquery获取不存在的元素
        let spanJquery = $("#span");
        console.log(spanJquery);
        //Dom对象转jQuery对象
        let divDomtoJquery = $(divDom);
        console.log(divDomtoJquery);
        //jQuery对象转Dom对象
        //先获取包装集对象中指定下标的元素,将jQuery对象转换成dom对象
        let divJqueryToDom = divJquery[0];
        console.log(divJqueryToDom);
    </script>



</body>

</html>

基础选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="mydiv">id选择器
        <span>span中的内容</span>
    </div>
    <div id="mydiv1" class="blue">元素选择器</div>

    <!-- id选择器    #id属性值       $("#id属性值")
    类选择器    .class属性值    $(".class属性值")
    元素选择器  标签名/元素名    $("标签名/元素名")
    通用选择器  *               $("*")
    组合选择器 选择器1,选择器2,. $("选择器1,选择器2,...") 
    -->
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        //id选择器
        let idDiv = $("#mydiv");
        console.log(idDiv);
        //类选择器
        let classDiv = $(".blue");
        console.log(classDiv);
        //元素选择器
        let spans = $("span");
        console.log(spans);
        //通用选择器
        let all = $("*")
        console.log(all);
        //组合选择器
        let group = $("#mydiv,.blue,div,span")
        console.log(group);
    </script>

</body>

</html>

层次选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .testColor {
            background: green;
        }

        .gray {
            background: gray;
        }
    </style>
</head>
<!--
层次选择器
    后代选择器
        格式:   父元素 指定元素 (空格隔开)
        选择父元素的所有指定元素(包含第一代,第二代等)
    子代选择器
        格式:   父元素>指定元素(大于号隔开)
        选择父元素的所有第一代指定元素
    相邻选择器
        格式:   元素+指定元素(加号隔开)
        选择元素的下一个指定元素(只会查找下一个元素,如果元素不存在,则获取不到)
    同辈选择器
        格式:   元素~指定元素(波浪号隔开)
        选择元素下面的所有指定元素

-->



<body>
    <div id="parent">层次择器
        <div id="child" class="testColor">父选择器
            <div class="gray">子选浮器</div>
            <img src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129" />
            <img src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129" />
        </div>
        <div>
            选择器2<div>选择器2中的div</div>
        </div>
    </div>

    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script>
    <script>
        //后代选择器
        let hd = $("#parent div")
        console.log(hd);

        //子代选择器
        let zd = $("#parent>div")
        console.log(zd)

        //相邻选择器
        let xl = $("#child+div")
        console.log(xl)

        //同辈选择器
        let tb = $(".gray~img")
        console.log(tb)
    </script>

</body>

</html>

表单选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <form id='myform' name="myform" method="post">
        <input type="hidden" name="uno" value="9999" disabled="disabled" />
        姓名:<input type="text" id="uname" name="uname" /><br />
        密码：<input type="password" id="upwd" name="upwd" value="123456" /><br />
        年龄：<input type="radio" name="uage" value="0" checked="checked" />小屁孩

        <input type="radio" name="uage" value="1">你懂得 <br />
        爱好：<input type="checkbox" name="ufav" value="篮球">篮球
        <input type="checkbox" name="ufav" value="爬床">爬床
        <input type="checkbox" name="ufav" value="代码">代码<br />
        来自：<select id="ufrom" name="ufrom">
            <option value="-1" selected="selected">请选择</option>
            <option value="0">北京</option>
            <option value="1">上海</option>
        </select><br />
        简介：<textarea rows="10" cols="30" name="uintro"></textarea><br />

        头像：<input type="file"><br /> <input type="image" src="http://www.baidu.com/img/bd_logo1.png" width="20"
            height="20" />
        <button type="submit" onclick="return checkForm();">提交</button>
        <button type="reset">重置</button>

    </form>
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
<script>
    /*
    文本框选择器    :text
    密码框选择器    :password
    单选按钮选择器  :radio
    复选按钮选择器  :checkbox
    提交按钮选择器  :submit
    图像域选择器    :image
    重置按钮选择器  :reset
    按钮选择器      :button
    文件域选择器    :file
    */
    //表单选择器
    let inputs = $(":input");
    console.log(inputs);
    //元素选择器
    let inputs2 = $("input");
    console.log(inputs2);

    let radio = $("radio");
    console.log(radio);
    let checkBox = $("checkbox");
    console.log(checkBox)
</script>

</html>

操作元素的属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--
        操作元素的属性
            1.获取属性
                attr("属性名")
                prop("属性名")
            2.设置属性
            3.移除属性
    -->
    <input type="checkbox" name="ch" checked="checked" id="aa" /> aa
    <input type="checkbox" name="ch" id="bb" /> bb
    <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        //获取属性
        //固有属性
        let name = $("#aa").attr("name");
        console.log(name);
        let name2 = $("#aa").prop("name")
        console.log(name2);
        //返回值是Boolean的属性(元素设置了属性)
        let ck1 = $("#aa").attr("checked");
        let ck2 = $("#aa").prop("checked");
        console.log(ck1)
        console.log(ck2)

        //返回值是Boolean的属性(元素未设置属性)
        let ck3 = $("#bb").attr("checked");
        let ck4 = $("#bb").prop("checked");
        console.log(ck3)
        console.log(ck4)

        //自定义属性
        let abc1 = $("#aa").attr("abc");
        let abc2 = $("#aa").prop("abc");
        console.log(abc1);
        console.log(abc2);
        //设置属性
        //固有属性
        $("#aa").attr("value", "1");
        $("#bb").prop("value", "2");

        //返回值是Boolean的属性
        $("#bb").attr("checked", "checked");
        $("#bb").prop("checked", false);

        //自定义属性
        $("#aa").attr("uname", "admin");
        $("#aa").prop("uage", 18);
        //移除属性
        $("#aa").removeAttr("uname");
    </script>
</body>

</html>

操作元素的样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        div {
            padding: 8px;
            width: 180px;
        }

        .blue {
            background: blue;

        }

        .larger {
            font-size: 30px;
        }

        .green {
            background: green;
        }
    </style>
</head>

<body>
    <h3>css()方法设置元素样式</h3>
    <div id="conBlue" class="blue larger">天蓝色</div>
    <div id="conRed">大红色</div>
    <div id="remove" class="blue larger">天蓝色</div>

    <!--
        操作元素的样式
            attr("class") 获取元素的样式名
            attr("class","样式名") 设置元素的样式
            addClass("样式名") 添加样式
            css() 添加具体的样式
            removeClass("样式名") 移除样式
    -->
    <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        //attr("class") 获取元素的样式名
        let cla = $("#conBlue").attr("class");
        console.log(cla);
        //attr("class","样式名") 设置元素的样式
        $("#conBlue").attr("class", "green");
        //addClass("样式名")
        $("#conRed").addClass("red larger");
        let redcla = $("#conRed").attr("class");
        console.log(redcla);
        //添加具体的样式
        $("#conRed").css("font-size", "40px");
        $("#conRed").css({ "font-family": "楷体", "color": "black" });
        //removeClass("样式名") 移除样式
        $("#remove").removeClass("larger");
    </script>
</body>

</html>

操作元素的内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h3><span>html()和text()方法设置元素内容</span></h3>
    <h1>北京</h1>
    <div id="html"></div>
    <div id="html2"></div>
    <div id="text">北京</div>
    <div id="text2"></div>
    <input type="text" name="uname" id="oop" value="oop" />
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        //html("内容") 设置元素的内容，包含html标签(非表单元素)
        $("#html").html("<h2>上海</h2>") //包含html标签
        $("#html2").html("香港")  //纯文本

        $("#text").text("<h2>澳门</h2>"); //不识别html标签
        $("#text2").text("台湾"); //纯文本

        let val = $("#oop").val();
        console.log(val);
        $("#oop").val("今天天气")
    </script>
</body>

</html>

创建元素和添加元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin: 10px 0px;
        }

        span {
            color: white;
            padding: 8px;
        }

        .red {
            background-color: red;
        }

        .blue {
            background-color: blue;
        }

        .green {
            background-color: green;
        }
    </style>
</head>

<body>
    <h3>prepend()方法前追加内容</h3>
    <h3>prependTo()方法前追加内容</h3>
    <h3>append()方法后追加内容</h3>
    <h3>appendTo()方法后追加内容</h3>

    <span class="red">爱豆</span>
    <span class="blue">偶像</span>
    <div class="green">
        <span>影帝</span>
    </div>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        let p = "<p>这是一个段落</p>"
        console.log(p)
        console.log($(p))

        //添加元素
        //创建元素
        let span = "<span>狼</span>";
        //得到指定元素,并在指定元素最前面追加内容
        $(".green").prepend(span);
        let span2 = "<span>狗</span>"
        $(span2).prependTo($(".green"))

        let span3 = "<span>猫</span>";
        //得到指定元素,并在指定元素最前面追加内容
        $(".green").append(span3);
        let span4 = "<span>虎</span>"
        $(span4).appendTo($(".green"))
        //将已存在内容追加到指定元素
        $(".green").append($(".red"))
        //同级追加
        let sp1 = "<span class='pink'>演员</span>"
        let sp2 = "<span class='yellow'>歌手</span>"
        $(".blue").before(sp1);
        $(".blue").before(sp2);


    </script>
</body>

</html>

删除元素和遍历元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            color: white;
            padding: 8px;
            margin: 5px;
            float: left;
        }

        .green {
            background-color: green;
        }

        .blue {
            background-color: blue;
        }
    </style>
</head>

<body>
    <span class="green">绿色1</span>
    <span class="blue">蓝色1</span>
    <span class="green">绿色2</span>
    <span class="blue">蓝色2</span>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        //删除元素
        //   $(".green").remove();
        //清空元素
        //   $(".blue").empty();
        //遍历元素
        //获取指定元素 并遍历
        $(".green").each(function (index, element) {
            console.log(index);
            console.log(element);
        });

    </script>
</body>

</html>

加载事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script>

    <script type="text/javascript">
        //  console.log($("#p1"));

        $(function () {
            console.log("ready加载事件...");
        });

        $(document).ready(function () {
            //获取元素
            console.log($("#p1"));
        });
    </script>
</head>

<body>
    <p id="p1">文本</p>
</body>

</html>

绑定事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h3>bind绑定事件</h3>
    <div id="test" style="cursor: pointer">点击查看名言</div>
    <input id="btntest" type="button" value="点击就不可用了" />
    <hr>
    <button type="button" id="btn1">按钮1</button>
    <button type="button" id="btn2">按钮2</button>
    <button type="button" id="btn3">按钮3</button>
    <button type="button" id="btn4">按钮4</button>

    <script src="js/jquery-3.4.1.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        //绑定单个事件
        $("#test").bind("click", function () {
            console.log("123");
        });
        //绑定
        $("#btntest").click(function () {
            //禁用按钮
            console.log(this);
            $(this).prop("disabled", true);
        });
        //绑定多个事件
        //1.同时为多个事件绑定同一个函数
        $("#btn1").bind("click mouseout", function () {
            console.log("按钮111111");
        });
        //2.为元素绑定多个事件,并设置对应的函数
        $("#btn2").bind("click", function () {
            console.log("按钮2被点击了");
        }).bind("mouseout", function () {
            console.log("按钮2被移开了");
        });
        //3.为元素绑定多个事件,并设置对应的函数
        $("#btn3").bind({
            "click": function () {
                console.log("按钮3被点击了");
            },
            "mouseout": function () {
                console.log("按钮3移开了")
            }
        });
        //常用绑定
        $("#btn4").click(function () {
            console.log("按钮4被点击了");
        }).mouseout(function () {
            console.log("按钮4移开了")
        });
    </script>
</body>

</html>