在對javascript腳本語言有了深層次的學習後,決定來學習在他基礎上產生的jqueryjavascript
1、認識css
jquery是一個輕量級的js庫,能夠幫助你寫的更少實現的更多,所以在學習了jquery後將能夠替換原生js的寫法(主要是查找元素而且爲其添加事件這些,還有ajax也有不一樣的寫法)html
2、使用java
jquery能夠經過打包進入你的頁面中使用也能夠下載到你的計算機上使用,前者須要有網絡node
3、語法jquery
理解這個名字就好了,經過這個庫進行query頁面元素並對其進行一些操做ajax
基礎語法:$('selector').action() 美圓符號是對jquery的定義 緩存
action是你要添加的一些事件 如{click,hide,ready,css,dbclick,mouseover,focus,mouseenter,change,one,bind(至關於addenventlistener),blur(失去焦點),服務器
slideToggle(隱藏或顯示),delegate(爲選中元素的子元素添加事件)網絡
live\die 使用live爲選中元素添加事件,使用die去除
error,replacewith若是所選元素錯誤時發生error事件
hide\show(顯示隱藏) $(selector).hide(1000,callback); toggle替代show、hide
fidein\fadeout\fadetoggle\fadeto (淡入淡出) fadeTo(3000(或者slow),0.6,callback); 也能夠添加回調函數
slidedown\slideuo\slidetoggle(滑動效果)
stop()(使有延遲speed的動畫中止)
!!!!!!若是您但願在一個涉及動畫的函數以後來執行語句,請使用 callback 函數。
$(document).ready(function(){ ... }) 至關於原生中的onload.function 在頁面加載完成前的事件:可能會出錯,好比事件中有隱藏不存在的元素,或獲取不存在的元素;
4、jquery選擇器
一、jquery元素選擇器:$(.abc).onclick #abc p
$("p.intro") 選取全部 class="intro" 的 <p> 元素。
$("p#demo") 選取全部 id="demo" 的 <p> 元素。
二、jquert屬性選擇器:$(「[href]」) href=’#‘ href!=’#‘ href$='.jpg'(選取全部屬性以jpg結尾的元素)
三、jquery樣式選擇器
$("p").css("background-color","red");
5、jquery事件函數(指觸發的一些調用)
$(.abc).click = function () { $(p).hide(); }
jquery名稱衝突:
jQuery 使用 $ 符號做爲 jQuery 的簡介方式。
某些其餘 JavaScript 庫中的函數(好比 Prototype)一樣使用 $ 符號。
jQuery 使用名爲 noConflict() 的方法來解決該問題。
var jq=jQuery.noConflict(),幫助您使用本身的名稱(好比 jq)來代替 $ 符號。
6、jquery動畫(animate())
$("button").click(function(){
$("div").animate({left:'250px'},fast,function() {....}); callback回調函數是動畫完成後執行的
}); //animate中能夠添加多條屬性
!!!!!默認的html源數都有一個靜態位置,沒法移動,若是要操做位置須要設置position
!!!!!!不能夠設置色彩 須要下載 Color Animations 插件
使用相對值:width:‘+=150px’,
使用預約義的值:height:‘toggle’
隊列$("button").click(function(){
var div = $("div");
div.animate({},"speed",callback) 操做1
div.animate({},"speed",callback) 操做2
div.animate({},"speed",callback) 操做3
})
7、Chaining (鏈) 容許爲元素添加多個jquery方法
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000); \\標準寫法
jquery dom
1、 text(設置或返回所選元素文本內容)
html(設置或返回所選元素內容 包括html標記) alert("html:"+$(.test).html());
val() 設置返回單字段值 alert(」value:「$(.test).val());
attr("獲取元素連接的href屬性值")
2、text、html、val,attr的回調函數(所選元素下標i,本來的值)
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world! ( index: " + i + ")";
3、添加\刪除\css類\
append() 被選元素結尾插入內容
prepend() 被選元素開頭插入內容
after() 被選元素以後插入內容
before()被選元素以前插入內容
使用append(prepend)添加新元素:html:var nele = 」<p>123</p>「
jquery var nele = $("<p></p>").text(」123「)
dom: var nele = document.createelement("p");
$("p").append(nele);
使用before,after同上,更換相應事件方法名便可
*********************over添加****************************
remove()刪除元素及其子元素 empty刪除被選元素的子元素
$("p").remove(.italic)刪除全部class=italic的p元素
*************************over刪除***********************
jquery擁有若干對css進行操做的方法
addclass()向被選元素添加一個或多個類 addclass(」blue important「) 括號裏的兩個爲已經設置好的css名稱 可選中 多 個元素,逗號隔開用雙引號括起來
removeclass() 從被選元素刪除一個或多個類
toggleclass() 對被選元素進行添加\刪除的切換操做
css() 設置or返回樣式屬性
$("div").css("font-size");返回首個匹配元素的font-size值
$("div").css("color","yellow"); 如需設置多個樣式使用花括號的形式({」color」:「green「,」font-size「:」16px「});
***************************over handle for css**********************8
!!!!!!!!!!!尺寸:width返回不包括內邊距 innerwidth返回包括內邊距
jquery 遍歷
要清晰後代的概念,子元素只隔了一層,後代使隔了>1層的
jquery提供多種遍歷方法,最大的遍歷種類使數遍歷
1、樹中向上,向下,同級遍歷(遍歷dom樹)
向上:parent(),直接父元素 parents() 全部父元素 parentsUntil(object elementnode)
向下:children().... children(p.1) 返回類名爲1的全部p
find(「div」) 返回被選元素中全部span元素 find(「*」)返回全部後代
同胞:next nextuntil nextall siblings pre preall preuntil
過濾:first()\last()\eq(1)返回被選元素中帶索引號的 filter\not
jquery ajax
( jQuery AJAX 方法,您可以使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON - 同時您可以把這些外部數據直接載入網頁的被選元素中。)
$("#div1").load("test.txt",data,callback)
data是要發送的參數 callback是load執行完成後調用的事件
callback函數包括如下參數: reponseTxt(包含成功的結果內容) status(調用狀態) xhr(包括xmlhttprequest對象)
xhr對象有status,statusText等屬性
Get有緩存 Post無緩存 $.get(url,data,callback)
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("/example/jquery/demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("數據:" + data + "\n狀態:" + status);
});
});
});
</script>
</head>
<body>
<button>向頁面發送 HTTP POST 請求,並得到返回的結果</button>
</body>
</html>
Jquery noConflict() 釋放$標識符控制:$.noConflict or 替換var jq = $.noConflict