92超碰资源,欧美妓啪啪

IDEA導(dǎo)入JQUery
https://blog.csdn.net/qq_35767233/article/details/86535107
$\color{red}{\large\text{JQyery}}$

1.文檔加載

等文檔加載完在執(zhí)行JQuery代碼

1.$( function(){} );

2.$(document).ready( function(){} );

2.圖片加載

<script>
$(function(){
    $("#img").load(function(){
      $("#message2").html("圖片加載成功");
    });
  });
</script>
<div id="message2"></div>
 
<img id="img" src="https://how2j.cn/example.gif">

類型轉(zhuǎn)換

（1）JQuery轉(zhuǎn)Dom

通過(guò)get()或者[0] 把JQuery對(duì)象轉(zhuǎn)為DOM對(duì)象

var div = $("#d");
$("#d").get()
$("#d")[0]

(2)DOM轉(zhuǎn)JQuery

通過(guò)$();

 var div= document.getElementById("d");
$(div);

$\color{red}{\large\text{元素操作}}$

1.獲取ID$("#id")

<script >
 
$(function(){
  document.write( $("#d") );
  document.close();
});
 
</script>
 
<div id="d">Hello JQuery</div>

2.獲取節(jié)點(diǎn)值val();

通過(guò)JQuery對(duì)象的val()方法獲取值
相當(dāng)于 document.getElementById("input1").value;

<script>
    $(function () {
            $("#button").click(function () {  //相當(dāng)于onlick事件
                alert($("#input").val());  //取值
            });
    });

</script>
<button id="button">取值</button>
<input id="input">

3.獲取節(jié)點(diǎn)內(nèi)容html();

<script>
    $(function () {
            $("#button").click(function () {
                alert($("#div").html());
            });
    });

</script>
<button id="button">獲取內(nèi)容</button>
<div id="div">
我是div
<p>我是p標(biāo)簽<p>
</div>

獲取內(nèi)容時(shí)會(huì)把所有標(biāo)簽節(jié)點(diǎn)，內(nèi)容獲取運(yùn)行結(jié)果

我是div
<p>我是p標(biāo)簽<p>

4.獲取節(jié)點(diǎn)文本text();

與獲取節(jié)點(diǎn)內(nèi)容不同，此方法只會(huì)獲取文本信息運(yùn)行結(jié)果如下

我是div

我是p標(biāo)簽

5節(jié)點(diǎn)屬性

（1）獲取屬性attr()

<script>
    $(function(){
        alert("align屬性是:" + $("#h").attr("align") );
    });

</script>
<h1 id="h" align="center">居中標(biāo)題</h1>

（2）修改屬性attr(attr,value)

<script>
    $(function(){
        alert("align屬性是:" + $("#h").attr("align","right") );
    });

</script>
<h1 id="h" align="center">居中標(biāo)題</h1>

(3)刪除屬性removeAttr(attr)

<script>
   $(function(){
       alert("align屬性是:" + $("#h").removeAttr("align") );
   });

</script>
<h1 id="h" align="center">居中標(biāo)題</h1>

（4）表單屬性獲取prop()

<script>
    $(function(){
            alert("checked屬性是:" + $("#c").prop("checked") );
    });
</script>
<input type="checkbox"  id="c" game="LOL" checked="checked"> 選中的復(fù)選框

prop()同樣可以獲取屬性但是不能獲取自定義屬性
attr()不能選取表單中改變的值但可以選取自定義屬性

6this代表當(dāng)前節(jié)點(diǎn)

<script>
$(function(){
   $("#b1").click(function(){
     $(this).hide();
   });
    
});
</script>
  
<button id="b1">點(diǎn)擊隱藏</button>

this=='b1'

$\color{red}{\large\text{CSS}}$

1.添加css

addclass() 獲取ID后調(diào)用addclass()方法

<script>
    $(function () {
            $("#button").click(function () {
                $("#div").addClass("divstyle");
            });
    });

</script>
<button id="button">增加css</button>
<div id="div">我是div
</div>

<style>
    .divstyle{
        background-color: blue;
        width: 500px;
        height: 500px;
    }
</style>

2.刪除css

removeClass() 獲取ID后調(diào)用removeClass() 方法

<script>
    $(function () {
            $("#button").click(function () {
                $("#div").removeClass("divstyle");
            });
    });

</script>
<button id="button">刪除css</button>
<div id="div" class="divstyle">我是div
</div>

<style>
    .divstyle{
        background-color: blue;
        width: 500px;
        height: 500px;
    }
</style>

3切換css

toggleClass() 獲取ID后調(diào)用toggleClass() 方法

通過(guò)toggleClass() 切換一個(gè)樣式中的class
這里的切換，指得是：
如果存在就刪除
如果不存在，就添加

