前端的初学习 -- 第十章 -- JQuery

最新推荐文章于 2022-05-27 21:06:01 发布

港猫鱼未归

最新推荐文章于 2022-05-27 21:06:01 发布

阅读量326

点赞数

分类专栏：前端学习文章标签： js css java html

前端学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文详细介绍了JQuery的基本概念、引入方式、DOM与CSS操作、选择器的使用（如基本、层次、属性、过滤选择器）、事件处理（包括鼠标、键盘、表单及复合事件），以及动画效果（如显示、隐藏、尺寸变化、淡入淡出）。此外，还讲解了节点操作如创建、插入、替换、复制和删除，以及如何在JavaScript对象和JQuery对象间转换。

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

博客说明

文章内容输出来源：拉勾教育Java就业急训营

👉点击查看JQuery W3C参考手册

什么是JQuery

在这里插入图片描述

JQuery弄做什么

在这里插入图片描述

引用JQuery

jQuery作为一个单独存在的js文件，并不会与其他的js文件发生冲突在页面中使用传统引入js文件的方式引入即可。

<body>
    <script src="js/jquery-3.4.1.min.js"></script>
</body>

简单使用JQuery

<body>
    <p>test</p>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        alert($("p").text());
    </script>
</body>

jq基本语法

在这里插入图片描述

js对象和jq对象转换

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用
如果想混用，要进行转换

<body>
    <p id="title">test</p>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        //将js对象转换成jq对象
        var jsDom = document.getElementById("title");//声明一个js对象
        var jq = $(jsDom);//转换
        alert(jq.html());

        //将jq对象转换成js对象
        var jqDom = $("p");//声明一个jq对象
        var js = jqDom.get(0);//转换
        alert(js.innerHTML)
    </script>
</body>

选择器

基本选择器

名称	语法构成	描述	示例
标签选择器	element	根据给定的标签名匹配元素	$(“h2” )选取所有h2元素
类选择器	.class	根据给定的class匹配元素	$(" .title")选取所有class为title的元素
ID选择器	#id	根据给定的id匹配元素	$(" #title")选取id为title的元素
并集选择器	selector1,selector2,…,selectorN	将每一个选择器匹配的元素合并后一起返回	$(“div,p,.title” )选取所有 div、p和拥有class为title 的元素
交集选择器	element.class或element#id	匹配指定class或id的某元素或元素集合	$(“h2.title”)选取所有拥有class为title的h2元素

<body>
    <p>test</p>
    <p class="test1">test1</p>
    <p id="test2">test2</p>
    <p>test3</p>
    <h1 class="test1">test4</h1>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("p").css("color","blue");// 标签选择器，获取所有的p
        $(".test1").css("color","blue");//类选择器
        $("#test2").css("color","yellow");//id选择器，更具有唯一性
        $(".test1,#test2").css("color","red");//并集选择器
        $("h1.test1").css("color","red");//交集选择器，既是h1标签，又拥有.test1的元素
    </script>
</body>

层次选择器

名称	语法构成	描述	示例
后代选择器	ancestor descendant	选取ancestor元素里的所有 descendant（后代）元素	$("#menu span" )选取 #menu下的元素
子选择器	parent>child	选取parent元素下的child（子）元素	$(" #menu>span" )选取 #menu的子元素
相邻元素选择器	prev+next	选取紧邻prev元素之后的next元素	$(" h2+dl " )选取紧邻元素之后的同辈元素
同辈元素选择器	prev~sibings	选取prev元素之后的所有siblings 元素	$(" h2~dl " )选取元素之后所有的同辈元素

<body>
    <h2>000</h2>
    <div id="x">
        111
        <P>p1</P>
        <div>
            <p>p2</p>
        </div>
    </div>
    <h2>222</h2>
    <h3>333</h3>
    <h2>444</h2>
    
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#x p").css("color", "red");//后代选择器，忽略层级
        $("#x > p").css("color", "red");//子代选择器，只负责子级
        $("#x + h2").css("color", "red");//相邻选择器，下一个紧邻的同级标签
        $("#x ~ h2").css("color", "red");//相辈选择器，从X开始下一个与X同辈的h2标签

    </script>
</body>

属性选择器

