java第二阶段之JQuery

2021/11/8 14:09:48

本文主要是介绍java第二阶段之JQuery,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一、JQuery简介

(一)简介

        jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

(二)使用

        1、引入

        之前JavaScript课程我们讲过外部js文件的引入,如下:

        <script src="./js/jquery-3.3.1.min.js" type="text/javascript"></script>

        2、使用

        在jQuery中,标识符$与jQuery是等价的,即jQuery == $,为了书写简单方便, 我们通常使用$替代jQuery。但jQuery是严格区分大小写的。

        例如:我们可以通过jQuery(选择器) 或 $(选择器)来查找元素。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Jquery的使用</title>
    </head>
    <script src="./js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script>
        $(function() {
            console.log($("div").html());
        });
    </script>
    <body>
        <div>Hello Jquery</div>
    </body>
</html>

二、页面加载

        jQuery提供了ready()函数,用于页面加载成功后执行。与window.onload函数作用一致。写法有以下三种:

        代码示例:

      

$(function(){
		alert(3);
})

        JQuery的ready()与window.onload的区别:

        1.执行时间不同

        window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

        $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。

        由此可见,$(document).ready()的执行时机要早于window.onload。

        2.编写个数不同

        window.onload不能同时编写多个,如果有多个window.onload,只会执行一个。

        $(document).ready()可以同时编写多个,并且都可以得到执行。

        3.简化写法

        window.onload没有简化写法。

        $(document).ready(function(){})可以简写成$(function(){});

三、js对象与jQuery对象

        (js对象)DOM对象:就是通过原生JavaScript方法获取到的对象就是DOM对象。

        jQuery对象:就是通过jQuery包装DOM对象后产生的对象。

        jQuery对象和DOM对象可以进行相互转换,但是切记两个对象的属性和函数不能彼此混搭使用

        DOM对象转jQuery对象,语法:jQuery(DOM对象); 或 $(DOM对象);

        jQuery对象转DOM对象,语法:jQuery对象[index]; 或 jQuery对象.get(index);

        代码示例1:

<!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.6.0.min.js" type="text/javascript"></script>
    <script>
        $(function(){
            var obj = document.getElementsByTagName("div")[0];
            console.log(obj.innerHTML);
            console.log($("div").html());
            console.log($(obj).html());
            $obj = $("div");
            console.log($obj[0].innerHTML);
        })
    </script>
</head>
<body>
    <div>div区域标签
        <a href="">百度一下</a>
    </div>
</body>
</html>

四、jQuery选择器

        jQuery选择器是jQuery强大的体现,它提供了一组方法,让我们更加方便的获取到页面中的元素。jQuery选择器继承了CSS与Path语言的部分语法,允许通过标签名、属性名或内容对DOM元素进行快速、准确的定位,从而完成元素属性和行为的处理。

        jQuery选择器的分类:

        1.基本选择器

        2.层级选择器

        3.属性选择器

        4.过滤选择器

        5.表单选择器

(一)基本选择器

        基本选择器是我们使用频率最高的选择器。

        主要有:标签选择器、ID选择器、类选择器。

<!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.6.0.min.js" type="text/javascript"></script>
    <script>
        $(function(){
            $arr = $("p");
            for(var i = 0;i<$arr.length;i++){
                console.log($arr[i].innerHTML);
           }
            $obj = $(".first");
            for(var i = 0;i<$obj.length;i++){
                console.log($obj[i].innerHTML);
            }
            console.log($("#title").html());
        })
    </script>
</head>
<body>
    <p id = "title" class="first">我是p标签</p>
    <p class="first">I am p </p>
    <p>I am p3</p>
</body>
</html>

(二)层级选择器

        层级选择器指按节点树的层级关系获取元素。通俗一点讲就是子孙元素/父子元素/兄弟元素的关系。

        主要有:后代选择器、子选择器。

        1.后代选择器:parent child, 使用空格隔开。获得父元素内部的所有儿子、孙子...元素。(祖孙关系)

        2.子选择器:parent > child ,使用>符号隔开。 获得父元素下面的子元素。(父子关系)

        代码示例:

<!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.6.0.min.js"></script>
    <script>
        $(function(){
            $arr = $("#main span");
            for(var i=0;i<$arr.length;i++){
                console.log($arr[i].innerHTML);
            }
            $arr.each(function(i,dom){
               
                console.log(dom.innerHTML);
                console.log($(dom).html());
            })
        })
    </script>
</head>
<body>
    <div id="main">
        <p> I am a p in div</p>
        <span>i am a span in div</span>
        <p>
            <span>I am a span in p</span>
        </p>
    </div>
    <div>
        <span>hahahahahha</span>
    </div>
