jQuery设置元素和内容

jQuery设置元素和内容

<div class="div1">
    <div><a href="#">超链接</a></div>
    <div><a href="#">超链接1</a></div>
    <div><a href="#">超链接2</a></div>
    <div><a href="#">超链接3</a></div>
    <div><a href="#">超链接4</a></div>
</div>

// 返回jQuery对象列表中第一个元素的html内容
console.log($(".div1>div").html());

// 替换jQuery对象列表中每个元素的html内容，都是相同的
$(".div1>div").html("<span>1</span>");

// 将jQuery对象列表中的每个元素都设置为不同的元素
// 这个函数中返回的元素就是设置的内容
$(".div1>div").html(function(index,item){
    return "<span>"+index+"</span>";
})

<div class="div2">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

// 将jQuery对象列表中每个元素的内容合并变成一个字符串
console.log($(".div2>div").text());
console.log($(".div1>div").text());

// 给列表中每个元素设置相同的文本
$(".div2>div").text("abc");

// 给列表中每个元素设置不同的文本
$(".div2>div").text(function(index){
    return "text"+index;
})

<form class="div3">
    <input type="text" name="user" value="1">
    <input type="text" name="age" value="2">
    <input type="radio" name="sex" value="男">
    <input type="radio" name="sex" value="女">
    <input type="text" name="tel" value="3">
</form>

// value 只能设置input的value值
    
// 获取jQuery对象列表中所有元素中的第一个元素的value值
console.log($(".div3>input").val());
// 更改value值
$(".div3>input").val(10);
$(".div3>input").val(function(index){
    return "文本"+index;
})