名称	语法构成	描述	示例
属性选择器	[attribute]	选取包含给定属性的元素	$(" [href]" )选取含有href属性的元素
	[attribute=value]	选取等于给定属性是某个特定值的元素	$(" [href =’#’]" )选取href属性值为 “#”的元素
	[attribute !=value]	选取不等于给定属性是某个特定值的元素	$(" [href !=’#’]" )选取href属性值不为“#”的元素
	[attribute^=value]	选取给定属性是以某些特定值开始的元素	$(" [href^=‘en’]" )选取href属性值以 en开头的元素
	[attribute$=value]	选取给定属性是以某些特定值结尾的元素	$(" [h r e f$ =’.jpg’]" )选取href属性值以.jpg结尾的元素
	[attribute*=value]	选取给定属性是以包含某些值的元素	$(" [href* =‘txt’]" )选取href属性值中含有txt的元素
	[s1] [s2] [sN]	选取满足多个条件的复合属性的元素	$(“li[id][title=新闻]” )选取含有id和 title属性为新闻的元素

<body>
    <a href="www.baidu.com">百度</a>
    <a href="www.baidu.cn">百度</a>
    <a href="http://www.baidxu.com">百度</a>
    <a href="xxx">TEST</a>
    <p href="x">Test</p>
    <a href="xxx" title="x">TESTsss</a>
    
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("[href]").css("color","red");//选择拥有href属性的元素
        $("[href = 'xxx']").css("color","red");//选择拥x有href属性并值为xxx的元素
        $("a[href != 'xxx']").css("color","red");//选择a标签中href不等于xxx的元素
        $("[href ^= 'www']").css("color","red");//选择href以www开头的元素
        $("[href $= 'com']").css("color","red");//选择href以com结尾的元素
        $("[href *= 'x']").css("color","red");//选择href包含x的元素
        $("[href][title='x']").css("color","red");//选择拥有href属性和title属性，并且title=x的元素
    </script>
</body>

过滤选择器

语法构成	描述	示例
:first	选取第一个元素	$(" li:first" )选取所有元素中的第一个元素
:last	选取最后一个元素	$(" li:last" )选取所有元素中的最后一个元素
:even	选取索引是偶数的所有元素（index从0开始）	$(" li:even" )选取索引是偶数的所有元素
:odd	选取索引是奇数的所有元素（index从0开始）	$(" li:odd" )选取索引是奇数的所有元素
:eq(index)	选取索引等于index的元素（index从0开始）	$(“li:eq(1)” )选取索引等于1的元素
:gt(index)	选取索引大于index的元素（index从0开始）	$(" li:gt(1)" )选取索引大于1的元素（注：大于1，不包括1）
:lt(index)	选取索引小于index的元素（index从0开始）	$(“li:lt(1)” )选取索引小于1的元素（注：小于1，不包括1）

<body>
    <h2 id="h2#x">修仙小说</h2>
    <ul>
           <li>凡人修仙传</li>
           <li>遮天</li>
           <li>神墓</li>
           <li>残袍</li>
           <li>大主宰</li>
    </ul>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("li:first").css("color", "red"); // 第一个li
        $("li:last").css("color", "red"); // 最后一个li    
        $("li:even").css("color", "red"); // 偶数行的li    
        $("li:odd").css("color", "red"); // 奇数行的li    
        $("li:eq(2)").css("color", "red"); // 下标为2的li    
        $("li:gt(1)").css("color", "red"); // 下标大于1的li    
        $("li:lt(2)").css("color", "red"); // 下标小于2的li    
        $("#h2\\#x").css("color", "red"); // 使用转义符
    </script>
</body>

事件

鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：
在这里插入图片描述

<body>
    <img src="img/1.jpg" width="300"> 
    <img src="img/1.jpg" width="300"> 
    <img src="img/1.jpg" width="300">

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        //实现点击更换图片，鼠标滑过时增加边框，划出时取消边框
        $("img").click(function () {        //点击一下，换照片
            $(this).attr("src", "img/2.jpg"); //this就是事件触发的源头    
        });
        $("img").mouseover(function () {   //移动到元素上        
            $(this).css("border", "3px solid red");
        });
        $("img").mouseout(function () {    //离开元素        
            $(this).css("border", "3px solid white");
        });
    </script>
</body>

键盘事件

用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件有：
在这里插入图片描述

<body>
    <input>
    <h3></h3>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        //使用键盘事件实现框中输入的内容显示到h3标签中
        $("input").keyup(function () {
            var str = $(this).val(); // 获取框中的值
            $("h3").text(str); // 将h3元素中的文本内容更改为str    
        });
    </script>
</body>

表单事件

当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件，详见下表
在这里插入图片描述