</body>
</html>

(三)属性选择器

        根据属性或属性的值进行筛选。

        [attribute] $("[href]") 所有带有 href 属性的元素

        [attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素

        [attribute=value] [attribute=value] $("[href='#'][class='demo']") 所有href属性的值等于"#",且class属性的值为"demo"

        代码示例:

<!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.6.0.min.js"></script>
    <script>
        $(function(){
            $arr = $("[href]");
            $arr.each(function(i,dom){
                console.log(dom.innerHTML);
            });
            $obj = $("[href='regist.html']");
            console.log($obj.html());
        })

    </script>
</head>
<body>
    <a href="index.html">链接1</a>
    <a href="login.html">链接2</a>
    <a href="regist.html">链接3</a>
    <a href=""></a>
    <a href=""></a>
</body>
</html>

(四)过滤选择器

        过滤选择器是从获取的对象列表中再次筛选想要的元素。常用的过滤选择器有:

        :first 第一个

        :last 最后一个

        :eq(index) 指定索引的

        :gt(index) 大于索引的

        :lt(index) 小于索引的

        :odd 奇数

        :even 偶数

        :not() 除了**

        :header 匹配标题,比如h2,h3...

        代码示例:

<!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.6.0.min.js"></script>
    <script>
        $(function(){
            //:first
            console.log($("ul li:first").html());
            //:last
            console.log($("ul li:last").html());
            //:eq(index)
            console.log($("ul li:eq(1)").html());
            console.log("============================");
            //:lt(index)
            $arr = $("ul li:lt(3)");
            $arr.each(function(i,dom){
                console.log(dom.innerHTML);
            })
            //:gt(index)
            $arr4 = $("ul li:gt(1)")
            $arr4.each(function(i,dom){
                console.log(dom.innerHTML);
            })
            console.log("============================");
            //:odd
            $arr1 = $("ul li:odd");
            $arr1.each(function(i,dom){
                console.log(dom.innerHTML);
            })
            //:even
            $arr3 = $("ul li:even");
            $arr3.each(function(i,dom){
                console.log(dom.innerHTML);
            })
            console.log("============================");
            //:header
            $arr2 = $("body :header");
            $arr2.each(function(i,dom){
                console.log(dom.innerHTML);
            })
        })
    </script>
</head>
<body>
    <h1>H1 title</h1>
    <h2>H2 title</h2>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul>
    <h3>H3 title</h3>
</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.6.0.min.js"></script>
    <script>
        $(function(){
            $obj = $("body :disabled");
            console.log($obj.val());
            $arr= $("body :enabled");
            $arr.each(function(i,dom){
                console.log(dom.value);
            })
            $("#btn").click(function(){
                $arr1 = $("input[type='checkbox']:checked");
                $arr1.each(function(i,dom){
                    console.log(dom.value);
                })
                $arr2 = $(":selected");
                console.log($arr2.val());
            })
            $("#txt").blur(function(){
                console.log($(this).val());
            })

            $("#d1").change(function(){
                console.log(this.value);
            })

        })
    </script>
</head>
<body>
    sex:

    man:<input type="radio" name="sex" value="man" id="" disabled>
    women:<input type="radio" name="sex" value="woman" id=""><br>
    hobby:
    smoking:<input type="checkbox" name="hobby" value="smoking" id="">
    tang:<input type="checkbox" name="hobby" value="tang" id="">
    walk:<input type="checkbox" name="hobby" value="walk" id=""><br>
    <select name="" id="d1">
        <option value="bj">bj</option>
        <option value="sh">sh</option>
        <option value="nj">nj</option>
    </select>
    <input type="button" value="点击" id = "btn">
    <input type="text" name="" id="txt">
</body>
</html>

五、jQuery的DOM操作

(一)属性操作

        attr()

        attr("属性名") 获取标签中对应的属性名的值

        attr("属性名","属性值") 设置标签的属性名与对应的属性值

        prop()

        prop("属性名") 获取标签中对应的属性名的值

        prop("属性名","属性值") 设置标签的属性名与对应的属性值

        attr()与prop()的区别?

        attr()能够实现对标签中自带属性与自定义属性的操作,但是在某些使用过程中有功能失效问题

        prop()实现对标签中自带属性的操作,推荐使用

        代码示例:

<!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>
        .c2{
            border: 2px solid red;
        }
    </style>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            console.log($("#txt").attr("name"));
            console.log($("#txt").prop("name"));
            console.log($("#txt").attr("ids"));
            console.log($("#txt").prop("ids"));
            $("#txt").prop("class","c2");
        })
 
    </script>
