css樣式操作：
1、設置單個樣式: css(name, value)
2、設置多個樣式:css(obj)
3、獲取樣式:css(name)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>高圓圓</li> <li>周二珂</li> <li>馮提莫</li> <li>鄭爽</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $(function () { //css(name, value) //修改單個樣式 //name:樣式名 value:樣式值 /* $("li") .css("backgroundColor", "pink") .css("color", "red") .css("fontSize", "32px"); */ //css(obj) //修改多個樣式 /* $("li").css({ backgroundColor:"pink", color: "red", fontSize:"32px", border: "1px solid black" }); */ //獲取樣式 //css(name) //name:想要獲取的樣式 $("li").eq(0).css("fontSize", "20px"); $("li").eq(1).css("fontSize", "21px"); $("li").eq(2).css("fontSize", "22px"); $("li").eq(3).css("fontSize", "23px"); //A:20 b:21 c:22 d:23 e:16 f:[20, 21, 22, 23] //隱式迭代： // 設置操作的時候：會給jq內部的所有對象都設置上相同的值。 // 獲取的時候：只會返回第一個元素對應的值。 console.log($("li").css("fontSize"));//16px }); </script> </body> </html>
class樣式操作：
1、添加類
addClass（name）
2、移除類
removeClass(name)
3、判斷類
hasClass(name)
4、切換
toggleClass(name)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> li.basic { background-color: pink; font-size: 32px; color: red; } .bigger { font-size: 40px; } </style> </head> <body> <input type="button" value="添加basic類" > <input type="button" value="添加bigger類"> <input type="button" value="移除bigger類"> <input type="button" value="判斷bigger類"> <input type="button" value="切換類"> <ul> <li class="aa bb cc dd">1</li> <li class="aa bb cc dd">2</li> <li class="aa bb cc dd">3</li> <li class="aa bb cc dd">4</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("input").eq(0).click(function () { // 添加一個類 $("li").addClass("basic"); }); $("input").eq(1).click(function () { $("li").addClass("bigger"); }); $("input").eq(2).click(function () { //移除一個類 $("li").removeClass("bigger"); }); //判斷類 $("input").eq(3).click(function () { //移除一個類 console.log($("li").hasClass("bigger"));; }); $("input").eq(4).click(function () { //判斷li有沒有basic類，如果有，就移除他，如果沒有，添加他 //toggle $("li").toggleClass("basic"); }); }); </script> </body> </html>
操作屬性
1、attr
設置單個屬性
設置多個屬性
獲取屬性
2、prop
對於布爾類型的屬性：disabled，selected，checked，只能用prop
3、移除某個屬性
removeAttr(name)
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--樣式：在style里面寫的，用css來操作。--> <!--屬性：在里面里面寫的，用attr方法操作。--> <img src="04.gif" alt="突破了" title="對對對"> <script src="jquery-1.12.4.js"></script> <script> $(function () { //用法和css一樣 //設置單個屬性 //attr(name, value) //$("img").attr("alt", "圖破了"); //$("img").attr("title", "錯錯錯錯"); //設置多個屬性 /*$("img").attr({ alt:"圖破了", title:"錯錯錯", aa:"bb" })*/ console.log($("img").attr("alt")); }); </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="選中"> <input type="button" value="不選中"> <input type="checkbox" id="ck"> <script src="jquery-1.12.4.js"></script> <script> //對於布爾類型的屬性，不要attr方法，應該用prop方法 prop用法跟attr方法一樣。 $(function () { $("input").eq(0).click(function () { $("#ck").prop("checked", true); }); $("input").eq(1).click(function () { $("#ck").prop("checked", false); }); }); </script> </body> </html>
動畫
1、三組基本動畫
show/hide slideDown/slideUp/slideToggle fadeIn/fadeOut/fadeToggle
2、自定義動畫
animate(prop, [speed], [swing/linear], [callback])
3、停止動畫
stop
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; height: 400px; background-color: pink; display: none; } </style> </head> <body> <input type="button" value="顯示"> <input type="button" value="隱藏"> <div></div> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("input").eq(0).click(function () { //show不傳參數，沒有動畫效果 //$("div").show(); //show(speed) //speed:動畫的持續時間 可以是毫秒值 還可以是固定字符串 //fast:200ms normal:400ms slow:600 //$("div").show("ddd"); // show([speed], [callback]) $("div").show(1000, function () { console.log("哈哈，動畫執行完成啦"); }) }); $("input").eq(1).click(function () { $("div").hide(); }) }); </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; background-color: pink; position: absolute; } #box2 { background-color: blue; margin-top: 150px; } #box3 { background-color: yellowgreen; margin-top: 300px; } </style> </head> <body> <input type="button" value="開始"> <input type="button" value="結束"> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("input").eq(0).click(function () { //第一個參數：對象，里面可以傳需要動畫的樣式 //第二個參數：speed 動畫的執行時間 //第三個參數：動畫的執行效果 //第四個參數：回調函數 $("#box1").animate({left:800}, 8000); //swing:秋千 搖擺 $("#box2").animate({left:800}, 8000, "swing"); //linear:線性 勻速 $("#box3").animate({left:800}, 8000, "linear", function () { console.log("hahaha"); }); }) }); </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; background-color: pink; position: absolute; } </style> </head> <body> <input type="button" value="按鈕" id="btn"> <div></div> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("#btn").click(function () { //把這些動畫存儲到一個動畫隊列里面 $("div").animate({left:800}) .animate({top:400}) .animate({width:300,height:300}) .animate({top:0}) .animate({left:0}) .animate({width:100,height:100}) }) }); </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; height: 400px; background-color: pink; display: none; } </style> </head> <body> <input type="button" value="開始"> <input type="button" value="結束"> <div></div> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("input").eq(0).click(function () { $("div").slideDown(4000).slideUp(4000); }); $("input").eq(1).click(function () { //stop:停止當前正在執行的動畫 //clearQueue:是否清除動畫隊列 true false //jumpToEnd:是否跳轉到當前動畫的最終效果 true false //.stop().animate(); $("div").stop(true, true); }) }); </script> </body> </html>
操作節點：
1、創建節點：$("<span></span>")
2、添加節點: append appendTo prepend prependTo after before
3、清空內容: empty
4、刪除節點: remove
5、克隆節點: clone
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; height: 400px; background-color: pink; } </style> </head> <body> <!--<a href="http://web.itcast.cn" target="_blank">傳智大前端</a>--> <div id="box"></div> <script src="jquery-1.12.4.js"></script> <script> $(function () { // var box = document.getElementById("box"); // // var a = document.createElement("a"); // box.appendChild(a); // a.setAttribute("href", "http://web.itcast.cn"); // a.setAttribute("target", "_blank"); // a.innerHTML = "傳智大前端"; $("#box").append('<a href="http://web.itcast.cn" target="_blank">傳智大前端</a>'); }); </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; height: 400px; background-color: pink; } </style> </head> <body> <div id="box"> 我是內容 </div> <p>我是外面的p元素</p> <script src="jquery-1.12.4.js"></script> <script> $(function () { // //創建jq對象 // var $li = $('<a href="http://web.itcast.cn" target="_blank">傳智大前端</a>'); // console.log($li); // // // $("div").append('<a href="http://web.itcast.cn" target="_blank">傳智大前端</a>'); //添加到子元素的最后面 //$("div").append($("p")); //$("p").appendTo($("div")); //$("div").prepend($("p")); //$("p").prependTo($("div")); // $('div').after($("p")); // $('div').before($("p")); }); </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; height: 400px; background-color: pink; } </style> </head> <body> <div> <p>1111</p> <p>2222</p> </div> <p class='des'>我是外面的p元素</p> <script src="jquery-1.12.4.js"></script> <script> $(function () { $(".des").click(function () { alert("hehe"); }) //可以清空一個元素的內容 //內存泄露： //$("div").html(""); //清理門戶（） //$("div").empty(); // //$("div").remove(); //false:不傳參數也是深度復制,不會復制事件 //true:也是深復制，會復制事件 $(".des").clone(true).appendTo("div"); }); </script> </body> </html>