javaScript的Lodash库和jQuery库和layui库

javaScript库

JavaScript库:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。

简单理解: 就是一个JS 文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

比如 jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)。

常见的JavaScript 库:jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等,这些库都是对原生 JavaScript 的封装,内部都是用 JavaScript 实现的,我们主要学习的是 jQuery。

一:Lodash

文档:https://www.lodashjs.com/

1.概念:

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

2.作用:
  • 遍历 array、object 和 string
  • 对值进行操作和检测
  • 创建符合功能的函数
3.常用方法
方法0 描述
_.times() 可以指定循环次数
_.map() 深层查找属性值,Lodash中的_.map方法和JavaScript中原生的数组方法非常的像,但它还是有非常有用的升级。 你可以通过一个字符串而不是回调函数来浏览深度嵌套的对象属性
_.cloneDeep() 深度克隆JavaScript对象是困难的,并且也没有什么简单的解决方案。你可以使用原生的解决方案:JSON.parse(JSON.stringify(objectToClone)) 进行深度克隆。但是,这种方案仅在对象内部没有方法的时候才可行。
_.random() 在指定范围内获取一个随机值,Lodash中的 _.random 方法要比上面的原生方法更强大与灵活。你可以只传入一个参数作为最大值, 你也可以指定返回的结果为浮点数_.random(15,20,true)
_.sampleSize() 从列表中随机的选择列表项,你也可以指定随机返回元素的个数_.sampleSize(smartTeam,n),n为需要返回的元素个数
_.includes() 判断对象中是否含有某元素,_.includes()第一个参数是需要查询的对象,第二个参数是需要查询的元素,第三个参数是开始查询的下标
_.forEach() 遍历循环,不仅是数组,对象也可以,数组的key是元素的下标,当传入的是对象的时候,key是属性,value是值
_.isEmpty() 检验值是否为空
_.filter() 返回真值的所有元素的数组。
_.uniq() 创建一个去重后的array数组副本
_.size(collection) 返回集合的长度
二:JQuery

官网:https://jquery.com/

其他版本:https://releases.jquery.com/

1.版本介绍

1x :兼容 IE 678 等低版本浏览器, 官网不再更新

2x :不兼容 IE 678 等低版本浏览器, 官网不再更新

3x :不兼容 IE 678 等低版本浏览器, 是官方主要更新维护的版本

2.概念
  • jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情
  • j 就是 JavaScript; Query 查询; 意思就是查询js,把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。
  • jQuery 封装了 JavaScript 常用的功能代码,优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
  • 学习jQuery本质: 就是学习调用这些函数(方法)。
  • jQuery 出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。
3.jquery优点
  1. 轻量级。核心文件才几十kb,不会影响页面加载速度。
  2. 跨浏览器兼容,基本兼容了现在主流的浏览器。
  3. 链式编程、隐式迭代。
  4. 对事件、样式、动画支持,大大简化了DOM操作。
  5. 支持插件扩展开发。有着丰富的第三方的插件,例如:树形菜单、日期控件、轮播图等。
  6. 免费、开源。
4.jquery的使用方法和转换
  1. jquery()
  2. $
 //原生获取p
 let p1 = document.getElementById("cs");
 console.log(p1.innerHTML);
//jquery获取
console.log($("#cs").html());
//原生转jquery`$()`
$(p1).html("修改段落1");
//jquery转原生
//1.jquery对象[索引值]
console.log($("#cs")[0].innerHTML);
//2.jquery对象.get(索引值)
console.log($("#cs").get(0))
//jquery实现单数背景颜色(odd:奇数,even:偶数)
$("p:odd").css({backgroundColor:"green"});
$("p:even").css({backgroundColor:"pink"});
5.jquery事件
  1. 全局加载事件

    //第一种
    $(function(){
    	 ...  // 此处是页面 DOM 加载完成的入口
    })
    //第二种
    $(document).ready(function(){
    	 ...  // 此处是页面 DOM 加载完成的入口
    })
    
  2. 总结

    • 等着 DOM 结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery 帮我们完成了封装。
    • 相当于原生 js 中的 DOMContentLoaded。
    • 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
    • 更推荐使用第一种方式。
