- Written in front: refer to the tutorial of Bilibili dark horse programmer pink teacher
- Address: https://www.bilibili.com/video/BV1Sy4y1C7ha?t=41&p=4
table of Contents
jQuery multi-library coexistence
Waterfall plug-in (emphasis on explanation)
jQuery object copy
- If you want to copy (merge) an object to another object, you can use the $.extend() method
$.extend([deep], target, object1, [objectN])
- deep: If set to true for deep copy, the default is false shallow copy
- target: the target object to be copied
- object1: The object to be copied to the first object.
- objectN: The object to be copied to the Nth object.
- Shallow copy the address of the copied object referenced by the target object. Modifying the target object will affect the copied object.
- Deep copy, add true in front, complete clone, modifying the target object will not affect the copied object.
var targetObj = {}; var obj = { id: 1, name: "andy" }; // $.extend(target, obj); $.extend(targetObj, obj); console.log(targetObj); var targetObj = { id: 0 }; var obj = { id: 1, name: "andy" }; // $.extend(target, obj); $.extend(targetObj, obj); console.log(targetObj); // 会覆盖targetObj 里面原来的数据 var targetObj = { id: 0, msg: { sex: '男' } }; var obj = { id: 1, name: "andy", msg: { age: 18 } }; // // $.extend(target, obj); // $.extend(targetObj, obj); // console.log(targetObj); // 会覆盖targetObj 里面原来的数据 // // 1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象 targetObj.msg.age = 20; console.log(targetObj); console.log(obj); // 2. 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起 $.extend(true, targetObj, obj); // console.log(targetObj); // 会覆盖targetObj 里面原来的数据 targetObj.msg.age = 20; console.log(targetObj); // msg :{sex: "男", age: 20} console.log(obj);
- Deep copy and shallow copy analysis:
- Shallow copy
- Deep copy
jQuery multi-library coexistence
- Problem overview:
- jQuery uses $ as an identifier. With the popularity of jQuery, other js libraries will also use this $ as an identifier. Using them together will cause conflicts.
- Objective demand:
- A solution is needed so that jQuery and other js libraries do not conflict and can exist at the same time. This is called multi-library coexistence.
- jQuery solution:
- Change the $ symbol inside to jQuery . Such as jQuery(``div'')
- jQuery variable specifies a new name : $.noConflict()
- var xx = $ .noConflict ();
$(function() { function $(ele) { return document.querySelector(ele); } console.log($("div")); // 1. 如果$ 符号冲突 我们就使用 jQuery jQuery.each(); // 2. 让jquery 释放对$ 控制权 让用自己决定 var suibian = jQuery.noConflict(); console.log(suibian("span")); suibian.each(); })
jQuery plugin
- jQuery has limited functions. If you want more complex special effects, you can use the jQuery plug-in.
- Note: These plugins also rely on jQuery to complete, so jQuery files must be imported first , so they are also called jQuery plugins.
- Websites commonly used by jQuery plugins:
- jQuery plugin library http://www.jq22.com/
- jQuery House http://www.htmleaf.com/
- Steps to use jQuery plug-in:
- Introduce relevant documents. (JQuery files and plugin files)
- Copy relevant html, css, js (call the plug-in).
Waterfall plug-in (emphasis on explanation)
- Download location
- Code demo
- Three points of plug-in use: 1. Introduce css. 2. Introduce JS 3. Introduce html . (Some simple plug-ins only need to introduce html and js, and some even only need to introduce js)
- 1. Introduce css.
<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="css/default.css"> <!-- 下面的样式代码为页面布局，可以引入，也可以自己写，自己设计页面样式，一般为直接引入，方便 --> <style type="text/css"> #gallery-wrapper { position: relative; max-width: 75%; width: 75%; margin: 50px auto; } img.thumb { width: 100%; max-width: 100%; height: auto; } .white-panel { position: absolute; background: white; border-radius: 5px; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); padding: 10px; } .white-panel h1 { font-size: 1em; } .white-panel h1 a { color: #A92733; } .white-panel:hover { box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); margin-top: -5px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } </style>
- 2. Introduce js.
<!-- 前两个必须引入 --> <script src="js/jquery-1.11.0.min.js"></script> <script src="js/pinterest_grid.js"></script> <!-- 下面的为启动瀑布流代码，参数可调节属性，具体功能可参考readme.html --> <script type="text/javascript"> $(function() { $("#gallery-wrapper").pinterest_grid({ no_columns: 5, padding_x: 15, padding_y: 10, margin_bottom: 50, single_column_breakpoint: 700 }); }); </script>
- 3. Introduce html.
<!-- html结构一般为事先写好，很难修改结构，但可以修改内容及图片的多少（article标签） --> <section id="gallery-wrapper"> <article class="white-panel"> <img src="images/P_000.jpg" class="thumb"> <h1><a href="#">我是轮播图片1</a></h1> <p>里面很精彩哦</p> </article> <article class="white-panel"> <img src="images/P_005.jpg" class="thumb"> <h1><a href="#">我是轮播图片1</a></h1> <p>里面很精彩哦</p> </article> <article class="white-panel"> <img src="images/P_006.jpg" class="thumb"> <h1><a href="#">我是轮播图片1</a></h1> <p>里面很精彩哦</p> </article> <article class="white-panel"> <img src="images/P_007.jpg" class="thumb"> <h1><a href="#">我是轮播图片1</a></h1> <p>里面很精彩哦</p> </article> </section>
Image lazy loading
- The use of lazy loading of pictures can increase the download speed of web pages. It can also help reduce server load
- When our page slides to the visible area, the picture is displayed.
- We use the jquery plug-in library EasyLazyload .
- Note that the js import file and js call must be written to the end of the DOM element (picture) at this time
- 1. Introduce js
<script src="js/EasyLazyload.min.js"></script> <script> lazyLoadInit({ showTime: 1100, onLoadBackEnd: function(i, e) { console.log("onLoadBackEnd:" + i); }, onLoadBackStart: function(i, e) { console.log("onLoadBackStart:" + i); } }); </script>
- 2. Introduce html
<img data-lazy-src="upload/floor-1-3.png" alt="">
Full screen scrolling (fullpage.js)
- gitHub： https://github.com/alvarotrigo/fullPage.js
- Chinese website: https://www.dowebok.com/
Code demo
- Full-screen scrolling has multiple forms, so different styles of html and css are different, but js has not changed much. So the following only demonstrates the introduction of js, the introduction of html and css is based on your actual situation
- Which style should the project use to introduce the corresponding HTML and CSS.
<script src="js/jquery.min.js"></script> <script src="js/fullpage.min.js"></script> <script> $(function() { $('#dowebok').fullpage({ sectionsColor: ['pink', '#4BBFC3', '#7BAABE', '#f90'], navigation: true }); }); </script>
- Note: In actual development, generally copy the file, then modify and add functions in the file.
bootstrap JS plugin
- Bootstrap is a simple, intuitive, and powerful front-end development framework designed by Twitter based on HTML, CSS, and JavaScript. It relies on jQuery to implement it and supports responsive layout, making Web development more convenient and faster.
- Where software reuse is used in software development, the reused part can be called a component, and any component that has reserved interfaces in the application is a plugin .
- Bootstrap components are very convenient to use: 1. Introduce bootstrap related css and js 2. Go to the official website to copy html
- Download link: https://v3.bootcss.com/
- Reference website: https://www.bootcss.com/
- The bootstrap framework also relies on jQuery development, so the use of the js plugin inside must also include jQuery files.
