jQuery学习

最新推荐文章于 2020-11-25 16:29:16 发布

An_1999

最新推荐文章于 2020-11-25 16:29:16 发布

阅读量128

点赞数

分类专栏： jQuery学习文章标签： jQuery

本文链接：https://blog.csdn.net/An_1999/article/details/102843169

版权

jQuery学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

jQuery效果

六、jQuery - Chaining

Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上），一条接着另一条。
把 css(), slideUp(), and slideDown() 链接在一起。“p1” 元素首先会变为红色，然后向上滑动，然后向下滑动：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  });
});
</script>
</head>

<body>

<p id="p1">jQuery 乐趣十足！</p>
<button>点击这里</button>

</body>
</html>

当进行链接时，代码行会变得很差。不过，jQuery 在语法上不是很严格；您可以按照希望的格式来写，包含折行和缩进。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red")
      .slideUp(2000)
      .slideDown(2000);
  });
});
</script>
</head>

<body>

<p id="p1">jQuery 乐趣十足！</p>
<button>点击这里</button>

</body>
</html>

jQuery 会抛掉多余的空格，并按照一行长代码来执行上面的代码行。

jQuery - 获得内容和属性

jQuery DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。

DOM = Document Object Model（文档对象模型）

DOM 定义访问 HTML 和 XML 文档的标准：

“W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

    text() - 设置或返回所选元素的文本内容
    html() - 设置或返回所选元素的内容（包括 HTML 标记）
    val() - 设置或返回表单字段的值

通过 jQuery text() 和 html() 方法来获得内容：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
</head>

<body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>

</html>

通过 jQuery val() 方法获得输入字段的值：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("Value: " + $("#test").val());
  });
});
</script>
</head>

<body>
<p>姓名：<input type="text" id="test" value="米老鼠"></p>
<button>显示值</button>
</body>

</html>

获取属性 - attr()
获得链接中 href 属性的值：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#w3s").attr("href"));
  });
});
</script>
</head>

<body>
<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
<button>显示 href 值</button>
</body>

</html>

An_1999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习

jQuery效果六、jQuery - ChainingChaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上），一条接着另一条。把 css(), slideUp(), and slideDown() 链接在一起。“p1” 元素首先会变为红色，然后向上滑动，然后向下滑动：<!DOCTYPE html><html><head>...
复制链接

扫一扫

专栏目录