6.jQuery选择器
  1. 基础选择器

    $("选择器")  //里面选择器直接写CSS选择器
    
    名称 用法 描述
    ID选择器 $(“#id”) 获取指定ID元素
    全选选择器 $(“*”) 匹配所有元素
    类选择器 $(“.class”) 获取同一类class的元素
    标签选择器 $(“div”) 获取同一类标签的所有元素
    并集选择器 $(“div,p,li”) 选取多个元素
    交集选择器 $(“li.current”) 交集元素
  2. 层级选择器

    层级选择器被分成后代选择器和自带选择器

    名称 用法 描述
    自带选择器 $(“ul>li”); 使用>号,获取亲儿子层级元素;注意,并不会获取孙子层级的元素
    后代选择器 $(“ul li”); 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等

    案例

    <body>
        <div>我是divdiv>
        <div class="nav">我是nav divdiv>
        <p>我是pp>
        <ul>
            <li>我是ul 的li>
            <li>我是ul 的li>        
            <li>我是ul 的li>
        ul>
        <script>
            $(function() {
                console.log($(".nav"));  //获取类选择器
                console.log($("ul li")); //用后代选择器选择ul下面的li
            })
        script>
    body>
    
  3. 筛选选择器

    筛选选择器,就是在所有选项中免租条件的进行筛选个选择

    语法 用法 描述
    :first $(‘li:first’) 获取第一个li元素
    :last $(“li:last”) 获取最后一个li元素
    :eq(index) $(“li:eq(2)”) 获取到的li元素中,选择索引号为2的元素,索引号从0开始
    :odd $(“li:odd”) 获取到的li元素,选择索引号为奇数的元素
    :even $(“li:even”) 获取到的li元素中,选择索引号为偶数的元素

    案例

    <body>
        <ul>
            <li>多个里面筛选几个li>
            <li>多个里面筛选几个li>
            <li>多个里面筛选几个li>
            <li>多个里面筛选几个li>
            <li>多个里面筛选几个li>
            <li>多个里面筛选几个li>
        ul>
        <ol>
            <li>多个里面筛选几个li>
            <li>多个里面筛选几个li>
            <li>多个里面筛选几个li>
            <li>多个里面筛选几个li>
            <li>多个里面筛选几个li>
            <li>多个里面筛选几个li>
        ol>
        <script>
            $(function() {
                $("ul li:first").css("color", "red");
                $("ul li:eq(2)").css("color", "blue");
                $("ol li:odd").css("color", "skyblue");
                $("ol li:even").css("color", "pink");
            })
        script>
    body>
    

    通过一个节点找另一个节点

    语法 用法 说明
    parent() $(“li”).parent(); 查找父级
    children(selector) $(“ul”).children(“li”); 相当于$(“ul>li”),最近一级(亲儿子)
    find(selector) $(“ul”).find(“li”); 相当于$(“ul li”),后代选择器
    siblings(selector) $(“.first”).siblings(“li”); 查找兄弟节点,不包括自己本身
    nextAll([expr]) $(“.first”).nextAll(); 查找当前元素之后所有的同辈元素
    prevtAll([expr]) $(“.last”).preAll(); 查找当前元素之前所有的同辈元素
    hasClass(class) $(“div”).hasClass(“protected”); 检查当前的元素是否含有某个特定的类。如果有,则返回true
    eq() $(“li”).eq(2); 相当于$(“li:eq(2)”),index从0开始
7.css操作

css获取的是最终样式,设置的是内嵌样式

  1. jQuery设置样式

    //当设置一个属性的时候
    $('div').css('属性','值')
    //当需要设置多个属性的时候
    $('div').css({
    	属性名:'属性值',
    })
    
  2. jQuery排他思想

    //实现多选一的效果,排他思想:当前元素设置样式,其余兄弟元素清除样式
    $(this).css("color","red");
    $(this).siblings().css("color","");
    
  3. 隐式迭代

    //遍历内部DOM元素(为数组形式存储)的过程就叫做隐士迭代
    //简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用
    $('div').hide();  //页面中所有的div全部隐藏,不用循环操作
    
  4. 链式编程

    //为了节省代码量
    $(this).css('color','red').sibling().css('color','');
    

常用的三种设置类样式方法

作用等同于以前的calssList,可以操作类样式,注意操作类里面的参数不要加点。

//1.添加类
$("div").addClass("current");
//2.删除类
$('div').removeClass("current");
//3.切换类
$('div').toggleClass("current");

注意:

  • 设置类样式方法适合样式多使操作,可以弥补css()不足。
  • 原生JS中className会覆盖元素原先里面的类名,jQuery里面类操作只是对指定类进行操作,不影响原先的类名。
8.jQuery动画效果
  1. 显示隐藏:show(),hide(),toggle()
  2. 划入画出:slideDown(),slideUp(),slideToggle()
  3. 淡入淡出:fadeln(),fadeOut(),fadeToggle(),fadeTo()
  4. 自定义动画:animate()

注意

动画或者效果一旦触发就会执行,如果多次触发,就会造成多个动画或者效果排队执行

jQuery为我们提供了另一个方法,可以停止动画排队:stop();

8.1:显示隐藏

显示隐藏动画,常见的三个方法:show(),hide(),toggle()

  • 显示语法规范

    show(speed,easing,fn())
    
  • 显示参数

    (1)参数都可以省略,无动画直接显示

    (2)speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或表示动画时长的毫秒数值如:(1000)

    (3)easing:(Optional)用来切换效果,默认"swing",可用参数"linear".

    (4)fn:回调函数,在动画完成执行的函数,每个元素执行一次

  • 隐藏语法规范

    hide(speed,easing,fn())
    
  • 隐藏参数

    (1)和显示参数的效果一样

  • 切换语法规范

    toggle(speed,easing,fn())
    
  • 切换参数

    (1)和显示参数的效果一样

代码实例

<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                $("div").show(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(1).click(function() {
                $("div").hide(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(2).click(function() {
              $("div").toggle(1000);
            })
            // 一般情况下,我们都不加参数直接显示隐藏就可以了
        });
    </script>
</body>
8.2:划入划出

常见的三种方法:slideDown(),slideUp(),slideToggle();

1.上滑

slideUp(speed,easing,fn())

参数:参数可以省略

2.下滑

slideDown(speed,easing,fn())

参数:参数可以省略

3.滑动

slideToggle(speed,easing,fn())

参数:参数可以省略

4.实例

<body>
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 下滑动 slideDown()
                $("div").slideDown();
            })
            $("button").eq(1).click(function() {
                // 上滑动 slideUp()
                $("div").slideUp(500);
            })
            $("button").eq(2).click(function() {
                // 滑动切换 slideToggle()
                $("div").slideToggle(500);
            });
        });
    </script>