<body>
    <form action="">
        <p>帐号: <input id="a" value="请输入帐号..."></p>    
        <p>电话: <input id="b"></p>
    </form>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
    	//实现 点击时不显示'请输入帐号'，未点击时显示'请输入帐号'
        //获得焦点（激活/被选中）    
        $("#a").focus(function () {
            $(this).val("");
        });
        //失去焦点（未激活/未选中）
        $("#a").blur(function () {
            $(this).val("请输入帐号...");
        });
    </script>
</body>

复合事件

鼠标悬停复合事件

hover()方法相当于mouseover与mouseout事件的组合

<body>
    <img src="img/1.jpg" width="400">

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("img").hover(function () { //第一个匿名类相当于mouseover(选中)
            $(this).css("border", "5px solid red");
        },
            function () {  //第二个匿名类相当于mouseout(未选中)
                $(this).css("border", "5px solid white");
            }
        );
    </script>
</body>

连续点击复合事件

<body>
    <h2>修仙小说</h2>
    <ul>
           <li>凡人修仙传</li>
           <li>遮天</li>
           <li>神墓</li>
           <li>残袍</li>
           <li>大主宰</li>
    </ul>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("h2").click(function () {
            $("ul").toggle(); // 连续点击，ul的可见和隐藏进行切换 
        });
    </script>
</body>

事件动态绑定

对dom元素绑定事件的另一种写法，这种写法可以绑定多种事件
绑定一种事件或绑多种事件

<body>
    <h2>点我试试</h2>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        // $("h2").click(function () {
        //     alert("普通事件绑定..."); // 连续点击，ul的可见和隐藏进行切换 
        // });

        // $("h2").on("click",function(){
        //     alert("on方法绑定一个事件...");
        // });

        //鼠标点击和鼠标移动到元素上的事件
        $("h2").on("click mouseover",function(){
            alert("on方法绑定多个事件...");
        });
    </script>
</body>

元素的显示与隐藏

改变元素的宽和高(带动画效果)

在这里插入图片描述

<style>
    div {
        width: 500px;
        height: 500px;
        background-color: red;
    }
</style>

<body>
    <button id="btn_1">显示</button>
    <button id="btn_2">隐藏</button>
    <button id="btn_3">切换</button>

    <div></div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn_2").click(function () {
            $("div").hide("fast");//fast:快速的
        });

        $("#btn_1").click(function () {
            $("div").show("slow");// slow：缓慢的
        });

        $("#btn_3").click(function () {
            $("div").toggle(1000);// 自定义时间(单位：毫秒)
        });
    </script>
</body>

改变元素的高（拉伸效果）

在这里插入图片描述

<style>
    div {
        width: 500px;
        height: 500px;
        background-color: red;
    }
</style>

<body>
    <button id="btn_1">显示</button>
    <button id="btn_2">隐藏</button>
    <button id="btn_3">切换</button>

    <div></div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn_2").click(function () {
            $("div").slideUp("fast");//fast:快速的
        });

        $("#btn_1").click(function () {
            $("div").slideDown("slow");// slow：缓慢的
        });

        $("#btn_3").click(function () {
            $("div").slideToggle(1000);// 自定义时间(单位：毫秒)
        });
    </script>
</body>

不改变元素的大小（淡入淡出效果）

在这里插入图片描述

<style>
    div {
        width: 500px;
        height: 500px;
        background-color: red;
    }
</style>

<body>
    <button id="btn_1">显示</button>
    <button id="btn_2">隐藏</button>
    <button id="btn_3">切换</button>
    <button id="btn_4">50%透明</button>

    <div></div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn_2").click(function () {
            $("div").fadeOut("fast");//fast:快速的
        });

        $("#btn_1").click(function () {
            $("div").fadeIn("slow");// slow：缓慢的
        });

        $("#btn_3").click(function () {
            $("div").fadeToggle(1000);// 自定义时间(单位：毫秒)
        });

        $("#btn_4").click(function(){
            $("div").fadeTo(1000,0.2)// 1秒内变成20%的透明度
        })
    </script>
</body>

链

链是允许我们在同一个元素上在一条语句中运行多个jQuery方法，可以把动作/方法链接在一起

<style>
    div{
        width: 500px;
        height: 500px;
        background-color: black;
        color: aliceblue;
    }
</style>

<body>
    <button>点击试试</button>
    <div>TestTestTestTestTestTestTestTestTestTestTestTestTest</div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            //1.背景颜色变红、2.字体颜色变绿、3.向上收缩、4.向下伸展
            $("div").css("background-color","red").css("color","green").slideUp(1000).slideDown(1000);
        });
    </script>
