1、DOM简介
DOM是文档对象模型,它是一种标准,与浏览器、平台、语言无关,通过这个接口可以轻松的访问DOM树的各个节点。
不同的DOM语言,可以用来解析不同的DOM树。如:javascript可以访问html-dom、jdom可以访问xml-dom 等等。
2、DOM操作的分类
1)DOM Core(核心DOM):它不专属与任何语言,它是一组标准的接口,提供了比如:getElementById()、getElementsByTagName()、
getAttribute()、setAttribute()等方法,通过它可以访问DOM。
2)HTML DOM :要访问html_dom可以使用javascript语言,它提供了访问html_dom的方法,如:document.forms、element.src 等等,
使用它比使用DOM Core的接口更简便,但它只能用于解析html。
3)CSS DOM :针对css操作,javascript提供了如下接口,element.style.color="red"
3、JQuery中的DOM操作
1)查找节点
(1)查找元素,可以使用JQuery选择器快速的找到目标元素
var $li = $('ul li:eq(1)'); // ul 的第二个 li 元素
var li_txt = $li.text(); // 获取 li 的内容
(2)查找属性节点,找到目标元素后,使用attr()访问指定的属性或为指定属性赋值
$('p').attr('title','橘子'); // 设置p的title属性值
var p_title = $('p').attr('title'); // 获取p的title属性值
2)创建节点
var $ul = $('ul');
var $li1 = $('<li title="香蕉">香蕉</li>'); // 创建JQuery元素,可以使用$()工厂函数
var $li2 = $('<li title="柚子">柚子</li>'); // 这种方法会根据传入的html构造一个dom对象,然后再包装成JQuery的dom对象。
3)插入节点
(1)$('p').append('<b>橘子</b>'); // 向每个匹配的元素内部追加内容。<p>你最喜欢的水果是?<b>橘子</b></p>
(2)$('<b>橘子</b>').appendTo($('p')); // 与append()相反。<p>你最喜欢的水果是?<b>橘子</b></p>
(3)$('p').prepend('<b>请问</b>'); // 向每个匹配的元素内部前置内容。<p><b>请问</b>你最喜欢的水果是?</p>
(4)$('<b>请问</b>').prependTo($('p')); // 与prepend()相反。<p><b>请问</b>你最喜欢的水果是?</p>
(5)$('p').after('<b>苹果</b>'); // 向每个匹配的元素之后插入内容 。<p>你最喜欢的水果是?</p><b>苹果</b>
(6)$('<b>苹果</b>').insertAfter($('p')); // 与after()相反。<p>你最喜欢的水果是?</p><b>苹果</b>
(7)$('p').before('<b>嗨!</b>'); // 向每个匹配的元素之前插入内容。<b>嗨!</b><p>你最喜欢的水果是?</p>
(8)$('<b>嗨!</b>').insertBefore($('p')); // 与before()相反。<b>嗨!</b><p>你最喜欢的水果是?</p>
(9)移动节点,例子:
var $two_li = $('ul li:eq(1)');
var $three_li = $('ul li:eq(2)');
$two_li.insertAfter($three_li);
4)删除节点
(1)remove() 删除节点以及后代节点
a、删除匹配的节点,返回被删除的节点。
var $remove_obj = $('ul li:eq(1)').remove();
$('ul').append($remove_obj); // 将被删除的节点追加到ul
b、结果与上面相同,将删除的节点追加到ul.
$('ul li:eq(1)').remove().prependTo($('ul'));
c、给remove()添加参数,过滤要删除的元素。
var $ul = $('ul');
$ul.append('<li>其他</li>');
$('ul li').remove('li[title!=菠萝]');
(2)empty() 清空后代节点
$('ul li:eq(1)').empty();
5)复制节点
$('ul li').click(function() {
$(this).clone().appendTo('ul'); // 只复制节点,不复制行为
$(this).clone(true).appendTo('ul'); // 即复制节点,也复制行为
});
6)替换节点
$('p').replaceWith('<strong>我最不喜欢的水果!</strong>'); // 将所有匹配的元素替换成指定的元素
$('<strong>我最不喜欢的水果!</strong>').replaceAll('p'); // 与replaceWith相反(),效果相同
注意:被替换后新元素含任何事件,需要重新绑定。
7)包裹节点
$('strong').wrap('<div></div>'); // 给每个匹配的strong都包裹一个<div> 如:<div><strong>喜欢?</strong></div>
$('li').wrapAll('<ul></ul>'); // 给所有匹配的li包裹一个<ul> 如:<ul><li>苹果</li><li>鸭梨</li></ul>
$('strong').wrapInner('<i></i>'); // 给每个匹配的strong的内容都包裹一个<b> 如:<strong><i>喜欢?</i></strong>
8)属性操作
$('p').attr("title"); // 获取或设置属性,也可以一次设置多个属性,如:$('p').attr({title:'title', content:'content'});
$('p').removeAttr("title"); // 删除属性
9)样式操作
(1) 获取和设置样式
$('p').attr('class');
$('p').attr('class', 'font_style');
(2) 追加样式
$('p').addClass('append');
(3) 移除样式
$('p').removeClass('abc a b'); // 多个样式用空格分割
$('p').removeClass(); // 删除所有class
(4) 切换样式
// 可以用来执行一组交替动作
$('#btn').toggle(function() {
$('p').addClass('display');
}, function() {
$('p').removeClass('display');
});
// 可以用来切换样式,当指定样式存在时则删除,不存在则添加
$('#btn').click(function() {
$('p').toggleClass('display');
});
(5) 判断是否含有某个样式
$('p').hasClass('display');
$('p').is('.display'); // $('p').is('.' + class);
10)设置和获取html、文本和值
(1) 获取和设置元素内部的html,只对html有效
$('p').html();
$('p').html('<strong>你确定?</strong>');
(2) 获取和设置元素内部的文本,对html和xml都有效
$('p').text();
$('p').text('确定');
(3) 获取和设置元素的值
i) 文本框例子:
$('#address').focus(function() {
var val = $(this).val();
if (val == this.defaultValue) { // this.defaultValue是当前文本框默认值
$(this).val("");
}
});
$('#address').blur(function() {
var val = $(this).val();
if (val == "") {
$(this).val(this.defaultValue); // this.defaultValue是当前文本框默认值
}
});
ii) 下拉列表、多选框、单选按钮、多选按钮,例子:
$('#single').val('选择1号'); // $('#single').val('one'); 指定text或者value都可以
$('#multiple').val(['选择2号','选择4号']);
$(':checkbox').val(['check2','check3']);
$(':radio').val(['radio2']);
11)遍历节点
(1) children() 获取子元素,不包含后代元素
(2) next() 用于获取后面紧邻的同辈元素
(3) prev() 用于获取前面紧邻的同辈元素
(4) siblings() 用于获取同辈元素
(5) closest() 获取最近匹配的元素
(6) find() 找出正在处理的元素的后代元素
(7) filter() 筛选出与指定表达式匹配的元素集合,用于缩小匹配的范围,多个表达式用逗号分隔
12)css-dom操作
(1) css() 用来获取和设置元素的样式,使用方式与attr()一样
(2) height()、width() 获取和设置元素的高度或宽度
(3) offset() 获取元素在当前视窗的相对偏移
var $ul = $('ul').offset();
console.info($ul.left);
console.info($ul.top);
(4) position() 获取元素在父元素的相对偏移
var $ul = $('ul').position();
console.info($ul.left);
console.info($ul.top);
(5) scrollTop()、scrollLeft() 获取或设置当前元素的滚动条距滚动条顶端和左端的距离
三、JQuery中的DOM操作
最新推荐文章于 2022-11-10 14:42:46 发布