jquery入門
阿新 • • 發佈：2017-11-19
事件處理 ner 選擇器 class ive 不同的 事件操作 inpu adding
運用jQuery時，需要在頁面中引入jQuery文件
- jQuery的hello world
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>helloworld</title> <!-- 1. 在頁面中引入jQuery支持 --> <script src="js/jquery-1.12.4.js"></script> <style> #box{width: 200px;height: 200px;background: red;} </style> </head> <body> <button id="btn">點擊我試試</button> <div id="box"></div> <script> // jQuery代碼，寫在一對script標簽中 // 可以使用最簡潔的代碼，完成JS中復雜的功能！// $是jQuery的一個函數，表示 : jQuery() == $() // $("")是jQuery選擇器，參考了CSS選擇器 #btn->id選擇器 // $("#btn").click(fn)表示添加一個單擊事件處理函數 $("#btn").click(function() { // toggle()/slideToggle() jQuery內置動畫效果 $("#box").slideToggle(); }) </script> </body> </html>
- jquery 選擇器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <script src="js/jquery-1.12.4.js"></script> <script> /* HTML中的代碼是同步執行的：按照從上到下的順序解釋執行的 為了保證頁面中的標簽加載完成之後執行JQuery代碼 使用$(function() { ...代碼：就是頁面標簽加載完成執行的代碼.. }) */ $(function() { // 這裏寫的代碼，就是當頁面中的標簽全部加載完成執行的代碼；類似於window.onload // 標簽選擇器:$("標簽名稱") $("#btn_tag_selector").click(function() { // 標簽選擇器：選擇所有的div標簽，添加邊框 $("div").css({ "border":"solid 1px orange" }) }); $("#btn_id_selector").click(function() { // ID選擇器：語法$("#id值") $("#box").css({ "border":"solid 1px red" }) }); $("#btn_class_selector").click(function() { // class選擇器：語法：$(".class名稱") $(".item").css({ "border":"solid 1px blue", "background":"#ccc" }) }); $("#btn_child_selector").click(function() { // 層級選擇器，可以類似css語法一樣，使用樣式嵌套 // 子元素選擇器 $("#container > li").css({ "border":"solid 2px pink", "background":"#dfdfdf" }) }); $("#btn_contain_selector").click(function() { // 層級選擇器：包含選擇器 $("#container li").css({ "border":"solid 2px pink", "background":"#006699", "color":"#fff" }) }); $("#test").click(function() { $("#container a").css({ "color":"red", "text-decoration":"none" }) }); $("#btn_odd_selector").click(function() { $("li:odd").css({ "background":"orange" }) }) }) </script> </head> <body> <button id="btn_tag_selector">標簽選擇器</button> <button id="btn_id_selector">id選擇器</button> <button id="btn_class_selector">class選擇器</button> <button id="btn_child_selector">層級選擇器：子元素選擇器</button> <button id="btn_contain_selector">層級選擇器：包含選擇器</button> <button id="test">測試獲取標簽中包含的一個深層標簽超鏈接</button> <button id="btn_odd_selector">:odd</button> <hr> <div>這是一個單純的div標簽，沒有id和class屬性</div> <div id="box">這是一個div標簽，id屬性值為box</div> <div class="item">這是一個div標簽1，class屬性值為item</div> <div class="item">這是一個div標簽2，class屬性值為item</div> <ul id="container"> <li>這是一個ul中的li標簽</li> <li>這是一個ul中的li標簽</li> <li>這是一個ul中的li標簽</li> <li>這是一個ul中的li標簽</li> <ul> <li>這是ul中的ul裏面的li標簽</li> <li>這是ul中的ul裏面的li標簽</li> <li>這是ul中的ul裏面的li標簽<span>這是span標簽</span></li> <li>這是ul中的ul裏面的li標簽<a href="#">超鏈接</a></li> </ul> </ul> </body> </html>
- 動畫效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style> #box{width: 200px;height: 200px;background: orange;position:absolute;top:50px;left:0px;} </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function() { $("#btn_show").click(function() { $("#box").show(1000); }) $("#btn_hide").click(function() { $("#box").hide(1000); }) $("#btn_toggle").click(function() { $("#box").toggle(1000); }) $("#btn_slideDown").click(function() { $("#box").slideDown(1000); }) $("#btn_slideUp").click(function() { $("#box").slideUp(1000); }) $("#btn_slideToggle").click(function() { $("#box").slideToggle(1000); }) $("#btn_fadeIn").click(function() { $("#box").fadeIn(1000); }) $("#btn_fadeOut").click(function() { $("#box").fadeOut(1000); }) $("#btn_fadeToggle").click(function() { $("#box").fadeToggle(1000); }) $("#btn_fadeTo").click(function() { $("#box").fadeTo(1000, 0.5); }); $("#btn_animate").click(function() { $("#box").animate({left:"500px",top:"100px",width:"100px", height:"50px"},1000) .animate({top:"400px",left:"300px"}, 500) .animate({top:"200px", left:"100px"}, 1000) .animate({width:"200px",height:"100px"}, 400) .animate({width:"50px",height:"10px"}, 200) .animate({width:"300px",height:"200px"}, 500); }) }) </script> </head> <body> <button id="btn_show">顯示</button> <button id="btn_hide">隱藏</button> <button id="btn_toggle">顯示/隱藏 狀態切換</button> <button id="btn_slideDown">卷簾顯示</button> <button id="btn_slideUp">卷簾隱藏</button> <button id="btn_slideToggle">卷簾顯示/隱藏 狀態切換</button> <button id="btn_fadeIn">透明度顯示</button> <button id="btn_fadeOut">透明度隱藏</button> <button id="btn_fadeToggle">透明度顯示/隱藏 狀態切換</button> <button id="btn_fadeTo">切換到指定的透明度</button> <button id="btn_animate">自定義動畫</button> <div id="box"></div> </body> </html>
- 輪播圖
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style> *{margin:0px;padding:0px;} #bannel_box{margin:10px auto;padding:5px;border:solid 1px #8f8f8f;border-radius:8px;position:relative;width:800px;height:450px;} #bannel_box img{position:absolute;width:800px;vertical-align: bottom;border:none;border-radius:8px;display:none;} #bannel_box img:nth-child(1){display:block;} </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function() { var $index = 0;// 當前正在展示的圖片的下標 // 計時函數， 3S更換一次圖片 setInterval(function() { var $next = $index + 1;// 下一張要展示的圖片的下標 if($next >= 5) { $next = 0; } $("img").eq($index).fadeOut(1000);//隱藏當前圖片 $("img").eq($next).fadeIn(1000);// 顯示下一張圖片 $index ++; if($index >= 5) { $index = 0; } }, 3000); }) </script> </head> <body> <div id="bannel_box">      </div> </body> </html>
- 導航條菜單下拉框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style> *{margin:0;padding:0;} .nav{list-style:none;height:50px;background-color:#069;} .nav > li{float:left;height:50px;font-size:20px;color:#fff;width:100px;text-align:center;line-height:50px;} .nav > li > ul{list-style:none;width:120px;background:pink;display:none;} .nav > li > ul >li{height:50px;line-height:50px;color:#333;font-size:18px;width:120px;} </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function() { // 這裏面的代碼，是當頁面中的標簽加載完成後執行的 $("li").mouseenter(function() { // 在事件操作中，可以通過this來標簽當前事件觸發的元素 // console.log($(this).children()); // console.log($(this).children().last()); $(this).children().last().stop(true).slideDown("slow"); }); $("li").mouseleave(function() { $(this).children().last().stop(true).slideUp("slow"); }) }) </script> </head> <body> <ul class="nav"> <li><span>首頁</span> <ul> <li>首頁二級菜單</li> <li>首頁二級菜單</li> <li>首頁二級菜單</li> <li>首頁二級菜單</li> <li>首頁二級菜單</li> </ul> </li> <li><span>新聞</span> <ul> <li>新聞二級菜單</li> <li>新聞二級菜單</li> <li>新聞二級菜單</li> <li>新聞二級菜單</li> <li>新聞二級菜單</li> </ul> </li> <li><span>影視</span> <ul> <li>影視二級菜單</li> <li>影視二級菜單</li> <li>影視二級菜單</li> <li>影視二級菜單</li> <li>影視二級菜單</li> </ul> </li> <li><span>音樂</span> <ul> <li>音樂二級菜單</li> <li>音樂二級菜單</li> <li>音樂二級菜單</li> <li>音樂二級菜單</li> <li>音樂二級菜單</li> </ul> </li> <li><span>體育</span> <ul></ul> </li> <li><span>財經</span> <ul></ul> </li> <li><span>八卦</span> <ul></ul> </li> <li><span>美食</span> <ul></ul> </li> </ul> </body> </html>
- 圖片翻轉
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style> *{margin:0;padding:0;} #box{margin:50px auto;width:400px;height: 226px;padding:5px;border:solid 1px #cdcdcd;position:relative;} #box img{width: 400px;border-radius:8px;position:absolute;} #box img:nth-child(2){height:0;} </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function() { // 當頁面中所有標簽全部加載完成的時候，執行的代碼 $("#box").mouseenter(function() { var $that = $(this); // 隱藏第一張圖片 $that.children().first().animate({top:"113px", height:"0px"}, 1000, function() { // 顯示第二章圖片 $that.children().last().css({top:"113px"}).animate({top:"5px", height:"226px"}, 1000); }); }); $("#box").mouseleave(function() { var $that = $(this); // 隱藏第二張圖片 $that.children().last().animate({top:"113px", height:"0px"}, 1000, function() { // 顯示第一章圖片 $that.children().first().css({top:"113px"}).animate({top:"5px", height:"226px"}, 1000); }); }); }) </script> </head> <body> <div id="box">   </div> </body> </html>
- jquery的DOM操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>DOM操作</title> <!-- 使用JQuery改造瀑布流！ --> </head> <body> <p> JQuery 的DOM操作 <ul> <li>1. DOM操作選擇標簽</li> <li>2. DOM操作處理標簽數據</li> </ul> </p> <p> JavaScript對象：就是標簽本身，也稱為DOM對象<br /> var _box = document.getElementById("box") _box >>>> <div id="box"></div> jQuery對象：是DOM對象的數組 var $box = $("#box") $box >>>> [<div id="box"></div>] </p> <p> JQuery DOM操作選擇標簽 通過函數操作，替代了選擇器操作來選中標簽 > 選擇器：括號中是字符串 > 函數：括號中可以有變量 <ul> <li>選擇器.eq(num)：用於選中指定下標的jQuery對象</li> <li>選擇器.gt(num)：用於選中下標大於指定下標的所有jQuery對象</li> <li>選擇器.lt(num)：用於選中下標小於指定下標的所有jQuery對象</li> <li>選擇所有的子元素: 選擇器.children()</li> <li>選擇所有的指定的子元素: 選擇器.children("ul")</li> <li>選擇第一個子元素：選擇器.first()</li> <li>選擇最後一個子元素：選擇器.last()</li> <li>判斷標簽是否包含某個class名稱：選擇器.hasClass("box")</li> <li>二次篩選：選擇器.filter(選擇器)；從第一個選擇器選中的標簽中繼續選擇滿足第二個選擇器的標簽</li> <li>二次篩選：選擇器.has(子標簽選擇器)，選擇所有包含指定子元素的父標簽</li> <li>二次篩選：父選擇器.find(子選擇器)，從父選擇器選中的標簽中的子元素裏面，查詢符合子選擇器的標簽元素</li> <li>next:選擇下一個同級元素</li> <li>prev:選擇上一個同級元素</li> <li>sibings:選擇所有的同級元素</li> </ul> </p> <p> jQuery DOM操作，操作標簽數據 內容 屬性 樣式 標簽 </p> <p> 內容 常規開始標簽和結束標簽中間的內容操作 var $boxValue = $("#box").text(); $("#box").text("添加的內容") 表單元素的數據 var $name = $("#username").val(); </p> <p> 屬性操作： var $id = $("#box").attr("id") $("#box").attr("id", "container") </p> <p> 樣式操作： 簡潔操作 $("#box").css("border", "solid 1px red"); 標準操作 $("#box").css({ "border":"solid 1px red", "background":"#efefef" }) 註意：樣式盡量寫在css中，通過標簽的class屬性來控制使用不同的樣式 如果是動態遞增變化的樣式，可以通過JS代碼進行處理。 </p> <p> 標簽的操作： 代碼中創建一個標簽 var $div = $("<div>"); 常見操作函數： append(); appendTo(); prepend(); prependTo(); </p> <div id="box"></div> <input type="text" id="username"> </body> </html>
jquery入門