3、JQuery中的DOM操作

2012-10-27

三、JQuery中的DOM操作1、DOM简介??? DOM是文档对象模型，它是一种标准，与浏览器、平台、语言无关，通过这个接口

三、JQuery中的DOM操作

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('橘子'); ??? ??? ??? // 向每个匹配的元素内部追加内容。你最喜欢的水果是?橘子
??? ??? (2)$('橘子').appendTo($('p')); ??? ??? // 与append()相反。你最喜欢的水果是?橘子
??? ??? (3)$('p').prepend('请问');??? ??? ??? // 向每个匹配的元素内部前置内容。请问你最喜欢的水果是?
??? ??? (4)$('请问').prependTo($('p'));??? ??? // 与prepend()相反。请问你最喜欢的水果是?
??? ??? (5)$('p').after('苹果');? ??? ??? ??? // 向每个匹配的元素之后插入内容。你最喜欢的水果是?苹果
??? ??? (6)$('苹果').insertAfter($('p'));??? ??? // 与after()相反。你最喜欢的水果是?苹果
??? ??? (7)$('p').before('嗨！');??? ??? ??? ??? // 向每个匹配的元素之前插入内容。嗨！你最喜欢的水果是?
??? ??? (8)$('嗨！').insertBefore($('p'));??? // 与before()相反。嗨！你最喜欢的水果是?
??? ??? (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('我最不喜欢的水果!');??? // 将所有匹配的元素替换成指定的元素
??? ??? $('我最不喜欢的水果!').replaceAll('p');??? ??? // 与replaceWith相反()，效果相同
??? ??? 注意：被替换后新元素含任何事件，需要重新绑定。
??? 7）包裹节点
??? ??? $('strong').wrap('<div></div>');??? // 给每个匹配的strong都包裹一个<div> 如：<div>喜欢?</div>
??? ??? $('li').wrapAll('<ul></ul>');??? ??? // 给所有匹配的li包裹一个<ul> 如：<ul><li>苹果</li><li>鸭梨</li></ul>
??? ??? $('strong').wrapInner('');??? // 给每个匹配的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('你确定？');
??? ??? (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() 获取或设置当前元素的滚动条距滚动条顶端和左端的距离

热点排行

Web前端

3、JQuery中的DOM操作