尚硅谷jQuery学习笔记

已于 2022-02-09 17:14:00 修改
阅读量1.3k 收藏 13
点赞数
分类专栏： javaweb笔记 文章标签： css js html javascript dom
于 2020-07-16 22:06:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43813373/article/details/107257944
版权

文章目录

初识jQuery

jQuery其实就是javascript的一个库，通过引入使用
在这里插入图片描述
JS：此类get查询必须在页面加载完之后才能进行查询，比如在load事件中可以查询，也可以在触发事件后进行查询，但是未加载的时候直接查询是不行的。
JQ：当$()中是个函数的时候相当于win.load加载函数，从而可以在加载函数中进行get查询。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./jquery-3.5.1.min.js">
    </script>
    <script type="text/javascript">
        //当$()中是个函数的时候相当于win.load加载函数
        $(function () {
            alert($)//$符号是一个函数的缩写
            var $btnid = $("#btnid")
            $btnid.click(function () {
                alert("HelloWorld")
            })
            
            //当$()中是个标签的时候，用于加载标签
            $("<div>\n" +
                "    <span>运用$添加标签</span>\n" +
                "</div>").appendTo("body");
            
            // $("#id属性值") id选择器，根据id查询标签对象
            // $("标签名") 标签名选择器，根据指定的标签名查询标签对象
            // $(".class属性值") 类型选择器，可以根据class属性查询标签对象
            var btn = $("button")
            alert(btn.length)
            
            // 组合选择器,将符合任意一个选择器条件的加入数组
            var jqlist = $("button,span")
            for (var i = 0; i < jqlist.length; i++)
                alert(jqlist[i])
            alert("组合选择器提取的标签个数" + jqlist.length)
            
            //$(dom对象)会转化为jQuery对象
            var btnobj = document.getElementById("btn1")
            alert('dom对象' + btnobj + "jQuery对象" + $(btnobj))

        });


    </script>
</head>
<body>
<button id="btnid">sayhello</button>
<br>
<button id="btn1">1</button>
<button>2</button>
<button>3</button>
<span></span>
</body>
</html>

jQuery对象和dom对象的区别

jQuery对象本质就是dom数组+jQuery提供的一系列功能函数
比如，使用$("#id")查询的jQuery对象可以通过jq[0]来转化为dom对象。
注意
jQuery对象不能使用dom的方法，同样dom也不能使用jQuery的方法
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

基础选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .two {
            color: green;
        }
    </style>
    <script src="jquery-3.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            // JQ对象可以改变css样式
            $("#btn1").click(function () {
                // 将查找到的div标签换一下css样式，方便观察
                $("#none").css("background-color", "red");
            });
            $("#btn2").click(function () {
                $(".two").css("background-color", "red")
            })
            $("#btn3").click(function () {
                $("div").css("background-color", "black")
            })
            $("#btn4").click(function () {
                $("*").css("background-color", "yellow")
            })
            $("#btn5").click(function () {
                $("span,div").css("background-color", "black")
            })
        })
    </script>
</head>
<body>
<button id="btn1">查找id为none的标签</button>
<button id="btn2">查找class为two的标签</button>
<button id="btn3">查找div标签</button>
<button id="btn4">查找所有标签包括body等</button>
<button id="btn5">查找所有span和div标签</button>
<div id="none">
    id为none的div标签
</div>
<div class="two">class为two的div标签</div>
<span>span标签</span>
</body>
</html>

层级选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .two {
            color: green;
        }
    </style>
    <script src="jquery-3.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            // JQ对象可以改变css样式
            $("#btn1").click(function () {
                // 将查找到的div标签换一下css样式，方便观察
                $("body div").css("background-color", "red");
            });
            $("#btn2").click(function () {
                $("body > div").css("background-color", "red")
            })
            $("#btn3").click(function () {
                $("button+div").css("background-color", "black")
            })
            $("#btn4").click(function () {
                $("button~div").css("background-color", "yellow")
            })
            $("#btn5").click(function () {
                $("#none+div").css("background-color", "black")
            })
        })
    </script>
</head>
<body>
<button id="btn1">选择body内的所有div标签</button>
<button id="btn2">选择body中的div子元素</button>
<button id="btn3">选择button后紧跟的div的标签</button>
<button id="btn4">选择button后的多个div标签</button>
<button id="btn5">选择id为none的下一个div标签</button>
<div id="none">
    id为none的div标签

