jquery基礎

JQuery

簡單代碼：

(一)Test

<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<title>JQuery Test</title>

<head>

$(document).ready(function(){

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

$(this).hide();

});

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

$("p").hide();

});

</script>

</head>

<body>

<p>If you click on me, I willdisappear.</p>

<button type = "button">Clickme</button>

</body>

</html>

1. Query 語法實例

通過hide()和 show()兩個函數，jQuery支持對HTML 元素的隱藏和顯示：

$(this).hide()$("#hide").click(function(){

$("p").hide("slow");//$("p").hide(1000);

});

$("#show").click(function(){

$("p").show();

});

演示jQuery hide()函數，隱藏當前的HTML 元素。

$("#test").hide()

演示jQuery hide()函數，隱藏id="test" 的元素。

$("p").hide()

演示jQuery hide()函數，隱藏所有<p> 元素。

$(".test").hide()

演示jQuery hide()函數，隱藏所有class="test" 的元素。

2. ready 函數

$(document).ready(function(){

--- jQuery functions go here ----

});

這是爲了防止文檔在完全加載（就緒）之前運行jQuery代碼。

jQuery 元素選擇器

jQuery 使用CSS選擇器來選取 HTML元素。

$("p") 選取<p>元素。

$("p.intro") 選取所有class="intro" 的 <p>元素。

$("p#demo") 選取id="demo" 的第一個<p> 元素。

jQuery 屬性選擇器

jQuery 使用XPath表達式來選擇帶有給定屬性的元素。

$("[href]") 選取所有帶有href 屬性的元素。

$("[href='#']") 選取所有帶有href 值等於 "#"的元素。

$("[href!='#']") 選取所有帶有href 值不等於 "#"的元素。

$("[href$='.jpg']") 選取所有href 值以 ".jpg"結尾的元素。

5. 改變css樣式

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

6.jQuery 事件

Event 函數綁定函數至

$(document).ready(function)將函數綁定到文檔的就緒事件（當文檔完成加載時）

$(selector).click(function)觸發或將函數綁定到被選元素的點擊事件

$(selector).dblclick(function)觸發或將函數綁定到被選元素的雙擊事件

$(selector).focus(function)觸發或將函數綁定到被選元素的獲得焦點事件

$(selector).mouseover(function)觸發或將函數綁定到被選元素的鼠標懸停事件

7.jQuery 滑動函數- slideDown, slideUp, slideToggle, callback是執行完之後的回調函數

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

8.jQuery Fade 函數- fadeIn(), fadeOut(), fadeTo()

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

9.jQuery 效果

函數描述

$(selector).hide() 隱藏被選元素

$(selector).show() 顯示被選元素

$(selector).toggle()切換（在隱藏與顯示之間）被選元素

$(selector).slideDown() 向下滑動（顯示）被選元素

$(selector).slideUp() 向上滑動（隱藏）被選元素

$(selector).slideToggle()對被選元素切換向上滑動和向下滑動

$(selector).fadeIn() 淡入被選元素

$(selector).fadeOut() 淡出被選元素

$(selector).fadeTo() 把被選元素淡出爲給定的不透明度

$(selector).animate() 對被選元素執行自定義動畫

10.jQuery HTML 操作

$(selector).html(content)改變被選元素的（內部）HTML，改變元素的內容（值）

$(selector).append(content)向被選元素的（內部）HTML追加內容

$(selector).prepend(content)向被選元素的（內部）HTML“預置”（Prepend）內容

$(selector).after(content) 在被選元素之後添加HTML

$(selector).before(content) 在被選元素之前添加HTML

11.jQuery CSS 操作

CSS 屬性描述

$(selector).css(name,value)爲匹配元素設置樣式屬性的值

$(selector).css({properties})爲匹配元素設置多個樣式屬性

$(selector).css(name)獲得第一個匹配元素的樣式屬性值

$(selector).height(value) 設置匹配元素的高度

$(selector).width(value) 設置匹配元素的寬度

