jQuery HTML 内容 属性 元素

jQuery - 内容

内容的相关操作有三个方法：text()、html() 以及 val()

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标签）
• val() - 设置或返回表单字段的值

text 和 html 的区别： html 解析富文本 text 只能解析文字

val 不能和上面两个方法 互换使用 各有各的用途

获取内容

选中元素.html()/.text()/.val()        返回一个字符串

// html
<div><h5>div标签</h5></div>
<input type="text" value="input标签" >

// js
$('div').click(function(){
    let text = $(this).text()
    console.log('text',text); // text div标签
    let html = $(this).html()
    console.log('html',html); // html <h5>div标签</h5>
})

$('input').focus(function(){
    let value=input.val()
    console.log('val',value); // val input标签
})

设置内容

text()、html() 、val()，都有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。函数返回值是我们修改后的字符串。

// html
<div><h5>div标签</h5></div>
<div id="box"><h5>div标签</h5></div>
<div id="box2"><h5>div标签</h5></div>
<input type="text" value="input标签" >

//js
$('div').click(function(){
    $('#box').text((i,v)=>{
        console.log(i,v);
        return 'text文字'
    })
    $('#box2').html('<h1>html文字</h1>')
})
$('input').blur(function(){
    $(this).val('val文字')
})

交互后修改内容： 

 属性和获取和设置

选中元素.attr(‘xxxx’) 方法用于获取属性值。

参数是 属性名（字符串），不填的话会报错，有则返回 值 ，无则返回 undefined

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

对于HTML元素我们自己自定义的DOM属性，在处理时，使用 attr 方法。

选中元素.attr(‘xxx’，‘xxx’) 方法用于设置单个属性值。

选中元素.attr({ ‘xxx’：‘xxx’，‘xxx’：‘xxx’ }) 方法用于设置多个属性值。回覆盖之前的属性

设置时也有 回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。函数返回值是我们修改后的字符串。

// html
<input type="text" value="input标签" >

// js
$('input').focus(function(){
    // let value=$(this).attr('')
    // console.log('attr',value); // attr undefined  没有找到属性
    // let value=$(this).attr('type')
    // console.log('attr',value); // attr text 返回属性值 字符型
    // $(this).attr('type','password')
    // $(this).attr('type','password')
    $(this).attr({
        'type':'password',
        'value': function(i,v){ return '1' }
    })
})

添加/删除元素

append()方法

 append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）  

<ul>
    <li>初识数据</li>
</ul>
<div / >

 

$("ul").append("<li>追加列表项</li>");

prepend() 方法

 prepend() 方法在被选元素的开头插入内容。

$("ul").prepend("<li>追加列表项</li>");

after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

$("img").before("<b>之前</b>");

$("img").after("<i>之后</i>");

 

 

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

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

元素.empty()把子元素删除掉了。本身没有删除掉。所以本身占位置

元素.remove()把自己和子元素都删除掉了。本身已删除掉。所以不占位置