jQuery基礎教程

時間  2019-11-08
標籤 jquery 基礎 教程 欄目 JQuery 简体版
原文   原文鏈接

jQuery基礎教程

jQuery語法

  • 基礎語法：$(selector).action()javascript

    • 美圓符號定義jQuery
    • 選擇符查詢和查找HTML元素
    • jQuery的action執行對元素的操做

jQuery選擇器

  • 元素選擇器php

    • $("p")選擇頁面上的<p>元素

  • #id選擇器css

    • $("#test")選擇頁面上有id="test"屬性的元素

  • .class選擇器html

    • $(".test")選擇頁面上有class=「test」屬性的元素

  • 其餘java

    • $("*")選擇全部元素
    • $(this)選取當前HTML元素
    • $("p.intro")選取class爲intro的<p>元素
    • $("p:first")選取第一個<p> 元素
    • &dollar;("ul li:first")選取第一個 <ul> 元素的第一個 <li> 元素
    • &dollar;("ul li:first-child")選取每一個 <ul> 元素的第一個 <li> 元素
    • &dollar;("[href]")選取帶有 href 屬性的元素
    • &dollar;("a[target='blank']")選取全部 target 屬性值等於 "blank" 的 <a> 元素
    • &dollar;("a[target!='blank']")選取全部 target 屬性值不等於 "blank" 的 <a> 元素
    • &dollar;(":button")選取全部 type="button" 的 <input> 元素 和 <button> 元素
    • &dollar;("tr:even")選取偶數位置的 <tr> 元素
    • &dollar;("tr:odd")選取奇數位置的 <tr> 元素

jQuery事件

  • 鼠標事件jquery

    • click點擊ajax

      $("p").click(function(){
    alert("段落被點擊了。");
});

    • dbclick雙擊瀏覽器

      $("p").dblclick(function(){
    alert("這個段落被雙擊。");
});

    • mouseenter鼠標移入服務器

      $("p").mouseenter(function(){
    $("p").css("background-color","yellow");
});

    • mouseleave鼠標移出app

      $("p").mouseleave(function(){
    $("p").css("background-color","gray");
});

  • 鍵盤事件

    • keypress按下

      $("input").keypress(function(){
    $("span").text(i+=1);
});

    • keydown按下的過程

      $("input").keydown(function(){
    $("input").css("background-color","yellow");
});

    • keyup鍵盤松開

      $("input").keyup(function(){
    $("input").css("background-color","pink");
});

    • hover懸停

      $("p").hover(function(){
    $("p").css("background-color","yellow");
},function(){
    $("p").css("background-color","pink");
});

  • 表單事件

    • submit提交

      $("form").submit(function(){
    alert("提交");
});

    • change文本內容變化

      $("input").change(function(){
    alert("文本已被修改");
});

    • focus獲取焦點

      $("input").focus(function(){
    $("span").css("display","inline").fadeOut(2000);
});

    • blur失去焦點

      $("input").blur(function(){
    alert("輸入框失去了焦點");
});

  • 文檔窗口事件

    • load載入(在jQuery1.8中已被廢棄)

      $("img").load(function(){
    alert("圖片已載入");
});

    • resize窗口調整大小

      $(window).resize(function(){
    $('span').text(x+=1);
});

    • scroll滾動指定元素

      $("div").scroll(function(){
    $("span").text(x+=1);
});

    • unload離開頁面、點擊某個離開的連接、鍵入新的URL、使用前進或後退按鈕、關閉瀏覽器窗口、從新加載頁面(在jQuery1.8中已被廢棄)

      $(window).unload(function(){
    alert("Goodbye!");
});

jQuery效果

jQuery隱藏/顯示

  • hide隱藏

    • $(selector).hide(speed,callback)
    $("#hide").click(function(){
  $("p").hide();
});
$("button").click(function(){
  $("p").hide(1000);
});

  • show顯示

    • $(selector).show(speed,callback)
    $("#show").click(function(){
  $("p").show();
});

  • toogle切換狀態

    • $(selector).toggle(speed,callback);
    $("button").click(function(){
  $("p").toggle();
});

