JQuery-DOM操作

转载请注明出处
DOM操作:即文档对象模型操作。html是一个文档。

创建、删除、复制、插入、替换、包裹节点。

---

创建节点

var $new_elem = $("<a href='www.google.com'>点我</a>"); //创建一个a标签
$("body").append($new_elem); //创建完成之后记得插入

删除节点

//remove删除节点
var $rm_elem = $('p:first').remove(); //删除节点，返回删除的节点。
$rm_elem.appendTo('div.container'); //再次加入到div class为container的元素中

//deatch删除节点，但是他会保留属性，事件响应等等信息
var $rm_btn = $('input:submit').deatch(); //删除按钮
$('form').append($rm_btn);

//empty清空节点的内容，但不删除。
$('div.container').empty();

复制节点

//clone
$btn_elem.clone().prependTo(".cmd_bar");
$btn_elem.clone(true).prependTo(".cmd_bar"); //参数为true时，会把属性，事件等等也复制过去

插入节点

• append $('.container').append($child_elem);
• appendTo $child_elem.appendTo($('.container'));
• prepend $container.prepend($frist_child)
• prependTo $first_child.prependTo($container)
• after $first_elem.after($next_elem);
• insertAfter $next_elem.insertAfter($prev_elem)
• before $next_elem.before($prev_elem)
• insertBefore $prev_elem.insertBefore($next_elem)

替换节点

// replaceWith
$(h1.title:contains('标题')).replaceWith("<p>title</p>");

包裹节点

/* 样本
 * <li>orange</li>
 * <li>apple</li>
 * <li>banana</li>
*/

//wrap包裹每个单独的元素
$("li").wrap('<strong></strong>');
/* 结果
 * <strong><li>orange</li></strong>
 * <strong><li>apple</li></strong>
 * <strong><li>banana</li></strong>
*/

//wrapAll把所有元素打包到一起包裹
$("li").wrapAll('<strong></strong>');
/* 结果
 * <strong><li>orange</li>
 * <li>apple</li>
 * <li>banana</li></strong>
*/

//wrapInner把每个匹配的子元素包裹起来
$('li').wrapInner('<strong></strong>');
/* 结果
 * <li><strong>orange</strong></li>
 * <li><strong>apple</strong></li>
 * <li><strong>banana</strong></li>
*/

遍历节点

---

children()方法

$parent_elem.children();//只获取子元素，不包括后代元素哦

next()方法

//不多讲了

prev()方法

//不多讲了

sibilings()方法

//获取前前后后的所有同辈元素

closest()方法

//如果本身匹配则返回本身，否则向上沿着父级逐级查找。
$current_elem.closest('li');

parent()方法

//返回父元素

parents()方法

//返回父亲和祖父节点

filter()过滤方法

//filter返回符合的
$('body > *').filter('a').length

属性操作

---

获取属性

var attr_value  = $elem.attr('prototypename');

修改属性

$elem.attr('key','value');
$elem.attr({'key1':'value1','key2','value2'}); //修改多个属性

删除属性

$elem.removeAttr('attr_name');

测试是否有某class

$elem.hasClass('top-nav-bar'); //他和is是一样的
$elem.is('.top-nav-bar'); //注意这个点哦

追加、删除、切换class

$elem.addClass('light-btn'); //追加样式

$elem.removeClass('btn-default'); //删除样式

$elem.toggleClass('btn-clicked');  //切换样式

设置、获取 元素文本的值
html()方法 text()方法 val()方法

CSS操作

---

css方法

$elem.css('backgroundColor');
$elem.css('backgroundColor','green');