當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery操作css样式、属性、动画、节点

發布時間：2025/4/16 编程问答 16 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery操作css样式、属性、动画、节点小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

轉載于:https://www.cnblogs.com/cuilichao/p/9815888.html

總結

以上是生活随笔為你收集整理的jQuery操作css样式、属性、动画、节点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： js for循环与for in循环的区别
下一篇：非空约束对数据更新的影响