JavaScript27（續）-有解無憂

1. Jquery物件

jQuery 是?套兼容多瀏覽器的 javascript 腳本庫.，核?理念是寫得更少，做得更多，使? jQuery 將極?的提?撰寫 javascript 代碼的效率，幫助開發者節省了?量的?作，讓寫出來的代碼更加優雅，更加健壯，

（1）優點：（1）提供了強?的功能函式

（2）解決瀏覽器兼容性問題

（3）實作豐富的 UI 和插件

（4）糾正錯誤的腳本知識

（2）安裝參考：

<script src="JS/jquery-3.6.0.min.js"></script>

（3）獲取Jquery物件：

$ 符號在 jQuery 中代表對 jQuery 物件的引?， "jQuery"是核?物件，通過該物件可以獲取jQuery對象，調?jQuery提供的?法等，只有jQuery物件才能調?jQuery提供的?法，

// 第?種?式（利用'jQuery'關鍵字）

var jqueryDiv = jQuery('#mydiv');

console.log(jqueryDiv);

//第二種方式（'$'符號）

var jqueryDiv = $('#mydiv');

console.log(jqueryDiv);

（4）Dom物件與 Jquery包裝集物件

(4.1)獲取Dom物件

var div = document.getElementById("testDiv");

var divs = document.getElementsByTagName("div");

（4.2）jsDOM象轉為Jquery物件

Dom 物件轉為 jQuery 物件，只需要利? $() ?法進?包裝即可

（4.3）Jquery物件轉 Dom物件

jq物件[索引]

jq物件.get()

注意: 1.jsDOM物件與jq物件不能互相呼叫其方法 2.jq的函式只能jq物件能夠呼叫

//實體代碼-獲取jquery包裝集物件、jsDOM物件和其之間的轉換
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jq-->
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="box">box</div>

    <script>
        //DOM
        var js_obj = document.getElementById("box");
        console.log(js_obj);
        //jq
        var jq_obj = $("#box");
        console.log(jq_obj.length);
        //js-->jq
        console.log($(js_obj));
        //jq-->js
        console.log(jq_obj[0]);
        console.log(jq_obj.get(0));
    </script>
</body>
</html>

2.Jquery選擇器

和使? JS 操作Dom?樣，獲取?檔中的節點物件是很頻繁的?個操作，在jQuery中提供了簡便的?式供我們查找|定位元素，稱為jQuery選擇器，只要把選擇器字串傳?上?的?法中就能夠選擇不同的 Dom 物件并且以jQuery 包裝集的形式回傳，

（1）基礎選擇器

//實體代碼-Jquery基礎選擇器的應用
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jq-->
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="box">
        <div class="item1">
            我是div1
            <p class="red">div1的p1</p>
            <p>div1的p2</p>
        </div>
        <div>
            我是div2
            <p class="red">div2的p1</p>
            <p>div1的p2</p>
        </div>
        <div>
            我是div3
            <p class="red">div3的p1</p>
            <p>div3的p2</p>
        </div>
    </div>
        /*基礎選擇器*/
        /*id選擇器*/
        console.log($("#box"));
        //元素名稱選擇器
        console.log($("div"));
        /*類選擇器*/
        console.log($(".red"));
        /*通配符選擇器*/
        console.log($("*"));
        //組合選擇器
        console.log($("#box,.red"));
    </script>
</body>
</html>

（2）層次選擇器

//實體代碼-層次選擇器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jq-->
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="box">
        <div class="item1">
            我是div1
            <p class="red">div1的p1</p>
            <p>div1的p2</p>
        </div>
        <div>
            我是div2
            <p class="red">div2的p1</p>
            <p>div1的p2</p>
        </div>
        <div>
            我是div3
            <p class="red">div3的p1</p>
            <p>div3的p2</p>
        </div>
    </div>
    <script>
        //層次選擇器
        //后代選擇器 : 所有滿足條件的子元素
        console.log($("body div"));
        //?代選擇器  : 滿足條件的直接子元素
        console.log($("body>div"));
        //相鄰選擇器
        console.log($(".item1+div"));
        //同輩選擇器
        console.log($(".item1~div"));
    </script>
</body>
</html>

（3）表單選擇器

.屬性選擇器:

[屬性名]包含這個屬性的被選中

[屬性名="屬性值"] 包含指定屬性=指定值的元素被選中

.過濾選擇器:

:odd 匹配下標奇數元素

:even 匹配下標為偶數元素

:eq(index) 匹配下標為index

:gt(index) 匹配下標>index

:checked 匹配被選中的

//實體代碼-表單選擇器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jq-->
    <script src="js/jquery-3.6.0.min.js"></script>
    <style>
        /*html中主要存在abc屬性的元素就被選中*/
        /*[abc]{
            background: red;
        }*/

        /*input標簽中主要存在abc屬性的元素就被選中*/
        input[abc]{
            background: red;
        }
    </style>
