jQuery——（2）html-优快云博客

本文链接：https://blog.youkuaiyun.com/ileopard/article/details/108417551

一、jQuery DOM 操作

jQuery 拥有可操作 HTML 元素和属性的强大方法
它非常重要的部分是：操作 DOM 的能力
DOM ：定义 HTML 和 XML 文档的标准

1.1 获取内容

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

text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容
val() 设置或返回表单字段的值

下面以 html() 举例

// 获取内容
$("#test").html()

// 设置内容
$("#test").html("<b>Hello world!</b>");

// 回调函数
// 回调函数有两个参数：被选元素列表中当前元素的下标，原始值（元素中的值）
// return ：以函数新值返回您希望使用的字符串
$("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });

1.2 获取属性 attr()

// 获取属性值
$("#runoob").attr("href")

// 设置属性值
$("#runoob").attr("href","http://www.runoob.com/jquery");
// 设置多个属性值
$("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });

// 回调函数
// 两个参数：被选元素列表中当前元素的下标，原始值
// 返回您希望使用的字符串
$("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });

1.3 添加元素

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

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);        // 追加新元素
}

1.4 删除元素

remove()：删除被选元素（及其子元素）
empty()：从被选元素中删除子元素

$("#div1").remove();

// 过滤被删除的元素
// remove()可以接受一个参数，该参数可以是任何jQuery选择器的语法
// 下面删除 class="italic" 的所有 <p> 元素
$("p").remove(".italic");

二、获取并设置 CSS 类

addClass()：向被选元素添加一个或多个类
removeClass()：从被选元素删除一个或多个类
toggleClass()：对被选元素进行添加/删除类的切换操作
css()：设置或返回样式属性

.important
{
        font-weight:bold;
        font-size:xx-large;
}
 
.blue
{
        color:blue;
}

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

三、css() 方法

css()：设置或返回被选元素的一个或多个样式属性

语法：css(“propertyname”);

// 返回p元素的background-color属性值
$("p").css("background-color");

// 设置p元素的background-color属性值为yellow（也可以设置多个）
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});