jquery複習總結二

科技小能手發表於2017-11-12
jQuery

目錄

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”>

<html xmlns=“http://www.w3.org/1999/xhtml”>

<head>

 <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />

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

 <!–   引入jQuery –> 

 <script src=“../js/jquery-1.11.0.min.js”></script>

 <script src=“../js/assist.js”></script>

 <link rel=“stylesheet” type=“text/css” href=“../css/style.css” /> 

 <script type=“text/javascript”>

 

 $(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>

 

 <!– 控制按鈕 –>

  <input type=“button” value=“選擇 id為 one 的元素.” id=“btn1”/>  

  <input type=“button” value=“選擇 class 為 mini 的所有元素.” id=“btn2”/>

  <input type=“button” value=“選擇 元素名是 div 的所有元素.” id=“btn3”/>

  <input type=“button” value=“選擇 所有的元素.” id=“btn4”/>

  <input type=“button” value=“選擇 所有的span元素和id為two的元素.” id=“btn5”/>

 

  <br /><br />

 

   <!– 測試的元素 –>

  <div class=“one” id=“one” >

 id為one,class為one的div

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

  </div>

 

    <div class=“one”  id=“two” title=“test” >

 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=“one”>

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

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

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

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

  </div>

 

 

 

  <div class=“one”>

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

      <div class=“mini”>class為mini</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”>

<html xmlns=“http://www.w3.org/1999/xhtml”>

<head>

 <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />

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

 <!–   引入jQuery –> 

 <script src=“../js/jquery-1.11.0.min.js”></script>

 <script src=“../js/assist.js”></script>

 <link rel=“stylesheet” type=“text/css” href=“../css/style.css” /> 

 <script type=“text/javascript”>

 $(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=”在body內,選擇子元素是div的。” id=”btn2″/>

   <input type=”button” value=”選擇 id為one 的下一個div元素.” id=”btn3″/>

   <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 />

 

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

  <input type=“button” value=“在body內,選擇子元素是div的。” id=“btn2”/>

  <input type=“button” value=“選擇 id為one 的下一個div元素.” id=“btn3”/>

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

  

  <br />

  <br />

  

   <!– 測試的元素 –>

  <div class=“one” id=“one” >

 id為one,class為one的div

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

  </div>

 

    <div class=“one”  id=“two” title=“test” >

 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=“one”>

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

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

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

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

  </div>

 

  

 

  <div class=“one”>

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

      <div class=“mini”>class為mini</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(“選擇器“):包含指定選擇器的元素

<script type=“text/javascript”>

 $(function(){

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

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

 });

 });

 </script>

 

可見過濾:

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

:visible

<script type=“text/javascript”>

 $(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

 

<script type=“text/javascript”>

 $(function(){

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

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

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

 });

 });

 </script>

  

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

案例2-隔行換色

技術分析:

1.頁面載入成功

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

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

<script>

$(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(“指定的樣式值“);

<script type=“text/javascript”>

$(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>

<style type=“text/css”>

.textClass {

background-color: #ff0;

}

</style>

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

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

方式1:獲取

css(“屬性名“)

方式2:設定一個屬性

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

方式3:設定多個

css({

“屬性1″:”值1″,

“屬性2″:”值2″

});

獲取元素的尺寸:

width()

height()

 

<script type=“text/javascript”>

//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>

<meta charset=“UTF-8”>

<title></title>

</head>

<script src=“../js/jquery-1.11.0.min.js”></script>

 <script type=“text/javascript”>

 $(function(){

 

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

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

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

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

 });

 });

</script>

<body>

<table id=“tab1” border=“1” width=“800” align=“center” >

<tr>

<td colspan=“5”><input type=“button” value=“新增”/> <input type=“button” value=“刪除”></td>

</tr>

<tr>

<th><input type=“checkbox” id=“selectAll”></th>

<th>分類ID</th>

<th>分類名稱</th>

<th>分類描述</th>

<th>操作</th>

</tr>

<tr>

<td><input type=“checkbox” class=“itemSelect”></td>

<td>1</td>

<td>手機數碼</td>

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

<td><a href=“”>修改</a>|<a href=“”>刪除</a></td>

</tr>

<tr>

<td><input type=“checkbox” class=“itemSelect”></td>

<td>2</td>

<td>電腦辦公</td>

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

<td><a href=“”>修改</a>|<a href=“”>刪除</a></td>

</tr>

<tr>

<td><input type=“checkbox” class=“itemSelect”></td>

<td>3</td>

<td>鞋靴箱包</td>

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

<td><a href=“”>修改</a>|<a href=“”>刪除</a></td>

</tr>

<tr>

<td><input type=“checkbox” class=“itemSelect”></td>

<td>4</td>

<td>家居飾品</td>

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

<td><a href=“”>修改</a>|<a href=“”>刪除</a></td>

</tr>

</table>

</body>

</html>



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


相關文章