JQuery學習&資料整理

JQuery學習&資料整理。要求時間:3天
第一天:
jQuery是一個JavaScript函數庫。
jQuery 極大地簡化瞭 JavaScript 編程。

jQuery庫包含以下功能:
HTML元素選取
HTML元素操作
CSS操作
HTML事件函數
JavaScript特效和動畫
HTMLDOM遍歷和修改
AJAX
Utilities

在項目中如何引入JQuery?
JQuery就是一個文件,下載後放到項目根目錄
在index首頁head處添加

<script src="jquery-3.1.1.js"></script>

jQuery 使用 $ 符號作為 jQuery 的簡寫。

1、JQuery語法

通過 jQuery,您可以選取(查詢,query) HTML 元素,並對它們執行”操作”(actions)。
jQuery 語法是通過選取 HTML 元素,並對選取的元素執行某些操作。
short way:先抓取元素,再操作元素。
基礎語法:$(selector).action()
美元符號定義JQuery
選擇符(selector)”查詢”和”查找” HTML 元素
jQuery 的 action() 執行對元素的操作
實例:

$(this).hide() - 隱藏當前元素
$("p").hide() - 隱藏所有 

元素 $("p.test").hide() – 隱藏所有 class="test" 的

元素 $("#test").hide() – 隱藏所有 id="test" 的元素

寫法

文檔就緒事件,為什麼,比如:試圖隱藏一個不存在的元素、獲得未完全加載的圖像的大小。
寫法1:

$(document).ready(function() {
// JQuery代碼
});

寫法2:
簡介寫法

$(fucntion() {
// JQuery代碼
});

JQuery選擇器

jQuery 中所有選擇器都以美元符號開頭:$()。
1.元素選擇器$("p")
2.#id選擇器$("#test")
3..class選擇器$(".test")

這句後面不是函數,而是一個CSS設置,令我不解的是口號內容並不是property:value;的形式

$("tr:odd").css("background-color","yellow");

經自己寫的JQuery函數獨立成文件

JQuery事件

頁面對不同訪問者的響應叫做事件。
事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。

常見DOM事件

鼠標事件 鍵盤事件 表單事件 文檔/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload

在 jQuery 中,大多數 DOM 事件都有一個等效的 jQuery 方法。

常用的JQuery事件方法
(document).ready()(document).ready() 方法允許我們在文檔完全加載完後執行函數。該事件方法在 jQuery 語法 章節中已經提到過。
click()
click() 方法是當按鈕點擊事件被觸發時會調用一個函數。
該函數在用戶點擊 HTML 元素時執行。

blur() 當元素市區焦點是,觸發blur事件。

JQuery效果

1.隱藏和顯示

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

2.淡入淡出

$("p.fade").fadeIn("slow");
$("p.fade").fadeOut("slow");
$("p.fade").fadeToggle("slow");
$(selector).fadeTo(speed,opacity,callback); 所有元素應該都可以使用,後邊的參數是不透明度(值介於 0 與 1 之間)

3.滑動