</div>
<label>-----------------------------我是label分割线-------------------------------------</label>
<div class="two">class为two的div标签</div>
<span><div>我是span里面的标签$("body > div")找不到我</div></span>
</body>
</html>

表单选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    引用标签不能编写代码-->
    <script type="text/javascript" src="jquery-3.5.1.min.js">
    </script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                //val是jQ表单的取值和赋值方法
                $(":text:enabled").val("改变了可用文本框的内容")
            })
            $("#btn2").click(function () {
                //val是jQ表单的取值和赋值方法
                $(":text:disabled").val("改变了不可用文本框的内容")
            })
            $("#btn3").click(function () {
                //each是jQ对象提供用来遍历的方法
                $(":checkbox:checked").each(function () {
                    alert(this.value)
                })
            })
            $("#btn4").click(function () {
                //each是jQ对象提供用来遍历的方法
                $("select option:checked").each(function () {
                    alert(this.value)
                })
            })
        })
    </script>
</head>
<body>
<form>
    <br>
    <input type="text" value="可用text文本"><br>
    <input type="text" disabled="disabled" value="不可用text文本"><br>
    <input type="text" value="可用text文本"><br>
    <input type="text" disabled="disabled" value="不可用text文本"><br>
    <input type="checkbox" value="text1">text1
    <input type="checkbox" value="text2">text2
    <input type="checkbox" value="text3">text3
    <input type="checkbox" value="text4">text4
    <input type="checkbox" value="text5">text5<br>
    <select>
        <option selected="selected">中国</option>
        <option>日本</option>
        <option>美国</option>
        <option>意大利</option>
    </select>
</form>
    <button id="btn1">改变可用文本框内容</button>
    <button id="btn2">改变不可用文本框内容</button>
    <button id="btn3">查看复选框选中内容</button>
    <button id="btn4">查看下拉框选中内容</button>
</body>
</html>

jQ基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //传递参数是设置，不传参数是取值
            alert($("div").html());
            $("div").html("<h1>html设置div标签</h1>")
            alert($("div").text());
            $("div").text("<h1>text只能设置文本</h1>")
            $("#btn").click(function () {
                alert($("#username").val())
            })
        })
    </script>
</head>
<body>
<div>我是div标签<span>我是div里面的span标签</span></div>
<input type="text" id="username" name="username">
<button id="btn">val操作表单标签</button>
</body>
</html>

jQ语法的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 通过value值进行操作
            // value可以作为默认值并且作用和name类似可以进行val识别
            // $(":radio").val(["radio1"])
            // $(":checkbox").val(["checkbox1", "checkbox4", "checkbox2"])
            // $("#mul").val(["mul1", "mul3", "mul5"])
            // $("#mul1").val(["sin5"])
            // 等价操作
            $(":radio,:checkbox,#mul,#mul1").val(["radio1", "checkbox1", "checkbox4", "checkbox2", "mul1", "mul3", "sin5"])
            // 注意事项：option标签中value属性不会作为默认值，但是在大多数标签中是可以作为默认值或者名字
        })
    </script>
</head>
<body>
<input type="radio" name="radio" value="radio1">男
<input type="radio" name="radio" value="radio2">女<br>
<input type="checkbox" name="checkbox" value="checkbox1">check1
<input type="checkbox" name="checkbox" value="checkbox2">check2
<input type="checkbox" name="checkbox" value="checkbox3">check3
<input type="checkbox" name="checkbox" value="checkbox4">check4
<br>
<select multiple="multiple" id="mul">
    <option value="mul1">中国</option>
    <option value="mul2">美国</option>
    <option value="mul3">日国</option>
    <option value="mul4">澳大利亚</option>
    <option value="mul5">俄罗斯</option>
</select>
<br><br>
<select id="mul1">
    <option value="sin1">中国</option>
    <option value="sin2">美国</option>
    <option value="sin3">日国</option>
    <option value="sin4">澳大利亚</option>
    <option value="sin5">俄罗斯</option>
