<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
button {
background: none;
}
</style>
</head>
<body>
<button>第一個(gè)按鈕</button>
<button>第二個(gè)按鈕</button>
<button>第三個(gè)按鈕</button>
<button>第四個(gè)按鈕</button>
<button>第五個(gè)按鈕</button>
<button>第六個(gè)按鈕</button>
<script src="../js/jquery-3.7.1.js"></script>
<script>
$("button").click(function(){
$(this).css("background", "#fcf").siblings("button").css("background","none");
});
</script>
</body>
</html>
html頁面,顯示的內(nèi)容太多,會(huì)影響用戶體驗(yàn),如果有一些,點(diǎn)擊才出現(xiàn)的內(nèi)容,就可以減少內(nèi)容的干擾。使用jquery就可以很快的實(shí)現(xiàn)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>div隱藏測(cè)試</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"> </script> </head> <body> <button id="controller">隱藏或者顯示</button> <div id="contents" style="display: none;"> <p>div的內(nèi)容</p> </div> <script> $("#controller").click(function () { if ($("#contents").is(":hidden")) { $("#contents").show() } else { $("#contents").hide() } }) </script> </body> </html>
$("#contents").is(":hidden") 可以判斷是否是隱藏
$("#contents").show() 表示display:block,
$("#contents").hide() 表示display:none;
操作元素的屬性
$("#contents").attr("style","display:none;"); //隱藏div
$("#contents").attr("style","display:block;"); //顯示div
也可以操作css屬性
$("#contents").css("display","none"); //隱藏div
$("#contents").css("display","block"); //顯示div
也可以直接使用toggle轉(zhuǎn)換開關(guān)實(shí)現(xiàn)
$("#contents").toggle()
Query 中包含更改和操作 HTML 元素和屬性的強(qiáng)大方法。我們可以通過這些方法來獲取 HTML 元素中的文本內(nèi)容、元素內(nèi)容(例如HTML標(biāo)簽)、屬性值等。
text() 方法可以用于設(shè)置或獲取所選元素的文本內(nèi)容。
例如我們獲取下列 <p> 標(biāo)簽中的文本內(nèi)容:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
var content=$('.hello').text();
alert(content);
});
</script>
</head>
<body>
<p class="hello">你好,歡迎來到俠課島!</p>
<div>
<p>希望俠課島中有適合你的編程課程。</p>
</div>
</body>
</html>
在瀏覽器中演示效果:
除了獲取文本內(nèi)容,text() 還可以用于設(shè)置文本內(nèi)容,我們可以來看一下。
例如通過 text() 將 .content 的文本內(nèi)容設(shè)置為 hello, xkd!:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$('.content').text("hello, xkd!");
});
});
</script>
</head>
<body>
<p class="content">你好,歡迎來到俠課島!</p>
<p><button>點(diǎn)擊按鈕</button></p>
</body>
</html>
在瀏覽器中演示效果:
html() 方法用于設(shè)置或返回所選元素的內(nèi)容(包括HTML標(biāo)記)。
通過 html() 方法獲取 p 元素的內(nèi)容:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
var content=$('.hello').html();
alert(content);
});
</script>
</head>
<body>
<p class="hello">你好,歡迎來到俠課島!</p>
</body>
</html>
在瀏覽器中演示效果:
除此之外,我們還可以使用 html() 方法來設(shè)置指定元素的內(nèi)容:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$('.hello').html('你好,歡迎來到俠課島!');
});
</script>
</head>
<body>
<p>向下面的p標(biāo)簽中添加文本內(nèi)容:</p>
<p class="hello"></p>
</body>
</html>
在瀏覽器中演示效果:
val() 用于設(shè)置或返回表單字段的值。該方法大多時(shí)候用于 input 元素。
例如獲取輸入框 input 中的值:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
alert($('input').val());
});
});
</script>
</head>
<body>
文本輸入框:<input type="text" name="name" value="summer" />
<p>
<button>獲取輸入框的值</button>
</p>
</body>
</html>
在瀏覽器中演示效果:
如果要使用 val() 方法設(shè)置 value 的值,我們可以像下面這樣做:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$('input').val('summer')
});
});
</script>
</head>
<body>
文本輸入框:<input type="text" name="name" value="" />
<p>
<button>獲取輸入框的值</button>
</p>
</body>
</html>
在瀏覽器中演示效果:
attr() 方法用于設(shè)置或返回被選元素的屬性值。
例如下面這個(gè)例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
alert($('div').attr("class"));
});
</script>
</head>
<body>
<div class="xkd">獲取class屬性的值</div>
</body>
</html>
在瀏覽器中演示效果:
attr() 方法除了獲取元素的屬性值,還可以設(shè)置元素的屬性值,我們來看一下。
將下面 <div> 標(biāo)簽中的 class 屬性的值設(shè)置為 summer:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$('div').attr("class", "summer")
});
</script>
</head>
<body>
<div>設(shè)置class屬性的值</div>
</body>
</html>
在瀏覽器中演示效果:
鏈接:https://www.9xkd.com/
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。