</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" abc="123"/><br />
        密碼:<input type="password" id="upwd" name="upwd" value="123456" abc="567"/><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="代碼" checked="checked"/>代碼<br />
        來?:<select id="ufrom" name="ufrom" abc="123">
        <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>
    <script>
        /*表單選擇器*/
        console.log($(":input"));
        //單選框
        console.log($(":radio"));

        //屬性選擇器
        console.log($("[abc]"));
        console.log($("input[abc]"));
        console.log($("input[abc=123]"));

        //過濾選擇器
        console.log($("input"));
        console.log($("input:eq(3)"));
        console.log($("input:gt(3)"));
        console.log($("input:checked"));
    </script>
</body>
</html>

3.Jquery Dom操作

常?的從?個??來操作，查找元素（選擇器已經實作）；創建節點物件；訪問和設定節點物件的值，以及屬性；添加節點；洗掉節點；洗掉、添加、修改、設定節點的CSS樣式等，注意：以下的操作 ?式只適?于jQuery物件，

（3.1）操作元素的屬性

（3.1.1）獲取屬性

（3.1.2）設定屬性

（3.1.3）移除屬性

//實體代碼-操作元素的屬性（獲取、設定、移除）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jq-->
    <script src="js/jquery-3.6.0.min.js"></script>

</head>
<body>
    <form action="" id="myform">
        <input type="checkbox" name="ch" value="aaaa" haha="hahahahha"/> aa
        <input type="checkbox" name="ch" value="bbbb" haha="hehehehhe" checked="checked"/> bb
    </form>
    <script>
        //獲取屬性值
        //操作布爾屬性
        console.log($("input[type='checkbox']:even").attr("checked"));  //checked
        console.log($("input[type='checkbox']:odd").attr("checked"));  //undefined
        console.log($("input[type='checkbox']:even").prop("checked"));  //true
        console.log($("input[type='checkbox']:odd").prop("checked"));  //false
        //固有屬性
        console.log($("input[type='checkbox']:even").attr("value"));  //aaaa
        console.log($("input[type='checkbox']:odd").attr("value"));  //bbbb
        console.log($("input[type='checkbox']:even").prop("value"));  //aaaa
        console.log($("input[type='checkbox']:odd").prop("value"));  //bbbb

        //自定義屬性
        console.log($("input[type='checkbox']:even").attr("haha"));  //hahahaha
        console.log($("input[type='checkbox']:odd").attr("haha"));  //hahahaha
        console.log($("input[type='checkbox']:even").prop("haha"));  //undefined
        console.log($("input[type='checkbox']:odd").prop("haha"));  //undefined

        //設定屬性
        //設定默認選中
        //$("input[type='checkbox']:even").attr("checked","checked");
        //$("input[type='checkbox']:odd").prop("checked",true);

        //取消被選中狀態
        //$("input[type='checkbox']:odd").prop("checked",false);
        //$("input[type='checkbox']:odd").prop("checked",null);

        $("input[type='checkbox']:odd").removeAttr("checked");
        $("input[type='checkbox']:odd").removeAttr("haha");
        $("input[type='checkbox']:odd").removeAttr("name");
    </script>
</body>
</html>

（3.2）操作元素的樣式

對于元素的樣式，也是?種屬性，由于樣式?得特別多，所以對于樣式除了當做屬性處理外還可以有專?的?法進?處理，

