一.创建节点
1.创建元素
$( function(){
var $div = $("<div></div>"); //创建div元素
$("body").append($div); //添加到body下
})
2.输入文本
$(function(){
var $div = $("<div>DOM</div>");
$("body").append($div);
})
//js下用
var txt = document.createTextNode("DOM");
div.appendChild(txt);...执行效率高
3设置属性
$(function(){
var $div = $("<div title="盒子"></div>");
$("body").append($div);
})
//可见jQuery简便,但效率低
二.插入内容
1.内部:
- append():每个元素内部加内容content
- appendTo():append用法的颠倒
- prepend():每个元素内部前置内容
- prependTo():prepend的颠倒
2.外部:
- after():元素后面
- before():元素前面
- insertAfter():所有元素插入到另一个指定的元素集合后面
- insertBefore():。。。前面
3.删除:
- remove():从DOM中删除元素(不保留数据)
- empty():删除所有匹配的元素的子元素
- detach():从DOM中删除所有匹配元素(会保留数据,再移回DOM时用这个)
三.克隆内容
$(function(){
$("b").click(function(){
$(this).toggleClass("off");
});
$("b").clone(true).insertAfter("p");
})
//clone(true)复制<b>标签,并把它复制到<p>后,同时保留该标签默认的事件处理函数
四.替换内容
$(function(){
$("button").click(function(){
$(this).replaceWith("<div>"+$(this).text()+"</div>");
});
})
//把当前按钮换成div元素+按钮
//replaceAll和replaceWith操作相反
五.包裹内容
1.外包:
$(function(){
$("a").wrap("<li></li>");
})_
//<a>被一个<li>元素包裹
2.内包:
$(function(){
$("a").wrap("<li></li>");
$("body").wrapInner("<ul></ul>");
})_
//<a>被一个<li>元素包裹
3.卸包:
$(function(){
$("button").toggle(function(){
$("a").wrap("<li></li>");
},function(){
$("a").unwrap();
});
})
六.设置属性
1.prop
$(function(){
$("input").prop({
disabled:true
});
})
//prop大多用于设置disabled和checked等是或否的属性
2.attr
$(function(){
$("img").attr("src",function(index){
return "images/icon("+(index+1)".png";
})
})
3.删除属性:
removeProp、removeAttr
七.类操作
- addClass()、removeClass()
- 切换类:toggleClass(…)
- 判断类:hasClass(…)
八.读写文本和值
1.读写html
$(function(){
var s = $("div").html();
$("p").html(s);
})
//s保存div的值,再传给p
2.读写文本
(function(){
var s =(“div”).text();
$(“p”).text(s);
})
//访问div内容,写入到p中
3.读写值
$(function(){
$("input").focus(function(){
if($(this).val()=="请输入文本")$(this).val("");
})
})
//如果文本的值是。。。就设为空“”
九.定位:
offset就对定位
position相对定位
var o1 = $("div").eq(0).position();
//获取o1的相对偏移位置