jQuery淡入淡出

  • fadeIn淡入已隱藏的元素

    • $(selector).fadeIn(speed,callback);
    $("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

  • fadeOut淡出可見的元素

    • $(selector).fadeOut(speed,callback);
    $("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

  • fadeToggle切換淡入淡出

    • $(selector).fadeToggle(speed,callback);
    $("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

  • fadeTo容許漸變爲給定的不透明度

    • $(selector).fadeTo(speed,opacity,callback);
    $("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

jQuery滑動

  • slideDown向下滑動

    • $(selector).slideDown(speed,callback);
    $("#flip").click(function(){
  $("#panel").slideDown();
});

  • slideUp向上滑動

    • $(selector).slideUp(speed,callback);
    $("#flip").click(function(){
  $("#panel").slideUp();
});

  • slideToggle切換滑動效果

    • $(selector).slideToggle(speed,callback);
    $("#flip").click(function(){
  $("#panel").slideToggle();
});

jQuery動畫

  • animate

    • $(selector).animate({params},speed,callback)

      $("button").click(function(){
  $("div").animate({left:'250px'});
});

    • 操做多個屬性

      $("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

    • 使用相對值

      $("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

    • 使用預約義的值

      $("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

    • 使用隊列功能

      $("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

jQuery中止動畫

  • stop

    • $(selector).stop(stopAll,goToEnd)

      $("#stop").click(function(){
  $("#panel").stop();
});

jQuery Callback

$("button").click(function(){
$("p").hide("slow",function(){
  alert("段落如今被隱藏了");
});
});
//如下實例沒有回調函數，警告框會在隱藏效果完成前彈出
$("button").click(function(){
$("p").hide(1000);
alert("段落如今被隱藏了");
});

jQuery鏈

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

jQuery HTML

jQuery捕獲

  • text()設置或返回所選元素的文本內容

    $("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});

  • html()設置或返回所選元素的內容(包括HTML標記)

    $("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

  • val()設置或返回表單字段的值

    $("#btn1").click(function(){
  alert("值爲: " + $("#test").val());
});

  • attr()設置或改變屬性值

    $("button").click(function(){
  alert($("#runoob").attr("href"));
});

jQuery設置

  • text()設置或返回所選元素的文本內容

    $("#btn1").click(function(){
    $("#test1").text("Hello world!");
});

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "舊文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});

  • html()設置或返回所選元素的內容(包括HTML標記)

    $("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});

$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return "舊 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
});

  • val()設置或返回表單字段的值

    $("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

  • attr()設置或改變屬性值

    $("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery");
});

$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});

jQuery添加元素

  • append()在被選元素的結尾插入內容

    $("p").append("追加文本");

  • prepend()在被選元素的開頭插入內容

    $("p").prepend("在開頭追加文本");

function appendText()
{
    var txt1="<p>文本。</p>";              // 使用 HTML 標籤建立文本
    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 建立文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               // 使用 DOM 建立文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

  • after()在被選元素以後插入內容

    $("img").after("在後面添加文本");

  • before()在被選元素以前插入內容

    $("img").before("在前面添加文本");

function afterText()
{
    var txt1="<b>I </b>";                    // 使用 HTML 建立元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 建立元素
    var txt3=document.createElement("big");  // 使用 DOM 建立元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在圖片後添加文本
}

jQuery刪除元素

  • remove()刪除被選元素及其子元素

    $("#div1").remove();

$("p").remove(".italic");

  • empty()從被選元素中刪除子元素

    $("#div1").empty();

jQuery CSS類

  • addClass()向被選元素添加一個或多個類

    $("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

$("button").click(function(){
  $("body div:first").addClass("important blue");
});

  • removeClass()從被選元素刪除一個或多個類

    $("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

  • toggleClass()對被選元素進行添加/刪除類的切換操做

    $("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

  • css()設置或返回樣式屬性

    $("p").css("background-color");

jQuery css()方法

  • 返回CSS屬性

    • css("propertyname");

      $("p").css("background-color");

  • 設置CSS屬性

    • css("propertyname","value");

      $("p").css("background-color","yellow");

  • 設置多個CSS屬性

    • css({"propertyname":"value","propertyname":"value",...});

      $("p").css({"background-color":"yellow","font-size":"200%"});

jQuery尺寸

  • width()設置或返回元素的寬度(不包括內邊距、邊框或外邊距)

    $("button").click(function(){
  var txt="";
  txt+="div 的寬度是: " + $("#div1").width() + "</br>";
  txt+="div 的高度是: " + $("#div1").height();
  $("#div1").html(txt);
});

  • height()設置或返回元素的高度(不包括內邊距、邊框或外邊距)

    $("button").click(function(){
  var txt="";
  txt+="div 的寬度是: " + $("#div1").width() + "</br>";
  txt+="div 的高度是: " + $("#div1").height();
  $("#div1").html(txt);
});

  • innerWidth()返回元素的寬度(包括內邊距)

    $("button").click(function(){
  var txt="";
  txt+="div 寬度，包含內邊距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含內邊距: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

  • innerHeight()返回元素的高度(包括內邊距)

    $("button").click(function(){
  var txt="";
  txt+="div 寬度，包含內邊距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含內邊距: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

  • outerWidth()返回元素的寬度(包括內邊距和邊框)

    $("button").click(function(){
  var txt="";
  txt+="div 寬度，包含內邊距和邊框: " + $("#div1").outerWidth() + "</br>";
  txt+="div 高度，包含內邊距和邊框: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

  • outerHeight()返回元素的高度(包括內邊距和邊框)

    $("button").click(function(){
  var txt="";
  txt+="div 寬度，包含內邊距和邊框: " + $("#div1").outerWidth() + "</br>";
  txt+="div 高度，包含內邊距和邊框: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

jQuery遍歷

jQuery祖先

  • parent()被選中元素的直接父元素

    $(document).ready(function(){
  $("span").parent();
});

  • parents()被選中元素的全部祖先元素

    $(document).ready(function(){
  $("span").parents();
});

$(document).ready(function(){
  $("span").parents("ul");
});

  • parentsUntil()介於兩個給定元素之間的全部祖先元素

    $(document).ready(function(){
  $("span").parentsUntil("div");
});

jQuery後代

  • children()被選元素的全部直接子元素

    $(document).ready(function(){
  $("div").children();
});

$(document).ready(function(){
  $("div").children("p.1");
});

  • find()被選元素的後臺元素，一路向下直到最後一個後代

    $(document).ready(function(){
  $("div").find("span");
});

$(document).ready(function(){
  $("div").find("*");
});

jQuery同胞

  • siblings()被選元素的全部同胞元素

    $(document).ready(function(){
  $("h2").siblings();
});

$(document).ready(function(){
  $("h2").siblings("p");
});

  • next()被選元素的下一個同胞元素

    $(document).ready(function(){
  $("h2").next();
});

  • nextAll()被選元素全部跟隨的同胞元素

    $(document).ready(function(){
  $("h2").nextAll();
});

  • nextUntil()介於兩個給定參數之間的全部跟隨的同胞元素

    $(document).ready(function(){
  $("h2").nextUntil("h6");
});

  • prev()被選元素的前一個同胞元素

    $(document).ready(function(){
  $("h2").prev();
});

  • prevAll()被選元素全部前面的同胞元素

    $(document).ready(function(){
  $("h2").prevAll();
});

  • prevUntil()介於兩個給定參數之間的全部前面的同胞元素

    $(document).ready(function(){
  $("h2").prevUntil("h6");
});

JQuery過濾

  • first()被選元素的首個元素

    $(document).ready(function(){
  $("div p").first();
});

  • last()被選元素的最後一個元素

    $(document).ready(function(){
  $("div p").last();
});

  • eq()被選元素中帶有指定索引號的元素

    $(document).ready(function(){
  $("p").eq(1);
});

  • filter()根據給定標準刪除不匹配元素，返回匹配元素

    $(document).ready(function(){
  $("p").filter(".url");
});

  • not()返回不匹配元素

    $(document).ready(function(){
  $("p").not(".url");
});

jQuery Ajax

  • load()從服務器加載數據，將返回元素放入被選元素中

    • $(selector).load(URL,data,callback);

      $("#div1").load("demo_test.txt");

$("#div1").load("demo_test.txt #p1");

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部內容加載成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

  • get()

    • $.get(URL,callback);

      $("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("數據: " + data + "\n狀態: " + status);
  });
});

  • post()

    • $.post(URL,data,callback);

      $("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鳥教程",
        url:"http://www.runoob.com"
    },
        function(data,status){
        alert("數據: \n" + data + "\n狀態: " + status);
    });
});

jQuery其餘

  • noConflict()會釋放對 $ 標識符的控制，這樣其餘腳本就能夠使用它了

    $.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工做!");
  });
});

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工做!");
  });
});

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工做!");
  });
});
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程