[UI] 06 - jQuery

時間 2019-11-07

標籤 jquery 欄目 JQuery 简体版

原文原文鏈接

前言

From : http://www.runoob.com/jquery/jquery-intro.htmlphp

Ref: jQuery 實例css

1、什麼是 jQuery ？

jQuery是一個JavaScript函數庫。html

jQuery是一個輕量級的"寫的少，作的多"的JavaScript庫。jquery

jQuery庫包含如下功能：ajax

- - HTML 元素選取
  - HTML 元素操做
  - CSS 操做
  - HTML 事件函數
  - JavaScript 特效和動畫
  - HTML DOM 遍歷和修改
  - AJAX
  - Utilities

提示：除此以外，Jquery還提供了大量的插件。json

2、下載的替代方案

若是您不但願下載並存放 jQuery，那麼也能夠經過 CDN（內容分發網絡）引用它。跨域

代碼一

<!DOCTYPE html>
<html>
<head>
　　<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
　　<script>
　　$(document).ready(function(){　　　　　　# 美圓符號定義jQuery；括號內是selector,查詢和查找html元素；ready表示「在文檔徹底加載完後執行函數」
     -----------------------------------
　　  $("button").click(function(){
　　    $("p").hide();
　　  });
     -----------------------------------
　　});
　　</script>
</head>

<body>
　　<h2>這是一個標題</h2>
　　<p>這是一個段落。</p>
　　<p>這是另外一個段落。</p>
　　<button>點我</button>
</body>
</html>

其餘CDN方案：http://www.runoob.com/jquery/jquery-install.html瀏覽器

3、獨立文件保存

<head>
　　<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
　　</script>
　　<script src="my_jquery_functions.js"></script>
</head>

4、選擇器

元素選擇器

見代碼一。服務器

id 選擇器

頁面中元素的 id 應該是惟一的，因此您要在頁面中選取惟一的元素須要經過 #id 選擇器。網絡

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>


<body>
<h2>這是一個標題</h2>
<p>這是一個段落</p>
<p id="test">這是另一個段落</p>
<button>點我</button>
</body>

class 選擇器

<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>

<body>

<h2 class="test">這是一個標題</h2>
<p  class="test">這是一個段落。</p>
<p>這是另一個段落。</p>
<button>點我</button>
</body>

5、jQuery 事件

$("p").click(function(){
  $(this).hide();
});

$("p").dblclick(function(){
  $(this).hide();
});

$("#p1").mouseenter(function(){
    alert('您的鼠標移到了 id="p1" 的元素上!');
});


$("#p1").mouseleave(function(){
    alert("再見，您的鼠標離開了該段落。");
});

$("#p1").mousedown(function(){
    alert("鼠標在該段落上按下！");
});

$("#p1").mouseup(function(){
    alert("鼠標在段落上鬆開。");
});

$("#p1").hover(
    function(){
        alert("你進入了 p1!");
    },
    function(){
        alert("拜拜! 如今你離開了 p1!");
    }
);

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

正文

1、jQuery 效果

淡入淡出

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

下拉菜單

slideDown()
slideUp()
slideToggle()

經過 animate 也可實現該效果：

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

動畫

[1] 直接定義「終點「狀態。

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

[2] 只定義 "變化" 狀態。

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

[3] 定義多個動畫過程，合併起來。

$("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");
});

[4] jQuery stop() 方法用於中止動畫或效果，在它們完成以前；stop() 方法適用於全部 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫。

<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>

<body>
 
<button id="stop">中止滑動</button>
<div id="flip">點我向下滑動面板</div>
<div id="panel">Hello world!</div>

</body>

Callback 方法

#　有回調
$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落如今被隱藏了");
  });
});

#　沒回調
$("button").click(function(){
  $("p").hide(1000);
  alert("段落如今被隱藏了");
});

鏈(Chaining)

這樣的話，瀏覽器就沒必要屢次查找相同的元素。

如需連接一個動做，您只需簡單地把該動做追加到以前的動做上。

下面的例子把 css()、slideUp() 和 slideDown() 連接在一塊兒。

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  });
});
</script>

<p id="p1">菜鳥教程!!</p>
<button>點我</button>

2、DOM 操做

Html

設置內容 - text()、html() 以及 val()

設置屬性 - attr()

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

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

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

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

remove() - 刪除被選元素（及其子元素）

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

CSS

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

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

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

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

[1] 舉例：將要添加的風格。

<style type="text/css">
　　.important
　　{
　　    font-weight:bold;
　　    font-size:xx-large;
　　}
　　.blue
　　{
　　    color:blue;
　　}
</style>

[2] 執行：經過選擇器添加css效果。

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>

[3] 結果：以下選擇器添加了style。

<body>

　　<h1>標題 1</h1>
　　<h2>標題 2</h2>
　　<p>這是一個段落。</p>
　　<p>這是另一個段落。</p>
　　<div>這是一些重要的文本!</div>
　　<br>
　　<button>爲元素添加 class</button>

