jQuery学习笔记(三)-HTML+CSS

转自W3School:http://www.w3school.com.cn/jquery/index.asp

jQuery 包含很多供改变和操作 HTML 的强大函数。

jQuery学习笔记(三)-HTML+CSS_第1张图片

改变 HTML 内容

例子:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").html("I am ZZ!");
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">请点击这里</button>
</body>

</html>

jQuery学习笔记(三)-HTML+CSS_第2张图片

jQuery学习笔记(三)-HTML+CSS_第3张图片

添加 HTML 内容

$("p").append(" I am Zz!");

jQuery HTML的一些 操作

函数 描述
$(selector).html(content) 改变被选元素的(内部)HTML
$(selector).append(content) 向被选元素的(内部)HTML 追加内容
$(selector).prepend(content) 向被选元素的(内部)HTML “预置”(Prepend)内容
$(selector).after(content) 在被选元素之后添加 HTML
$(selector).before(content) 在被选元素之前添加 HTML

jQuery CSS 操作

jQuery 拥有三种用于 CSS 操作的重要函数:

  • $(selector).css(name,value) 为所有匹配元素的给定 CSS 属性设置值:
  • $(selector).css({properties})  同时为所有匹配元素的一系列 CSS 属性设置值:
  • $(selector).css(name)  返回指定的 CSS 属性的值:

jQuery Size 操作

jQuery 拥有两种用于尺寸操作的重要函数:

  • $(selector).height(value)
  • $(selector).width(value)


你可能感兴趣的:(jQuery学习笔记(三)-HTML+CSS)