jquery簡單學習-有解無憂

入門：

1.在官網中下載jquery
2.在html頁面中引入,使用script標簽對引入jquery
3.在html頁面中使用jquery

使用:

 通過jquery實作隔行換色
先引入：

<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function (){
    /*獲取所有的奇數行設定背景色*/
    ($("tr:odd").css("background","pink"));
    /*獲取所有的偶數行設定背景色*/
    ($("tr:even").css("background","yellow"));
});
</script>

獲取jquery包裝集物件
     $("選擇器")
     如果元素不存在,不會回傳null,會回傳空的query物件,根據length==0來判斷是否獲取成功

 獲取jsDOM物件
     document.getElement....
     如果元素不存在,回傳null,根據==null判斷是否獲取到DOM物件

 jsDOM物件轉為jquery物件
     $(js物件)

 jquery物件轉為jsDOM物件
     jq物件[索引]
     jq物件.get()

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

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

<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>

jquery選擇器:
 選中某個|組元素

 分類:
     基礎選擇器
         id選擇器 #id $("#testDiv")選擇id為testDiv的元素
         元素名稱選擇器 element $("div")選擇所有div元素
         類選擇器 .class $(".blue")選擇所有class=blue的元素
         選擇所有元素 * $("*")選擇??所有元素
         組合選擇器 selector1,selector2,selectorN $("#testDiv,span,.blue")同時選中多個選擇器匹配的元素

     層次選擇器
         后代選擇器 ancestor descendant $("#parent div")選擇id為parent的元素的所有div元素
         ?代選擇器 parent > child $("#parent>div")選擇id為parent的直接div?元素
         相鄰選擇器 prev + next $(".blue + img")選擇css類為blue的下?個img元素
         同輩選擇器 prev ~ sibling $(".blue ~ img")選擇css類為blue的之后的img元素

     表單選擇器
        表單選擇器 :input
        查找所有的input元素：$(":input")；
        注意：會匹配所有的input、textarea、select和button元素，
        ?本框選擇器 :text 查找所有?本框：$(":text")
        密碼框選擇器 :password 查找所有密碼框：$(":password")
        單選按鈕選擇器 :radio 查找所有單選按鈕：$(":radio")
        復選框選擇器 :checkbox 查找所有復選框：$(":checkbox")
        提交按鈕選擇器 :submit 查找所有提交按鈕：$(":submit")
        影像域選擇器 :image 查找所有影像域：$(":image")
        重置按鈕選擇器 :reset 查找所有重置按鈕：$(":reset")
        按鈕選擇器 :button 查找所有按鈕：$(":button")
        ?件域選擇器 :file 查找所有?件域：$(":file")

     過濾選擇器
     屬性選擇器:
        [屬性名]包含這個屬性的被選中
        [屬性名="屬性值"] 包含指定屬性=指定值的元素被選中

/*基礎選擇器*/
/*id選擇器*/
console.log($("#box"));
//元素名稱選擇器
console.log($("div"));
/*類選擇器*/
console.log($(".red"));
/*通配符選擇器*/
console.log($("*"));
//組合選擇器
console.log($("#box,.red"));

//層次選擇器
//后代選擇器 : 所有滿足條件的子元素
console.log($("body div"));
//?代選擇器  : 滿足條件的直接子元素
console.log($("body>div"));
//相鄰選擇器
console.log($(".item1+div"));
//同輩選擇器
console.log($(".item1~div"));

/*表單選擇器*/
console.log($(":input"));
//單選框
console.log($(":radio"));

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

