DOM操作分为3个:
DOM core(核心),HTML_DOM,CSS_DOM
jQuery中的DOM操作:
查找节点:
1.查找节点元素:
var $li = $('ul li:eq(1)');
2.查找节点属性:
var $p = $('p').attr('title');
创建节点:
1.创建元素节点:
var $li = $('<li></li>');
2.创建文本节点:
var $li = $('<li>一二三</li>');
3.创建属性节点:
var $li = $('<li title='123'>一二三</li>');
插入节点:
append():在每个匹配的元素内部追加指定内容
appendTo():将所有的匹配元素追加到指定元素中
prepend():在每个匹配的元素内部前置内容
prependTo():将所有匹配的元素前置到指定的元素中
after():在每个匹配的元素之后插入内容
insertAfter():将所有匹配的元素插入到指定的元素后面
before():在每个匹配的元素之前插入内容
insertBefore():将所有匹配的元素插入到指定元素之前
删除节点:
1.remove()方法:在网页中删除节点,但在jQuery中该元素还存在
2.empty()方法: 清空元素中的内容或者子元素
复制节点:
clone();
替换节点:
1.replaceWith():
2.replaceAll():
包裹节点:
1.wrap():单独包裹
2.wrapAll():一次性包裹
3.wrapInner():将匹配的元素的内容包裹
属性操作:
1.获取属性:
var $href = $('a').attr('href');
2.设置属性:
$('a').attr('href','html....');
$('a').attr({'height':'20','href':'www.sss'});
3.删除属性
1.removeArrt();
$('a').removeAttr('hright');
样式操作:
1.获取样式,设置样式:
var $href = $('a').attr('class');
$('a').attr('class','high');
2.追加样式:
$('a').addClass('high');
3.移除样式:
$('a').removeClass('high');
4.切换样式:
//控制方法
$('a').toggle(function(){
//显示元素
},
function(){
//隐藏元素
});
//控制样式
$('a').toggle('class');
5.判断是否含有某个样式:
1.hasClass();
$('a').hasClass('class');
2.is();
$('a').is('class');
设置和获取html,文本和值
1.html()方法:
获取或者设置元素内的内容(包含标签以及属性)
2.text()方法:
获取或者设置元素内的内容(不包含标签以及属性)
3.val()方法():
获取表单中的value值
遍历节点
1.children()方法:
$('p').children();
取得匹配元素的子元素集合
2.next()方法:
$('p').next();
取得匹配元素后面紧邻的同级元素
3.prev()方法:
$('p').prev();
取得匹配元素后面紧邻的同级元素
4.siblings()方法:
$('p').siblings();
取得匹配元素后面紧邻的同级元素
5.closest()方法:
取得最近的匹配元素
CSS_DOM操作
1.css()方法:
$('p').css('color');
$('p').css('color','red');
2.opacity()方法:
jQuery已经处理好了透明度的兼容问题
$('p').css('opacoty','0.5');
3.height()方法:
获取和设置元素宽高
$('p').height('20');
4.width()方法:
获取和设置元素宽高
$('p').width('20');
5.offset()方法:
获取元素的相对偏移
$('p').offset().left;
$('p').offset().top;
6.position()方法:
获取元素的相对偏移
$('p').position().left;
$('p').position().top;
7.scrollTop()方法,scrollLeft()方法:
$('p').scrollTop();
$('p').scrollTop('50');