The bootstrap framework

Bootstrap: a front-end framework that can be used to develop PC and mobile pages. Currently, bootstrap framework is designed for mobile first.

For front-end framework technology: CSS + JS

  • Layout container (container | container – fluid)
  • Grid system (a row is divided into 12 columns by default, the number of columns can be specified as needed) — columns
  • Global style: the HTML tags have done the style Settings, just need to find the corresponding tag style, through the class load can;
  • Component: Wrap HTML (tag + style)
Understand the script

Script: A program embedded in a web document. The code for this program is called a script. Scripts were originally designed primarily for form validation; The scripting language was originally developed by Netscape for its browser, Netscape; Netscape later submitted the script to ECMA, which named the script language it submitted: ECMAScript;

ECMAScript 1.0 1997

ECMAScript2.0 1998

ECMAScript 3.0 1999

ECMAScript 4.0

ECMAScript 5.0 3.1 version 2009

ECMAScript 6.0 | ECMAScript 2015

Complete JS content: ECMAScript + DOM + BOM

Introduction to the script
# pseudo-script: write scripts directly to tags; <a href="#" onclick="return confirm(' delete ')"> <script type="text/javascript"> //document.write('hello,world'); //console.log('hello,wrold'); //alert(' welcome to ES6'); <script SRC ="js/1.js" type="text/javascript"></script>Copy the code
Form’s onLoad event

The order of tag parsing in the browser is as follows: From top to bottom, if you want to manipulate the tags in the document by script, you need to wait for the document to complete loading. When the document is loaded, it will automatically trigger the load event of the form, in which you can write the code to access the label.

<script type="text/javascript"> window.onload = function(){ let aTag = document.querySelector('a'); Atag. onclick = function(){alert(' you clicked on me '); } } </script>Copy the code

Note: There can be only one LOAD event in a document. If multiple loads are written, the last one is valid.

ES6 grammar
1 Variable declaration
Var name=' 1 '; // In ES6, there is a syntax for declaring a variable; Let {var major=" "; Let the add = "101, building 2"; } for(let I =0; i<10; i++){ } //console.log('i -> ' + i); XXX console.log('name:',name); console.log('major',major); //console.log('add',add); XXXCopy the code
Const PI = 3.14; // Define constant; / / PI = 3.15; XXX console.log('PI -> ' + PI) //const : Class Student{} class Person{} const stu = new Student(); stu = new Person(); // let [a,[b,c]] = [1,[2,3]]; console.log(a,b,c);Copy the code

Summary: More let,const declared variables, more destructively assigned variables;

2 Data Types

Null: indicates an empty object

Undefined: indicates that the object has no value or attributes do not exist

// String; Template string let s1=" zhang yi "; let s2 ="world"; //let s3 = s1 + s2; let s3 = `hello:${s1 },.... ${s2 }`; // backquotes; ESC character console.log(s3)Copy the code

Objects: Objects can correspond to classes in the JAVA language

3 JSON

JSON :JavaScript Object Notation

Single object: {} for collection object: [] for collection object

4 function
Function funname([args1,args2,....,argsn]){[return val]} (function(a,b,c){ })(v1,v2,v3); Let fn = function(a,b,c)(){} #fn = function(a,b,c)(){} # fn2 = (args1,args2,... ,argsn) => { };Copy the code
5 closures
npm view jquery versions
npm install jquery

jQuery = function( selector, context ) {
		// The jQuery object is actually just the init constructor 'enhanced'
		return new jQuery.fn.init( selector, context, rootjQuery );
}
window.jQuery = window.$ = jQuery;
Copy the code

6 classes (class)

