JQuery快速入門-簡介

時間 2019-12-08

原文原文鏈接

1、什麼是JQuery？

jQuery是一個JavaScript庫，它經過封裝原生的JavaScript函數獲得一整套定義好的方法。它的做者是John Resig，於2006年建立的一個開源項目，隨着愈來愈多開發者的加入，jQuery已經集成了JavaScript、CSS、DOM和Ajax於一體的強大a功能。它能夠用最少的代碼，完成更多複雜而困難的功能，從而獲得了開發者的青睞。javascript

2、jQuery 的功能和優點

jQuery 做爲JavaScript 封裝的庫，他的目的就是爲了簡化開發者使用JavaScript。主要功能有如下幾點：css

像CSS 那樣訪問和操做DOM
修改CSS 控制頁面外觀
簡化JavaScript 代碼操做
事件處理更加容易
各類動畫效果使用方便
讓Ajax 技術更加完美
基於jQuery 大量插件
自行擴展功能插件

jQuery 最大的優點，就是特別的方便。好比模仿CSS 獲取DOM，比原生的JavaScript要方便太多。而且在多個CSS 設置上的集中處理很是舒服，而最經常使用的CSS 功能又封裝到單獨的方法，感受很是有心。html

最重要的是jQuery 的代碼兼容性很是好，你不須要老是頭疼着考慮不一樣瀏覽器的兼容問題。java

3、JQuery版本選擇

1.x：兼容ie678,使用最爲普遍的，官方只作BUG維護，功能再也不新增。所以通常項目來講，使用1.x版本就能夠了，最終版本：1.12.4 (2016年5月20日)jquery

2.x：不兼容ie678，不多有人使用，官方只作BUG維護，功能再也不新增。若是不考慮兼容低版本的瀏覽器可使用2.x，最終版本：2.2.4 (2016年5月20日)瀏覽器

3.x：不兼容ie678，只支持最新的瀏覽器。除非特殊要求，通常不會使用3.x版本的，不少老的jQuery插件不支持這個版本。目前該版本是官方主要更新維護的版本。框架

各版本地址：https://code.jquery.com/jquery/函數

4、JQuery初體驗

一、從https://code.jquery.com/jquery/下載1.12.4版本，導入html動畫

二、編寫第一個程序this

<!DOCTYPE html>
<html>
<head>
<title> 第一個簡單的jQuery 程序</title>
<style type="text/css">
div{padding:8px 0px;font-size:12px;text-align:center;border:solid 1px #888;}
</style>
<script src="jquery-1.12.4.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div").html(" Hello，welcome to JQuery's world！");
});
</script>
</head>
<body>
<div></div>
</body>
</html>

注意：

$(document).ready(function(){
// 程序段
})
// 等價於
$(function(){
// 程序段
}) //在頁面框架下載完成後就執行

5、JQuery代碼風格

一、$

$符表JQuery

var div1=JQuery('#myid') //等價於var div1=$('#myid')

二、鏈式書寫法

$(".title").click(function() {

　　$(this).addClass("curcol").next(".content").css("display", "block");

});

//獲取class=title的元素，點擊事件時，對當前這個標籤添加curcol類，同時下一個類爲content的元素添加樣式，進行顯示爲block。

三、JQuery獲取DOM對象

var tDiv=document.getElementById("Tmp"); // 獲取DOM 對象：獲取id爲Tmp的對象
var oDiv=document.getElementById("Out"); // 獲取DOM 對象：獲取id爲Out的對象
var cDiv=tDiv.innerHTML; // 獲取DOM 對象中的內容：Tmp對象的內容賦值給cDiv
oDiv.innerHTML=cDiv; // 設置DOM 對象中的內容：將cDiv賦值給Out對象

說明：以上四行代碼的意思就是：將ID爲Tmp對象的內容賦值給ID爲Out對象。

使用JQuery實現：

var tDiv=$("#Tmp"); // 獲取jQuery 對象
var oDiv=$("#Out"); // 獲取jQuery 對象
var cDiv=tDiv.html(); // 獲取jQuery 對象中的內容
oDiv.html(cDiv); // 設置jQuery 對象中的內容

四、JQuery控制DOM對象

JavaScript實現：

<script type="text/javascript">
function btn_Click(){
// 獲取文本框的值
var oTxtValue=document.getElementById("Text1").value;
// 獲取單選框按鈕值
var oRdoValue=(Radio1.checked)?" 男":" 女";
// 獲取複選框按鈕值
var oChkValue=(Checkbox1.checked)?" 已婚":" 未婚";
// 顯示提示文本元素
　　　　　　document.getElementById("Tip").style.display="block";
// 設置文本元素的內容
document.getElementById("Tip").innerHTML=
oTxtValue+"<br>"+oRdoValue+"<br>"+oChkValue;
}
</script>

JQuery實現：

<script type="text/javascript">
$(function(){
$("#btnSubmit").click(function(){
// 獲取文本框的值
var oTxtValue=$("#Text1").val();
// 獲取單選框按鈕值
var oRdoValue=$("#Radio1").is (":checked")?" 男":" 女";
// 獲取複選框按鈕值
var oChkValue=$("#Checkbox1").is (":checked")?" 已婚":" 未婚";
// 顯示提示文本元素和內容
$("#Tip").css("display","block").html(oTxtValue+"<br>"+oRdoValue+"<br>"+oChkValue);
})
})
</script>

五、JQuery控制頁面CSS

<script type="text/javascript">
//頁面框架加載完成後，找到class=defcol的標籤，當標籤有點擊事件發生時，給當前標籤添加/刪除class curcol。
$(function() {
　$(".defcol").click(function() {
　　$(this).toggleClass("curcol");
});
});
</script>

參考自《JQuery權威指南（第二版）》

1. zookeeper快速入門——簡介
2. ARCore快速入門--簡介
3. 快速入門:BUMO 簡介
4. jQuery快速入門
5. 快速入門Jquery
6. jQuery簡單的快速入門
7. jQuery Mobile 快速入門
8. JQuery快速入門-Ajax
9. JQuery(一)：快速入門
10. jQuery框架快速入門
更多相關文章...
• jQuery Mobile 簡介 - jQuery Mobile 教程
• SQL 快速參考 - SQL 教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用
• YAML 入門教程

相關標籤/搜索

每日一句

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