</select>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 通过value值进行操作
            // value可以作为默认值并且作用和name类似可以进行val识别
            // $(":radio").val(["radio1"])
            // $(":checkbox").val(["checkbox1", "checkbox4", "checkbox2"])
            // $("#mul").val(["mul1", "mul3", "mul5"])
            // $("#mul1").val(["sin5"])
            // 等价操作
            //$(":radio,:checkbox,#mul,#mul1").val(["radio1", "checkbox1", "checkbox4", "checkbox2", "mul1", "mul3", "sin5"])
            // 注意事项：option标签中value属性不会作为默认值，但是在大多数标签中是可以作为默认值或者名字
            $(":checkbox:first").attr("name", "check1")
            alert($(":checkbox:first").attr("name"))// 返回对应的值
            $(":checkbox:first").prop("name", "check1")
            alert($(":checkbox:first").prop("name"))//返回对应的值

            alert($(":checkbox:first").attr("checked"))// 返回对应的值，undifined
            alert($(":checkbox:first").prop("checked"))//返回true或false

            // 设置自己的属性
            $(":checkbox:first").prop("try", "successful")
            alert($(":checkbox:first").prop("try"))
        })
    </script>
</head>
<body>
<input type="radio" name="radio" value="radio1">男
<input type="radio" name="radio" value="radio2">女<br>
<input type="checkbox" name="checkbox" value="checkbox1">check1
<input type="checkbox" name="checkbox" value="checkbox2">check2
<input type="checkbox" name="checkbox" value="checkbox3">check3
<input type="checkbox" name="checkbox" value="checkbox4">check4
<br>
<select multiple="multiple" id="mul">
    <option value="mul1">中国</option>
    <option value="mul2">美国</option>
    <option value="mul3">日国</option>
    <option value="mul4">澳大利亚</option>
    <option value="mul5">俄罗斯</option>
</select>
<br><br>
<select id="mul1">
    <option value="sin1">中国</option>
    <option value="sin2">美国</option>
    <option value="sin3">日国</option>
    <option value="sin4">澳大利亚</option>
    <option value="sin5">俄罗斯</option>
</select>
</body>
</html>

全选反选全不选操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#checkAllbtn").click(function () {
                $(":checkbox").prop("checked", true)
            })
            $("#NoCheckAllbtn").click(function () {
                $(":checkbox").prop("checked", false)
            })
            $("#CheckReversebtn").click(function () {
                $(":checkbox[name='items']").each(function () {
                    this.checked = !this.checked
                })
                var allcheck = $(":checkbox[name='items']").length
                var all = $(":checkbox[name='items']:checked").length
                // if(all==allcheck)
                //     $("#checkAllBox").prop("checked","true")
                $("#checkAllBox").prop("checked", all == allcheck)
            })
            $("#submitbtn").click(function () {
                $(":checkbox[name='items']").each(function () {
                    if (this.checked)
                        alert(this.value)
                })
            })
            $("#checkAllBox").click(function () {
                $(":checkbox[name='items']").prop("checked", this.checked)
            })
            // 对于多个相同属性的标签设置事件
            $(":checkbox[name='items']").click(function () {
                var all = $(":checkbox[name='items']").length
                var allcheck = $(":checkbox[name='items']:checked").length
                $("#checkAllBox").prop("checked", all == allcheck)
            })
        })
    </script>
</head>
<body>
<form method="post" action="">
    你爱好的运动是？<input type="checkbox" id="checkAllBox"/>全选/全不选
    <br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="蓝球"/>篮球
    <input type="checkbox" name="items" value="乒乓球"/>兵乓球
    <input type="checkbox" name="items" value="巧固球"/>巧固球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <br>
</form>
<button id="checkAllbtn">全选</button>
<button id="NoCheckAllbtn">全不选</button>
<button id="CheckReversebtn">反选</button>
<button id="submitbtn">提交</button>
</body>
</html>

jQ的增删改

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function (newChild, refChild) {
            // 在div标签内部插入标签
            $("<h2>我是appendTo的标题</h2>").appendTo("div")
            $("<h2>我是prependTo的标题</h2>").prependTo("div")
            // 在div标签外部插入标签
            $("<h2>我是insertAfter的标题,插在每个div标签后面</h2>").insertAfter("div")
            $("<h2>我是insertBefore的标题,插在每个div标签前面</h2>").insertBefore($("div"), refChild)
            // 改变标签
            $("div").replaceWith("<h2>我是replaceWith的标题</h2>")
            $("<h2>我是replaceAll的标题</h2>").replaceAll("div")
            // 删除标签或者删除标签内容
            $("button").remove()
            $("span").empty()
        })
    </script>
</head>
<body>
<div>
    我是第一个div标签
</div>
<div>
    我是第二个div标签
