jQuery笔记

1、jQuery - 添加元素

我们将学习用于添加新内容的四个 jQuery 方法：

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

解析：append方法和after方法有什么区别？

以<div><p></p></div>为例，append方法的话是在</p>后添加内容；after方法是在</div>后添加。

2、

text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});
解析：关于“被选元素列表中当前元素的下标”的解释：比如选取所有的p标签元素，可能选到的不止1个，这时第一个的下标就是0，第二个就是1……

3、jQuery 尺寸

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。

outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

下面的例子返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度：

实例

$("button").click(function(){
  var txt="";
  txt+="Document width/height: " + $(document).width();
  txt+="x" + $(document).height() + "
";
  txt+="Window width/height: " + $(window).width();
  txt+="x" + $(window).height();
  alert(txt);
});

下面的例子设置指定的 <div> 元素的宽度和高度：

实例

$("button").click(function(){
  $("#div1").width(500).height(500);
});

4、