4css函數(shù)

（1）單一屬性css(property,value)不加大括號(hào)

 $("#div").css(
                "background-color", "blue"
            );

(2)多種屬性

參數(shù)是 {} 包含的屬性值對(duì)。
屬性值對(duì)之間用逗號(hào)，分割
屬性值之間用冒號(hào) ：分割
屬性和值都需要用引號(hào) “

<script>
    $(function () {
        $("#button").click(function () {
            $("#div").css(
                {
                    "background-color": "blue",
                    "width": "500px",
                    "height": "500px"
                });
        });
    });

</script>
<button id="button">刪除css</button>
<div id="div">
    我是div
</div>

$\color{red}{\large\text{選擇器}}$

1.類選擇器$("div")

2.id選擇器$("#d1")

3.class選擇器$(".d")

4.交集選擇器$("selector1selector2")

$("div#d")既是div又是 id為d的標(biāo)簽

$("div.d")既是div又是 class為d的標(biāo)簽

5.層級(jí)選擇器$("selector1 selector2")

$("div p")div下的p標(biāo)簽標(biāo)簽

6.特殊選擇

（1）先后選擇$("selector:first/last") 滿足選擇器的第一個(gè)/最后一個(gè)元素

（2）奇偶選擇$("selector:odd/even") 滿足選擇器的奇數(shù)/偶數(shù)個(gè)元素

（3）可見選擇$("selector:hidden/visible") 滿足選擇器的可見/隱藏元素

注意：
div:visible 表示選中可見的div
div :visible(有空格) 表示選中div下可見的元素不是div本身

（4）屬性選擇$("selector[attribute]") 滿足選擇器的有此屬性的

