jquery復習總結一
目錄
jquery和html的整合
jquery入門
獲取一個jquery對象
dom對象和jquery對象之間的轉換
頁面加載:
派發事件:
案例：
jquery中效果:
隱藏或展示
滑入或滑出
淡入或淡出
彈出廣告案例
案例1-步驟分析（定時器）
選擇器總結:
基本選擇器
層次選擇器
基本過濾選擇器:
內容過濾:
可見過濾:
屬性過濾器:
表單過濾:
案例2-隔行換色
屬性和css操作總結:
對屬性的操作:
對css操作:操作元素的style屬性
案例3-全選或者全不選(prop操作屬性)
案例4-省市聯動
技術:
遍歷數組
設置或者獲取value屬性
設置獲取獲取標簽體的內容
創建一個元素:
案例代碼實現
文檔操作:
內部插入
外部插入
刪除
案例5-左右移動
步驟分析:
1.確定事件
2.編寫函數:
技術分析:
案例代碼實現
jquery和html的整合
jquery是單獨的js文件
通過script標簽的src屬性導入即可
<script src="../js/jquery-1.11.0.min.js"></script>
jquery入門
獲取一個jquery對象
$("選擇器") 或者 jQuery("選擇器")
<script src="../js/jquery-1.11.0.min.js"></ <body> <input type="text" id="username" value="jack"/> </body> <script> var $username=$("#username"); alert($username.val()); </script> </html> |
dom對象和jquery對象之間的轉換
dom對象===>jquery對象
$(dom對象)
jquery對象===>dom對象
方式1:
jquery對象[index]
方式2:
jquery對象.get(index)
<script src <body> <input type="text" id="username" value="jack"/> </body> <script> /* var obj=document.getElementById("username"); var $user=$(obj); alert($user.val()); */ //alert($user.value); var $u=$("#username"); //var obj=$u.get(0); var obj=$u[0]; alert(obj.value); </script> </html>
|
頁面加載:
js:
window.onload=function(){}//在一個頁面中只能使用一次
jquery 在一個頁面中可以使用多次
方式1:
$(function(){...})
方式2:
$(document).ready(function(){});
派發事件:
$("選擇器").click(function(){...});
等價於 原生js中
dom對象.onclick=function(){....}
掌握事件:
focus
blur
submit
change
Click
<html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(function(){ $("#bId").click(function(){ alert("123"); }); }); </script> </head> <body> <input type="button" id="bId" value="點擊查看" /> </body> </html> |
案例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常見事件</title> <style type="text/css"> #e02{ border: 1px solid #000000; height: 200px; width: 200px; } </style> <script src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#e01").blur(function(){ $("#textMsg").html("文本框失去焦點：blur"); }).focus(function(){ $("#textMsg").html("文本框獲得焦點：focus"); }).keydown(function(){ $("#textMsg").append("鍵盤按下：keydown"); }).keypress(function(event){ $("#textMsg").append("鍵盤按：keypress"); }).keyup(function(){ $("#textMsg").append("鍵盤彈起：keyup"); }); var i = 0; $("#e02").mouseover(function(){ $("#divMsg").html("鼠標移上：mouseover"); }).mousemove(function(){ //$("#divMsg").html("鼠標移動：mousemove , " + i++ ); }).mouseout(function(){ $("#divMsg").html("鼠標移出：mouseout"); }).mousedown(function(){ $("#divMsg").html("鼠標按下：mousedown"); }).mouseup(function(){ $("#divMsg").html("鼠標彈起：mouseup"); }); $("#e03").click(function(){ $("#buttonMsg").html("單擊：click"); }).dblclick(function(){ $("#buttonMsg").html("雙擊：dblclick"); }); }); </script> </head> <body> <input id="e01" type="text" /><span id="textMsg"></span> <br/> <hr/> <div id="e02" ></div><span id="divMsg"></span> <br/> <hr/> <input id="e03" type="button" value="可以點擊"/><span id="buttonMsg"></span> <br/> </body> </html> |
jquery中效果:
隱藏或展示
show(毫秒數) hide(毫秒數)
滑入或滑出
slideDown(毫秒數):向下滑入
slideUp(毫秒數):向上滑出
淡入或淡出
fadeIn(int):淡入
fadeOut(int):淡出
<script src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(function(){ $("#b1").click(function(){ //$("#b1Div").hide(1000); $("#b1Div").toggle(1000); }); $("#b2").click(function(){ //$("#b2Div").slideUp(2000); $("#b2Div").slideToggle(2000); }); $("#b3").click(function(){ $("#b3Div").fadeOut(1000); }); }) </script> </head> <body> <input type="button" id="b1" value="顯示/隱藏 b1Div" /> <div id="b1Div"></div> <br/> <input type="button" id="b2" value="滑出/滑入b2Div"/> <div id="b2Div"></div> <br/> <input type="button" id="b3" value="淡出/淡入b3Div" /> <div id="b3Div"></div> </body> |
彈出廣告案例
案例1-步驟分析（定時器）
1.頁面加載成功之後$(function(){...}) 開始一個定時器 setTimeout();
2.編寫展示廣告方法
獲取div,然後調用效果方法
設置另一個定時器 隱藏
3.編寫隱藏廣告的方法
獲取div,然後調用效果方法
<script src="../js/jquery-1.11.0.min.js"></script> <script> $(function(){ setTimeout(showAd,2000); }); function showAd(){ //$("#ad").show(1000); $("#ad").slideDown(1000); setTimeout("hideAd()",3000); } function hideAd(){ //$("#ad").hide(1000); $("#ad").slideUp(1000); } </script> </head> <body> <div id="ad" style="width:100%;display: none;"> <img src="../img/ad_.jpg" width="100%" /> </div> |
本文出自 “秦斌的博客” 博客，謝絕轉載！
jquery復習總結一