</body>
8.3:淡入淡出

常见四个方法:fadeln(),fadeout(),fadeToggle(),fadeTo()

1.淡入

fadeIn(speed,easing,fn())

参数:参数都可以省略

2.淡出

fadeOut(speed,easing,fn())

参数:参数都可以省略

3.淡入淡出切换效果

fadeToggle(speed,easing,fn())

参数:参数都可以省略

4.渐进不透明度

fadeTo(speed,opacity,easing,fn())

参数:

(1)opacity:透明度必须写,取值在0-1之间

(2)speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或表示动画时长的毫秒数值如:(1000),必须写

(3)easing:(Optional)用来切换效果,默认"swing",可用参数"linear".

(4)fn:回调函数,在动画完成执行的函数,每个元素执行一次

代码

<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 淡入 fadeIn()
                $("div").fadeIn(1000);
            })
            $("button").eq(1).click(function() {
                // 淡出 fadeOut()
                $("div").fadeOut(1000);
            })
            $("button").eq(2).click(function() {
                // 淡入淡出切换 fadeToggle()
                $("div").fadeToggle(1000);
            });
            $("button").eq(3).click(function() {
                //  修改透明度 fadeTo() 这个速度和透明度要必须写
                $("div").fadeTo(1000, 0.5);
            });
        });
    </script>
</body>
8.4:自定义动画

动画是异步方法,同一个元素的动画有队列,不同的元素就没队列。

1.语法

animate(params,speed,easing,fn())

参数:

(1)params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是符合属性则需要采取驼峰命名法。其余参数都可以省略

代码

<body>
    <button>动起来</button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })
    </script>
</body>

2.停止动画排队

动画或者效果一旦出发就会执行,如果多次触发,就造成多个动画或者效果排队执行。

停止动画的方法为:stop(stopAll,goToEnd);

stop()方法用于停止动画或效果

stop()写到动画或者效果的前面,相当于停止结束上一次的动画

**总结:**每次使用动画之前,先调用stop(),在调用动画

参数: (会有四种效果)

(1) stopAll :是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

(2): goToEnd :规定是否立即完成当前动画。默认是 false。

