jquery和html的整合

jquery入門

獲取一個jquery物件

dom物件和jquery物件之間的轉換

頁面載入:

派發事件:

案例：

jquery中效果:

隱藏或展示

滑入或滑出

淡入或淡出

彈出廣告案例

案例1-步驟分析（定時器）

選擇器總結:

基本選擇器

層次選擇器

基本過濾選擇器:

內容過濾:

可見過濾:

屬性過濾器:

表單過濾:

案例2-隔行換色

屬性和css操作總結:

對屬性的操作:

對css操作:操作元素的style屬性

案例3-全選或者全不選(prop操作屬性)

案例4-省市聯動

技術:

遍歷陣列

設定或者獲取value屬性

設定獲取獲取標籤體的內容

建立一個元素:

案例程式碼實現

文件操作:

內部插入

外部插入

刪除

案例5-左右移動

步驟分析:

1.確定事件

2.編寫函式:

技術分析:

案例程式碼實現

選擇器總結:

基本選擇器

$(“#id值“) $(“.class值“) $(“標籤名“)

瞭解:$(“*”)

理解:獲取多個選擇器用逗號隔開

$(“#id值,.class值“)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<head>

<title>01-基本選擇器.html</title>

<!– 引入jQuery –>

$(function(){

$(“#btn1”).click(function(){

$(“#one”).css(“background-color”,“#ff0”);

});

$(“#btn2”).click(function(){

$(“.mini”).css(“background-color”,“#ff0”);

});

$(“#btn3”).click(function(){

$(“div”).css(“background-color”,“#ff0”);

});

$(“#btn4”).click(function(){

$(“*”).css(“background-color”,“#ff0”);

});

$(“#btn5”).click(function(){

$(“span,#two”).css(“background-color”,“#ff0”);

});

</script>

</head>

<body>

<button id=“reset”>手動重置頁面元素</button>

<input type=“checkbox” id=“isreset” checked=“checked”/><label for=“isreset”>點選下列按鈕時先自動重置頁面</label><br /><br />

<h3>基本選擇器.</h3>

<!– 控制按鈕 –>

<!– 測試的元素 –>

id為one,class為one的div

<div class=“mini”>class為mini</div>

</div>

id為two,class為one,title為test的div.

<div class=“mini” title=“other”>class為mini,title為other</div>

<div class=“mini” title=“test”>class為mini,title為test</div>

</div>

<div class=“mini”>class為mini</div>

</div>

<div class=“mini”>class為mini</div>

<div class=“mini” title=“tesst”>class為mini,title為tesst</div>

</div>

<div style=”display:none;” class=“none”>style的display為”none”的div</div>

<div class=“hide”>class為”hide”的div</div>

<div>

包含input的type為”hidden”的div<input type=“hidden” size=“8”/>

</div>

<span id=“mover”>正在執行動畫的span元素.</span>

</body>

</html>

層次選擇器

a b:a的所有b後代

a>b:a的所有b孩子

a+b:a的下一個兄弟(大弟弟)

a~b:a的所有弟弟

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<head>

<title>02-層次選擇器.html</title>

<!– 引入jQuery –>

$(function(){

$(“#btn1”).click(function(){

$(“body div”).css(“background-color”,“#f0f”);

});

$(“#btn2”).click(function(){

$(“body>div”).css(“background-color”,“#f0f”);

});

$(“#btn3”).click(function(){

$(“#one+div”).css(“background-color”,“#f0f”);

});

$(“#btn4”).click(function(){

$(“#two~div”).css(“background-color”,“#f0f”);

});

/* <input type=”button” value=”選擇 body內的所有div元素.” id=”btn1″/>

<input type=”button” value=”選擇 id為two的元素後面的所有div兄弟元素.” id=”btn4″/> */

</script>

</head>

<body>

<h3>層次選擇器.</h3>

<button id=“reset”>手動重置頁面元素</button>

<input type=“checkbox” id=“isreset” checked=“checked”/><label for=“isreset”>點選下列按鈕時先自動重置頁面</label><br /><br />

<br />

<!– 測試的元素 –>

id為one,class為one的div

<div class=“mini”>class為mini</div>

</div>

id為two,class為one,title為test的div.

<div class=“mini” title=“other”>class為mini,title為other</div>

<div class=“mini” title=“test”>class為mini,title為test</div>

</div>

<div class=“mini”>class為mini</div>

</div>

<div class=“mini”>class為mini</div>

<div class=“mini” title=“tesst”>class為mini,title為tesst</div>

</div>

<div style=”display:none;” class=“none”>style的display為”none”的div</div>

<div class=“hide”>class為”hide”的div</div>

<div>

包含input的type為”hidden”的div<input type=“hidden” size=“8”/>

</div>

<span id=“mover”>正在執行動畫的span元素.</span>

</body>

</html>

基本過濾選擇器:

:frist 第一個

:last 最後一個

:odd 索引奇數

:even 索引偶數

:eq(index) 指定索引

:gt(index) >

:lt(index) <

內容過濾:

:has(“選擇器“):包含指定選擇器的元素

$(function(){

$(“#btn1”).click(function(){

$(“div:has(`.mini`)”).css(“background-color”,“#0ff”);

});

</script>

可見過濾:

:hidden 在頁面不展示元素一般指 input type=”hidden” 和樣式中display:none

:visible

$(function(){

$(“#b1”).click(function(){

$(“div:visible”).css(“background-color”,“#0ff”);

});

$(“#b2”).click(function(){

$(“div:hidden”).css(“background-color”,“#0ff”).show(1000);

});

</script>

屬性過濾器:

[屬性名]

[屬性名=”值“]

表單過濾:

:input 所有的表單子標籤 input select textarea button

//input

$(function(){

$(“#btn1”).click(function(){

//alert($(“#form1 :input”).size());

alert($(“#form1 :input”).length());

});

</script>

////////////////////////

案例2-隔行換色

技術分析:

1.頁面載入成功

2.獲取所有的奇數行新增一個css

3.獲取所有的偶數行新增一個css

$(function(){

/* $(“tr:odd”).css(“background-color”,”#0ff”);

$(“tr:even”).css(“background-color”,”#f0f”); */

$(“tr:gt(0):odd”).css(“background-color”,“#0ff”);

//tr:gt(0):選擇索引值大於0的tr元素

$(“tr:gt(0):even”).css(“background-color”,“#f0f”);

});

</script>

屬性和css操作總結:

對屬性的操作:

attr():設定或者獲取元素的屬性

方式1:獲取

attr(“屬性名稱“)

方式2:設定一個屬性

attr(“屬性名稱“,”值“);

方式3:設定多個屬性 json

attr({

“屬性1″:”值1″,

“屬性2″:”值2″

})

removeAttr(“屬性名稱“):移除指定屬性

//新增class屬性的時候

//attr(“class”,”值“);

addClass(“指定的樣式值“); 相當於 attr(“class”,”指定的樣式值“);

removeClass(“指定的樣式值“);

$(document).ready(function(){

//1.1給username新增title屬性

var $username=$(“[name=`username`]”);

$username.attr(“title”,“姓名”);

//1.2獲取username的title屬性

alert($username.attr(“title”));

//1.3給username新增value和class屬性

$username.attr({

“value”:“許多多”,

“class”:“textClass”

});

//1.4刪除username的class屬性

$username.removeAttr(“class”);

//2.1給username新增一個名為textClass的樣式

$username.addClass(“textClass”);

//2.2刪除username的名為textClass的樣式

$username.removeClass(“textClass”);

});

</script>

.textClass {

background-color: #ff0;

}

</style>

對css操作:操作元素的style屬性

css():獲取或者設定css樣式

方式1:獲取

css(“屬性名“)

方式2:設定一個屬性

css(“屬性名“,”值“)

方式3:設定多個

css({

“屬性1″:”值1″,

“屬性2″:”值2″

});

獲取元素的尺寸:

width()

height()

//4.1 給div新增邊框樣式

var $div=$(“div”);

$div.css(“border”,“1px solid red”);

//4.2 獲取div的表框樣式

//alert($div.css(“border”));

//4.3 給div新增多種樣式

$div.css({

“width”:“100px”,

“height”:“100px”,

“background-color”:“#0ff”

});

//5 獲取div的位置

alert($div.offset().left());

//6 獲取div的高和寬

Alert($div.width());

});

</script>

案例3-全選或者全不選(prop操作屬性)

需求:

就是將內容中核取方塊的選中狀態和最上面的核取方塊狀態保持一致

步驟分析:

1.確定事件核取方塊的單擊事件

2.函式中

a.獲取該核取方塊的選中狀態 attr(獲取不了checked屬性)|prop

b.獲取所有的核取方塊修改他們的狀態

注意:

若jquery版本>1.6 統一使用 prop操作元素的屬性

<!DOCTYPE html>

<html>

<head>

</head>

$(function(){

$(“#selectAll”).click(function(){

//獲取當前元素物件：this獲取的是當前dom物件

//alert($(this).prop(“checked”));

$(“.itemSelect”).prop(“checked”,$(this).prop(“checked”));

});

</script>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>手機數碼類商品</td>

</tr>

<tr>

<td>電腦辦公類商品</td>

</tr>

<tr>

<td>鞋靴箱包類商品</td>

</tr>

<tr>

<td>家居飾品類商品</td>

</tr>

</table>

</body>

</html>

本文轉自叫我北北 51CTO部落格，原文連結:http://blog.51cto.com/qinbin/1949982

jquery複習總結二

選擇器總結:

基本選擇器

層次選擇器

基本過濾選擇器:

內容過濾:

可見過濾:

屬性過濾器:

表單過濾:

案例2-隔行換色

屬性和css操作總結:

對屬性的操作:

對css操作:操作元素的style屬性

案例3-全選或者全不選(prop操作屬性)

相關文章