$(selector).slideToggle(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideDown(speed,callback);

第二天

4.動畫

$(selector).animate({params},speed,callback);
params是css屬性,也就是說通過重設元素的CSS屬性實現動畫效果。

$(selector).stop(stopAll,goToEnd);
可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false,即僅停止活動的動畫,允許任何排入隊列的動畫向後執行。
可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。

5.Callback

JQuery HTML

1.捕獲 獲取內容和屬性

DOM = Document Object Model(文檔對象模型)
獲得內容 – text()、html() 以及 val()

alert("Text: " + $("#test").text());
alert("HTML: " + $("#test").html());
alert("值為: " + $("#test").val());

以上這三個方法,括號內如果跟值,那就變成瞭設置新值,為空則表示抓取現有值。

2.添加元素

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

添加若幹新元素

<script>
function appendText(){
    var txt1="

文本。

"; // 使用 HTML 標簽創建文本 var txt2=$("

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

3.刪除元素

刪除元素/內容
如需刪除元素和內容,一般可使用以下兩個 jQuery 方法:
remove() – 刪除被選元素(及其子元素)
empty() – 從被選元素中刪除子元素

$("#p1").remove(); 
$("#p1").empty();

過濾被刪除的元素

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

4.獲取並設置CSS類

$("h1,h2,p").addClass("blue");
$("p").addClass("important");添加指定的樣式
$("h1,h2,p").removeClass("blue");刪除指定的樣式
$("h1,h2,p").toggleClass("blue");

5.css()方法

alert("背景顏色 = " + $("p").css("background-color"));
$("p").css("background-color","yellow");

6.JRuery尺寸

$("button").click(function(){
    var txt="";
    txt+="Width of p: " + $("#p1").width() + "
";
    txt+="Height of p: " + $("#p1").height();
    $("#p1").html(txt);
  });

jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的寬度(包括內邊距)。
innerHeight() 方法返回元素的高度(包括內邊距)。

jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的寬度(包括內邊距和邊框)。
outerHeight() 方法返回元素的高度(包括內邊距和邊框)。

JQuery遍歷

這裡的遍歷指什麼?
jQuery 遍歷,意為”移動”,用於根據其相對於其他元素的關系來”查找”(或選取)HTML 元素。以某項選擇開始,並沿著這個選擇移動,直到抵達您期望的元素為止。通過 jQuery 遍歷,您能夠從被選(當前的)元素開始,輕松地在傢族樹中向上移動(祖先),向下移動(子孫),水平移動(同胞)。這種移動被稱為對 DOM 進行遍歷。

1.遍歷祖先

jQuery parent() 方法—>找你爸

$("span").parent().css({"color":"red","border":"2px solid red"});

jQuery parents() 方法—>一直找到你祖宗

$("span").parents(可以加過濾"ul").css({"color":"red","border":"2px solid red"});

jQuery parentsUntil() 方法—>就查到往上第幾輩人

$("span").parentsUntil("p").css({"color":"red","border":"2px solid red"});

2.遍歷後代

jQuery children() 方法—>找孩子

$("p").children("可加過濾").css({"color":"red","border":"2px solid red"});

jQuery find() 方法—>找所有後代

$("p").find("span").css({"color":"red","border":"2px solid red"});
$("p").find("*").css({"color":"red","border":"2px solid red"});

3.遍歷同胞

$("h2").siblings().css({"color":"red","border":"2px solid red"})所有同胞;
$("h2").next().css({"color":"red","border":"2px solid red"});下一個同胞
$("h2").nextAll().css({"color":"red","border":"2px solid red"});剩下順序的所有同胞
$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});剩下的區間同胞但不包括h6

jQuery prev(), prevAll() & prevUntil() 方法,同上反方向遍歷。

4.遍歷過濾

$("p p").first().css("background-color","yellow");返回第一個找到的$("p p").last().css("background-color","yellow");返回最後一個
$("p").eq(1).css("background-color","yellow");返回索引等於1的元素並設置背景色
$("p").filter(".url").css("background-color","yellow");返回所有p.url的元素並設置背景色
$("p").not(".url").css("background-color","yellow");和filter反向

JQuery AJAX 簡介

第三天
AJAX = 異步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

1.JQuery ajax()方法

ajax() 方法用於執行 AJAX(異步 HTTP)請求。
所有的 jQuery AJAX 方法都使用 ajax() 方法。該方法通常用於其他方法不能完成的請求。
語法:$.ajax({name:value, name:value, … })

為所有 AJAX 請求設置默認 URL 和 success 函數:

$("button").click(function(){
$.ajaxSetup({url:"demo_ajax_load.txt",success:function(result){
$("p").html(result);}});
$.ajax();
}); 

2.jQuery ajaxSetup() 方法

ajaxSetup() 方法為將來的 AJAX 請求設置默認值

$("button").click(function(){
$.ajaxSetup({url:"demo_ajax_load.txt",success:function(result){
    $("p").html(result);}});
    $.ajax();
});

語法:$.ajaxSetup({name:value, name:value, … })
參數表有很多,需要的時候再查。

3.jQuery get()方法

$.get(“test.php”);

請求 “test.php” 並連同請求發送一些額外的數據(忽略返回結果):
$.get(“test.php”, { name:”Donald”, town:”Ducktown” });

請求 “test.php” 並傳遞數據數組到服務器(忽略返回結果):
$.get(“test.php”, { ‘colors[]’ : [“Red”,”Green”,”Blue”] });

請求 “test.php” 並提醒請求的結果:
$.get(“test.php”, function(data){
alert(“Data: ” + data);
});

語法:
$.get(URL,callback);
$.get(URL,data,function(data,status,xhr),dataType)

URL:必需,請求的URL
data:可選,規定聯通請求發送到服務器的數據
function(data,status,xhr):可選,請求成功時運行的函數
data:返回的數據
status:請求的狀態(“success”,”notmodified”,”error”,”timeout”,”parsererror”)
xhr:包含XMLHttpRequest對象
dataType:預期的服務器相應類型
“xml”,”html”,”text”,”script”,”json”,”jsonp”
在對話框中輸出空格
alert(“數據: ” + data + “\n狀態: ” + status);

