Java前端-Jquery框架

风花雪夜尽风华

于 2024-07-29 22:23:29 发布

阅读量25

点赞数

文章标签：前端 java jquery

本文链接：https://blog.csdn.net/2301_79975618/article/details/140782605

版权

一：目录：

1.jQuery介绍

2.jQuery的操作

三：jQuery介绍：

jQuery对JavaScript进行了封装，使DOM，事件处理，Ajax等功能的实现代码更加简洁，有效提高了程序开发效率。

四：jQuery的操作：

1.选择器：

<html>
    <head>
        <title>Jquery的使用</title>
        <script src="../配置文件/jquery-3.7.1.js"></script>
        <!-- 基础选择器：
            1.id选择器      $("#id属性值")      选择id为指定值的元素对象(有同名id,以第一个为准)
            2.标签选择器    $("标签名")         选择所有指定标签的元素对象
            3.类选择器      $(".class属性名")   选择class为指定值的元素对象
            4.*            $("*")               选择页面中所有的元素标签
            5.组合选择器    $("选择器1,选择器2,...") 选择指定选择器选中的对象
        层次选择器
            后代选择器
                父元素 指定元素 (空格)      $("父元素 指定元素")        选择父元素的所有指定元素(包括第一代，第二代)
            子代选择器
                父元素 > 指定元素(大于号隔开)$("父元素>指定元素")        选择父元素的所有第一代指定元素
            相邻选择器(同级选择器)
                元素 + 指定元素(加号隔开)    $("元素+指定元素")         选择元素的下一个指定元素(只会查找下一个元素，如果元素不存在，获取不到)
            同辈选择器
                元素 ~ 指定元素(~号隔开)     $("元素~指定元素")         选择元素的下面所有指定元素 
        表单选择器(选择所有表单项)
            $(":表单类型"); -->
    </head>
    <body>
        <form id="f" action="http://www.baidu.com"  method="get">
            姓名:<input type="text" id="uname"><br>
            密码:<input type="password" id="pwd"><br>
            <input type="radio" name="gender" value="man">男</input>
            <input type="radio" name="gender" value="woman">女</input><br>
            <input type="checkbox" name="hobby" value="sing">唱歌
            <input type="checkbox" name="hobby" value="dance">跳舞
            <input type="checkbox" name="hobby" value="bask">打篮球<br>
            <select name="城市" id="chose">
                <option value="chengshi">城市</option>
                <option value="henan">河南</option>
                <option value="hebei">河北</option>
                <option value="beijing">北京</option>
            </select><br>
        </form>
        
        <script>
            var inputs=$(":input");
            console.log(inputs);
            var inputss=$("input");
            console.log(inputss);
            var text=$("#uname");
            console.log(text);
        </script>
    </body>
</html>

2.操作元素：

<html>
    <head>
            <title>创建和操作元素</title>
            <script src="../配置文件/jquery-3.7.1.js"></script>
            <!-- 
            创建元素
                $("内容");
            操作元素
                1.前追加
                    指定元素.prepend(内容);         在指定元素内部的最前面追加内容，内容可以为字符串，html元素或者是jquery
                    $(内容).prependTo(指定元素)     把内容追加到指定元素内部的最前面，内容可以为html元素或者是jquery
                2.后追加
                    指定元素.append(内容);          在指定元素内部的最后面追加内容，内容可以为字符串，html元素或者是jquery
                    $(内容).appendTo(指定元素)      把内容追加到指定元素内部的最后面，内容可以为html元素或者是jquery
                3.追加同级元素
                    指定元素.before(内容)           在指定元素的前面追加内容
                    指定元素.after(内容)            在指定元素的后面追加元素 
            删除元素
                1.remove()                         删除所选元素或指定的子元素，包括整个标签和内容一起删除
                2.empty()                          删除所选元素的内容
            遍历元素
                指定元素.each(function(index,element))
                function为遍历时的回调函数
                index为遍历元素的序列号，从0开始
                element是当前的元素，此时是dom元素
                this代表当前遍历到的dom元素
             -->
    </head>
    <body>
        <span id="s" style="color: red;">Jquery</span>
        <div id="d"></div>
        
        <script>
            var div=$("#d");
            div.prepend("操作元素");
            $("创建元素").prependTo($("#d"));
            $("#d").empty();
        </script>
    </body>
</html>

3.操作元素的属性：

