一、创建节点
以HTML创建新元素
var txt1="Text.
";
以jQuery创建新元素
var txt2=$('').text('text.');
以DOM创建新元素
var txt3=document.createElement("p");
txt3.innerHTML="Text.";
二、插入节点
通过js的DOM操作只能插入插入jsDOM创建出来的标签,不能插入字符串类型和jq创建出来的标签。
操作函数有:append(),appendTo(),prepend(),after(),before():
//A.append(B):把B标签拼接在A标签内部结尾的位置。
//参数可以传递任意多个标签参数,会按照参数的传递顺序把标签拼接进文档流中。
//jq中的标签拼接方法,可以把字符串类型、jq对象类型、DOM节点类型的标签拼接进文档流中。
// $(document.body).append(pTag1);
//A.appendTo(B):把A标签添加到B标签中(把A拼接进B的内部结尾位置);
//A必须是jq对象类型,B可以是DOM节点,JQ对象,标签字符串类型,但是避免
//标签字符串参数,因为向字符串中拼接标签,标签会拼接失败。
//A.prepend(B):在A标签内部的开始位置拼接B标签
$(document.body).prepend(pTag1);
// $(document.body).prepend(pTag2);
// $(document.body).prepend(pTag3);
//A.after(B):在A标签之后拼接B标签(AB是兄弟标签)
$('p').after(pTag2);
//A.before(B):在A标签之前拼接B标签(AB是兄弟标签)
$('p').before(pTag3);
$('p').each(function(index,elem){
console.log(index);
console.log(elem);
});
三、包裹节点操作
//A.wrap(B):让B标签当做A标签的父级;如果A标签有多个,则每一个A标签都会有一个独立的父级B
// $('li').wrap('
');
//A.wrapAll(B):让B标签当做A标签的父级;如果A标签有多个,则每一个A标签都会有一个公用的
//父级B;如果A的DOM结构中混入了其他标签,会先把其他标签移在所有的A标签之后,然后再用B包裹。
$('li').wrapAll('
');
//A.wrapInner(B):在A标签内部,添加B标签,让B标签当做A标签原来子标签的父级;A是爷爷级、
//B是父级、原来A的子级变成孙子级。
四、其他类型节点操作
删除节点(remove()和detach()):
//remove():删除调用该方法的标签,并且会把该标签保存下来,以备后期拼接使用
var tag=$('p').remove();
console.log(tag);
$('button').click(function(){
alert('hehhehehe');
});
//var btn=$('button').remove();
//删除有事件函数的标签
var btn=$('button').detach();
//把删除的增加回来
$(document.body).append(btn);
//remove()和detach()删除标签的区别:
//remove()如果删除具备事件函数的标签,则标签额事件函数会一同解除绑定,
把标签添加回来时,就没有对应的事件函数了
//detach()如果删除具备事件函数的标签,则只是在DOM结构中把标签移除,
该标签绑定的事件函数不会移除,把标签添加回来
//事件函数照样触发。
复制节点(clone()):
//复制DOM树中的标签,然后在添加在DOM树中
//A.clone():拷贝DOM树中的A节点,如果A节点有事件函数,而且需要一起拷贝,则需要传参:true
var btns=$('button').clone();
清空节点(empty()):
//清空节点操作
$('div').empty();
替换节点(replaceWith()和repalceAll()):
//替换节点
$('a').replaceWith('三生三世');
//A.repalceWith(B):用B标签替换A标签(页面上显示的是B标签)
//A.repalceAll(B):用A标签替换B标签(页面上显示的是A标签)
五、属性操作
用attr()获取和设置元素属性 ,removeAttr()来删除元素属性。
1、获取属性和设置属性
var $para=$("p");
var para_txt=$para.attr("title");//获取属性title的值
$("p").attr("title","your title");//设置属性title的值为your title
$("p").attr({"title":"your title","name":"your name"});//为一个元素设置多个属性
注意: jQuery中很多方法都是同一个函数实现获取和设置的,例如 attr() 技能获取属性的值,也能设置属性的值。类似的还有html()、text()、height()、width()、val()、css()等方法。
2、删除属性
$("p").removeAttr("title");
removeProp()函数用于移除在当前jQuery对象所匹配的每一个元素上指定的属性。
window对象或DOM元素的一些内置属性是不允许删除的,如果试图删除这些属性,将会导致浏览器产生一个错误。jQuery首先会将该属性的值赋为undefined,并忽略掉浏览器生成的任何错误信息。
一般情况下,你最好使用该函数来删除一些自定义的属性,而不是内置属性。
请不要使用本函数来删除DOM元素的本地属性checked、selected和disabled。这将彻底删除对应的属性,并且,一旦删除之后,你无法再向该DOM元素重新添加对应的属性。请使用prop()函数将其设为false即可,例如:jQueryObject.prop(“checked”, false)。
jQuery中attr和pop的区别:
在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。
但不得不说的是,这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别。
[解析来自网络,点击查看](http://www.365mini.com/page/jquery-attr-vs-prop.htm)
1、操作对象不同
很明显,attr和prop分别是单词attribute和property的缩写,并且它们均表示"属性"的意思。
不过,在jQuery中,attribute和property却是两个不同的概念。attribute表示HTML文档节点的属性,property表示JS对象的属性。
在jQuery中,prop()函数的设计目标是用于设置或获取指定DOM元素(指的是JS对象,Element类型)上的属性(property);attr()函数的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)。
当然,在jQuery的底层实现中,函数attr()和prop()的功能都是通过JS原生的Element对象(如上述代码中的msg)实现的。attr()函数主要依赖的是Element对象的getAttribute()和setAttribute()两个方法。prop()函数主要依赖的则是JS中原生的对象属性获取和设置方式。
当然,jQuery对这些操作方式进行了封装,使我们操作起来更加方便(比如以对象形式同时设置多个属性),并且实现了跨浏览器兼容。
此外,虽然prop()针对的是DOM元素的property,而不是元素节点的attribute。不过DOM元素某些属性的更改也会影响到元素节点上对应的属性。例如,property的id对应attribute的id,property的className对应attribute的class。
2、应用版本不同
attr()是jQuery 1.0版本就有的函数,prop()是jQuery 1.6版本新增的函数。毫无疑问,在1.6之前,你只能使用attr()函数;1.6及以后版本,你可以根据实际需要选择对应的函数。
3、用于设置的属性值类型不同
由于attr()函数操作的是文档节点的属性,因此设置的属性值只能是字符串类型,如果不是字符串类型,也会调用其toString()方法,将其转为字符串类型。
prop()函数操作的是JS对象的属性,因此设置的属性值可以为包括数组和对象在内的任意类型。
4、其他细节问题
在jQuery 1.6之前,只有attr()函数可用,该函数不仅承担了attribute的设置和获取工作,还同时承担了property的设置和获取工作。例如:在jQuery 1.6之前,attr()也可以设置或获取tagName、className、nodeName、nodeType等DOM元素的property。
直到jQuery 1.6新增prop()函数,并用来承担property的设置或获取工作之后,attr()才只用来负责attribute的设置和获取工作。
此外,对于表单元素的checked、selected、disabled等属性,在jQuery 1.6之前,attr()获取这些属性的返回值为Boolean类型:如果被选中(或禁用)就返回true,否则返回false。
但是从1.6开始,使用attr()获取这些属性的返回值为String类型,如果被选中(或禁用)就返回checked、selected或disabled,否则(即元素节点没有该属性)返回undefined。并且,在某些版本中,这些属性值表示文档加载时的初始状态值,即使之后更改了这些元素的选中(或禁用)状态,对应的属性值也不会发生改变。
因为jQuery认为:attribute的checked、selected、disabled就是表示该属性初始状态的值,property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。
因此,在jQuery 1.6及以后版本中,请使用prop()函数来设置或获取checked、selected、disabled等属性。对于其它能够用prop()实现的操作,也尽量使用prop()函数。
六、样式操作
1、追加样式
addClass()
首先在
原本代码:
abc
执行:$("p").addClass("another");
此时 p的class为“high another”
如果给一个元素添加了多个class值,那么就相当于合并了他们的样式;如果有不同的class设定了同一个样式属性,则后者覆盖前者。
2、移除样式
$("p").removeClass("high");
或者两个都删除:
`$("p").removeClass("high").removeClass("another");`
$("p").removeClass("high another");
移除所有class:$("p").removeClass();
3、切换样式
toggleClass()控制样式的重复切换,如果类名存在就删除,类名不在就添加
若本来
jQuery语句为:$("p").toggleClass("another");
点击切换样式按钮,则变成,
再点击一次切换按钮 ,则又变成
不断点击他就会在这两种情况中来回切换。
4.判断是否含有某个样式
hasClass()判断是否含有某个class 有返回true 没有返回false
$("p").hasClass("another");
七、设置和获取HTML、文本和值
1.html() 用来读取或设置 某个元素中的HTML内容,可用于XHTML文档,不能用于XML文档
示例:
q
jQuery:$("p").html()
获得的结果是:q
设置p元素的html代码:$("p").html("p")
2.text() 用来读取或设置某个元素的文本内容
获取内容:$("p").text()
设置内容:$("p").text("你最喜欢的水果是?")
3.val()方法 用来获取或设置元素的值
$("p").val();
$("p").val("aaa");
另外,如果this是当前的文本框,则this.defaltValue是当前选中文本框的默认值
$("p").value(this.defaultValue);
另外,val()能使select(下拉列表框)、checkbox(多选框)和radio(单选框)相应的选项被选中,这在表单操作中经常会用到。
HTML代码:
八、遍历节点
1.children() 取得匹配元素的子元素集合,此方法只考虑子元素,不考虑其他后代元素。
示例HTML代码:
jQuery求子元素个数:
var $body=$("body").children;
alert($body.length);//得到2
2.next() 取得匹配元素后紧邻的同辈元素
根据上个html例子
$("p").next()得到的结果是:
3.prev() 得到匹配元素前面紧邻的同辈元素
$("ul").prev()//得到结果为
4.siblings() 取得匹配元素前后所有同辈元素
$("p").siblings()
//得到结果为:
6.closest() 取得最近的匹配元素
首先检查当前元素是否匹配,如果匹配则直接返回元素本身 ,如果不匹配则向上查找父元素,逐级向上查找匹配选择器的元素,如果什么都没有则返回一个空的jQuery对象(只返回匹配的第一个元素节点,从自身的节点找起)
给点击目标最近的li元素添加红色:
$(document).bind("click",function(e){
$(e.target).closest("li").css("color","red");
})
7.parent() 获得每个匹配元素的父级元素,从指定类型的直接父节点开始查找,返回一个元素节点
8.parents() 获得每个匹配元素的祖先元素 返回多个父节点
九、css操作
读取和设置style对象的各种属性
css()获取元素的样式属性:$("p").css("color");
css()设置元素的单个样式:$("p").css("color","red")
css(0设置元素多个样式:
$("p").css({"fontsize":"30px","backgroundColor":"red"})
透明度设置为半透明$("p").css("opacity","0.5")
获取元素高度:$("p").css("height")或者$("p").height()
设置元素高度:$("p").height(100)//如果是数字会自动转化为px
注意:css()获取的高度值与样式的设置有关,可能得到“auto”,也可能得到“10px”之类,但是height获取的高度值是元素在页面中的实际高度,而且不带单位,与样式的设置无关。
类似的还有width()
十、元素定位
1.offset() 获取元素在当前视窗的相对偏移,其中返回的对象包含top和left两个属性,向右为正,向下为正,只对可见元素有效,返回值 为object类型。
var offset=$("p").offset();
var left=offset.left;
var top=offset.top;
2.position() 获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移,返回对象有两个属性 top与left。
var position =$("p").position();
var left=position.left;
var top=position.top;
3.scrollTop()和scrollLeft()
获取滚动条距离左端的距离和顶端的距离
var scrollTop=$("p").scrollTop();
var scrollLeft=$("p").scrollLeft();
也可以指定参数
$("textarea").scrollTop(300);
$("textarea").scrollLeft(300);