finish完成到所有动画的最终状态

3.事件切换

事件切换hover(),功能类似css中的伪类:hover.

hover(over(),out())  //over和out为两个函数

over:鼠标移到元素上要触发的函数(相当于mouseenter)

out():鼠标移除元素要触发的函数(相当于mouseleave)

如果只写一个函数,则鼠标经过和离开都会触发他

hover事件和停止动画排列案例

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul>
        </li>
    </ul>
    <script>
        $(function() {
            // 鼠标经过
            // $(".nav>li").mouseover(function() {
            //     // $(this) jQuery 当前元素  this不要加引号
            //     // show() 显示元素  hide() 隐藏元素
            //     $(this).children("ul").slideDown(200);
            // });
            // // 鼠标离开
            // $(".nav>li").mouseout(function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 1. 事件切换 hover 就是鼠标经过和离开的复合写法
            // $(".nav>li").hover(function() {
            //     $(this).children("ul").slideDown(200);
            // }, function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 2. 事件切换 hover  如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数
            $(".nav>li").hover(function() {
                // stop 方法必须写到动画的前面
                $(this).children("ul").stop().slideToggle();
            });
        })
    </script>
</body>
9.jQuery属性操作

常见的三种属性操作:prop(),attr(),data()

9.1prop()
prop("属性名","属性值")

prop()除了普通属性操作,更适合操作表单属性:disabled,checked,selected

9.2attr()
attr("属性") //类似原生getAttribute
attr("属性","属性值") //类似原生setAttribute

attr()除了普通属性操作,更适合操作自定义属性,还可以获取H5自定义属性

9.3data

data()方法可以在指定的元素上存取数据,并不会修改DOM元素解构。一旦刷新页面,之前存放的数据都将被移除(获取自定义标签就是不用写-这个标签,但是这个属性没啥用)

缺点:在自定义属性为数字时,他会自定义把数字转换成number类型

data("name","value") //向被选中元素附加属性
data("name")  //向被选元素获取数据

还可以同时i读取HTML5自定义属性data-index,得到的是数字型

9.4实例
<body>
    <a href="http://www.itcast.cn" title="都挺好">都挺好</a>
    <input type="checkbox" name="" id="" checked>
    <div index="1" data-index="2">我是div</div>
    <span>123</span>
    <script>
        $(function() {
            //1. element.prop("属性名") 获取元素固有的属性值
            console.log($("a").prop("href"));
            $("a").prop("title", "我们都挺好");
            $("input").change(function() {
                console.log($(this).prop("checked"));
            });
            // console.log($("div").prop("index"));
            // 2. 元素的自定义属性 我们通过 attr()
            console.log($("div").attr("index"));
            $("div").attr("index", 4);
            console.log($("div").attr("data-index"));
            // 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
            $("span").data("uname", "andy");
            console.log($("span").data("uname"));
            // 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型
            console.log($("div").data("index"));
        })
    </script>
</body>
10.文本属性值

常见的三种操作:html(),text(),val(),相当于js中的innerHTML,innerText,value属性

10.1html()
html()			//获取元素的内容
html("内容")		//设置元素的内容
10.2text()
text()		//获取元素的文本内容
text("文本内容")		//设置元素的文本内容
10.3val()
val()		//获取表单的值
val("内容")		//设置表单的值

html()可以识别标签,text()不识别标签

10.4实例
<body>
    <div>
        <span>我是内容</span>
    </div>
    <input type="text" value="请输入内容">
    <script>
        // 1. 获取设置元素内容 html()
        console.log($("div").html());
        // $("div").html("123");
        // 2. 获取设置元素文本内容 text()
        console.log($("div").text());
        $("div").text("123");
        // 3. 获取设置表单值 val()
        console.log($("input").val());
        $("input").val("123");
    </script>
</body>
11.jQuery元素操作

jQuery元素操作主要用的是jQuery方法,操作标签的遍历,创建,添加,删除等操作

11.1遍历元素
$(div).each((index,ele)=>{})   //索引和元素

(1).each()方法遍历匹配的每一个元素,主要用DOM处理,each每一个

(2).里面的回调函数有两个参数,index是每个元素的索引号,ele是每个DOM元素对象,不是jquery对象

(3).要使用jquery方法,需要给dom元素转换成jquery对象$()

$.each(object,function(index,ele){})