Class A{# member attribute # attribute name -- private; Constructor (){} class B extends A{}Copy the code
7 Abnormal Operations
promise 
async
await
Copy the code

8 Modular Design

export {obj1,obj2,obj3,..... } #import * as alias from './js/calc.js' import {PI,sum,avg} from './js/calc.js'Copy the code

Summary: About the main syntax involved in late JS programming:

Let the var const deconstruction assignment arrow function module grammar (export | import) Promise | async | awaitCopy the code
DOM

HTML, XML – HTML DOM | XML DOM

For the HTML DOM, when the HTML is loaded, you also get the document object —– document, where each element (node) in the document is an object

If the element has attributes, go directly through the object. Attributes are available; If the tag wraps the information, we get it from innerHTML of the tag object. You can also get it with innerText (untag) —- (except for tags in the form, which have a separate set of controls)

DOM

1. Look for labels
# select doucment.getelementByID ('id') # select doucment.getelementById ('id') document.getElementsByTagName('tagName'); Select * from name; Document. The getElementsByName (' name ') # according to the CSS selector to find the document. The querySelector (CSS selectors written) - a single object Document. QuerySelectorAll (CSS selectors) - collection objectsCopy the code
2, all | light effect
window.onload =function(){
    let chk = document.querySelector('#chk');
    chk.addEventListener('click',()=>{
        let chks = document.querySelectorAll('table input[type="checkbox"]');
        chks.forEach(item => item.checked = chk.checked);
    })
// document.querySelectorAll('table tr').forEach(item=>{
    //    item.addEventListener('mouseover',()=> item.style.background='gray' ); 
    //     item.addEventListener('mouseout',()=> item.style.background='white');
    // });
    document.querySelectorAll('table tr').forEach(item =>{
        item.onmouseover =()=>item.style.background='gray';
        item.onmouseout =()=>item.style.background='white';
    });
    
}
Copy the code
3, change the label style
Tagobj. className =' Class selector name '; Tagobje.style. style attribute =' style value ';Copy the code
4. Linkage menu

Linkage implementation: mainly using JS, data can come from the dynamic data from the server (Ajax)

The option label

attribute instructions
text The text displayed by the label
value Tag Value Specifies the value of the attribute

The select tag

attribute instructions
options Drop – down collection of selections
selectedIndex Index of the selection (starting from 0) 
Copy the code
5. TAB TAB
window.onload =function(){ tab(); } function tab(){ const lis = document.querySelectorAll('.tab .tab-header ul li'); const divs= document.querySelectorAll('.tab .tab-body div'); Lis.foreach ((item,index)=>{item.adDeventListener ('click',()=>{// Delete hot li; //lis.forEach(item=>item.className=''); document.querySelector('.tab .tab-header ul li.hot').className=''; // Need to activate the current li; item.className='hot'; // make the corresponding div in tab-body display divs.foreach (item=>item.className='hidden'); divs[index].className=''; }); }); }Copy the code
6. Rencast diagram
let defaultIndex = 0; let timer; window.onload =function(){ carousel(); } function carousel(){ const imgs = document.querySelectorAll('.carousel .carousel-img img'); const spans = document.querySelectorAll('.carousel .carousel-circle span'); imgs.forEach((item,index)=>{ item.className='hidden'; if(index==defaultIndex){ item.className=''; // Unfocus document.querySelector('.carousel.carousel-circle sp.hot ').className= "; // Set focus; spans[index].className ='hot'; }}); / / switch; defaultIndex++; if(defaultIndex>3){ defaultIndex=0; Spans. ForEach ((item,index)=>{item.addeventListener ('click',()=>{window.clearTimeout(timer); // Empty timer; defaultIndex = index; carousel(); })}) // Need a timer; timer = window.setTimeout(carousel,3000); }Copy the code
7. Form validation
View the bootstrap version: NPM view Bootstrap versions: NPM init -y ------- To obtain a configuration file (package.json) for the project.Copy the code

Regular expression

7. Table operation

Scripting language for the form tag individually designed a set of independent API, can use the DOM to the operation of the form tag (modify the form to add delete | |), but not state convenient (relative to form independent design a set of API)

Table
  --deleteRow
  --insertRow
TableRow
  --insertCell
  --rowIndex
TableCell
  --innerHTML
Copy the code
BOM

BOM :Browse Object Model

window --setInterval(fn,time); --setTimeOut(fn,time); --open(); --close(); --alert('msg') --confirm(msg); --prompt(msg,defaultvalue); --document --getElementById --getElementsByTagName --getELmenetsByName --querySelector --querySelectAll --createElement -... --location --href --host --port --.... Get latitude and longitude + Baidu map -- geolocation (JS); --history --forward() | go(1) --back()| go(-1); --navigator --appCodeName --appName --appVersion --userAgent --screen --width --height --framesCopy the code
jQuery
1 introduction of jQuery
https://jquery.com/
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
Copy the code
NPM view jquery versions Download: NPM install [email protected]Copy the code
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        console.log('hello,world');
    })
</script>
Copy the code
2 jQuery Ready event

In general, the Ready event is the same as the load of form objects in native JS, but the ready execution efficiency (timing) is earlier than the load;

A page can have multiple ready events, and native JS can only have one load event.

$(document).ready(function(){
    //jquery code;
    console.log('hello,world');
});
$(function(){
    console.log('hello,world')
});
Copy the code
3 conversion between jQuery objects and native JS objects

Principle: the apis of jquery objects and native JS objects are not interusable. When writing JS objects, either write based on jquery framework or use native JS to write.

JQuery selector is a collection object;

A native JS object is the object itself

//let div1 = $div.get(0); // Get the native JS object; let div1 = $div[0]; InnerHTML ='<font color="blue">hello:div1</font>' Convert a native JS object into a jquery object using the jquery API; div = document.querySelect('div'); let $div2 = $(div); $div2.html('<h1>this is $div2 content</h1>'); console.log($div2)Copy the code

When writing jquery scripts, it is recommended to name jquery variables with $to identify the object as a jquery object

4 jQuery selector

Step 1: Select something, Step 2: Do something;

Find document tags in native JS

Document. QuerySelector (selector syntax) document. QuerySelectorAll (selector syntax);

Selector syntax: CSS selector syntax;

Copy the code
5 jQuery event registration
Document.queryselector ('#div1').addeventListener (' event name ',fn); Document.queryselector ('#div1').on event name = fn; $(' parent tag ').on(' event name ',' child tag selector ',fn); $(' selector ').click(fn);Copy the code
6 jQuery style operations
Native JS style changes document.querySelector(' selector ').style. Style attribute =' style value '; Doucment. QuerySelector (' selector '). ClassName =' new class selector name '; JQUery Style API $(' selector ').css({style attribute 1: Style value 1, Style attribute 2: Style value 2,... , style attribute n: style value n}); $(' selector ').addClass(' class selector name '); | $(' selector '). RemoveClass (' class selector name) $(' selector '). Attr (name | properties | key, value | fn)Copy the code

The whole jQuery framework is based on: jQuery([selector,[context]]) factory function; The factory function jQuery() has three major versions

JQuery ([selector,[context]]) : query document tags;

JQuery (callback) : $(document).ready(fn)

JQuery ([HTML,[ownerDocument]]) : Create a jQuery object (tag object) — add it to the document;