一、文档处理
1.在div内部追加一张图片
<div id="div1">div1</div> $("#div1").append("<img src='img/1.png'/>"); //在div1的里面最后插入img $("<img src='img/2.png'/>").appendTo("#div1"); //把img插入到div里面的最后 $("#div1").prepend("<img src='img/1.png'/>"); //在div的里面最前插入img $("<img src='img/2.png'/>").prependTo("#div1"); //把img插入div的里面的最前面
2.在div外部加一个段落
<div id="div1">div1</div> $("#div1").after("<p>这是p标签</p>"); //在div1的后面插一个段落 $("<p>这是p标签2</p>").insertAfter("#div1"); //把一个段落插到div1的后面 $("#div1").before("<p>这是p标签</p>"); //在div1的前面插一个段落 $("<p>这是p标签2</p>").insertBefore("#div1"); //把一个段落插到div1的前面
3.为每一个选中的节点都包裹一层父节点
$("div").wrap("<section></section>");
4.将选中的所有节点,包裹在同一个父节点中
$("div").wrapAll("<section></section>")
5.替换选中的节点
$("div p").replaceWith("<span>1</span>");//把选中的节点用span替换 $("<span>1</span>").replaceAll("div p"); //用span替换选中的节点
6.清空当前节点中的内容,但会保留当前节点标签,当然也保留当前节点的绑定事件
$("#div1").empty();
7.删除当前节点,及当前节点的子节点,返回被删除的节点,但是恢复后不再保留节点所绑定的事件
$("#div1").remove();
8.同remove()删除当前节点,及当前节点的子节点,返回被删除的节点,恢复后保留节点所绑定的事件
$("#div1").detach();
9.js中的cloneNode()与jquery中clone()的区别
a.cloneNode()如果不传入参数或者传入false,表示只克隆当前节点,不克隆子节点,传入参数true,表示克隆当前节点及子节点;不管是否传入参数都不能克隆绑定事件
b.clone()如果不传入参数或者传入false,表示克隆当前节点及子节点,但是不克隆当前节点的绑定事件,传入参数true表示即克隆当前节点和子节点,还克隆当前节点的绑定事件
传入的第二个参数表示是否克隆子节点clone(true,false);
$("#div1").clone().insertBefore("button:eq(0)"); $("#div1").clone(true).insertBefore("button:eq(0)");
二、属性和CSS
1.节点属性
console.log($("#div1").attr("id"));//获取节点属性 $("#div1").attr("class","cls");//设置节点属性 //传入对象以键值对的形式同时设置多对属性 $("#div1").attr({ "class" : $("#div1").attr("class")+" cls", "name" : "name1", "style" : "font-size:24px;color:blue;" })
2.删除节点属性
$("#div1").removeAttr("class");
3.attr和prop的区别:
prop和attr一样多可以对文本的属性进行读取和设置;两者的不同 在读取checked,disabled,等属性名=属性值的属性时
attr返回属性值或者undefined,当读取的checked属性时不会根据是否选中而改变
prop返回true和false 当读取的checked属性时会根据是否选中而改变
也就是说attr要取到的属性必须是在标签上写明的属性,否则不能取到
onsole.log($("input").attr("disabled")); console.log($("input:eq(0)").attr("disabled")); console.log($("input").prop("disabled")); console.log($("input:eq(0)").prop("disabled"));
4.增加class名,若本来就有则会在原有class的基础上新增class名
$("#div1").addClass("cls1");
5.删除指定的class名,其余未删除的class名依然会保留
$("#div1").removeClass("cls1");
6.切换class,如果有指定的class就删除,如果没有就新增
$("button:eq(0)").click(function () { $("#div1").toggleClass("div1") });
7.html()、text()、val()的区别
.html()取到或设置节点中的html代码
.text()取到或设置节点中的文本
.val()取到或设置input的value属性值
$("#div1").html("<span>我是还是div1</span>"); $("#div1").text("<span>我是还是div1</span>"); $("input:eq(0)").val("ha");
8.CSS
$("#div2").css("color","yellow"); $("#div2").css({ "color" : "white", "font-weight" : "bold", "font-size" : "50px", }); $("button:eq(1)").click(function () { $("#div3").css({ "color" : "orange", "font-size" : function (index,value) { var n = parseInt(value) + 5; console.log(index+"---"+value); return n + "px" ; } }); })
9.宽高
//height $("#div3").height(400); $("#div3").width(400); //宽度+padding console.log($("#div3").innerWidth()); console.log($("#div3").innerHeight()); //不传入参数:宽度+padding+border //传入true:宽度+padding+border+margin console.log($("#div3").outerWidth()); console.log($("#div3").outerWidth(true)); console.log($("#div3").outerHeight()); console.log($("#div3").outerHeight(true));
10.偏移
//返回一个节点,相对于浏览器左上角的偏移量 //返回一个对象格式{top:20,left:20} //此方法,测量时,会将margin算作偏移量的距离 console.log($("#div3").offset());
//返回一个节点,相对于父容器的偏移量 //注意: //①:使用此方法,要求父元素必须是定位元素。如果父元素不是定位元素, //则依然是相对浏览器左上角进行测量 //②:此方法,测量偏移时,将不考虑margin。会将margin视作父容器的一部分。 console.log($("#div5").position());
三、其他函数
1.each()用于遍历jquery中的对象数组
$("#ul1 li").each(function (index,item) { console.log(index); console.log(item); });
$.each(arr/obj,function(index,item){});
2..size()和length返回当前元素的长度
console.log($("#ul1 li").size()); console.log($("#ul1 li").length);
3.$.map()数组映射
var newArr = $.map(arr,function (index,item) { return item + 5 ; });
4.检测一个值是否在数组中,返回下标。如果没有返回-1 ,相当于js中的indexOf()
var arr = [1,4,3,2,5]; var index = $.inArray(2,arr,3); console.log(index);
5.toArray()将选中的jquery Dom集合,恢复成数组。数组的每一个是JS对象
console.log($("#ul1 li").toArray());
6.merge()只能合并两个数组
var arrs = $.merge([0,1,5],[2,4,9]);
7.parseJSON(str);把字符串转换为json对象
var str = '{"1":"张三","2":"李四","3":"王五","4":"赵六","5":"天气"}' console.log(str); var obj = $.parseJSON(str); console.log(obj);
8.contains(父容器,子容器);检测父容器中是否有子容器,都是js对象
console.log($.contains($("#ul1")[0],$("li")[0])); console.log($.contains($("#ul1")[0],$("p")[0])); console.log($.contains(document.getElementById("ul1"),document.getElementsByTagName("li")[0])); console.log($.contains(document.getElementById("ul1"),document.getElementsByTagName("p")[0]));
9.筛选
console.log($("#ul1").hasClass("cls")); console.log($("#li1").next()); console.log($("#li1").nextAll()); console.log($("#li1").nextUntil("#li4"));