</head>
<body>
    <input type="text" id="txt" name="username" ids="hello" class="c1">

</body>
</html>

(二)class类操作

        1. addClass() 向被选元素添加一个或多个类

        2. removeClass() 从被选元素删除一个或多个类

        3. toggleClass() 对被选元素进行添加/删除类的切换操作

        示例代码:

<!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{
            border: 1px solid orange;
            height: 100px;
            width: 100px;
        }
        .c1{
            border: 1px solid red;
            height: 300px;
        }
        .c2{
            width: 400px;
            background-color: blue;
        }
        .c3{
            background-color: springgreen;
        }
    </style>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            $("div").mouseover(function(){
                $(this).addClass("c1 c2");
            })
            $("div").mouseout(function(){
                $(this).removeClass("c2");
            })
            $("div").click(function(){
                $(this).toggleClass("c3");
            })
        })
    </script>
</head>
<body>
    <div>区域标签</div>
</body>
</html>

(三)内容操作

        1. html() 设置或返回所选元素的内容(包括 HTML 标记)

        2. text() 设置或返回所选元素的文本内容

        3. val() 设置或返回表单字段的值

        代码示例:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script>
        $(function() {
            $("#btn").click(function() {
                console.log($("div").html()); //获取div的内容
                console.log($("div").text()); //获取div的文本内容
                console.log($("#d1").val()); //获取文本框输入的值
            });
        })
    </script>
</head>

<body>
    <div>
        <a href="">超链接-百度一下</a>
    </div>
    <input type="text" id="d1" /> <br>
    <input type="button" value="点击" id="btn">
</body>

</html>

(四)样式操作

        1. css("样式名") 获取该样式的值

        2. css("样式名","值") 设置一个样式

        3. css({"样式名":"值","样式名":"值",...}) 设置多个样式

        代码示例:

<!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.6.0.min.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
                $("div").css({"height":"200px","width":"200px","border":"1px solid red"})
            })
        })
    </script>
</head>
<body>
    <div></div>
    <input type="button" value="点击" id="btn">
</body>
</html>

(五)文档操作

        1、内部插入

                1. append(); 在被选元素的结尾插入内容

                2. prepend(); 在被选元素的开头插入内容

        代码示例:

<!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.6.0.min.js"></script>
    <script>
        $(function(){
            $("#btn1").click(function(){
                $("ul").append("<a href=''>百度一下</a>")
                $("ul").prepend("<a href=''>百度一下</a>")
            })
            $("#btn2").click(function(){
                
            })
            
        })
    </script>
</head>
<body>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <input type="button" value="内部添加" id="btn1">
    <input type="button" value="外部添加" id="btn2">
    <input type="button" value="">
</body>
</html>

        2、外部插入

                1. after(); 在被选元素之后插入内容

                2. before();在被选元素之前插入内容

        3、删除

                1. empty(); 清空里面内容

                2. remove(); 删除整个元素

                3. detach(); 删除整个元素

        2,3删除的区别,detach删除后还遗留在页面上,并没有完全消失

六、jQuery事件

        jQuery的事件类型和我们之前学习的JavaScript事件类型基本上是一样的,只是在使用的方式上有一些差别 比如 点击事件click,失焦事件 blur,聚焦事件 focus等...

        代码示例如下:

        $obj.click(function(){

                //编写点击事件触发后要执行的js代码

        });

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script>
        $(function() {
            //给按钮添加点击事件
            $("#btn").click(function() {
                alert("按钮点击事件触发并执行");
            });
        })
    </script>
</head>

<body>
    <input type="button" value="点击事件演示" id="btn">
</body>

</html>

七、动画效果

        1、显示与隐藏

        jQuery特效,是指jQuery封装了JS的一些用于处理元素的显示与隐藏的比较好看的效果,我们可以通过调用函数直接使用。

        常用的jQuery特效有以下几种:

        1.显示与隐藏

        (1)show(speed,callback);显示元素。

        (2)hide(speed,callback);隐藏元素。

        (3)toggle(speed,callback); 在 show() 和hide() 方法之间切换,显示被隐藏的元素,并隐藏已显示的元素。

        参数说明:

        speed 参数规定隐藏和显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

        callback 参数是隐藏或显示完成后所执行的回调函数名称。

        以上两个参数都是可选项。

        代码示例:

