转载请注明出处
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');