函數css(name,value)爲所有匹配元素的給定CSS 屬性設置值：

$(selector).css(name,value)

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

函數css({properties})同時爲所有匹配元素的一系列CSS 屬性設置值：

$(selector).css({properties})

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

函數css(name)返回指定的 CSS屬性的值：

$(selector).css(name)

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

$("#result").html($(this).css("background-color"));//會變成屬性的值eg：rgb(255, 0, 0)

12.AJAX = Asynchronous JavaScript andXML.

AJAX通過在後臺與服務器交換少量數據的方式，允許網頁進行異步更新。這意味着有可能在不重載整個頁面的情況下，對網頁的一部分進行更新。

13.document.getElementsByTagName("span")[0]將獲取頁面中第一個span對象

DOM對象與Jquery對象的互轉：

<div><span>span[0] willdisappear!(blue style)</span></div>

<p><span>It should beRed!</span></p>

<button type="button">Clickme</button>

$("document").ready(function(){

var span1 =document.getElementsByTagName("span")[1];

var span1 = $(span1);

span1.css("color","red");

var span2 =document.getElementsByTagName("span")[0];

var span2 = $(span2);//DOM to jquery

var span3 = $("span")[0];//jquery to DOM

span3.style.color = "blue";

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

span2.hide("slow");

});

</script>

使用如下寫法把它轉換爲DOM對象，再調用DOM屬性來定義樣式：

var span = $(span)[0]; //把jQuery對象轉換爲DOM對象

span.style.color = "blue";//調用DOM對象的style屬性，設置字體顏色爲藍色

除了使用集合索引值把jQuery對象轉換爲DOM對象外，還可以使用jQuery的get()獲取對象內指定索引的元素：

$("span").get(0);

14.each 函數用於遍歷所有的對象集合

var span4 = $("span");

span4.each(function(n){

this.style.fontSize = (n+1)*12 +"px";

//$(this).css("fontsize",(n+1)*12+"px");

});

15.

size()方法能夠返回jQuery對象中元素的個數，而length屬性與size()方法功能相同。例如，

下面代碼使用size()方法和length屬性返回值都爲2。

alert($("span").size());//返回值爲2

alert($("span").length);//返回值爲2

</script>

16.操作屬性的值，取出屬性值，移除，賦值

attr(name)：根據屬性名（name參數）獲取jQuery對象中第一個元素的對應屬性值。

<ahref="RedirectFile.jsp">RedirectFile.jsp</a>

var as = $("a").attr("href");

//alert(as);

attr(key,value)：爲jQuery對象定義屬性並賦值。

$("a").attr("href","test.jsp");

$("img").attr("width","100");

removeAttr(name)：該方法能夠移出jQuery對象內指定屬性。

$("img").removeAttr("width");

</script>

17.訪問DOM元素包含信息

問元素包含的信息可以使用text()方法獲取。例如，在下面示例中獲取段落標籤中包含的所有內容，

即“段落文本1“。如果p包含了其他元素，則省略不計，因此其中包含的span元素將被忽略。

alert($("p").text());

//alert($("p").text());//p1

//alert($("p").html());//會寫成p<span>1</span>

</script>

反過來，也可以爲text()傳遞文本字符串，則將自動爲元素添加指定文本字符串，同時會自

動刪除該元素包含的已有文本。

$("p").text("addinfo");

，text()和text(val)方法能夠讀寫jQuery對象所有匹配元素的內容，結果是由所有匹

配元素包含的文本內容組合起來的文本

下拉列表select

</select>

</div>

alert($("#div2 select").val());

</script>

訪問input：

</div>

$("#div3input").each(function(n){

alert($($("input")[n]).val());

});

</script>

默認選中：

<input type="radio"value="radio1" />單選按鈕1

<input type="radio"value="radio2" />單選按鈕2

<input type="checkbox"value="check1" />複選框1

<input type="checkbox"value="check2" />複選框2

</select>

$("input").val(["radio2","check2"]);

$("select").val(["1","3"]);

</script>

18. 選擇器