<!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{
            width: 100px;
            height: 100px;
            background-color: brown;
        }
    </style>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            $("#btn1").click(function(){
                $("div").hide(5000,function(){
                    alert("嘿嘿嘿嘿嘿")
                })
            })
            $("#btn2").click(function(){
                $("div").show(5000,function(){
                    alert("大大大大大")
                })
            })
            $("#btn3").click(function(){
                $("div").toggle(3000)
            })
        })
    </script>
</head>
<body>
    <div>12</div>
    <input type="button" value="隐藏" id="btn1">
    <input type="button" value="显示" id="btn2">
    <input type="button" value="hide/show" id="btn3">
</body>
</html>

        2、淡入淡出

        (1)fadeIn(speed,callback);淡入已隐藏的元素。

        (2)fadeOut(speed,callback);淡出可见元素。

        (3)fadeToggle(speed,callback);在 fadeIn()与 fadeOut()方法之间进行切换。如果元素已淡出,则 fadeToggle()会向元素添加淡入效果。如果元素已淡入,则 fadeToggle()会向元素添加淡出效果。

        参数作用同上。

        代码示例:

<!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{
            width: 100px;
            height: 100px;
            background-color: brown;
        }
    </style>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            $("#btn1").click(function(){
                $("div").fadeIn(5000,function(){
                    alert("嘿嘿嘿嘿嘿")
                })
            })
            $("#btn2").click(function(){
                $("div").fadeOut(5000,function(){
                    alert("大大大大大")
                })
            })
            
        })
    </script>
</head>
<body>
    <div>12</div>
    <input type="button" value="隐藏" id="btn1">
    <input type="button" value="显示" id="btn2">
    <input type="button" value="hide/show" id="btn3">
</body>
</html>

        3、滑动效果

        (1)slideDown(speed,callback);向下滑动元素,用于作显示。

        (2)slideUp(speed,callback);向上滑动元素,用于作隐藏。

        (3)slideToggle(speed,callback);在 slideDown()与 slideUp()方法之间进行切换。如果元素已向下滑动,则 slideToggle()会向上滑动它们。如果元素已向上滑动,则 slideToggle()会向下滑动它们。

        参数作用同上。

        代码示例:

<!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{
            border:1px solid black;
            width: 200px;
            height: 200px;
        }
        #a {
            
            background-color: brown;
        }
    </style>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            $("#btn1").click(function(){
                $("#a").slideUp(5000,function(){
                    alert("嘿嘿嘿嘿嘿")
                })
            })
            $("#btn2").click(function(){
                $("#a").slideDown(5000,function(){
                    alert("大大大大大")
                })
            })
            
        })
    </script>
</head>
<body>
    <div>
        <div id="a">12</div>
    </div>
    <input type="button" value="隐藏" id="btn1">
        <input type="button" value="显示" id="btn2">
        <input type="button" value="hide/show" id="btn3">
</body>
</html>

        4、自定义动画

         用于创建自定义动画的函数。

        这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.

        animate(params,[speed],[fn])

        参数解析:

        1.params:一组包含作为动画属性和终值的样式属性和及其值的集合

        2.speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)

        3.fn:在动画完成时执行的函数,每个元素执行一次。

        代码示例:

八、数组操作

jQuery中有属于自己的遍历对象或者数组的方法,如下:

第一种写法:

$obj.each(function(i,dom){

});

第二种写法:

$.each(object,function(i,dom){

});

<!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{
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
        }
    </style>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            $("div").click(function(){
                $(this).animate({"left":"500px"},5000,function(){
                    $(this).hide(3000)
                })
            })
        })
    </script>
</head>
<body>
    <div>12</div>
</body>
</html>

        i :对象的成员或数组的索引

        dom:对应变量或内容,该变量或者内容为js对象

        注意:如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。

        代码示例:

<!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.6.0.min.js"></script>
    <script>
        $(function(){
            $arr = $("div")
            $arr.each(function(i,dom){
                console.log($(dom).html());
            })
        })
    </script>
</head>
<body>
    <div>123</div>
    <div>321</div>
</body>
</html>

九、表单插件

        在学习javascript时候,我们手动的完成过表单数据的校验,这项功能在实际开发中也是常见的,属于通用功能,但是单纯的通过javascript进行校验,如果选项过多,那么还是有些力不从心。实际在开发中我们都是使用第三方工具,本案例中我们将使用jQuery插件validation进行表单的校验。

        validation插件的使用步骤:

        1、下载validation工具。

        2、导入工具jquery-3.4.1.js、jquery.validate.js、messages_zh.js。

        3、编写form表单信息并在脚本中给form表单绑定validate验证方法。

        4、在form表单元素中逐个指定校验规则。



这篇关于java第二阶段之JQuery的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程