//實體代碼-操作元素的樣式幾種方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作元素樣式</title>
    <!--引入jq-->
    <script src="js/jquery-3.6.0.min.js"></script>
    <style type="text/css">
        div{
            padding: 8px;
            width: 180px;
        }
        .blue{
            background: skyblue;
        }
        .larger{
            font-size: 30px;
        }
        .green {
            background : green;
        }
        .weight{
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <h3>css()?法設定元素樣式</h3>
    <div id="conBlue" class="blue larger">天藍?</div>
    <div id="conRed">?紅?</div>
    <div id="remove" class="blue larger">天藍?</div>
    <script>
        console.log($("#conBlue").attr("class"));
        //addClass
        $("#conBlue").addClass("weight");
        //添加指定屬性,如果原標簽中已經存在,覆寫原有的值串列
        //$("#conBlue").attr("class","weight");
        $("#conBlue").removeClass("larger");

        $("#conBlue").css("font-style","italic");

    </script>
</body>
</html>

（3.3）操作元素的內容

對于元素還可以操作其中的內容，例如?本，值，甚?是html，

//實體代碼-操作元素的內容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <h3 id="title"><span>html()和text()?法設定元素內容</span></h3>
  <div id="html"></div>
  <div id="text"></div>
  <input type="text" name="uname" value="oop" />
  <script>
    //操作純文本
    $("#html").html("你好html");
    $("#text").text("你好text");

    //帶有html標簽結構
    $("#html").html("<h3 style='background: salmon'>你好html</h3>");
    $("#text").text("<h3 style='background: salmon'>你好text</h3>");

    console.log( $("#title").html());
    console.log( $("#title").text());

    $("[type='text']").val("哈哈哈");
    console.log( $("[type='text']").val());
  </script>
</body>
</html>

（3.4）創建元素

在jQuery中創建元素，直接使?核?函式$

$('<p>

this is a paragraph!!!

</p>');//創建一個p標簽元素并往里面添加內容

（3.5）添加元素

//實體代碼-元素的創建與添加
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <style>
        #box{
            border : 3px saddlebrown dashed;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="item1">內容1</div>
        <div class="item2">內容2</div>
    </div>
    <script>
        //創建元素
        var ele = $('<p id="p1"><span>你好span</span>你好p1</p>');
        //添加元素
        //$("#box").prepend(ele);
        $("#box").prepend("<p>p2</p>");

        ele.prependTo($("#box"));

        $("#box").before("<div>box前面</div>");
    </script>
</body>
</html>

（3.6）洗掉元素

//實體代碼-洗掉元素的兩種方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <style>
        #box{
            border : 3px saddlebrown dashed;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="item1">內容1</div>
        <div class="item2">內容2</div>
    </div>
    <script>
        //洗掉元素
        $("#box").empty();
        $("#box").remove();
    </script>
</body>
</html>

（3.7）遍歷元素

each()//方法

$(selector).each(function(index,element)) :遍歷元素

引數 function 為遍歷時的回呼函式， index 為遍歷元素的序列號，從 0 開始， element是當前的元素，此時是dom元素

//實體代碼-元素的遍歷
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <style>
        #box{
            border : 3px saddlebrown dashed;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="item1">內容1</div>
        <div class="item2">內容2</div>
    </div>
    <script>
        //遍歷所有div
        $("div").each(function (index,element) {
            console.log(index+'---->'+element);
            console.log($(element));
        });

    </script>
</body>
</html>

4.Jquery事件

4.1ready加載事件

ready()類似于 onl oad()事件，ready()可以寫多個，按順序執?

$(document).ready(function(){})等價于$(function(){})

onload與ready的區別：

window.onload : 待DOM結構,與資源全部加載完成之后觸發

ready : 待DOM結構載完成之后觸發

//實體代碼-Jquery.ready加載事件與js.window.onload加載事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        /*js*/
        window.onload = function(){
            document.getElementById("btn").style.background = "red";
        }
        /*jq*/
        //1)
        $(function(){
            $("#btn").css("background","green");

          })
    </script>
</head>
<body>
   <button id="btn" type="button">按鈕</button>
    <img src="images/pexels-photo-5957341.jpeg" alt="">

</body>
</html>

4.2bind()系結事件

為被選元素添加?個或多個事件處理程式，并規定事件發?時運?的函式，

語法：

$('元素').bind("事件名稱",function(){ 觸發函式 })

//實體代碼-bind()系結事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
            //bind簡單系結
            /*$("#btn").bind("click",function(){
                alert("hahaha");
            })*/

            //鏈式系結
            $("#btn").bind("click",function(){
                alert("hahaha");
            }).bind("mouseover",function(){
                console.log("移入");
            });

            $("#btn").bind({
                "click":function(){
                    console.log("點擊事件");
                },
                "mousemove":function(){
                    console.log("移動了");
                }
            })
        })

    </script>
</head>
<body>
    <!--
        bind 系結事件
            bind("事件名稱",function(){
                觸發函式
            })
    -->
   <button id="btn" type="button">按鈕</button>
    <img src="images/pexels-photo-5957341.jpeg" alt="">

</body>
</html>

5.Jquery Ajax

jquery 調? ajax ?法：

格式：$.ajax({});

引數：

type：請求?式 GET/POST

url：請求地址 url

async：是否異步，默認是 true 表示異步

data：發送到服務器的資料

dataType：預期服務器回傳的資料型別

contentType：設定請求頭

success：請求成功時調?此函式

error：請求失敗時調?此函式

//實體代碼-jquery 調? ajax ?法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
   <button id="btn" type="button">按鈕</button>
    <form action="">
        <input type="text" name="uname" value="zhangsan"> 用戶名
        <input type="password" name="upwd" value="1234"> 用戶密碼
    </form>
   <script>
        $("#btn").bind("click",function(){
            console.log($("form").serialize());
            $.ajax({
                type : "POST",
                url : "js/data.json",//
                /*data : {
                    "name" : "zhangsan",
                    age : 18
                },*/
                data :$("form").serialize() , /*表單提交*/
                dataType : "JSON",
                success : function (data) {
                    console.log(data);
                    console.log(data.code);
                    console.log(data.message);
                    console.log(data.result);
                },
                error : function () {
                    console.log("請求失敗!!!!");
                }
            });
            /*
            //GET : 請求json?件,傳遞引數,拿到回傳值
            $.get('js/data.json',{name:"tom",age:100},function(data){
                console.log(data);
            });

            //POST : 請求json?件,傳遞引數,拿到回傳值
            $.post('js/data.json',{name:"tom",age:100},function(data){
                console.log(data);
            });*/
            //回應結果固定為json
            /*$.getJSON('js/data.json',{name:"tom",age:100},function(data){
            console.log(data); // 要求回傳的資料格式是JSON格式
            })*/
        });

   </script>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/292650.html

標籤：其他

上一篇：程式員常用的 Android App 更新中

下一篇：前端開發者的必備好書：CSS世界三部曲，你都知道嗎？