4.jQuery getJSON()方法

語法:$(selector).getJSON(url,data,success(data,status,xhr))

5.jQuery getScipt()方法

使用 AJAX 請求,獲取和運行 JavaScript:
(“button”).click(function()$.getScript(“demoajaxscript.js”););語法:(selector).getScript(url,success(response,status))
success:可選

6.JQuery param()方法

對象序列化

7.JQuery post()方法

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

後面的function為回調函數

語法:
$.post(URL,data,callback); $(selector).post(URL,data,function(data,status,xhr),dataType)
$.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鳥教程",
        url:"https://www.runoob.com"
    },
        function(data,status){
        alert("數據: \n" + data + "\n狀態: " + status);
    }); 

8.JQuery ajaxComplete()方法

$(document).ready(function(){
    $(document).ajaxStart(function(){
        $("#wait").css("display","block");
    });
    $(document).ajaxComplete(function(){
        $("#wait").css("display","none");
    });
    $("button").click(function(){
        $("#txt").load("demo_ajax_load.php");
    });
});

ajaxStart,首先運行的ajax
ajaxComplete上面ajax執行完,將等待控件隱藏。

9.JQuery ajaxError()方法

$(document).ajaxError(function(){
        alert("一個錯誤發生!");
    });

沒有看到彈窗,書名沒出錯,
ajaxError() 方法規定 AJAX 請求失敗時運行的函數。

10.JQuery ajaxSend()方法

ajaxSend() 方法規定 AJAX 請求即將發送時運行的函數。