操作屬性:
    分類:
        固有屬性 : 標簽提供的屬性
            固有屬性 : src,href...
            共有屬性 : id,class,name...
        自定義屬性 : abc  haha
        boolean屬性 : checked selected  disabled

    區別: attr 與 prop
        1.attr可以操作固有屬性,自定義屬性
          prop只能操作固有屬性
        2.attr 操作布爾屬性(checked),得到的屬性值為屬性設定的值 checked = 'checked'
          prop 操作布爾屬性(checked),得到的結果為true|false

    獲取屬性值
        attr(屬性名稱) 獲取指定的屬性值，操作 checkbox 時，選中回傳 checked，沒有選中回傳 undefined，attr('checked')attr('name')
        prop(屬性名稱) 獲取具有true和false兩個屬性的屬性值 prop('checked')

    設定屬性值
        attr(屬性名稱，屬性值)設定指定的屬性值，
            操作 checkbox 時，
            選中回傳 checked，
            沒有選中回傳 undefined，
            attr('checked',’checked’)
            attr('name',’zs’)
    prop(屬性名稱，屬性值) 設定具有true和false的屬性值 prop('checked',’true

    移出屬性
    removeAttr(屬性名) 移除指定的屬性 removeAttr('checked')

<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>

操作元素樣式

attr("class") 獲取class屬性的值，即樣式名稱
attr("class","樣式名") 修改class屬性的值，修改樣式
addClass("樣式名") 添加樣式名稱
css() 添加具體的樣式
removeClass(class) 移除樣式名稱

操作元素內容：

html() 獲取元素的html內容
text() 獲取元素的?本內容，不包含html

html("html, 內容") 設定元素的html內容
text("text 內容") 設定元素的?本內容，不包含html

val() 獲取元素value值
val("值") 設定元素的value值

html 與 text之間的區別:
  html可以識別純文本,以及html標簽結構
  text只能識別存盤本

創建于添加
    創建元素
        $('創建內容')

    添加元素
        prepend(content) 在被選元素內部的開頭插?元素或內容，被追加的 content 引數，可以是字符、HTML 元素標記，
        $(content).prependTo(selector) 把 content 元素或內容加? selector 元素開頭
        append(content) 在被選元素內部的結尾插?元素或內容，被追加的 content 引數，可以是字符、HTML 元素標記，
        $(content).appendTo(selector) 把 content元素或內容插?selector 元素內，默認是在尾部
        before() 在元素前插?指定的元素或內容:$(selector).before(content)
        after() 在元素后插?指定的元素或內容:$(selector).after(content)

    洗掉元素
        remove() 洗掉所選元素或指定的?元素，包括整個標簽和內容?起刪，
        empty() 清空所選元素的內容

    遍歷元素
        $(selector).each(function(index,element)) :遍歷元素
        引數 function 為遍歷時的回呼函式，
        index 為遍歷元素的序列號，從 0 開始，
        element是當前的元素，此時是dom元素，

<script src="js/jquery-3.6.0.min.js"></script>
<style>
    #box{
        border : 3px saddlebrown dashed;
    }
</style>

<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>");

    //洗掉元素
    //$("#box").empty();
    //$("#box").remove();

    //遍歷所有div
    $("div").each(function (index,element) {
        console.log(index+'---->'+element);
        console.log($(element));
    });

</script>

1.ready 加載事件-> window.onload
    $(function(){})
    $(document).ready(function(){})

  window.onload : 待DOM結構,與資源全部加載完成之后觸發
  ready  : 待DOM結構載完成之后觸發
2.bind 系結事件
    bind("事件名稱",function(){
        觸發函式
    })

<!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");

            //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>
        <button id="btn" type="button">按鈕</button>
        <img src="images/11.jpeg" alt="">

</body>
</html>

ajax 異步請求  *****

    $.ajax({ -> 配置請求的引數設定
        type : 請求方式 "GET|POST",
        url : "請求服務器的位置",
        data : 請求資料,
        dataType : 預期的服務器回應資料的型別 json,text,html,
        success : function(data){
            請求成功后的回呼函式
            引數data: 服務器回應的資料
        },
        error : function(){
            請求失敗后的回呼函式
        }
    });

<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 : "GET",
             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>

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

標籤：其他

上一篇：JavaScript基礎知識語法

下一篇：牛客題霸——二分查找（Javascript）