JQuery

一、文档处理

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"));