jQuery第四十八天练习

<!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>第一个按钮</button>
        <button>第二个按钮</button>
        <button>第三个按钮</button>
        <button>第四个按钮</button>
        <button>第五个按钮</button>
        <button>第六个按钮</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页面，显示的内容太多，会影响用户体验，如果有一些，点击才出现的内容，就可以减少内容的干扰。使用jquery就可以很快的实现。

例子

<!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隐藏测试</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的内容</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转换开关实现

$("#contents").toggle()

Query 中包含更改和操作 HTML 元素和属性的强大方法。我们可以通过这些方法来获取 HTML 元素中的文本内容、元素内容（例如HTML标签）、属性值等。

text()方法

text() 方法可以用于设置或获取所选元素的文本内容。

示例：

例如我们获取下列 <p> 标签中的文本内容：

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

在浏览器中演示效果：

除了获取文本内容，text() 还可以用于设置文本内容，我们可以来看一下。

示例：

例如通过 text() 将 .content 的文本内容设置为 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>点击按钮</button></p>
</body>
</html>

在浏览器中演示效果：

html()方法

html() 方法用于设置或返回所选元素的内容（包括HTML标记）。

示例：

通过 html() 方法获取 p 元素的内容：

<!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() 方法来设置指定元素的内容：

<!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标签中添加文本内容：</p>
  <p class="hello"></p>
</body>
</html>

在浏览器中演示效果：

val()方法

val() 用于设置或返回表单字段的值。该方法大多时候用于 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() 方法设置 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() 方法用于设置或返回被选元素的属性值。

示例：

例如下面这个例子：

<!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() 方法除了获取元素的属性值，还可以设置元素的属性值，我们来看一下。

示例：

将下面 <div> 标签中的 class 属性的值设置为 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>设置class属性的值</div>
</body>
</html>

在浏览器中演示效果：

链接：https://www.9xkd.com/

在线咨询

上一篇：HTML文档的访问端口DOM (Document O
下一篇：CSS3 animation（动画）属性

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

jQuery第四十八天练习

例子

jqyery操作

text()方法

示例：

示例：

html()方法

示例：

val()方法

示例：

attr()方法

示例：

示例：

您的项目需求