• 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"));
     
  • 相关阅读:
    Cooperate with Myself
    A brief introduction of myself
    计算1+11+111+1111+........
    Jav实现F(n)=F(n-1)+F(n-2)+.....+F(1)+1
    查找二维数组中是否有符合的目标值
    排序算法
    时间复杂度
    Java代码实现单例模式
    查找一个字符串中重复出现字符的个数
    null,“”,empty的区别
  • 原文地址:https://www.cnblogs.com/ytsbk/p/9000077.html
Copyright © 2020-2023  润新知