jQuery操作css样式、属性、动画、节点
生活随笔
收集整理的這篇文章主要介紹了
jQuery操作css样式、属性、动画、节点
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
css樣式操作：
1、設(shè)置單個樣式: css(name, value)
2、設(shè)置多個樣式: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]//隱式迭代：// 設(shè)置操作的時候：會給jq內(nèi)部的所有對象都設(shè)置上相同的值。// 獲取的時候：只會返回第一個元素對應(yīng)的值。 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 () {//判斷l(xiāng)i有沒有basic類，如果有，就移除他，如果沒有，添加他//toggle $("li").toggleClass("basic");});}); </script> </body> </html>?
操作屬性
1、attr
設(shè)置單個屬性
設(shè)置多個屬性
獲取屬性
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一樣//設(shè)置單個屬性//attr(name, value)//$("img").attr("alt", "圖破了");//$("img").attr("title", "錯錯錯錯");//設(shè)置多個屬性/*$("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方法，應(yīng)該用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不傳參數(shù)，沒有動畫效果//$("div").show();//show(speed)//speed:動畫的持續(xù)時間 可以是毫秒值 還可以是固定字符串//fast:200ms normal:400ms slow:600//$("div").show("ddd");// show([speed], [callback]) $("div").show(1000, function () {console.log("哈哈，動畫執(zhí)行完成啦");})});$("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="結(jié)束"> <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 () {//第一個參數(shù)：對象，里面可以傳需要動畫的樣式//第二個參數(shù)：speed 動畫的執(zhí)行時間//第三個參數(shù)：動畫的執(zhí)行效果//第四個參數(shù)：回調(diào)函數(shù) $("#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="結(jié)束"> <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:停止當(dāng)前正在執(zhí)行的動畫//clearQueue:是否清除動畫隊列 true false//jumpToEnd:是否跳轉(zhuǎn)到當(dāng)前動畫的最終效果 true false//.stop().animate(); $("div").stop(true, true);})}); </script> </body> </html>?
操作節(jié)點：
1、創(chuàng)建節(jié)點：$("<span></span>")
2、添加節(jié)點: append appendTo prepend prependTo after before
3、清空內(nèi)容: empty
4、刪除節(jié)點: remove
5、克隆節(jié)點: 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">我是內(nèi)容 </div><p>我是外面的p元素</p><script src="jquery-1.12.4.js"></script> <script>$(function () {// //創(chuàng)建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");})//可以清空一個元素的內(nèi)容//內(nèi)存泄露：//$("div").html("");//清理門戶（）//$("div").empty();// //$("div").remove();//false:不傳參數(shù)也是深度復(fù)制,不會復(fù)制事件//true:也是深復(fù)制，會復(fù)制事件 $(".des").clone(true).appendTo("div");}); </script> </body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/cuilichao/p/9815888.html
總結(jié)
以上是生活随笔為你收集整理的jQuery操作css样式、属性、动画、节点的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js for循环与for in循环的区别
- 下一篇： 非空约束对数据更新的影响