</div>
<button>我是被删除的按钮，应该没人看见我，我就多写几行练练打字</button>
<span style="background-color: aquamarine">我是内容应该也没人看的见，我多写几行练练打字</span>
</body>
</html>

appendTo应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 将上边选中的option移动到下面
            $("button:eq(0)").click(function () {
                $("select:eq(0) option:selected").appendTo($("select:eq(1)"));
            })
            // 将上面全部option移动到下面
            $("button:eq(1)").click(function () {
                $("#left option").appendTo($("select:eq(1)"));
            })
            $("button:eq(2)").click(function () {
                $("select:eq(1) option:selected").appendTo($("select:eq(0)"));
            })
            $("button:eq(3)").click(function () {
                $("select:eq(1) option").appendTo($("select:eq(0)"));
            })
        })
    </script>
</head>
<body>

<div id="left">
    <select multiple="multiple" name="sel1">
        <option value="opt1">option1</option>
        <option value="opt2">option2</option>
        <option value="opt3">option3</option>
        <option value="opt4">option4</option>
        <option value="opt5">option5</option>
        <option value="opt6">option6</option>
    </select>
    <button>选中添加到下边</button>
    <button>全部添加到下边</button>
    </button>
</div>
<div id="right">
    <select multiple="multiple" name="sel2">
    </select>
    <button>选中的删除到上边</button>
    <button>全部删除到上边</button>
</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 添加行
            $("#addEmp").click(function () {
                var name = $("#empName").val()
                var email = $("#empemail").val()
                var salary = $("#empsalary").val()
                var trow = $("    <tr>\n" +
                    "        <td>" + name + "</td>\n" +
                    "        <td>" + email + "</td>\n" +
                    "        <td>" + salary + "</td>\n" +
                    "        <td><a href=\"deleteEmp?id-001\">delete</a></td>\n" +
                    "    </tr>")
                trow.appendTo($("#employeeTable"))
                trow.find("a").click(function () {
                    var rname = trow.find("td:first").text()
                    if (confirm("确定要删除" + rname + "？")) { // 取到行对象，然后删除
                        trow.remove();
                    }
                    return false;
                })
            })
            // 当页面加载触发后，只是绑定了三个a标签
            $("a").click(function () {
                // this是当前正在响应事件的dom对象
                var row = $(this).parent().parent()
                var rname = row.find("td:first").text()
                if (confirm("确定要删除" + rname + "？")) { // 取到行对象，然后删除
                    row.remove();
                }
                return false;
            })

        })
    </script>
</head>
<body>
<table id="employeeTable" border="1px" align="center">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th></th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="deleteEmp?id-001">delete</a></td>
    </tr>
    <tr>
        <td>Jerry</td>
        <td>jerry@tom.com</td>
        <td>8000</td>
        <td><a href="deleteEmp?id-002">delete</a></td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>Bob@tom.com</td>
        <td>10000</td>
        <td><a href="deleteEmp?id-003">delete</a></td>
    </tr>
</table>
<div id="formDiv">
    <h4 align="center">添加新员工</h4>
    <table align="center">
        <tr>
            <td>
                name:
            </td>
            <td>
                <input type="text" id="empName">
            </td>
        </tr>
        <tr>
            <td>
                email:
            </td>
            <td>
                <input type="text" id="empemail">
            </td>
        </tr>
        <tr>
            <td>
                salary:
            </td>
            <td>
                <input type="text" id="empsalary">
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button id="addEmp">提交</button>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

CSS样式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 255px;
        }

        /*加上div的原因是限制样式只给div标签使用*/
        div.whiteborder {
            border: 2px white solid
        }

        div.redDiv {
            background-color: red;
        }

        div.blueBorder {
            border: 5px blue solid;
        }
    </style>
    <script src="jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $divEle = $("div:first")
            $("#btn1").click(function () {
                $divEle.addClass('redDiv blueBorder')
            })
            $("#btn2").click(function () {
                $divEle.removeClass('blueBorder')
            })
            $("#btn3").click(function () {
                $divEle.toggleClass('redDiv')
            })
            $("#btn4").click(function () {
                var post = $divEle.offset()
                console.log(post)
                $divEle.offset({
                    top: 100,
                    left: 50
                })
            })
        })
    </script>
