JQuery text()、html()、val()
$(elem).text(str):添加文本内容str到elem类型元素,返回jQuery对象
$(elem).text():返回第一个elem标签内的文本内容
$(elem).html("<a href='##'>a标签</a>"):添加html内容到elem类型元素,返回jQuery对象
$(elem).html(""):返回第一个elem标签内的html内容
$("input").val(str):给所有input标签设置值为str,返回jQuery对象
$("input").val():返回第一个input标签的value
JQuery each()
遍历
遍历数组:
var arr = ["a","b","c","d","e"];
$.each(arr,function(index,item){
console.log(item);
});
遍历对象
var data = {
a:1,b:2,c:3
};
$.each(data,function(index,item){
console.log(index,item);
});
JQuery attr()、prop()、data()
attr()
:给标签设置一个或者多个属性prop()
:给JQuery的DOM元素设置属性data()
:给JQuery对象的引用增加属性,不设是DOM属性- 标签设置和引用设置属性的方法,DOM获取不到
attr
设置标签属性
设置属性
$("div").attr("ab","3");
console.log($("div").attr("ab"));//3
console.log(document.querySelector("div").ab);//undefined
设置多个属性
$("div").attr({
ab:1,
cd:2,
ef:3
});
多个元素设置多个不同属性值
$("div").attr({
ab:function(index,item){
return index + 10;
},
cd:function(index,item){
return index + 100;
},
ef:function(index,item){
return index + 1000;
}
});
删除某个属性:
$("div").removeAttr("ab");
prop
设置JQuery对象DOM
属性
$("div").prop("ab",3);
data
设置JQuery引用属性
//data
$("div").data("ab","3");
console.log($("div").eq(1).data("ab"));
添加元素:
父元素.append(子元素)
子元素.appendTo(父元素)
var div1 = $("<div></div>");
$("body").append(div1);
div1.appendTo("body");
插入元素到父元素的最前:
$("body").prepend("<div>i am fst</div>");
$("<div>i am fst</div>").prependTo("body");
插入某元素的后面,如果有多个就插入到第一个后面
$(".div1").after("<div></div>");
$("<div></div>").insertAfter(".div1");
插入到某个元素的前面
$(".div1").before("<div></div>");
$(".span1").before("<div></div>");
$("<div></div>").insertBefore(".span1");
包裹与反包裹,外裹和内置
//给所有span外面包裹一层div
$("span").wrap("<div></div>");
//删除父容器取消包裹
$("span").unwrap();
var arr = ["http://www.qq.com","http://www.taobao.com","http://www.jd.com","http://www.163.com"];
$("span").wrap(function(index,item){
return `<a href='${arr[index]}'></a>`;
});
$("span").unwrap();
//内置,在span的内容里面包裹一个a标签
$("span").wrapInner("<a href='#'></a>");
clone
,浅复制与深复制,JQuery中所有clone(true)
都是深复制,clone(false)
无法复制事件
("<div><span></span></div>").appendTo("body").css({
width: 50,
height: 50,
backgroundColor: "red"
}).on("click",function(){
$(this).css({
backgroundColor:"green"
});
}).clone(true).appendTo("body")//clonefalse浅复制,无法复制点击事件,clonetrue深复制可以
删除元素
$(this).detach():删除元素但不删除事件,下次添加的时候事件依然存在
$(this).remove():删除元素并且删除事件
var divs = $("<div></div>").appendTo("body").css({
width: 50,
height: 50,
backgroundColor: "red"
}).on("click", function () {
// $(this).remove();删除元素与事件
$(this).detach();//删除元素但不删除事件,下次添加的时候依然有
$("<button>按钮</button>").appendTo("body").on("click",function(){
divs.appendTo("body");
});
});
替换元素
$("<span></span>").replaceAll("div");//新.replaceAll.旧
$("div").replaceWith("<span></span>");//旧.替换.新