jQuery 常用選擇器說明

#id 根據ID值匹配特定元素,與CSS中的 ID 選擇器對應

element 根據給定的元素名匹配所有元素,與CSS中的標籤選擇器對應

.class 根據給定的類匹配元素,與CSS中的類選擇器對應

* 匹配所有元素,與CSS中通配符類似,但更靈活,可以匹配局部所有元素

selector1,selector2,selectorN 將每一個選擇器匹配元素合併後一起返回,與CSS 中的選擇器分組對應

ancestor descendant 在指定祖先元素下匹配所有的後代元素,與CSS 中的包含選擇器對應

parent > child 在給定的父元素下匹配所有的子元素,與CSS 中的子選擇器對應

prev + next 匹配所有緊接在prev 元素後的 next元素,與CSS中的相鄰選擇器對應

prev ~ siblings 匹配prev 元素之後的所有siblings 元素,與CSS 沒有對應選擇器

[attribute] 匹配包含給定屬性的元素,與CSS 中的屬性選擇器對應

[attribute=value] 匹配給定屬性等於特定值的元素,與CSS 中的屬性選擇器對應

[attribute!=value] 匹配給定的屬性不包含某個特定值的元素,與CSS 中的屬性選擇器對應

[attribute^=value] 匹配給定的屬性是以某些值開始的元素,與CSS 中的屬性選擇器對應

[attribute$=value] 匹配給定的屬性是以某些值結尾的元素,與CSS 中的屬性選擇器對應

[attribute*=value] 匹配給定的屬性是以包含某些值的元素,與CSS 中的屬性選擇器對應

[selector1][selector2][selectorN] 複合屬性選擇器,需要同時滿足多個條件時使用,與CSS中的屬性選擇器對應

舉例：

</div>

</div>

要選擇“段落文本1”包含的對象,則可以使用如下語句之一:

$("#p1"); //ID 選擇器

$("#box1 p"); //包含選擇器

$("#box1>#p1"); //子選擇器

$("p#p1"); //指定標籤選擇器

$("p[id='p1']"); //匹配屬性等於特定屬性值

$("[id$='1']"); //匹配屬性值結尾的值

$("#box1 [id^='p']"); //包含選擇器,配合匹配屬性值開始的值

$("[id*='1']"); //匹配屬性值包含某個字符串

使用各種選擇器所返回的對象爲jQuery 對象(即集合對象),即使返回的元素僅有一個也屬於集合,因此不能直接調用DOM定義的方法。

19.表單專用選擇器

jQuery 表單選擇器說明

:input 匹配所有input、textarea、select和button 表單元素

:text 匹配所有的單行文本框

:password 匹配所有密碼框

:radio 匹配所有單選按鈕

:checkbox 匹配所有複選框

:submit 匹配所有提交按鈕

:image 匹配所有圖像域

:reset 匹配所有重置按鈕

:button 匹配所有按鈕

:file 匹配所有文件域

:hidden 匹配所有不可見元素,或者type爲 hidden 的元素

:enabled 匹配所有可用元素

:disabled 匹配所有不可用元素

:checked 匹配所有選中的複選框元素

:selected 匹配所有選中的選項元素

eg:

$("input:text").css("border","solid1px red");

20.篩選函數

<ul>

</ul>

</div>

alert($("div#div4 ulli:eq(0)").text());

//alert($("div#div4li").eq(0).text());

</script>

jQuery 篩選函數說明

eq(index) 獲取指定索引值位置上的元素，索引值從0 開始算起

hasClass(class)檢查當前的元素是否含有某個特定的類，如果有，則返回true

filter(expr)篩選出與指定表達式匹配的元素集合。這個方法用於縮小匹配的範圍，用逗號分隔多個表達式

filter(fn) 篩選出與指定函數返回值匹配的元素集合

is(expr) 用一個表達式來檢查當前選擇的元素集合，如果其中至少有一個元素符合這個給定的表達式就返回true

map(callback)將一組元素轉換成其他數組（不論是否是元素數組）