</head>
<body>
<table align="center">
    <tr>
        <td>
            <div class="border">

            </div>
        </td>
        <td>
            <div>
                <input type="button" value="addClass()" id="btn1">
                <input type="button" value="removeClass()" id="btn2">
                <input type="button" value="toggleClass()" id="btn3">
                <input type="button" value="offset()" id="btn4">
            </div>
        </td>
    </tr>
</table>
</body>
</html>

jQuery动画

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.5.1.min.js"></script>
    <style type="text/css">
        div {
            width: 100px;
            height: 255px;
        }

        /*加上div的原因是限制样式只给div标签使用*/
        div.whiteborder {
            border: 2px white solid
        }

        div.redDiv {
            background-color: red;
        }

        div.blueBorder {
            border: 5px blue solid;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            var cdiv = $("div")
            var cimg = $("img")
            // 第二个参数是回调函数
            // function cartoon(){
            //     cdiv.toggle(1000,cartoon)
            // }
            // cartoon();
            $("#btn1").click(function () {
                // 可以控制动画显示时间
                cdiv.show(1000)
                cimg.show(1000)
            })
            $("#btn2").click(function () {
                cdiv.hide(1000)
                cimg.hide(1000)
            })
            $("#btn3").click(function () {
                cdiv.fadeIn(1000)
                cimg.fadeIn(1000)
            })
            $("#btn4").click(function () {
                cdiv.fadeOut(1000)
                cimg.fadeOut(1000)
            })
            $("#btn5").click(function () {
                cdiv.fadeTo(1000, 0.5)
                cimg.fadeTo(1000, 0.5, function () {
                    alert("淡化完成")
                })
            })
            $("#btn6").click(function () {
                cdiv.fadeToggle(1000)
                cimg.fadeToggle(1000)
            })
            $("#btn7").click(function () {
                cdiv.toggle(1000)
                cimg.toggle(1000)
            })
        })
    </script>

</head>
<body>
<table>
    <tr>
        <td>
            <button id="btn1">显示show</button>
        </td>
        <td rowspan="7">
            <div class="blueBorder">
                我是动画
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn2">隐藏hide</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn3">淡入fadeIn</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn4">淡出fadeOut</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn5">淡化到fadeTo</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn6">淡化切换到fadeToggle</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn7">显示/隐藏切换toggle</button>
        </td>
    </tr>

</table>

<img src="screen.jpg" height="1080" width="1919"/>
</body>
</html>

jQ动画应用实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.5.1.min.js"></script>
    <style type="text/css">
        .hightcolor {
            color: #F50;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("li:gt(5):not(:last)").hide();
            $("#more").click(function () {
                $("li:gt(5):not(:last)").toggle();
                // 判断是否是隐藏
                if (!$("li:gt(5):not(:last)").is(":hidden")) {
                    $("a span").html("<img src=\"向上箭头.png\" height=\"16\" width=\"16\"/>显示精简品牌");
                    $("li:contains('快播')").addClass("hightcolor")
                } else {
                    $("a span").html("<img src=\"向下箭头.png\" height=\"16\" width=\"16\"/>显示全部品牌");
                    $("li:contains('快播')").removeClass("hightcolor")
                }
                return false;
            })
        })

    </script>

</head>
<body>
<ul>
    <li><a href="#">prohub</a></li>
    <li><a href="#">github</a></li>
    <li><a href="#">bilibili</a></li>
    <li><a href="#">tencent</a></li>
    <li><a href="#">taobao</a></li>
    <li><a href="#">爱奇艺</a></li>
    <li><a href="#">快播</a></li>
    <li><a href="#">优酷</a></li>
    <li><a href="#">暴风影音</a></li>
    <li><a href="#">腾讯视频</a></li>
    <li><a href="#">其他</a></li>
</ul>
<a href="more.html" id="more"><span><img src="向下箭头.png" height="16" width="16"/>显示全部品牌</span></a>
</body>
</html>

jQ事件操作

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            alert("原生js页面加载完成之后---1")
        }
        window.onload = function () {
            alert("原生js页面加载完成之后---2")
        }
        window.onload = function () {
            alert("原生js页面加载完成之后---3")
        }
        $(function () {
            alert("jquery的页面加载完成之后--1")
        })
        $(function () {
            alert("jquery的页面加载完成之后--2")
        })
        $(function () {
            alert("jquery的页面加载完成之后--3")
        })
    </script>
</head>
<body>
<button>我是按钮</button>
<iframe src="http://www.baidu.com"></iframe>

