jQuery中的迭代方法和盒子模型

最新推荐文章于 2022-10-19 08:00:00 发布

玖商

最新推荐文章于 2022-10-19 08:00:00 发布

阅读量738

点赞数 1

分类专栏： JavaScript # jquery 文章标签： javascript 前端开发语言 jquery

本文链接：https://blog.csdn.net/weixin_58139900/article/details/121403158

版权

JavaScript 同时被 2 个专栏收录

59 篇文章 1 订阅

订阅专栏

jquery

7 篇文章 0 订阅

订阅专栏

jQuery中的迭代方法

工具方法

$.map(迭代对象,callBack);

each返回原数组

实例方法

jQuery实例.map(callBack);

jQuery实例.each(callBack);

jQuery的盒子模型

盒子模型属性

滚动监听案例（滚动到那个div那个li有激活样式其余的li显示div背景色）

jQuery中的迭代方法

jQuery中可以分为工具方法和实例方法

工具方法

$.map(迭代对象,callBack);

$/jQuery.方法();

$.map(迭代对象,callBack);

返回值：map返回一个新数组
callBack函数中this是window

需要的元素

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <script src="./js/jquery.1.12.4.js"></script>
    <script>

var arr = [10, 20, 30, 100, 200, 99, 77, 55];
        var oLis = document.getElementsByTagName("li");
        var obj = {
            name: "哈哈",
            age: 100,
            hobby: "篮球",
            sex: "未知"
        };

  var res = $.map(arr, function (val, index) {
            console.log(val, index);//10 0 20 1...
            //console.log(this);//Window {window: Window, self: Window, document: document, name: "", location: Location, …}
            return val * 100;
        });
        console.log(res);//[1000, 2000, 3000, 10000, 20000, 9900, 7700, 5500]




        var res1 =  $.map(oLis, function (val, index) {
            console.log(val, index);//遍历的元素 和索引 <li></li>  0
            // console.log(this);
            return  "哈哈";
        });
        console.log(res1);// ["哈哈", "哈哈", "哈哈", "哈哈", "哈哈", "哈哈", "哈哈", "哈哈", "哈哈", "哈哈"]





       var res2 = $.map(obj, function (val, index) {
            console.log(val, index);
            console.log(this);
            return res2;
       });
       console.log(res2);//[]

each返回原数组

返回值：each返回原数组

相对性能要比map好，只是做一个迭代

this->val值

元素迭代使用each更好

遍历数组

var res3 = $.each(arr, function (index, val) {
            console.log(index, val);
            console.log(this);
       });
       console.log(res3);

遍历li

var res4 = $.each(oLis, function (index, val) {
            console.log(index, val);
            console.log(this);
           this.innerHTML = "哈哈哈";
       });
       console.log(res4);

遍历对象

    var res5 = $.each(obj, function (index, val) {
           console.log(index, val);
           console.log(this);
       });
       console.log(res5);

实例方法

jQuery实例.方法();

jQuery实例.map(callBack);

jQuery中支持链式调用，因为每次返回值当前jQuery这个类实例

jQuery实例.map(callBack);

返回一个新的jQuery对象

 $(arr).map(function (index, val) {
           console.log(index, val);
            console.log(this);
       });

    $(oLis).map(function (index, val) {
           console.log(index, val);
            console.log(this);
       });

  // 不用来迭代对象
        $(obj).map(function(index,val){
            console.log(index,val);
            // console.log(this);
        });

jQuery实例.each(callBack);

返回当前这个jQuery对象

   var res = $(arr).each(function (index, val) {
            console.log(index, val);
            console.log(this);
        });
        console.log(res);



 var res = $(oLis).each(function (index, val) {
            console.log(index, val);
            console.log(this);
        });
        console.log(res);

jQuery的盒子模型

给值就是设置，不给值就是获取

盒子模型属性

 // width([val]) /height([val]);   获取元素自身宽度 或 高度
        console.log($(".t").width());
        console.log($(".t").height());
        // $(".t").width(80);
        // $(".t").height(80);


        // innerWidth() / innerHeight(); 相当于clientWidth / clientHeight:width / height + 左右/上下padding
        console.log($(".t").innerWidth());
        console.log($(".t").innerHeight());


        // outerWidth([false])/outerHeight([false]); 
        // 不传递参数默认值false 相当于offsetWidth/offsetHieght: clientWidth / clientHeight + 左右/上下边框
        // 传递参数true 相当于offsetWidth/offsetHieght + 左右/上下margin
        console.log($(".t").outerWidth());
        console.log($(".t").outerHeight(false));

        console.log($(".t").outerWidth(true));
        console.log($(".t").outerHeight(true));


        console.log("__________________________________________");

        // 获取可视区域的宽高
        console.log($(window).width());
        console.log($(window).height());

        console.log($(window).innerWidth());
        console.log($(window).innerHeight());

        console.log($(window).outerWidth());
        console.log($(window).outerHeight());


        // position(); 
        // 获取定位的值，没有定位就是外间距到父元素内边框的距离
        // 返回一个对象 {left:xx,top:xx}
        console.log($(".w").position());
        console.log($(".c").position());


        // offset();
        // 获取距离body的距离
        // 返回一个对象 {left:xx,top:xx}
        console.log($(".c").offset());



        // 滚动条滚动的距离 给值就是设置，不给值就是获取
        // scrollLeft([val])/scrollTop([val]);

        $(window).scroll(function () {
            //    console.log($(window).scrollLeft());
            console.log($(window).scrollTop());
        });

        document.onclick = function () {
            $(window).scrollTop(200);
        }

滚动监听案例（滚动到那个div那个li有激活样式其余的li显示div背景色）

 <ul>
        <li class="active"><a href="#div1">新闻一</a></li>
        <li><a href="#div2">新闻二</a></li>
        <li><a href="#div3">新闻三</a></li>
        <li><a href="#div4">新闻四</a></li>
    </ul>
    <div style="background: rosybrown" id="div1"></div>
    <div style="background: #99CCFF" id="div2"></div>
    <div style="background: #ffffcc" id="div3"></div>
    <div style="background: salmon" id="div4"></div>

    <script src="./js/jquery.1.12.4.js"></script>
    <script>
        $(window).scroll(function () {
            // 滚动条滚动的距离>=第1个div距离body的距离
            // if ($(window).scrollTop() >= $("div").eq(0).offset().top) {
            //     $("ul li").eq(0).addClass("active").siblings().removeClass("active");
            // }


            // 滚动条滚动的距离>=第2个div距离body的距离
            // if ($(window).scrollTop() >= $("div").eq(1).offset().top) {
            //     $("ul li").eq(1).addClass("active").siblings().removeClass("active");
            // }


            // 滚动条滚动的距离>=第3个div距离body的距离
            // if ($(window).scrollTop() >= $("div").eq(2).offset().top) {
            //     $("ul li").eq(2).addClass("active").siblings().removeClass("active");
            // }



            // 滚动条滚动的距离>=第3个div距离body的距离
            // if ($(window).scrollTop() >= $("div").eq(3).offset().top) {
            //     $("ul li").eq(3).addClass("active").siblings().removeClass("active");
            // }


            $("div").each(function (index, val) {
                if ($(window).scrollTop() >= $(val).offset().top) {
                    $("ul li").eq(index).addClass("active").siblings().removeClass("active");
                }
            });
        });