获取/设置标签内容
获取
$('#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': ' 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()