<img src="screen.jpg" height="1080" width="1919"/></body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件操作</title>

    <script src="jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#H5").live("click", function () {
                console.log("live绑定的单击事件")
            })
            $('<h5>jQuery事件</h5>').appendTo($("#H5"))
            // // 鼠标移入事件
            // $("h5").mouseover(function () {
            //     console.log("你进来了")
            // })
            // // 鼠标移出事件
            // $("h5").mouseout(function () {
            //     console.log("你出来了")
            // })
            // // bind绑定多个事件
            // $("h5").bind("click mouseover mouseout",function () {
            //         console.log("bind绑定的事件")
            // })
            // // 作用类似bind但是只能使用一次
            // // 这里为什么是传递字符串代表事件，因为如果是关键字或者值的话还要处理顺序，增加了库函数的繁杂度
            // $("h5").one("click mouseover mouseout",function () {
            //     console.log("one绑定的事件")
            // })
            // // unbind解绑事件
            // $("h5").unbind("click")
        })
    </script>

</head>
<body>
<h5 id="H5">jQuery事件</h5>
</body>
</html>

jQ事件event对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("R").click(function (event) {
                console.log(event)
            })
        }
        $(function () {
            $("#G").click(function (event) {
                console.log(event)
            })
            $("#G").bind("click mouseover", function (event) {
                if (event.type == "mouseover")
                    console.log("事件移入")
                else console.log("事件点击")
            })
        })
    </script>
</head>
<body>
<div style="color:red" id="R">我是红色的</div>
<div style="color:green" id="G">我是绿色的</div>
</body>
</html>

图片跟随

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#small").bind("mousemove mouseover mouseout", function (event) {
                if (event.type == "mouseover")
                    $("#big").show();
                else if (event.type == "mouseout")
                    $("#big").hide();
                else if (event.type == "mousemove")
                    $("#big").offset({
                        //这里注意坐标的使用，防止出现图片闪烁情况，若不修改坐标图片出现的时候运行mouseout事件
                        left: event.pageX + 10,
                        top: event.pageY + 10
                    });
            });
        })
    </script>
</head>
<body>
<img id="small" src="screen.jpg" height="100" width="200"/>
<img id="big" src="screen.jpg" height="1080" width="1919"/>
</body>
</html>

注意

在form里面最好不要用button标签，因为button标签一旦触发就会产生提交效果，导致页面刷新从而使操作效果一闪而过。
option标签中value属性不会作为默认值，但是在大多数标签中是可以作为默认值或者名字
value可以作为默认值并且作用和name类似可以进行val识别