<html>
    <head>
        <title>操作元素的属性</title>
        <script src="../配置文件/jquery-3.7.1.js"></script>
        <!-- 
        属性分类
            固有属性：元素本身就有的属性(id,name,class,style)
            返回值为boolean的属性：checked,selected,disabled
            自定义属性：用户自己定义的属性
        获取属性
            1.attr(属性名)
            2.prop(属性名)
            区别:
                1.固有属性，均可获取
                2.如果是自定义属性，attr()可获取，prop不可获取
                3.自定义属性：
                    未设置属性，attr()返回undefined,prop()返回false
                    设置了属性，attr()返回具体的值，prop()返回true
        设置属性
            1.attr(属性名，属性值)
            2.prop(属性名，属性值)
        移除属性
            removeAttr(属性名)
        总结：
            如果是boolean类型，使用prop(),否则使用attr().
         -->
    </head>
    <body>
        <input type="checkbox" name="hobby" value="sing" id="a" checked="checked">唱歌
        <input type="checkbox" name="hobby" value="dance" id="b">跳舞
        <input type="checkbox" name="hobby" value="bask" id="c">打篮球<br>
        <script>
            var name=$("#a").attr("name");
            console.log(name);
            var name2=$("#a").prop("name");
            console.log(name2);
            //元素设置了属性
            var che=$("#a").attr("checked");//checked
            console.log(che);
            var che2=$("#a").prop("checked");//true
            console.log(che2);
            //元素未设置属性
            var che3=$("#b").attr("checked");//undefined
            console.log(che3);
            var che4=$("#b").prop("checked");//false
            console.log(che4);
        </script>
    </body>
</html>

4.操作元素的样式：

<html>
    <head>
        <title>操作元素的样式</title>
        <script src="../配置文件/jquery-3.7.1.js"></script>
        <!-- 
        操作元素的样式
            1.attr("class")         获取元素的class属性
            2.attr("class","样式名") 设置元素的样式     原本样式被覆盖
            3.addClass("样式名")     添加样式
            4.css({"":""})           添加具体的样式     添加行内样式
            5.removeClass("样式名")  移除样式
        操作元素的内容
            1.html()                获取元素的内容，包含html标签(非表单元素)
            2.html("内容")           设置元素的内容，包含html标签(非表单元素)
            3.text()                获取元素的内容，不识别html标签(非表单元素)
            4.text("内容")          设置元素的内容，不识别html标签(非表单元素)
            5.val()                 获取元素的值(表单元素)
            6.val("值")             设置元素的值(表单元素)
         -->
    </head>
    <input>
        <div id="d">html
            <span>操作</span>
        </div>
        <input type="text" value="kkkk" id="test">
        <script>
            var h=$("#d").html();
            console.log(h);             //输出html          <span>操作</span>
            var t=$("#d").text();
            console.log(t);             //输出html          操作
            // var h=$("#d").html("Jquery <span>样式</span>"); //显示Jquery 样式
            var h=$("#d").text("Jquery <span>样式</span>"); //显示Jquery <span>样式</span>
            var t2=$("#test").val();
            console.log(t2);
            $("#test").val("123456789");
        </script>
    </body>
</html>

5.事件绑定：

<html>
    <head>
        <title>事件</title>
        <script src="../配置文件/jquery-3.7.1.js"></script>
        <!-- ready()加载事件
            1.$(document).ready(function(){
                
            });
            2.$(function(){

            });
        绑定事件
            bind绑定
                $("元素").bind("事件类型",function(){

                });
            直接绑定
                $("元素").事件名(function(){

                });
        绑定多个事件
            bind绑定
                1.同时为多个事件绑定同一个函数
                    指定元素.bind("事件类型1 事件类型2 ..",function(){

                    });
                2.为元素绑定多个事件，并设置对应的函数(链式编程)
                    指定元素.bind("事件类型",function(){

                    }).bind("事件类型",function(){

                    });
                3.为元素绑定多个事件，并设置对应的函数
                    指定元素.bind({
                        "事件类型":function(){
                        },
                        "事件类型":function(){
                        }
                    })
         -->
    </head>
    <body>
        <button id="btn1">事件1</button>
        <button id="btn2">事件2</button>
        <button id="btn3">事件3</button>
        <div id="d"></div>
        <script>
            $("#btn1").bind("click",function(){
                alert("单击事件触发了");
            });
            $("#btn2").click(function(){
                alert("单击事件又被触发了");
            });
            $("#btn3").bind("mouseover",function(){
                $("#d").html("鼠标悬停了");
            }).bind("click",function(){
                alert("单击事件触发了");
            });
        </script>
    </body>
</html>

6.与后端的交互：

<html>
    <head>
        <title>Jquery Ajax</title>
        <script src="../配置文件/jquery-3.7.1.js"></script>
        <!-- Jquery 调用ajax方法：
            格式：$.ajax({ });
            参数:
                *type:请求方式GET/POST
                *url:请求地址url
                async:是否异步，默认为true
                *data:发送到服务器的数据
                *dataType:预期服务器返回的数据
                contentType:设置请求头
                *success:请求成功时调用此函数
                error:请求失败时调用此函数
        $.get()方法
            $.get(url,data,function(data,status,xhr),dataType)
        $.post()方法
            $.post(url,data,function(data,status,xhr),dataType)
        $.getJSON()方法
            $.getJSON(url,data,function()) -->
    </head>
    <body>
        
    </body>
</html>