(1).$.each()方法可用于遍历任何对象,主要用于数据处理,比如数组,对象

(2)index为每个元素的索引号,ele为遍历的内容

11.1.1实例
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            // 如果针对于同一类元素做不同操作,需要用到遍历元素(类似for,但是比for强大)
            var sum = 0;
            var arr = ["red", "green", "blue"];
            // 1. each() 方法遍历元素 
            $("div").each(function(i, domEle) {
                // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
                // console.log(i);
                // 回调函数第二个参数一定是 dom 元素对象,也是自己命名
                // console.log(domEle);  // 使用jQuery方法需要转换 $(domEle)
                $(domEle).css("color", arr[i]);
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
            // 2. $.each() 方法遍历元素 主要用于遍历数据,处理数据
            // $.each($("div"), function(i, ele) {
            //     console.log(i);
            //     console.log(ele);
            // });
            // $.each(arr, function(i, ele) {
            //     console.log(i);
            //     console.log(ele);
            // })
            $.each({
                name: "andy",
                age: 18
            }, function(i, ele) {
                console.log(i); // 输出的是 name age 属性名
                console.log(ele); // 输出的是 andy  18 属性值
            })
        })
    </script>
</body>
11.2创建,添加和修改
  1. 创建

    $("
  2. "
    ) //动态创建了
  3. 内部添加

    ele.append("内容")	//把内容放入匹配元素内部最后面,类似原生appendChild
    ele.prepend("内容")	//把内容放入匹配元素内部的最前面
    

    (1).内部添加元素,生成之后,他们是父子关系

  4. 外部添加

    ele.after("内容")  //把内容放入目标元素后面
    ele.before("内容")	//把内容放入目标元素前面
    

    (1).外部添加元素,生成之后,他们是兄弟关系

  5. 删除元素

    ele.remove()	//是你出匹配的元素(本身)
    ele.empty()		//删除匹配的元素集合中的所有子节点
    ele.html("")	//清空匹配的元素内容
    

    (1).remove()删除元素本身

    (2).empty()和html()作用一样,都可以删除元素里面的内容,不过html还能设置内容