QLUGCL
关注
  • 0
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaWeb学习笔记(尚硅谷旧版+新版)
qq_55737371的博客
04-25 7428
HTML基础 HTML书写规范 HTML标签 简介 特殊字符 a标签 列表标签 ul是无序列表 type属性可以修改列表项前面的符号 li是列表项 -------------------------------------------------------------------------------------------------------------------------ol是有序列表 img标签 table标签 跨...
vue 源码分析(尚硅谷视频学习笔记)
canxuezhang的博客
03-03 3462
热门框架Vue学习
尚硅谷JQuery视频教程
02-28
尚硅谷JQuery视频教程尚硅谷JQuery视频教程尚硅谷JQuery视频教程尚硅谷JQuery视频教程
尚硅谷_jQuery_学习笔记
Jaybo
05-07 1709
JavaScript 库作用及对比为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面, 并且兼容各大浏览器。 当前流行的 JavaScript 库有: prototype、**、Ext JS、mootools、jQueryjQuery 简介j
jQuery(尚硅谷)笔记--------11
weixin_52618349的博客
09-10 125
事件的冒泡 什么是事件的冒泡？ 事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的时间的时候，同一个事件也传递到了父元素的事件里去响应。 我们建一个html页面： css: body: 页面效果： 事件的冒泡： 运行结果： 点击子元素span 自动触发父元素的click方法。 那么如何阻止事件冒泡呢？ 在子元素事件函数内，return false;可以阻止事件的冒泡传递。 javaScript事件对象 事件对象，是封装有触发的事件...
b站视频-尚硅谷jQuery教程张晓飞老师-笔记（二）
weixin_44286392的博客
07-24 428
b站视频-尚硅谷jQuery教程张晓飞老师-笔记
尚硅谷---jQuery
Father_Of_Soft的博客
01-16 266
尚硅谷jQuery同步笔记，更方便您预习、复习哦~
Java Web 教程-尚硅谷学习笔记 2022 年
最新发布
08-03
《Java Web教程——尚硅谷学习笔记 2022年》是针对Java Web开发的一份详细教程，旨在帮助学习者掌握这一领域的核心概念和技术。这份资料涵盖了从基础到进阶的多个方面，包括了Java Web开发的基础知识、核心技术以及...
04_尚硅谷_jQuery_王振国 - 课堂笔记1
08-03
在本节课程“04_尚硅谷_jQuery_王振国 - 课堂笔记1”中，主要讲解了jQuery中的一些核心操作，包括属性操作、练习、CSS样式操作、动画操作和事件操作。以下是对这些知识点的详细说明： 1. jQuery 的属性操作： - `...
JQuery学习笔记。。。。
02-05
**jQuery学习笔记** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。这个笔记主要涵盖了我在尚硅谷学习jQuery过程中所学到的关键知识点，包括基本概念、选择器、DOM...
尚硅谷_jQuery
10-30
jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库 jQuery 理念: 写得少, 做得多. 优势如下: 轻量级 强大的选择器 出色的 DOM 操作的封装 可靠的事件处理机制 完善的 Ajax 出色的浏览器兼容性 链式操作方式 ……
尚硅谷jQuery视频教程（25集）
07-22
教程名称：尚硅谷jQuery视频教程（25集）课程目录：【】1.尚硅谷_佟刚_jQuery_HelloWorld【】10.尚硅谷_佟刚_jQuery_表单元素过滤选择器【】11.尚硅谷_佟刚_jQuery_第一天小结【】12.尚硅谷_佟刚_jQuery_选择器的练习【】13.尚硅谷_佟刚_jQuery_创建节点及插入节点【】14.尚硅谷_ 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
尚硅谷_佟刚_jQuery_PPT课件及源码.zip
09-24
尚硅谷_佟刚_jQuery_PPT课件及源码.zip
尚硅谷，佟刚，ajax完整源码（包含后续添加商品，三级联动）
02-25
尚硅谷，佟刚，ajax完整源码（包含 添加商品，三级联动）
jQuery(尚硅谷)笔记--------02
weixin_52618349的博客
08-18 131
3.jQuery核心函数 $是jQuery的核心函数，能完成jQuery的很多功能。$()就是调用$这个函数 1.传入参数为[函数]时，表示页面加载完成之后。相当于window.onload=function(){} 例： 运行结果： 2.传入[HTML字符串]时,会对我们创建这个html标签对象 例： 我们在body中写如下： 运行结果： 现在我们让jQuery代替body 运行结果： 3.传入的参数是[选择器字符串]时:$("#id属性值"...
jQuery（尚硅谷）笔记----------03
weixin_52618349的博客
08-18 103
4.jQuery对象和dom对象区分 4.1什么是jQuery对象，什么是dom对象 Dom对象 1.通过getElementById()查询出来的标签对象是Dom对象 2.通过getElementByName()查询出来的标签对象是Dom对象 3.通过getElementByTagName()查询出来的标签对象是Dom对象 4.通过createElement()方法创建的对象，是Dom对象 DOM对象Alert出来的效果是：【object HTML标签名 Element】 jQuery
jQuery(尚硅谷)笔记-------09
weixin_52618349的博客
09-08 127
jQuery练习：动态添加和删除行记录： 前端页面body部分： 页面效果： 引入css样式： css文件： 我们先来做添加功能： 思路：当我们按钮后，增加一个行标签 我们这时是把固定的数据加入到行标签中，运行一下： 现在是显示了3条数据，当我们什么都不输入的时候点击submit按钮， 我们发现我们现在又新添加了一条数据（Jerry）,但是这样我们只能添加固定的数据。 我们下一步构思就是要获取到前台页面输入的用户名和email，薪资...
【尚硅谷javaweb】jQuery入门
暮色年华的博客
06-20 139
jquery入门
jQuery学习笔记
尚硅谷铁杆粉丝的博客
10-29 2579
认识 jQuery 对象 认识$符 在jQuery库中，$是jQuery的简写形式。例如： $(“#app”)等价于jQuery(“#app”) $.ajax等价于jQuery.ajax 这里jQuery是一个顶级对象，所有的函数方法都在这个对象之下，$是它的别名。 jQuery对象 jQuery 对象就是通过 jQuery($()) 包装 DOM 对象后产生的对象，只有通过jQ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值