jQuery学习（二）

获取HTML内容和属性

jQuery 拥有可操作 HTML 元素和属性的强大方法。

1. 获取内容和属性

   • text() - 返回所选元素的文本内容，无参
   • html() - 返回所选元素的内容（包括 HTML 标记），无参
   • val() - 返回表单字段的值，无参
   • attr(“属性名”) 方法用于获取属性值

   $("#btn1").click(function(){alert("值为: " + $("#test").val());});

2. 设置内容和属性

   • text(“设定的值”) - 设置所选元素的文本内容
   • html(“设定的值”) - 设置所选元素的内容（包括 HTML 标记）
   • val(“设定的值”) - 设置表单字段的值
   • text()、html() 以及 val() 的回调函数
     通过设定函数，返回相应的值，进而实现设置对应的内容和属性。
     一小段代码示例

   $("#btn1").click(function(){    $("#text1").html(function(){        return "将会设定text1中的值"        })    })

   • attr() 方法也用于设置/改变属性值、也支持回调函数

   三种不同方法
   参数properties 描述:

   $("img").attr({ src: "test.jpg", alt: "Test Image" });

   参数key,value 描述
   参数key,回调函数 描述

3. 添加元素

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

   ---

   append() 和 prepend() 方法能够通过参数接收无限数量的新元素
   创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：s

    ``` function appendText(){    var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本    var txt3=document.createElement("p");    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM    $("body").append(txt1,txt2,txt3);        // 追加新元素}```

   • after() - 在被选元素之后插入内容

   • before() - 在被选元素之前插入内容
     after() 和 before() 方法能够通过参数接收无限数量的新元素。

     四者有时展示出来的效果是一样的。但是有的元素开头/结尾本身就无法插入元素，因此可能会无效。

4. 删除元素

   • remove() - 删除被选元素（及其子元素）

   $("#div1").remove();$("p").remove(".hello"); - 进一步过滤

   • empty() - 从被选元素中删除子元素

5. 获取并设置CSS类

   • addClass() - 向被选元素添加一个或多个类
   • removeClass() - 从被选元素删除一个或多个类
   • toggleClass() - 对被选元素进行添加/删除类的切换操作

   代码示例

   <script type="text/javascript">$(document).ready(function(){    $("button").click(function(){        $("h1,h2,p").addClass("blue");        $("div").addClass("important");        });});</script><style type="text/css">    .important    {        font-weight: bold;        font-size: xx-large;    }    .blue    {        color: blue;    }</style>

   • css() - 设置或返回样式属性
     css() 方法设置或返回被选元素的一个或多个样式属性。
     css(“propertyname”); - 返回样式属性
     css(“propertyname”,”value”); - 设置指定的css属性
     css({“propertyname”:”value”,”propertyname”:”value”,…}); - 设置多个css属性
6. jQuery 尺寸
   
   • width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
   • height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
   • innerWidth() 方法返回元素的宽度（包括内边距）。
   • innerHeight() 方法返回元素的高度（包括内边距）。
   • outerWidth() 方法返回元素的宽度（包括内边距和边框）。
   • outerHeight() 方法返回元素的高度（包括内边距和边框）。