$(selector["attribute=value"]) 滿足選擇器條件的屬性等于value的元素
$(selector["attribute!=value"]) 滿足選擇器條件的屬性不等于value的元素
$(selector['attribute^=value"]) 滿足選擇器條件的屬性以value開頭的元素
$(selector["attribute$=value"]) 滿足選擇器條件的屬性以value結(jié)尾的元素
$(selector["attribute*=value"]) 滿足選擇器條件的屬性包含value的元素

(5) 表單元素選擇$("selector:input")滿足選擇器的input元素

:button 會(huì)選擇type=button的input元素和button元素
:radio 會(huì)選擇單選框
:checkbox會(huì)選擇復(fù)選框
:text會(huì)選擇文本框，但是不會(huì)選擇文本域
:submit會(huì)選擇提交按鈕
:image會(huì)選擇圖片型提交按鈕
:reset會(huì)選擇重置按鈕

(6) 表單元素屬性選擇$("selector:enabled")滿足選擇器的input元素中可用的標(biāo)簽

:enabled會(huì)選擇可用的輸入元素注：輸入元素的默認(rèn)狀態(tài)都是可用
:disabled會(huì)選擇不可用的輸入元素
:checked會(huì)選擇被選中的單選框和復(fù)選框注： checked在部分瀏覽器上(火狐,chrome)也可以選中selected的option
:selected會(huì)選擇被選中的option元素

$\color{red}{\large\text{篩選器}}$
篩選器指的是在已經(jīng)通過(guò)選擇器選中了元素后，在此基礎(chǔ)上進(jìn)一步選擇。

1先后選擇器

（1）第一個(gè)first()

$("#b1").click(function(){
      $("div").first().toggleClass("pink");//第一個(gè)div元素
   });

（2）最后一個(gè)last()

$("#b2").click(function(){
      $("div").last().toggleClass("pink");
   });

（3）第幾個(gè)eq(num)

$("#b3").click(function(){
      $("div").eq(4).toggleClass("pink");
   });

2父選擇器

（1）父選擇parent()

$("#b1").click(function(){
     $("#currentDiv").parent();//選擇父元素
  });

（2）祖先選擇parents()

$("#b2").click(function(){
     $("#currentDiv").parents();//選取所有祖先
  });

3子孫選擇器

(1)子選擇器children()

$("#b1").click(function(){
     $("#currentDiv").children();// 子選擇 可以多個(gè)
  });

(1)孫選擇器find(selector)

必須指定孫的類型

$("#b2").click(function(){
     $("#currentDiv").find("div");  //選取所有孫元素
  });

4同級(jí)選擇器

同級(jí)選擇siblings():

$("#b1").click(function(){
     $("#currentDiv").siblings();
  });

$\color{red}{\large\text{效果}}$

顯示/隱藏

(1)顯示show()

$("#b1").click(function(){
      div.show();

      div.show(1000);延時(shí)顯示
   });

(2)隱藏hide()

$("#b1").click(function(){
      div.hide();

      div.hide(1000);延時(shí)隱藏
   });

(3)切換toggle()

$("#b1").click(function(){
      div.toggle();

      div.toggle(1000);延時(shí)切換
   });

滑動(dòng)

(1) 向上滑動(dòng)slideUp()

$("#b1").click(function(){
      div.slideUp();

      div.slideUp(1000);延時(shí) 向上滑動(dòng)
   });

(2) 向下滑動(dòng)slideDown()

$("#b1").click(function(){
      div.slideDown();

      div.slideDown(1000);延時(shí) 向下滑動(dòng)
   });

(3) 切換滑動(dòng)slideToggle()

$("#b1").click(function(){
      div.slideToggle();

      div.slideToggle(1000);延時(shí) 切換滑動(dòng)
   });

淡入/淡出

(1)淡入fadeIn()

$("#b1").click(function(){
      div.fadeIn();

      div.fadeIn(1000);延時(shí) 淡入
   });

(2)淡出fadeOut()

$("#b1").click(function(){
      div.fadeOut();

      div.fadeOut(1000);延時(shí) 淡出
   });

(3)切換淡入淡出fadeToggle()

$("#b1").click(function(){
      div.ffadeToggle();

      div.fadeToggle(1000);延時(shí)切換淡入淡出
   });

(3)半淡出fadeTo()()

$("#b1").click(function(){
      div.fadeTo(1);不淡出
      div.fadeTo(0.5);半淡出
      div.fadeTo(0);全部淡出
   });

自定義動(dòng)畫

animate（css，延時(shí)毫秒數(shù)）

<script>
    $(function(){
        var div = $("#d");
        $("#b1").click(function(){
            div.animate({left:'100px'},2000);
            div.animate({left:'0px',top:'50px',height:'50px'},2000);
        });
    });

</script>

回調(diào)函數(shù)

在動(dòng)畫函數(shù)里加function（）當(dāng)動(dòng)畫執(zhí)行完自動(dòng)執(zhí)行回調(diào)函數(shù)

$("#b1").click(function(){
            div.hide(function () {
                alert("執(zhí)行完畢");
            });
        });

$\color{red}{\large\text{事件}}$

單擊和雙擊

click() 表示單擊
dblclick() 表示雙擊
注: 空白鍵和回車鍵也可以造成click事件，但是只有雙擊鼠標(biāo)才能造成dblclick事件

<script>
  $(function(){
      $("#b").click(function(){
          $("#message").html("單擊按鈕");
      });
      $("#b").dblclick(function(){
          $("#message").html("雙擊按鈕");
      });
  });
</script>
   
<div id="message"></div>
 
<button id="b">測(cè)試單擊和雙擊</button>

鍵盤事件

keydown 表示按下鍵盤
keypress 表示按住鍵盤
keyup 表示鍵盤彈起
先后順序：按照 keydown keypress keyup 順序發(fā)生
鍵盤按鈕值：keydown和keyup 能獲取所有按鍵，不能識(shí)別大小寫
??????????????????????keypress 不能獲取功能鍵，如F1 SHIFT等，能夠識(shí)別大小寫
文本取值：keydown和keypress：不能獲取最后一個(gè)字符
??????????????????keyup：獲取所有字符

<body>
<input id="input">
<div id="div"></div>

</body>
<script>
    $(function () {
        $("#input").keydown(function (e) {
           $("div").html(e.which);//獲取輸入字符的ascll碼
           $("div").html($(this).val());//獲取值
        });
    });
</script>

鼠標(biāo)事件

mousedown 表示鼠標(biāo)按下
mouseup表示鼠標(biāo)彈起
mousemove ：當(dāng)鼠標(biāo)進(jìn)入元素，每移動(dòng)一下都會(huì)被調(diào)用
mouseenter ：當(dāng)鼠標(biāo)進(jìn)入元素，調(diào)用一下，在其中移動(dòng)，不調(diào)用
mouseover ：當(dāng)鼠標(biāo)進(jìn)入元素，調(diào)用一下，在其中移動(dòng)，不調(diào)用，當(dāng)鼠標(biāo)經(jīng)過(guò)其子元素會(huì)被調(diào)用
mouseleave：當(dāng)鼠標(biāo)退出元素，調(diào)用一下，在其中移動(dòng)，不調(diào)用
mouseout：當(dāng)鼠標(biāo)退出元素，調(diào)用一下，在其中移動(dòng)，不調(diào)用當(dāng)鼠標(biāo)退出其子元素會(huì)被調(diào)用

<body>
<div id="div">
    <div id="div2"><span></span></div>
    </div>

</body>
<script>
    var num = 0;
    $(function () {
        $("#div").mouseout(function () {
            $("#div #div2 span").html(num++);
        });
    });
</script>

焦點(diǎn)事件

focus() 獲取焦點(diǎn)
blur() 失去焦點(diǎn)

<script>
    $(function(){
        $("input").focus(function(){
            $(this).val("獲取了焦點(diǎn)");
        });

        $("input").blur(function(){
            $(this).val("失去了焦點(diǎn)");
        });

    });

</script>
<input type="text" >

改變事件

change() 內(nèi)容改變

提交事件

submit() 提交form表單

<body>
<form id="form">
    賬號(hào) : <input name="name" type=""> <br>
    密碼: <input name="password" type=""><br>
    <input type="submit" value="登陸">
</form>

<script>
    $(function () {

        $("#form").submit(function () {
            alert("提交賬號(hào)密碼");
        });
    });
</script>

綁定事件

通過(guò)綁定不需要重復(fù)寫事件

 $("#b").on("click",function(){
          $("#message").html("單擊按鈕");
      });
      $("#b").on("dblclick",function(){
          $("#message").html("雙擊按鈕");
      });

觸發(fā)事件

自動(dòng)執(zhí)行某事件
例如文檔加載好之后，就觸發(fā)dblclick雙擊事件，而不是通過(guò)去手動(dòng)

<script>
  $(function(){
      $("#b").on("click",function(){
          $("#message").html("單擊按鈕");
      });
      $("#b").on("dblclick",function(){
          $("#message").html("雙擊按鈕");
      });
     $("#b").trigger("dblclick");
  });
</script>

$\color{red}{\large\text{AJAX}}$

提交AJAX

第一個(gè)參數(shù) url:page 表示訪問的是page頁(yè)面
第二個(gè)參數(shù) data:{name:value} 表示提交的參數(shù)
第三個(gè)參數(shù) success: function(){} 表示服務(wù)器成功返回后對(duì)應(yīng)的響應(yīng)函數(shù)

 var page = "https://how2j.cn/study/checkName.jsp";
 var value = $(this).val();
 $.ajax({
            url: page,  
            data:{"name":value},
            success: function(result){
              $("#checkResult").html(result);
            }
        });

get方式

只有第一個(gè)參數(shù)是必須的，其他參數(shù)都是可選

 var page = "https://how2j.cn/study/checkName.jsp";
 var value = $(this).val();
 $.get({
            page,  
            {"name":value},
            function(result){
              $("#checkResult").html(result);
            }
        });

post方式

同get方式只不過(guò)post可以提交二進(jìn)制文件

最簡(jiǎn)單的方式

通過(guò)load（）方法講url+date連接在一起發(fā)送，返回success函數(shù)值

$(function(){
   $("#name").keyup(function(){
     var value = $(this).val();
     var page = "/study/checkName.jsp?name="+value;
     $("#checkResult").load(page);
   });
});

格式化方式提交

當(dāng)提交的數(shù)據(jù)多時(shí)可以用serialize() 把輸入數(shù)據(jù)格式化成字符串統(tǒng)一提交

<form id="form">   
輸入賬號(hào) :<input id="name" type="text" name="name"> <br>
輸入年齡 :<input id="age" type="text" name="age"> <br>
輸入手機(jī)號(hào)碼 :<input id="mobile" type="text" name="mobile"> <br>
     
</form>
 
<script>
$(function(){
   $("input").keyup(function(){
      var data = $("#form").serialize();
      var url = "https://how2j.cn/study/checkName.jsp";
      var link = url+"?"+ data;//統(tǒng)一提交
   });
});

$\color{red}{\large\text{對(duì)象操作}}$

1.數(shù)組

(1)遍歷

$.each 遍歷一個(gè)數(shù)組
第一個(gè)參數(shù)是數(shù)組
第二個(gè)參數(shù)是回調(diào)函數(shù) i是下標(biāo)，n是內(nèi)容


<script>
    var a = new Array(1,2,3);
    $.each( a, function(i, n){
        document.write( "元素[" + i + "] : " + n + "<br>" );
    })
    document.close();

</script>

(2)去除重復(fù)

<script>
var a = new Array(5,2,4,2,3,3,1,4,2,5);
a.sort();
$.unique(a);
$.each( a, function(i, n){
  document.write( "元素[" + i + "] : " + n + "<br>" );
})
document.close();
  
</script>

(3)是否存在

-1不存在 0存在

<script>
    var a = new Array(1,2,3,4,5,6,7,8);
    document.write($.inArray(1,a));
    document.close();
</script>

字符串

(1)去除空白

<script>
 
document.write($.trim(" Hello JQuery    "));
document.close();
   
</script>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

JQuery