</body>

返回屬性 - $("p").css("background-color");

設置屬性 - $("p").css("background-color","yellow");

設置多個 CSS 屬性 - $("p").css({"background-color":"yellow","font-size":"200%"});

3、尺寸

jQuery width() 和 height() 方法

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

jQuery innerWidth() 和 innerHeight() 方法

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

jQuery outerWidth() 和 outerHeight() 方法

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

4、遍歷

直接 parent

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

全部祖先

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

全部「是ul」的祖先

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

返回介於 <span> 與 <div> 元素之間的全部祖先元素

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

children() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<style>
.descendants *
{ 
    display: block; border: 2px solid lightgrey;color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>

<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("div").children().css({"color":"red","border":"2px solid red"});
});
</script>
</head>

<body>

<divclass="descendants" style="width:500px;">div (當前元素) 
  <p>p (兒子元素)
    <span>span (孫子元素)</span>     
  </p>
  <p>p (兒子元素)
    <span>span (孫子元素)</span>
  </p> 
</div>

</body>
</html>

find() 方法

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

siblings() 方法

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

-----------------------------

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

next() 方法

next() 方法返回被選元素的下一個同胞元素。

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

-----------------------------

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

-----------------------------

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

其餘方法

jQuery prev(), prevAll() & prevUntil() 方法。

縮小搜索元素的範圍

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

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

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

filter() 方法

filter() 方法容許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。

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

not() 方法

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

5、AJAX

AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

簡短地說，在不重載整個網頁的狀況下，AJAX 經過後臺加載數據，並在網頁上進行顯示。

jQuery load() 方法

jQuery load() 方法是簡單但強大的 AJAX 方法。

[1] load() 方法從服務器加載數據，並把返回的數據放入被選元素中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").load("/try/ajax/demo_test.txt");
    });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改文本內容</h2></div>
<button>獲取外部內容</button>

</body>
</html>

[2] 若是 load() 方法已成功，則顯示"外部內容加載成功！"；若是失敗，則顯示錯誤消息。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt", function(responseTxt, statusTxt, xhr){
      if(statusTxt=="success")
        alert("外部內容加載成功!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改該文本</h2></div>
<button>獲取外部內容</button>

</body>
</html>

回調函數能夠設置不一樣的參數：

- - responseTxt - 包含調用成功時的結果內容
  - statusTXT - 包含調用的狀態
  - xhr - 包含 XMLHttpRequest 對象

jQuery $.get() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $.get("/try/ajax/demo_test.php", function(data, status){
            alert("數據: " + data + "\n狀態: " + status);
        });
    });
});
</script>
</head>
<body>

<button>發送一個 HTTP GET 請求並獲取返回結果</button>

</body>
</html>

jQuery $.post() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.post("/try/ajax/demo_test_post.php",{
            name:"菜鳥教程",
            url:"http://www.runoob.com" },
        function(data, status){
            alert("數據: \n" + data + "\n狀態: " + status);
        });
    });
});
</script>
</head>
<body>

<button>發送一個 HTTP POST 請求頁面並獲取返回內容</button>

</body>
</html>

noConflict() 方法

jQuery 使用 $ 符號做爲 jQuery 的簡寫。

若是其餘 JavaScript 框架也使用 $ 符號做爲簡寫怎麼辦？

其餘一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。

JSONP 教程

讓網頁從別的域名（網站）那獲取資料，即跨域讀取數據。

Ref: http://www.runoob.com/json/json-jsonp.html

jQuery 插件

1、驗證

jQuery Validate 插件爲表單提供了強大的驗證功能。

Goto: http://www.runoob.com/jquery/jquery-plugin-validate.html

2、Accordion

3、自動補全

jQuery Autocomplete 插件根據用戶輸入值進行搜索和過濾，讓用戶快速找到並從預設值列表中選擇。

4、Growl 插件(消息提醒)

5、密碼驗證

Goto: http://www.runoob.com/try/try.php?filename=jquery-plugin-password-validate

6、PrettyDate

jQuery Prettydate 插件爲表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定製選項，知足應用程序各類需求。該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。全部的捆綁方法默認使用英語做爲錯誤信息，且已翻譯成其餘 37 種語言。

7、jQuery Tooltip

jQuery Tooltip 插件取代了原生的工具提示框，讓它們可自定義，您只須要調整它們的內容、位置和外觀便可。

8、樹型菜單插件(Treeview)

1. jQuery UI
2. jquery ui
3. Jquery UI
4. JQuery UI的拖拽功能
5. JQuery UI 入門
6. 學習jQuery UI
7. jQuery ui 框架
8. JS——jquery UI
9. 學習 jQuery UI
10. jQuery UI(五)
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• jQuery Mobile 網格 - jQuery Mobile 教程
• RxJava操作符（六）Utility
• Github 簡明教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。