$(document).ajaxSend(function(e,xhr,opt){
        $("p").append("

Requesting " + opt.url + "

"); }); $("button").click(function(){ $("p").load("demo_ajax_load.php"); });

ajaxSend在下面ajax之前限制性,捕捉的參數剛好為當前要執行的ajax,可以做監控或標志什麼的。

11.JQuery ajaxStart()方法

$(document).ajaxStart(function(){
        alert("run before ajax below")
        $(this).html("

"); }); $("button").click(function(){ $("p").load("demo_ajax_load.php"); });

ajaxStart() 方法規定 AJAX 請求開始時運行的函數。

12.JQuery ajaxStop()方法

$(document).ajaxStop(function(){
        alert("所有 AJAX 請求已完成");
    });
    $("button").click(function(){
        $("p").load("demo_ajax_load.txt");
        $("p").load("demo_ajax_load.php");
    });

ajaxStop() 方法規定所有的 AJAX 請求完成時運行的函數。

Q:什麼叫“自 jQuery 版本 1.8 起,該方法隻被附加到文檔”?

13.JQuery ajaxSuccess()方法

$(document).ajaxSuccess(function(){
        alert("AJAX 請求完成");
    });
    $("button").click(function(){
        $("p").load("demo_ajax_load.txt");
    });

ajaxSuccess() 方法規定 AJAX 請求成功完成時運行的函數。
註:這應該是通用方法,誰成功瞭都會問一問它。function裡可帶參數,做些判斷,比如:

$(document).ajaxSuccess(function(e,xhr,opt){
    if (opt.url == "demo_ajax_load.txt") {
      alert("AJAX 請求完成");
    };

14.JQuery load()方法

jQuery load() 方法是簡單但強大的 AJAX 方法。
load() 方法從服務器加載數據,並把返回的數據放入被選元素中。
把文件 “demo_test.txt” 的內容加載到指定的

元素:

 

$("button").click(function(){
        $("#p1").load("/try/ajax/demo_test.txt");
    });

語法:$(selector).load(url,data,function(response,status,xhr))
function(response,status,xhr) means callback

也可以把 jQuery 選擇器添加到 URL 參數。
$(“#p1”).load(“demo_test.txt #p1”);有空格
這樣可以選擇性的加載。

15.JQuery serialize()方法

$("button").click(function(){
        $("p").text($("form").serialize());
    });

serialize() 方法通過序列化表單值創建 URL 編碼文本字符串。
序列化的值可在生成 AJAX 請求時用於 URL 查詢字符串中。
怎麼根據將檢索的值編輯成url格式的字符串,序列化。
語法:$(selector).serialize()

16.JQuery serializeArray()方法

serializeArray() 方法通過序列化表單值來創建對象(name 和 value)的數組。
語法:$(selector).serializeArray()

$("button").click(function(){
        x=$("form").serializeArray();
        $.each(x, function(i, field){
            $("#results").append(field.name + ":" + field.value + " ");
        });
    });

用法:將表單項以數組的形式序列化
serializeArray() 方法通過序列化表單值來創建對象(name 和 value)的數組。

JQuery 雜項 data()方法

在元素上掛載數據,但不在元素上顯示
data() 方法向被選元素附加數據,或者從被選元素獲取數據。
removeData() 方法移除之前通過 data() 方法設置的數據。
語法:$(selector).removeData(name)
name:可選。規定要移除的數據的名稱。如果沒有規定名稱,該方法將從被選元素中移除所有已存儲的數據。

$(document).ready(function(){
    testObj=new Object();
    testObj.greetingMorn="Good Morning!";
    testObj.greetingEve="Good Evening!";
    $("#btn1").click(function(){
        $("p").data(testObj);
    });
    $("#btn2").click(function(){
        alert($("p").data("greetingEve"));
    });
});

上面的testObj,很好的表現瞭JavaScript的寫法,
還可以使用對象: $(selector).data(object)

jQuery 雜項 toArray() 方法

toArray() 方法以數組的形式返回 jQuery 選擇器匹配的元素。

$("button").click(function(){
        x=$("li").toArray() // toArray方法
        for (i=0;i

jQuery jquery 屬性

返回jQuery 的版本號。

var version = $().jquery; 
alert("你正在運行的jQuery版本為: " + version);

jQuery jQuery.fx.interval 屬性

$("#toggle").on("click",function(){
    $("p").toggle(5000);
});
$("#interval").on("click",function(){
    jQuery.fx.interval = 500;
}); 

語法:jQuery.fx.interval = milliseconds;
milliseconds 必需。規定以毫秒計的動畫運行速率。默認是 13 毫秒。
jQuery.fx.off 屬性用於對所有動畫進行全局禁用或啟用。
jQuery.fx.off = true|false;

jQuery jQuery.support 屬性

jQuery.support.ajax:看瀏覽器是否支持ajax

jQuery length 屬性

alert($("li").length);

jQuery - noConflict() 方法

當涉及多JS框架是,為瞭避免沖突引用而設的方法jquery使用作為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 仍然在工作!");
  });
}); 

如果你的 jQuery 代碼塊使用 $ 簡寫,並且您不願意改變這個快捷方式,那麼您可以把 $ 符號作為變量傳遞給 ready 方法。這樣就可以在函數內使用 $ 符號瞭 - 而在函數外,依舊不得不使用 "jQuery":
// $.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
}); 

JSONP教程

Jsonp(JSON with Padding墊) 是 json 的一種”使用模式”,可以讓網頁從別的域名(網站)那獲取資料,即跨域讀取數據。
同源策略,它是由Netscape提出的一個著名的安全策略,現在所有支持JavaScript 的瀏覽器都會使用這個策略。同源不支持跨區。
JSONP 應用
1.服務端JSONP格式數據
2.客戶端實現 callbackFunction 函數
3.jQuery 使用 JSONP
沒太看懂,有時間在研究。

JQuery實例

都已看過,遇到問題時,再查閱。
鏈接:https://www.runoob.com/jquery/jquery-examples.html

JQuery參考手冊

此部分作參考查詢
鏈接:https://www.runoob.com/jquery/jquery-ref-selectors.html
1.JQuery選擇器:列舉瞭所有元素不同情況的抓取方法。
2.JQuery事件方法:列舉瞭所有事件方法,可用於監聽不同事件,然後做出需要的響應。
3.JQuery效果方法:列舉瞭所有用於創建動畫效果的 jQuery 方法。
4.JQuery HTML/CSS方法:列舉瞭所有用於處理 HTML 和 CSS 的 jQuery 方法。
5.JQuery遍歷方法:列舉瞭所有遍歷DOM的方法。
6.JQuery AJAX方法:列舉瞭所有 jQuery AJAX 方法。
7.JQuery雜項方法
8.JQuery實用工具
9.JQuery回調對象
10.JQuery延遲對象
11.JQuery屬性

JQuery插件

用時再說
1.JQuery Validate:表單驗證
2.JQuery Accordion:jQuery Accordion 做復雜下拉列表會用到
插件用於創建折疊菜單。它通常與嵌套的列表、定義列表或嵌套的 p 一起使用。選項用於指定結構、激活的元素和定制的動畫。
3.JQuery Autocomplete:搜索條隻能提示,提前檢索,匹配。
4.JQuery Message:提示信息,顯示後小時。(有問題)
5.jQuery Password Validation(密碼驗證):可顯示密碼安全等級。
6.jQuery Prettydate:日期驗證相關
7.JQuery Tooltip:懸浮提示
8.jQuery 樹型菜單插件(Treeview):將元素生成菜單樹視圖

發佈留言