</body>

DOM和CSS的操作

属性函数

在这里插入图片描述

<body>
    <button>点击试试</button>
    <img src="img/1.jpg" title="test1" width="500px">

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
       $("button").click(function(){
           $("img").attr("title","test2");
           $("img").attr({width:"400px",height:"300px"});
       })
    </script>
</body>

文本函数

在这里插入图片描述

<body>
    <button>点一下</button>
    <input id="username">
    <div>
        <h1>Test1Test1Test1Test1</h1>
    </div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function () {
            alert($("input").val());//获得表单元素中的value值
            $("input").val("test1");//修改表单元素中的value值

            alert($("div").html());//获得元素中的内容（标签+文本）
            $("div").html("<h1>Test2Test2Test2Test2</h1>");//修改元素中的内容（标签+文本）

            alert($("div").text());//获得元素中的文本(文本)
            $("div").text("Test3Test3Test3Test3");//修改元素中的内容（文本）
        })
    </script>
</body>

css函数

在这里插入图片描述

<style>
    div {
        width: 500px;
        height: 500px;
        background-color: black;
    }
</style>

<body>
    <button>点一下</button>
    <div></div>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function () {
            alert($("div").css("width"));//获取css属性，width的值
            $("div").css("background-color", "red");//设置css属性的值
            $("div").css({
                background: "pink",
                width: "800px",
                height: "800px"
            });//设置多个css属性的值

            $("div").css("background-color", "red").css("width", "200px").css("height", "200px");//使用链式设置多个css属性的值
        })
    </script>
</body>

在这里插入图片描述

<style>
    div {
        width: 500px;
        height: 500px;
        background-color: black;
    }
</style>

<body>
    <button>点一下</button>
    <div></div>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function () {
            //获取
            var w = $("div").width();
            var h = $("div").height();
            alert(w + "px :" + h + "px");

            //修改
            w = $("div").width("800px");
            h = $("div").height("800px");
        });
    </script>
</body>

类样式函数

在这里插入图片描述

<style>
    div {
        width: 300px;
        height: 300px;
        background-color: black;
    }

    .a{
        background-color: blue;
        border-radius: 50%;
    }

    .b{
        border: 5px dashed red;
        opacity: 50%;
    }

    .c{
        background-color: red;
        border-radius: 50%;

        border: 5px dashed black;
        opacity: 50%;
    }
</style>

<body>
    <button id="btn_1">添加a,b样式</button>
    <button id="btn_2">取消a,b样式</button>
    <button id="btn_3">切换样式</button>
    <div></div>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn_1").click(function(){
            $("div").addClass("a b");//添加样式，可多个可单个
        })
        $("#btn_2").click(function(){
            $("div").removeClass("a b");//删除样式，可多个可单个
        })
        $("#btn_3").click(function(){
            $("div").toggleClass("c");//切换样式
        })
    </script>
</body>

节点操作

创建节点

工厂函数$()用于获取或创建节点

插入节点

插入子节点

在这里插入图片描述

插入同辈节点

在这里插入图片描述

替换节点

replaceWith()
replaceAll()

复制节点

clone()

删除节点

remove()删除整个节点
empty()清空节点内容

节点总结代码

<body>
    <input>
    <button id="add">添加</button>
    <ul>
        <li>Test1</li>
        <li>Test2</li>
        <li>Test3</li>
    </ul>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#add").click(function () {

            //创建节点
            var bookname = $("input").val();
            var newli = $("<li>" + bookname + "</li>");//通过工厂函数创建新的li节点

            //这两种方式效果一样，写法不一样
            //添加节点
            $("ul").append(newli);//添加到ul后面
            newli.appendTo("ul");//添加到ul后面

            //这两种方式效果一样，写法不一样
            //添加节点
            $("ul").prepend(newli);//添加到ul前面
            newli.prependTo("ul");//添加到ul前面

            //这两种方式效果一样，写法不一样
            //替换节点
            $("li:eq(1)").replaceWith(newli);//将第二个li替换成newli
            newli.replaceAll("li:eq(1)");//将第二个li替换成newli

            //复制节点
            $("li:first").clone().insertAfter("li:last");//复制第一个li，并插入到最后一个li的后面

            //删除节点
            $("li:eq(1)").empty();//清空节点上的文本(节点并没有消失)
            $("li:eq(1)").remove();//删除节点(节点+文本)
        })
    </script>
</body>