11.2.1实例
<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>
    <script>
        $(function() {
            // 1. 创建元素
            var li = $("
  • 我是后来创建的li
  • "
    ); // 2. 添加元素 // 2.1 内部添加 // $("ul").append(li); 内部添加并且放到内容的最后面 $("ul").prepend(li); // 内部添加并且放到内容的最前面 // 2.2 外部添加 var div = $("
    我是后妈生的
    "
    ); // $(".test").after(div); $(".test").before(div); // 3. 删除元素 // $("ul").remove(); 可以删除匹配的元素 自杀 // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子 $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子 }) </script> </body>
    11.3jQuery尺寸

    尺寸包括元素宽高的获取和设置,且不一样的API对应不一样的盒子模型

    语法 语法
    width(),height() 取得匹配元素宽度和高度值,只算width,height
    innerWidth(),innerHeight() 取得匹配元素宽度和高度值,包括padding
    outerWidth(),outterHeight() 取得匹配元素宽度和高度,包含padding,border
    outerWidth(true),outerHeight(true) 取得包含元素的宽度和高度,包含padding,border,margin
    • 以上参数为空,则是获取相应值,返回的是数字型
    • 如果参数是数字,则是修改相应值
    • 参数可以不必写单位
    11.3.1实例
    <body>
        <div></div>
        <script>
            $(function() {
                // 1. width() / height() 获取设置元素 width和height大小 
                console.log($("div").width());
                // $("div").width(300);
    
                // 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 
                console.log($("div").innerWidth());
    
                // 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 
                console.log($("div").outerWidth());
    
                // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
                console.log($("div").outerWidth(true));
            })
        </script>
    </body>
    

    注意:有了这套API我们将可以快速获取元素的宽高,至于其他属性想要获取和设置,要使用css()等方法配合

    11.4jQuery位置操作

    主要有三个:offset(),position(),scrollTop(),scrollLeft()

    1. offter():设置或获取元素的偏移
      • offter()方法设置或返回被选中元素相对于文档的偏移坐标,跟父级没有关系
      • 该方法有两个属性left,top。offter().top用于获取文档顶部的距离;offter().left用于获取距离文档左侧的距离
      • 可以设置元素的偏移:offter({top:100,left:100})
    2. position():获取元素偏移
      • position()方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准
      • 两个属性:left,top;position().top用于获取距离定位父级顶部的距离,positions().left用于获取距离定位父级左侧的距离
      • 该方法只能获取
    3. scrollTop(),scrollLeft():设置或获取元素被卷去的头部和左侧
      • scrollTop()方法设置或返回被选中元素被卷去的头部
      • 不跟参数是获取,参数为不带单位的数字则是设置被卷去的头部
    11.4.1实例
    <body>
        <div class="father">
            <div class="son"></div>
        </div>
            
        <div class="back">返回顶部</div>
        <div class="container"></div>
       
        <script>
            $(function() {
                // 1. 获取设置距离文档的位置(偏移) offset
                console.log($(".son").offset());
                console.log($(".son").offset().top);
                // $(".son").offset({
                //     top: 200,
                //     left: 200
                // });
          
                // 2. 获取距离带有定位父级位置(偏移) position   如果没有带有定位的父级,则以文档为准
                // 这个方法只能获取不能设置偏移
                console.log($(".son").position());
                // $(".son").position({
                //     top: 200,
                //     left: 200
                // });
          
          		// 3. 被卷去的头部
          		$(document).scrollTop(100);
                // 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
                // 页面滚动事件
                var boxTop = $(".container").offset().top;
                $(window).scroll(function() {
                    // console.log(11);
                    console.log($(document).scrollTop());
                    if ($(document).scrollTop() >= boxTop) {
                        $(".back").fadeIn();
                    } else {
                        $(".back").fadeOut();
                    }
                });
                // 返回顶部
                $(".back").click(function() {
                    // $(document).scrollTop(0);
                    $("body, html").stop().animate({
                        scrollTop: 0
                    });
                    // $(document).stop().animate({
                    //     scrollTop: 0
                    // }); 不能是文档而是 html和body元素做动画
                })
            })
        </script>
    </body>
    
    12.jQuery事件
    12.1事件注册
    element.事件(function(){})
    //$("div").click(function(){事件处理程序})
    

    优点:操作简单,且不用担心事件覆盖等问题

    缺点:普通的事件注册不能做委托,且无法实现事件解绑,需要借助其他方法

    <body>
        <div></div>
        <script>
            $(function() {
                // 1. 单个事件注册
                $("div").click(function() {
                    $(this).css("background", "purple");
                });
                $("div").mouseenter(function() {
                    $(this).css("background", "skyblue");
                });
            })
        </script>
    </body>
    
    12.2事件处理on()绑定事件
    1. 可以绑定多个事件,多个事件处理程序

      $("div").on({
       mouserover:function(){},
       mouserout:function(){},
       click:function(){}
      })
      
    2. 可以事件委派操作,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委托给父元素

      $('ul').on('click','li',function(){
      	alert('hello');
      })
      
    3. 可以使动态创建生成的元素绑定事件

      //先动态创建一个元素
      $("div").append($("

      你好啊,我是动态创建的一个元素

      "
      )) //对动态元素执行绑定事件 $("div").on("click()","p",function(){ alert("你好呀"); })

    实例

    <body>
        <div></div>
        <ul>
            <li>我们都是好孩子</li>
            <li>我们都是好孩子</li>
            <li>我们都是好孩子</li>
        </ul>
        <ol></ol>
    
        <script>
            $(function() {
                // (1) on可以绑定1个或者多个事件处理程序
                // $("div").on({
                //     mouseenter: function() {
                //         $(this).css("background", "skyblue");
                //     },
                //     click: function() {
                //         $(this).css("background", "purple");
                //     }
                // });
                $("div").on("mouseenter mouseleave", function() {
                    $(this).toggleClass("current");
                });
      
                // (2) on可以实现事件委托(委派)
                // click 是绑定在ul 身上的,但是 触发的对象是 ul 里面的小li
                // $("ul li").click();
                $("ul").on("click", "li", function() {
                    alert(11);
                });
    
                // (3) on可以给未来动态创建的元素绑定事件
                $("ol").on("click", "li", function() {
                    alert(11);
                })
                var li = $("
  • 我是后来创建的
  • "
    ); $("ol").append(li); }) </script> </body>
    12.3事件处理off()解绑事件

    ​ 当某个事件上面的逻辑,在特定需求下不需要的时候,可以把该事件上的逻辑移除,这个过程我们称为事件解绑。off()方法可以移除通过on()方法添加的事件处理程序

    $("p").off()  //解绑所有p元素所有事件处理程序
    $("p").off()	//解绑p元素上面的点击事件 后面的foo使侦听函数名
    $("ul").off("click","li");  //解绑事件委托
    

    如果有的事件只想触发一次,可以使用one()来绑定事件委托

    <body>
        <div></div>
        <ul>
            <li>我们都是好孩子</li>
            <li>我们都是好孩子</li>
            <li>我们都是好孩子</li>
        </ul>
        <p>我是一个P标签</p>
    	<script>
            $(function() {
      			// 事件绑定
                $("div").on({
                    click: function() {
                        console.log("我点击了");
                    },
                    mouseover: function() {
                        console.log('我鼠标经过了');
                    }
                });
                $("ul").on("click", "li", function() {
                    alert(11);
                });
      
                // 1. 事件解绑 off 
                // $("div").off();  // 这个是解除了div身上的所有事件
                $("div").off("click"); // 这个是解除了div身上的点击事件
                $("ul").off("click", "li");
      
                // 2. one() 但是它只能触发事件一次
                $("p").one("click", function() {
                    alert(11);
                })
            })
        </script>
    </body>
    
    12.4事件处理trigger()自动触发事件

    三种触发事件

    //第一种
    element.click();
    //第二种
    element.trigger("type");
    //第三种:triggerHandler不会触发元素的默认行为
    triggerHandler(type);
    

    实例

    <body>
        <div></div>
        <input type="text">
          
        <script>
        $(function() {
          // 绑定事件
          $("div").on("click", function() {
            alert(11);
          });
    
          // 自动触发事件
          // 1. 元素.事件()
          // $("div").click();会触发元素的默认行为
          
          // 2. 元素.trigger("事件")
          // $("div").trigger("click");会触发元素的默认行为
          $("input").trigger("focus");
          
          // 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
          $("input").on("focus", function() {
            $(this).val("你好吗");
          });
          // 一个会获取焦点,一个不会
          $("div").triggerHandler("click");
          // $("input").triggerHandler("focus");
        });
        </script>
    </body>
    
    12.5事件对象

    ​ jQuery 对DOM中的事件对象 event 进行了封装,兼容性更好,获取更方便,使用变化不大。事件被触发,就会有事件对象的产生。

    element.on(events,[selector],function(event){})
    

    阻止默认行为:event.preventDefault()或者return false

    阻止冒泡:event.stopPropagation()

    实例

    <body>
        <div></div>
    
    	<script>
            $(function() {
                $(document).on("click", function() {
                    console.log("点击了document");
                })
                $("div").on("click", function(event) {
                    // console.log(event);
                    console.log("点击了div");
                    event.stopPropagation();
                })
            })
        </script>
    </body>
    
    12.6jQuery拷贝对象
    $.extend([deep],target,object1,[objectN]);
    

    1,deep:如果设为true为深拷贝,默认为false浅拷贝

    2.target:要拷贝的目标对象

    3.object1:待拷贝到第一个对象的对象

    4.objectN:待拷贝到第N个对象的对象

    5.浅拷贝目标对象引用的被拷贝的对象地址,修改目标对象会影响被拷贝的对象

    6.深拷贝,前面加true,完全克隆,修改目标对象不会影响被拷贝的对象

    实例

     <script>
            $(function() {
       			// 1.合并数据
                var targetObj = {};
                var obj = {
                    id: 1,
                    name: "andy"
                };
                // $.extend(target, obj);
                $.extend(targetObj, obj);
                console.log(targetObj);
       
       			// 2. 会覆盖 targetObj 里面原来的数据
                var targetObj = {
                    id: 0
                };
                var obj = {
                    id: 1,
                    name: "andy"
                };
                // $.extend(target, obj);
                $.extend(targetObj, obj);
                console.log(targetObj); 
            })
        </script>
    

    12.7jQuery多库共存

    解决方法

    把里面的$符号统一改为jQuery。

    jQuery变量规定新的名称:$.noConflict()

    实例

    <script>
    	$(function() {
      		// 让jquery 释放对$ 控制权 让用自己决定
      		var suibian = jQuery.noConflict();
      		console.log(suibian("span"));
    	})
    </script>
    
    三:LayUI

    文档:https://layui.itze.cn/

    你可能感兴趣的:(Javascript,javascript,前端,jquery)