jQuery第四十八天練習(xí)

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

jqyery操作

$("#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()方法

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()方法

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()方法

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()方法

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/

在線咨詢

上一篇：HTML文檔的訪問端口DOM (Document O
下一篇：CSS3 animation（動(dòng)畫）屬性

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

jQuery第四十八天練習(xí)

例子

jqyery操作

text()方法

示例：

示例：

html()方法

示例：

val()方法

示例：

attr()方法

示例：

示例：

您的項(xiàng)目需求