not(expr) 刪除與指定表達式匹配的元素

slice(start,[end]) 選取一個匹配的子集，與原來的slice 方法類似

add(expr) 把與表達式匹配的元素添加到jQuery 對象中。這個函數可以用於連接分別與兩個表達式匹配的元素結果集

children([expr])取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合

contents()查找匹配元素內部所有的子節點（包括文本節點）。如果元素是一個iframe，則查找文檔內容

find(expr)搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素

next([expr])取得一個包含匹配的元素集合中每一個元素緊鄰的後面同輩元素的元素集合

nextAll([expr]) 查找當前元素之後的所有元素

parent([expr])取得一個包含着所有匹配元素的唯一父元素的元素集合

parents([expr])取得一個包含着所有匹配元素的祖先元素的元素集合（不包含根元素）

prev([expr])取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合

prevAll([expr])查找當前元素之前所有的同輩元素，可以用表達式過濾

siblings([expr]) 取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合。可以用可選的表達式進行篩選

andSelf()加入先前所選的當前元素中，對於篩選或查找後的元素，要加入先前所選元素時將會很有用

end()回到最近的一個“破壞性”操作之前，即將匹配的元素列表變爲前一次的狀態

21.文檔處理插入內容

append()方法與DOM的appendChild()方法功能類似，都是在元素內部增加子元素或文本。

$("div #div5").append("<spanstyle='color:red'>candy</span>");

prepend()方法與append()方法作用相同，都是把指定內容插入到jQuery對象元素中，但是

prepend()方法能夠把插入的內容放置在最前面，而不是放置在最末尾。

—appendTo(content)，它可以把所有匹配的元素追加到另一個指定的元素集合中

<p>paragraph</p>

$("p").appendTo("#box");//firstis box, then paragraph, their places exchanged

</script>

append()、appendTo()、prepend()和prependTo()是相互聯繫，且操作緊密的四個方法

所謂外部插入，就是把內容插入到指定jQUery對象相鄰元素內。與內部插入操作基本類似，

外部插入也包含四種方法。

after(content)：在每個匹配的元素之後插入內容。

before(content)：在每個匹配的元素之前插入內容。

insertAfter(content)：把所有匹配的元素插入到另一個指定的元素或元素集合的後面。

insertBefore(content)：把所有匹配的元素插入到另一個指定的元素或元素集合的前面。

22. 嵌套結構

wrap(html)：把所有匹配的元素分別用指定結構化標籤包裹起來。

wrap(element)：把所有匹配的元素分別用指定元素包裹起來。

wrapAll(html)：把所有匹配的元素用一個結構化標籤包裹起來。

wrapAll(element)：把所有匹配的元素用一個元素包裹起來。

wrapInner(html)：把每一個匹配的元素的子內容（包括文本節點）使用一個HTML結構包裹起來。

wrapInner(element)：把每一個匹配的元素的子內容（包括文本節點）使用元素包裹起來。

eg:

<ul>

</ul>

$("a").wrap(document.getElementsByTagName("li")[0]);

$("li").wrapAll(document.getElementsByTagName("ul")[0]);

$("li").wrapInner("<span></span>");

得到：

<ul>

</ul>

23. 替換結構

$("span").replaceWith("<div>盒子</div>");

</script>

最後，所得到的效果如下：

replaceAll(selector)方法與replaceWith(content)方法操作正好相反。例如，要實現上面的替

換效果，我們可以使用如下代碼：

$("<div>盒子</div>").replaceAll("span");

24. 刪除和克隆結構清空內容，複製內容，克隆內容

刪除結構也有兩種方法：一是使用empty()刪除匹配元素包含的所有子節點。例如，在下面示例中將刪除

div元素內所有子節點和文本，返回“<div></div><div></div>”兩個空標籤。

$("div").empty();

</script>

使用remove([expr])方法刪除匹配的元素，或者符合表達式的匹配元素。例如，在下面

示例中將刪除div元素及其包含的子節點，最後返回的是“<p>段落文本3</p>”。

