電腦手機(jī)網(wǎng)站制作網(wǎng)站免費(fèi)優(yōu)化
文章目錄
- 前言
- 一、鏈?zhǔn)骄幊?/li>
- 二、修改css
- 2.1 獲取css的值
- 2.2 設(shè)置單個(gè)css屬性
- 2.3 設(shè)置類(lèi)樣式
- 添加類(lèi)
- 移除類(lèi)
- 切換類(lèi)
- 三、類(lèi)操作與className的區(qū)別
- 總結(jié)
前言
jQuery是一個(gè)流行的JavaScript庫(kù)，廣泛用于簡(jiǎn)化DOM操作和處理事件。在jQuery中，鏈?zhǔn)骄幊淌且环N強(qiáng)大的技術(shù)，允許在同一行上執(zhí)行多個(gè)操作。本文將介紹jQuery中的鏈?zhǔn)骄幊?、修改CSS、類(lèi)操作以及className的區(qū)別。
一、鏈?zhǔn)骄幊?/h2>
鏈?zhǔn)骄幊淌莏Query的一項(xiàng)強(qiáng)大功能，允許在單個(gè)語(yǔ)句中執(zhí)行多個(gè)操作。通過(guò)在每個(gè)操作之后返回jQuery對(duì)象，可以將多個(gè)方法鏈接在一起。例如：
// 鏈?zhǔn)骄幊淌纠?$("p").hide().addClass("myClass").slideDown();
在上面的例子中，hide()方法隱藏<p>元素，然后addClass(“myClass”)方法添加類(lèi)，最后slideDown()方法顯示元素。這使得代碼更緊湊和可讀。
簡(jiǎn)而言之就是把幾行的東西合并成一行了
二、修改css
2.1 獲取css的值
我們可以使用下面這個(gè)語(yǔ)句獲取css的屬性值
$('選擇器').css('你要獲取的屬性名')
示例代碼：
<script>$(function(){var li = $('li')var ul = $('u')li.css('color','pink')console.log($('li').css('color'));})</script>
2.2 設(shè)置單個(gè)css屬性
我們可以使用下面這個(gè)語(yǔ)句來(lái)設(shè)置單個(gè)css的屬性：
$('選擇器').css("要修改的屬性名","屬性值")
示例代碼：
<script>$(function(){var li = $('li')var ul = $('u')li.css('color','pink')})</script>
要連續(xù)設(shè)置可以這樣：
<script>$(function(){var li = $('li')var ul = $('u')li.css('color':'pink',"font-size":"20px")})</script>
屬性名和屬性值中間用:，不同的屬性之間用,
2.3 設(shè)置類(lèi)樣式
添加類(lèi)
$('選擇器').addClass("你要添加的類(lèi)名稱(chēng)")
示例代碼：
<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src = "jQuery.js"></script><style>div{width: 100px;height: 100px;background-color: red;border: 1px solid black;}.current{width: 100px;height: 20px;background-color: pink;border-radius: 5px;margin: 10px;}</style>
</head>
<body><ul class="u"><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li></ul>
</body><script>$(function(){var li = $('li')var ul = $('u')li.addClass('current')})</script></html>
移除類(lèi)
$('選擇器').removeClass('你要移除的類(lèi)')
示例代碼:
<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src = "jQuery.js"></script><style>div{width: 100px;height: 100px;background-color: red;border: 1px solid black;}.current{width: 100px;height: 20px;background-color: pink;border-radius: 5px;margin: 10px;}</style>
</head>
<body><ul class="u"><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li></ul>
</body><script>$(function(){var li = $('li')var ul = $('u')li.addClass('current')li.removeClass('current')})</script></html>
切換類(lèi)
$('選擇器').toggleClass('你要切換成的類(lèi)')
示例代碼:
<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src = "jQuery.js"></script><style>div{width: 100px;height: 100px;background-color: red;border: 1px solid black;}.current{width: 100px;height: 20px;background-color: pink;border-radius: 5px;margin: 10px;}</style>
</head>
<body><ul class="u"><li>Test</li><li>Test</li><li>Test</li><li>Test</li><li>Test</li></ul>
</body><script>$(function(){var li = $('li')var ul = $('u')li.toggleClass('current')})</script></html>
三、類(lèi)操作與className的區(qū)別
原生JS中className會(huì)覆蓋元素原先里面的類(lèi)名
jQuery里面類(lèi)操作只是對(duì)指定類(lèi)進(jìn)行操作，不影響原先的類(lèi)名
總結(jié)
本文介紹了jQuery中的鏈?zhǔn)骄幊獭⑿薷腃SS、類(lèi)操作以及className的區(qū)別。鏈?zhǔn)骄幊淌沟么a更緊湊和可讀，css()方法用于修改元素的CSS屬性，而類(lèi)操作通過(guò)addClass()、removeClass()和toggleClass()方法實(shí)現(xiàn)。與之對(duì)應(yīng)的原生JavaScript中使用className屬性來(lái)進(jìn)行類(lèi)操作。這些功能使得使用jQuery更加便捷和靈活。通過(guò)靈活使用這些特性，您可以更高效地操作和控制頁(yè)面元素。