jQuery中的HTML

获取/设置标签内容

获取

$('#test').text() // 设置或返回所选元素的文本内容

$('#test').html() // 设置或返回所选元素的内容（包括 HTML 标记）

$("#test").val() // 设置或返回表单字段的值

 

设置

text()、html() 以及 val() 可以设置字符串、jQuery DOM和回调函数

回调函数由两个参数：

被选元素列表中当前元素的下标，以及原始（旧的）值。

然后以函数新值返回您希望使用的字符串。

 

创建DOM的几种方式

1.创建单个DOM元素

var $div_1 = $('<div data-type="one" class="div_1">创建div_1元素</div>')
$div_1.appendTo('body')

 

2.创建具有嵌套DOM结构

var $div_2 = $(`<div>
    <p>div_2</p>
    <img src="img/0001.png" alt="test">
</div>`)
$div_2.appendTo('body')

 

3.创建复杂属性的DOM元素或结构

var $div_3 = $('<h5>', {
    'data-type': '标题',
    class: 'title',
    text: '这是添加字符串的标题',
    // 'html': $div_1,
    style: 'color: red; font-size: 20px',
    click: function () {
        var origin = document.getElementsByClassName('title')
        console.log(origin)
    }
})
$div_3.appendTo('body')

 

给DOM添加/移除属性

添加单个属性

$('img').attr('data-type', 'one')

 

添加多个属性

$('img').attr({
    'data-img': '1',
    'style': 'width: 200px;' // 此时样式也可以作为属性
})

 

移除属性

$('img').removeAttr('data-remove')

 

获取页面DOM

$('.test').parent();//父节点

$('.test').parents();//全部父节点

$('.test').parents('.test1');//含有类名.test1的父节点

$('.test').children();//全部子节点

$('.test').children('li');//元素为li的全部子节点

$('.test').prev();//上一个兄弟节点

$('.test').prevAll();//之前所有兄弟节点

$('.test').next();//下一个兄弟节点

$('.test').nextAll();//之后所有兄弟节点

$('.test').siblings();//所有兄弟节点

$('.test').siblings('.test1');//含有类名.test1的所有兄弟节点

$('.test').find('.test1');//返回被选元素含有类名为.test1的所有后代元素；（返回全部用 * ，多个参数用 ， 隔开）

$('.test').contents();//返回元素里面所有内容，包括文本和节点

$('.test').contents('.test1');$('.test').parent();//父节点

$('.test').parents();//全部父节点

$('.test').parents('.test1');//含有类名.test1的父节点

$('.test').children();//全部子节点

$('.test').children('li');//元素为li的全部子节点

$('.test').prev();//上一个兄弟节点

$('.test').prevAll();//之前所有兄弟节点

$('.test').next();//下一个兄弟节点

$('.test').nextAll();//之后所有兄弟节点

$('.test').siblings();//所有兄弟节点

$('.test').siblings('.test1');//含有类名.test1的所有兄弟节点

$('.test').find('.test1');//返回被选元素含有类名为.test1的所有后代元素；（返回全部用 * ，多个参数用 ， 隔开）

$('.test').contents();//返回元素里面所有内容，包括文本和节点

$('.test').contents('.test1');

 

将DOM插入/删除DOM节点

$('#pic').append('追加文本或节点~') // 被选元素的结尾插入内容

$('#pic').prepend('在开头追加文本或节~') // 在被选元素的开头插入内容

$('#pic').after('在后面添加文本或节点~') // 在被选元素之后插入内容

$('#pic').before('在前面添加文本或节点~') // 在被选元素之前插入内容

$('#pic').remove() // 删除被选元素及其子元素。 也可接受一个参数，允许对被删元素进行过滤。 remove(".className")

$('#pic').empty() // 删除被选元素的子元素。

 

获取/添加CSS样式

// 获取样式
$("p").css("background-color");

// 设置单个样式
$("p").css("background-color","yellow");

// 设置多个样式
$("p").css({"background-color":"yellow","font-size":"200%"});

 

操作类

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

尺寸获取/设置

• width()
• height()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()

 

其他链接

• JQuery给元素添加/删除节点比如select