$("div").remove();

</script>

clone(true)方法不僅能夠克隆元素，而且還可以克隆元素所定義的事件。例如，在上面示例

中如果爲div元素定義一個 onclick屬性事件，則使用clone(true)方法將會在克隆元素中也包含

屬性事件。

$("div").clone(true).appendTo("p");

</script>

克隆的結果爲：

25. CSS樣式

獲取css樣式：alert($("p").css("border"));

定義css樣式：css(name,value)方法：$("p").css("background","red");

或者：

$("p").css({

color:"blue",

"fontsize":"

14px",

"backgroundcolor":"

red"

});

大小：

height()：獲取第一個匹配元素當前計算的高度值（px）。

width()：獲取第一個匹配元素當前計算的寬度值（px）。

height(val)：爲每個匹配的元素設置CSS高度屬性值。如果沒有明確指定單位，默認使用px。

width(val)：爲每個匹配的元素設置CSS寬度屬性值。如果沒有明確指定單位，默認使用px。

26.綁定事件

bind()方法能夠爲每一個匹配元素的特定事件綁定一個事件處理器函數。

$("div#div6").bind("click",function(){

alert($(this).text());

});

</script>

在綁定過程中也可以爲事件處理函數綁定多個參數值，參數值以對象的形式進行傳遞，然

後在處理函數中可以把它作爲event.data屬性值傳遞給處理函數。

$("div").bind("click",{who:"zhu"},function(event){

alert(event.data.who);

});

</script>

綁定事件之後，也可以使用unbind([type],[data])方法刪除事件綁定，其中第一個參數表示

要刪除綁定的事件名，第二個參數表示刪除的附帶參數。

$("div").bind("click",{who:"zhu"},function(event){

alert(event.data.who);

});

$("div").unbind("click");

</script>

爲了簡化用戶交互操作，jQuery自定義了兩個事件：hover(over,out)和toggle(fn,fn)。hover()

能夠模仿懸停事件，即鼠標移到特定對象上以及移出該對象的方法。

$("p").hover(

function(){

$(this).css("color","red");

function(){

$(this).css("color","transparent");

}

);

<p id = "p3">clickme!</p>

$("#p3").toggle(

function(){

$(this).css("color","red");

function(){

$(this).css("color","transparent");

}

);

<html>

<title>JQuery Test</title>

<head>

$("document").ready(function(){

var span1 =document.getElementsByTagName("span")[1];

var span1 = $(span1);

span1.css("color","red");

var span2 =document.getElementsByTagName("span")[0];

var span2 = $(span2);//DOM to jquery

var span3 = $("span")[0];//jquery to DOM

span3.style.color = "blue";

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

span2.hide("slow");

});

var as = $("a").attr("href");

//alert(as);

$("a").attr("href","test.jsp");

//alert("End");

});

</script>

</head>

<body>

</select>

//alert($("select").text);//exception

//alert($("select").val());//2

</script>

<div><span>span[0] willdisappear!(blue style)</span></div>

<p><span>It should beRed!</span></p>

<button type="button">Clickme</button>

<ahref="RedirectFile.jsp">RedirectFile.jsp</a>

<ul>

<li>aaaaaaaaaaa</li>

<li>bbbbbbbbbbb</li>

<li>ccccccccccc</li>

</ul>

var span4 = $("span");

//alert(span4.size());

span4.each(function(n){

alert(n);

this.style.fontsize = (n+1)*12 +"px";

//$(this).css("fontsize",(n+1)*12+"px");

});

//alert($("#p1").text());//p1

//alert($("#p1").html());//會寫成p<span>1</span>

</script>

</body>

</html>

站內首發文章

Kelvin寫代碼

發佈了32 篇原創文章 · 獲贊 4 · 訪問量 4萬+

私信關注

idea使用docker構建Springboot服務swarm+overlay

Springboot+layui+代碼生成全套forked

typora+picgo+gitee一鍵搬家csdn

從0開始Powerdesign類圖

sql server 2005 用戶權限

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結