jQuery

Course introduction

Learn the basic usage and application scenarios of JQuery function library.

Introduction to jquery

JQuery is currently the most widely used javascript library. According to statistics, 46% of the world's top 1 million websites use jQuery, far more than other libraries. Microsoft even uses jQuery as its official library.

jQuery version is divided into 1.x series and 2.x, 3.x series. 1.x series is compatible with low version browsers. 2.x and 3.x series give up supporting low version browsers. At present, the most used is 1.x series.

jquery is a function library, a js file, pages with script tags into this js file can be used.

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

jquery's slogan and wish Write Less, Do More

1,http://jquery.com/ Official website
2,https://code.jquery.com/ Version Download

jquery loading

Writing the statement to get the element to the head of the page will cause errors because the element has not been loaded. jquery provides a read method to solve this problem, which is faster than the native window.onload.

<script type="text/javascript">

$(document).ready(function(){

     ......

});

</script>

It can be abbreviated as:

<script type="text/javascript">

$(function(){

     ......

});

</script>

jquery selector

jquery Usage Idea I
Select a Web page element and then do something about it.

jquery selector
jquery selector can quickly select elements, select the same rules as css style, and use the length attribute to determine whether the selection is successful.

$('#MyId') // Select the page element whose id is myId
$('.myClass') // Select the element whose class is myClass
$('li') //Select all li elements
$('#ul1 li span') / / select id as all span elements under ul1 element
$('input[name=first]') // Select the input element whose name attribute equals first

Filtering Selection Sets

$('div').has('p'); // Select div elements that contain p elements
$('div').not('.myClass'); //Selecting a class is not equal to the div element of myClass
$('div').filter('.myClass'); //Select the div element whose class equals myClass
$('div').eq(5); //Select the sixth div element

Selection Set Transfer

$('div').prev(); //Select the peer element next to the div element
$('div').prevAll(); //All peer elements before div elements are selected
$('div').next(); //Select the peer element next to the div element
$('div').nextAll(); //Select all the peer elements behind the div element
$('div').parent(); //Select the parent element of div
$('div').children(); //Select all child elements of div
$('div').siblings(); //Select div's sibling elements
$('div').find('.myClass'); //Select the element whose class in div equals myClass

Determine whether an element has been selected.
jquery has a fault-tolerant mechanism, even if no element is found, it will not make a mistake. You can use the length attribute to determine whether the element is found. The length is equal to 0, that is, the element is not selected, and the length is greater than 0, that is, the element is selected.

var $div1 = $('#div1');
var $div2 = $('#div2');
alert($div1.length); // Ejection 1
alert($div2.length); // Eject 0
......
<div id="div1">This is one div</div>

jquery style operation

jquery Usage Idea II
The same function completes the selection and assignment

Interline Style of Operations

// Get the style of div
$("div").css("width");
$("div").css("color");

//Setting the style of div
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

Special attention
The selector obtains multiple elements, and the information is obtained by the first one, such as: $("div").css("width"), and the width of the first div is obtained by the selector.

Operational style class name

$("# div1").addClass("divClass2")// / Object Additional Style divClass2 with id of div1
 The style of $("#div1").removeClass("divClass")// removing the class name of an object whose id is div1
 $("#div1").removeClass("divClass divClass2")// Remove multiple styles
 $("#div1").toggleClass("anotherClass")// Repeated switch to anotherClass style

Binding click events

Binding click events to elements can be done in the following ways:

$('#btn1').click(function(){

    // Internal this refers to native objects

    // Use jquery objects with $(this)

})

Gets the index value of the element
Sometimes it is necessary to get the index position of the matching element relative to its sibling element, which can be obtained by the index() method.

var $li = $('.list li').eq(1);
alert($li.index()); // Ejection 1
......
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

Classroom exercises

tab

jquery special effects

fadeIn() Fade in

    $btn.click(function(){

        $('#div1').fadeIn(1000,'swing',function(){
            alert('done!');
        });

    });

fadeOut() Fade out
fadeToggle() Switching fade-in and fade-out
hide() Hidden elements
show() Display elements
toggle() Switching the visible state of the element
slideDown() Unfold downward
slideUp() Roll up
slideToggle() Expand or roll up an element in turn

jquery chain call

The method of the jquery object returns the jquery object after execution, and all the methods of the jquery object can be written together:

$('#Elements with div1'// ID as div1
.children('ul') //The ul child element below this element
.slideDown('fast') //Height changes from zero to actual height to display ul elements
.parent()  //Jump to the parent element of ul, which is the element with id div1
.siblings()  //All sibling elements that jump to div1 element level
.children('ul') //ul sub-elements in these sibling elements
.slideUp('fast');  //Hide ul elements by changing the actual height to zero

Classroom exercises

Hierarchical menu

jquery animation

The animate method can set the animation on the attribute value of an element, and one or more attribute values can be set. When the animation is finished, a function will be executed.

$('#div1').animate({
    width:300,
    height:300
},1000,'swing',function(){
    alert('done!');
});

Parameters can be written as numeric expressions:

$('#div1').animate({
    width:'+=100',
    height:300
},1000,'swing',function(){
    alert('done!');
});

Size-dependent, rolling events

1. Get and set the dimensions of elements

width(), height() to get the elements width and height  
innerWidth(), innerHeight(), including the width and height of padding  
outerWidth(), outerHeight() include width and height of padding and border  
outerWidth(true), outerHeight(true) includes padding and border, and margin's width and height.

2. Get the absolute position of the element relative to the page

offset()

Classroom exercises

Add cart animation

3. Get the width and height of the browser's visual area

$(window).width();
$(window).height();

4. Get the width and height of the page document

$(document).width();
$(document).height();

5. Get the Scroll Distance of the Page

$(document).scrollTop();  
$(document).scrollLeft();

6. Page scroll events

$(window).scroll(function(){  
    ......  
})

Classroom exercises

1. Top Menu

2. Scroll to the top

jquery attribute operation

1. Extract or set html content from html()

// Remove html content

var $htm = $('#div1').html();

// Setting up html content

$('#Div1'). HTML ('< span > add text </span >');

2. Pro () fetches or sets the value of an attribute

// Remove the address of the picture

var $src = $('#img1').prop('src');

// Set the address and alt properties of the image

$('#img1').prop({src: "test.jpg", alt: "Test Image" });

jquery loop

To operate on the set of objects selected by jquery separately, we need to use jquery loop operation. In this case, we can use the each method on the object:

$(function(){
    $('.list li').each(function(i){
        $(this).html(i);
    })
})
......
<ul class="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Classroom exercises

accordions

jquery event

Event function list:

blur() element loses focus
 focus() element gets focus
 click() mouse click
 mouseover() mouse entry (entry sub-elements also triggered)
mouseout() Mouse off (leaving child elements also triggered)
mouseenter() mouse entry (entry subelement does not trigger)
mouseleave() Mouse away (leaving the child element does not trigger)
hover() specifies handlers for both mouseenter and mouseleave events
 ready() DOM loading completed
 resize() Browser window size changes
 scroll() scroll bar position changes
 submit() user submits form

Other ways to bind events

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());
    });
});

Unbound event

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());

        // $(this).unbind();
        $(this).unbind('mouseover');

    });
});

Event Bubbling

What is event bubbles?
Triggering an event (such as clicking on onclick event) on an object, if the object defines a handler for the event, the event calls the handler. If the event handler is not defined or the event returns true, the event propagates to the parent object of the object, from there. Outside, until it is processed (all similar events of the parent object will be activated), or it reaches the top level of the object hierarchy, the document object (some browsers are window s).

The role of event bubbles
Event bubbling allows multiple operations to be centralized (adding event handlers to a parent element, avoiding adding event handlers to multiple child elements), and allows you to capture events at different levels of the object layer.

Prevent Event Bubble
Event bubbles are sometimes unnecessary and need to be blocked by event.stopPropagation().

$(function(){
    var $box1 = $('.father');
    var $box2 = $('.son');
    var $box3 = $('.grandson');
    $box1.click(function() {
        alert('father');
    });
    $box2.click(function() {
        alert('son');
    });
    $box3.click(function(event) {
        alert('grandson');
        event.stopPropagation();

    });
    $(document).click(function(event) {
        alert('grandfather');
    });
})

......

<div class="father">
    <div class="son">
        <div class="grandson"></div>
    </div>
</div>

Prevent default behavior
Prevent form submission

$('#form1').submit(function(event){
    event.preventDefault();
})

Merge blocking operation
In practical development, the combination of blocking bubbles and default behavior is usually written, and the combination can be used.

// event.stopPropagation();
// event.preventDefault();

// Consolidation:
return false;

Classroom exercises
Page pop-up box (click the pop-up box to close);

Event Delegation

Event delegation is to add events to the parent level by using the principle of bubbling. By judging the subset of event sources and performing corresponding operations, event delegation can greatly reduce the number of event bindings and improve performance. Secondly, it can make the newly added sub-elements have the same operation.

Writing of General Binding Events

$(function(){
    $ali = $('#list li');
    $ali.click(function() {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

The Writing of Event Delegation

$(function(){
    $list = $('#list');
    $list.delegate('li', 'click', function() {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

jquery element node operation

Create Nodes

var $div = $('<div>');
var $div2 = $('<div>This is one div element</div>');

Insert Node
1. append() and appendTo(): Insert elements from behind inside existing elements

var $span = $('<span>This is one span element</span>');
$('#div1').append($span);
......
<div id="div1"></div>

2. prepend() and prependTo(): Insert elements from the front inside an existing element

3. after() and insertAfter(): Insert elements from behind outside the existing element

4, before() and insertBefore(): Insert the element from the front outside the existing element

Delete Nodes

$('#div1').remove();

Classroom exercises
Todolist (plan list) instance

Roller event and function throttling

jquery.mousewheel plug-in uses
There is no mouse wheel event in jQuery and the mouse wheel event in native js is incompatible. jquery.mousewheel.js can be used as jquery's roller event plug-in.

Functional throttling
Some events in javascript are triggered very frequently, such as onresize event (resize in jq), onmousemove event (mousemove in jq) and mouse wheel event mentioned above. Functions that trigger the execution of binding in several places within a short event can be skillfully used to reduce the number of triggers and achieve function throttling.

Classroom examples

1. Screen scrolling

2. Slide

json

json is the acronym of JavaScript Object Notation. The word means javascript object representation. json here refers to a data format similar to javascript object. At present, this data format is popular and gradually replaces the traditional xml data format.

javascript custom objects:

var oMan = {
    name:'tom',
    age:16,
    talk:function(s){
        alert('I would say'+s);
    }
}

Data in json format:

{
    "name":"tom",
    "age":18
}

Unlike json objects, attribute names and string values in json data format need to be caused by double quotation marks, and reading data errors can be caused by single quotation marks or without quotation marks.

Another data format for json is arrays, which have the same literal size as arrays in javascript.

["tom",18,"programmer"]

ajax and jsonp

ajax technology aims to enable JavaScript to send http requests, communicate with the background, and obtain data and information. The principle of ajax technology is to instantiate xmlhttp object and use it to communicate with the background. The process of ajax communication will not affect the subsequent execution of javascript, thus achieving asynchrony.

Synchronization and asynchronization
In real life, synchronization refers to doing several things at the same time, and asynchrony refers to doing another thing after one thing has been done. Synchronization and asynchronization in the program are the concepts in real life, that is, the asynchronization in the program refers to the synchronization in real life, and the synchronization in the program refers to the asynchronization in real life.

Local refresh and no refresh
ajax can achieve partial refresh, also known as no refresh, no refresh refers to the entire page does not refresh, but only partial refresh, ajax can send http requests by itself, not through the browser's address bar, so the page as a whole will not refresh, ajax access to background data, update the part of the page display data, it achieves the page. Face local refresh.

Homologous strategy
The pages or resources requested by Ajax can only be resources under the same domain, not resources of other domains. This is based on security considerations when designing ajax. Characteristic error reporting prompts:

XMLHttpRequest cannot load https://www.baidu.com/. No  
'Access-Control-Allow-Origin' header is present on the requested resource.  
Origin 'null' is therefore not allowed access.

Usage of $.ajax
Common parameters:
1. url request address
2. type request mode, default is'GET', and commonly used is'POST'.
3. Data Type sets the data format returned, commonly used is the'json'format, can also be set to'html'
4. Data settings for data sent to the server
5. success sets the callback function after the request succeeds
6. error sets the callback function after the request fails
7. Whether the async setting is asynchronous or not, the default value is'true', indicating asynchrony

Previous wording:

$.ajax({
    url: 'js/data.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1}
    success:function(data){
        alert(data.name);
    },
    error:function(){
        alert('Server timeout, please try again!');
    }
});

New Writing (Recommendation):

$.ajax({
    url: 'js/data.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1}
})
.done(function(data) {
    alert(data.name);
})
.fail(function() {
    alert('Server timeout, please try again!');
});

// The data in data.json: {"name":"tom","age":18}

Classroom exercises
Making Home Page User Information Read

jsonp 
ajax can only request data or resources in the same domain. sometimes it needs to request data across domains. jsonp technology is needed. jsonp can request data across domains. the principle of ajax is to use the < script > tag to link resources across domains. Jsonp and ajax are fundamentally different, but jquery encapsulates them into the same function.

$.ajax({
    url:'js/data.js',
    type:'get',
    dataType:'jsonp',
    jsonpCallback:'fnBack'
})
.done(function(data){
    alert(data.name);
})
.fail(function() {
    alert('Server timeout, please try again!');
});

// data.js: fnBack({"name":"tom","age":18});

Classroom examples
Getting 360 Search Keyword Associative Data

$(function(){
    $('#txt01').keyup(function(){
        var sVal = $(this).val();
        $.ajax({
            url:'https://sug.so.360.cn/suggest?',
            type:'get',
            dataType:'jsonp',
            data: {word: sVal}
        })
        .done(function(data){
            var aData = data.s;
            $('.list').empty();
            for(var i=0;i<aData.length;i++)
            {
                var $li = $('<li>'+ aData[i] +'</li>');
                $li.appendTo($('.list'));
            }
        })        
    })
})

//......

<input type="text" name="" id="txt01">
<ul class="list"></ul>

Local Storage

Local storage is divided into cookie s, as well as new localStorage and session Storage

1. The cookie is stored locally with a maximum capacity of 4k. It can be carried and transmitted when the homologous http requests occur. It consumes bandwidth and can be set up access path. Only this path and its sub-paths can access the cookie, which is valid before the set expiration time.

jquery Set up cookie
$.cookie('mycookie','123',{expires:7,path:'/'});
jquery Obtain cookie
$.cookie('mycookie');

Classroom examples
Bombs that are prompted only once

2. Local Storage is stored locally with a capacity of 5M or larger. It will not be carried and transferred when requested. It will be shared in all the same source windows. The data will remain valid until it is deleted artificially. It can be used as long-term data.

//Set up:
localStorage.setItem("dat", "456");
localStorage.dat = '456';

//Obtain:
localStorage.getItem("dat");
localStorage.dat

//delete
localStorage.removeItem("dat");

3. Session Storage is stored locally, with a capacity of 5M or larger. It will not carry delivery when requested. It is valid before the current window of the same origin closes.

Local Storage and Session Storage are collectively called Web Storage. Web Storage supports event notification mechanism. It can notify listeners of data updates. The api interface of Web Storage is more convenient to use.

The traceless browsing of the iPhone does not support Web Storage, but only uses cookie s.

jqueryUI

jQuery UI is a code base based on jQuery. Visual controls that contain underlying user interaction, animation, special effects, and replaceable themes. We can use it directly to build web applications with good interactivity.

jqueryUI Web site
http://jqueryui.com/

Classroom examples
1. Sliding bar with numerical value
2. Custom scrollbar

Mobile end libraries and frameworks

Course introduction

Learn the js events in mobile scenarios, make the js libraries commonly used for mobile effects, and introduce the common development framework Bootstrap.

Mobile js events

The operation mode of the mobile terminal is different from that of the PC terminal. The mobile terminal is mainly operated by fingers, so there are special touching events. The touching events include the following events:

1. Touch start: // trigger when finger is placed on screen
2. Touch move: // finger sliding trigger on screen
3. Touch end: // trigger when finger leaves the screen
4. Touch cancel: // Triggered when the system cancels the touch event, less used

Mobile terminal generally has three operations, click, slide and drag. These three operations are usually accomplished by combining the above events. All the above four events are seldom used alone. Generally, these three operations are implemented by encapsulation, which can be achieved by using encapsulated js libraries.

zeptojs

Zepto is a lightweight JavaScript library for modern advanced browsers, which has a similar api to jquery. If you can use jquery, you can also use zepto. Some of Zepto's optional features are specific to mobile browsers; its initial goal is to provide a streamlined jquery-like js library on the mobile side.

zepto: http://zeptojs.com/
zepto Chinese api: http://www.css88.com/doc/zeptojs_api/
zepto contains many modules. The default download version contains modules such as Core, Ajax, Event, Form, IE. If you need other modules, you can build them by yourself.
zepto custom build address: http://github.e-sites.nl/zeptobuilder/

swiper

swiper.js is a mature and stable sliding effect plug-in applied to PC and mobile terminals. It is generally used for touchscreen focus map, touchscreen scrolling and other effects. swiper is divided into 2.x version and 3.x version, 2.x version supports low version browser (IE7), 3.x gives up support for low version browser, suitable for mobile applications.

2.x Version Chinese Website: http://2.swiper.com.cn/
3.x Version Chinese Network Address: http://www.swiper.com.cn/

How to use swiper:

<script type="text/javascript" src="js/swiper.min.js"></script>

<!--
  //If the page refers to jQuery or zepto, it refers to swiper.jquery.min.js, which has a capacity ratio of swiper.min.js

  <script src="path/to/swiper.jquery.min.js"></script>
-->

......

<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
......

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<script> 
var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
  prevButton: '.swiper-button-prev',
  nextButton: '.swiper-button-next',
    initialSlide :1,
  paginationClickable: true,
  loop: true,
  autoplay:3000,
  autoplayDisableOnInteraction:false
});
</script>

swiper uses parameters:

1. Initial Slide: Initial index value, starting at 0
2. Direction: Sliding direction horizontal | vertical
3. speed: sliding speed, unit ms
4. autoplay: Set the autoplay and Play Time
5. Autoplay DisableOn Interaction: Whether the user will play automatically after swipe is operated, the default is true, and it will no longer play automatically.
6. pagination: Paging dots
7. Pagination Clickable: Does the Paging Dot Click
8. prevButton: Arrow on the previous page
9. Next Button: Arrow on the next page
10. loop: Is there a connection between the beginning and the end?

An example of swiper production:

An Example of swiper Making Mobile Focus Map

bootstrap

Simple, intuitive and powerful front-end development framework makes web development more rapid and simple. From Twitter, it is one of the most popular front-end frameworks. Bootrstrap is based on HTML, CSS, JavaScript, making it easier to write code. Mobile priority, responsive layout development.

bootstrap Chinese website: http://www.bootcss.com/

bootstrap container

• container-fluid fluid
• container
  • 1170
  • 970
  • 750
  • 100%

<div class="container-fluid">fluid container</div>
<div class="container">responsive fixed container </div>

bootstrap response query interval:

1. greater than or equal to 768
2. greater than or equal to 992
3. More than or equal to 1200

bootstrap grid system

bootstrap divides pages horizontally into 12 subsections. According to 12 subsections, it defines style classes adapted to different width subsections. These style classes constitute a responsive, mobile device-preferred streaming grid system:

1. col-lg-greater than 1200 in a row, less than 1200 in a row, respectively
2. col-md-greater than 992 in a row, less than 992 in a row
3. col-sm-greater than 768 in a row, less than 768 in a row
4. col-xs - Always in a row

<style type="text/css">
    div[class*='col-']{

        background-color:cyan;
        border:1px solid #ddd;
        height:50px;
    }
</style>

......

<div class="container">
    <div class="row">
        <div class="col-lg-3">col-lg-3</div>
        <div class="col-lg-3">col-lg-3</div>
        <div class="col-lg-5">col-lg-5</div>
        <div class="col-lg-1">col-lg-1</div>
    </div>
    <br>
    <br>
    <div class="row">
        <div class="col-md-3">col-md-3</div>
        <div class="col-md-3">col-md-3</div>
        <div class="col-md-3">col-md-3</div>
        <div class="col-md-3">col-md-3</div>
    </div>
    <br>
    <br>
    <div class="row">
        <div class="col-sm-3">col-sm-3</div>
        <div class="col-sm-3">col-sm-3</div>
        <div class="col-sm-3">col-sm-3</div>
        <div class="col-sm-3">col-sm-3</div>
    </div>
    <br>
    <br>
    <div class="row">
        <div class="col-xs-3">col-xs-3</div>
        <div class="col-xs-3">col-xs-3</div>
        <div class="col-xs-3">col-xs-3</div>
        <div class="col-xs-3">col-xs-3</div>
    </div>
</div>

Column migration

1,col-lg-offset-
2,col-md-offset-
3,col-sm-offset-
4,col-xs-offset-

bootstrap button

1. btn declaration button
2. btn-default default button style
3,btn-primay
4,btn-success
5,btn-info
6,btn-warning
7,btn-danger
8,btn-link
9,btn-lg
10,btn-md
11,btn-xs
12. The width of btn-block is 100% of the width of the parent button
13,active
14,disabled
15. btn-group defines button groups

<!-- General Button Group -->
<div class="btn-group">
    <input type="button" name="" value="Button 1" class="btn btn-primary">
    <input type="button" name="" value="Button 2" class="btn btn-warning">
    <input type="button" name="" value="Button 3" class="btn btn-danger">
</div>

<!-- Banner Button Group 
     //If you use the input tag as a button, you need to wrap it in a btn-group container.
-->
<div class="btn-group btn-group-justified">
    <div class="btn-group">
        <input type="button" name="" value="Button 1" class="btn btn-primary">
    </div>
    <div class="btn-group">
        <input type="button" name="" value="Button 2" class="btn btn-warning">
    </div>
    <div class="btn-group">
        <input type="button" name="" value="Button 3" class="btn btn-danger">
    </div>
</div>

<!-- Column button group, if used a Label as a button, do not need the above structure, write directly
-->
<div class="btn-group btn-group-justified">
    <a href="#"Class=" BTN btn-primary "> button 1</a>
    <a href="#"Class=" BTN btn-default "> button 2</a>
    <a href="#"Class=" BTN btn-default "> button 3</a>
</div>

bootstrap form

Form declares a form field
2. form-inline inline form fields
3. form-horizontal Horizontal Arrangement Form Domains
4. form-group form groups, including form text and form controls
5. form-control text input box, drop-down list control style
6. checkbox checkbox-inline multiple check box style
7. Radio-inline radio box style
8. input-group Form Control Group
9. Input-group-add Form Control Group Object Style
10. The input-group-btn form control group object is the button style
11. form-group-lg Large Form
12. form-group-sm Small Size Form

<!--  form  -->
<form role="form">
  <div class="form-group form-group-lg">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

<!--  Form Control Group  -->
<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-addon">@</span>
</div>

<!--  Form Control Group  -->
<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
</div>

bootstrap picture

Img-response declaration response pictures

bootstrap Font Icon

By replacing icons with fonts, font folders need to be in the same directory as css folders

bootstrap navigation bar

1. navbar Declares Navigation Bar
2. navbar-default declares default navigation bar style
3. navbar-inverse Declares Anti-White Navigation Bar Style
4. navbar-static-top removes the rounded corners of the navigation bar
5. navbar-fixed-top navigation bar fixed to the top
6. navbar-fixed-bottom navigation bar
7. navbar-header declares logo container
8. navbar-brand Styles for Fixed Contents such as logo
11. nav navbar-nav defines the menu in the navigation bar
12. navbar-form defines the form in the navigation bar
13. navbar-btn defines the buttons in the navigation bar
14. navbar-text defines the text in the navigation bar
15. navbar-left menu
16. navbar-right menu to the right

<!-- Scalable menu data-target="#.." Need to add#  -->
<div class="navbar navbar-inverse navbar-static-top ">
    <div class="container">
    <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>
         <a href="#" class="navbar-brand">LOGO</a>
    </div>
    <div class="collapse navbar-collapse" id="mymenu">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home page</a></li>
            <li><a href="#">Company News</a></li>
            <li><a href="#">Industry dynamics</a></li>
        </ul>
        <form class="navbar-form navbar-right">
            <div class="form-group">
                <div class="input-group">
                  <input type="text" class="form-control">
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Go!</button>
                  </span>
                </div>    
            </div>
        </form>
    </div>
    </div>
</div>

Path Navigation

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Giant screen

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

bootstrap modal box

1. modal declares a modal box
2. modal-dialog defines modal box size
3. modal-lg defines large-scale modal frames
4. modal-sm defines small-size modal frames
5,modal-header
6,modal-body
7,modal-footer

<button class="btn btn-primary" data-toggle="modal" data-target="#Mymodal > big pop-up box button </button >

<div class="modal fade" id="mymodal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    //Large size pop-up box
                </div>
                <div class="modal-body">
                    //Modal frame body
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default"  data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                  </div>
            </div>
        </div>
</div>

bootstrap drop-down menu

1,dropdown-toggle
2,dropdown-menu

<div class="row">            
    <div class="dropdown">
        <div class="btn btn-primary  dropdown-toggle" data-toggle="dropdown">
            drop-down menu
            <span class="caret"></span>
        </div>
        <ul class="dropdown-menu">
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
        </ul>
    </div>
</div>

bootstrap hidden class

1,hidden-xs
2,hidden-sm
3,hidden-md
4,hidden-lg

bootstrap Responsive Thematic Website Example

regular expression

1. What is regular expression?
String matching rules that can be read by a computer.

2. Writing of regular expressions:
var re=new RegExp('rule','optional parameter');
var re=/rules/parameters;

3. Characters in Rules
1) Ordinary character matching:
For example: / A / matching characters `a', / a,b / matching characters `a,b'.

2) escape character matching:
\ d matches a number, 0-9
\ D matches a non-numeral, i.e. except 0-9
\ w matches a word character (letters, numbers, underscores)
\ W matches any non-word character. Equivalent to [^ A-Za-z0-9_]
\ s matches a blank character
\ S matches a non-blank character
\ b Matches Word Boundaries
\ B Matches Non-Word Boundaries
Match an arbitrary character

var sTr01 = '123456asdf';
var re01 = /\d+/;
//Matching Pure Number Strings
var re02 = /^\d+$/;
alert(re01.test(sTr01)); //Eject true
alert(re02.test(sTr01)); //Pop-up false

Quantifier: Define the number of matching characters on the left.
Zero or once (at most once)
+ Appear once or more (at least once)
* Appear zero or more times (any time)
{n} occurs n times
{n,m} occurs n to m times
{n,} occurs at least N times

5. Any one or scope
[abc123]: Matches any character in'abc123'
[a-z0-9]: Matches any character from a to Z or 0 to 9

6. Restriction of beginning and ending
^ Start with the next element
$Ends with the next element

7. Modification parameters:
g: global, full-text search, default search to the first result and stop
i: ingore case, case-sensitive by default

8. Common Functions
1,test
Usage: Regular. test (string) matches successfully, returns true, otherwise returns false.

2,replace
Usage: Strings. Replace (regular, new strings) matches successful characters to replace new ones

Regular default rule
If the match succeeds, it will end. No matching will continue. Case-sensitive

var sTr01 = 'abcdefedcbaCef';
var re01 = /c/;
var re02 = /c/g;
var re03 = /c/gi;

var sTr02 = sTr01.replace(re01,'*');
var sTr03 = sTr01.replace(re02,'*');
var sTr04 = sTr01.replace(re03,'*');
alert(sTr02); // Pop-up ab*defedcbaCef
alert(sTr03); // Pop-up ab*defed*baCef
alert(sTr04); // Pop-up ab*defed*ba*ef

Regular Rules in Common Use

//User Name Verification: (Number letters or underscores 6 to 20 bits)
var reUser = /^\w{6,20}$/;

//Mailbox validation:        
var reMail = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;

//Password authentication:
var rePass = /^[\w!@#$%^&*]{6,20}$/;

//Mobile phone number verification:
var rePhone = /^1[3458]\d{9}$/;

Classroom examples
Registration page form validation

Front-end performance optimization

In the process from user access to resources to the complete display of resources in front of users, the processing time of each step is shortened by means of technical means and optimization strategies, so as to improve the access and presentation speed of the entire resources. The performance of the website directly affects the number of users, and all front-end performance optimization is very important.

Front-end performance optimization can be divided into the following aspects:

1. Code deployment:

1. Code Compression and Merge
2. The use of static resources such as pictures, js, css and the storage of different domain names in the main site make it possible to transfer resources without unnecessary cookie information.
3. Using Content Distribution Network CDN
4. Set Last-Modified, Expires, and Etag for files
5. Using GZIP to Compress Transport
6. Weighing the number of DNS lookups (using different domain names will increase DNS lookups)
7. Avoid unnecessary redirection (add "/")

II. Coding

html:

1. Use clear, simple and semantic tags
2. Avoid empty src and href
3. Don't zoom pictures in HTML

css:

1. Streamlining css selector
2. Put CSS on top
3. Avoid introducing styles in the @import way
4. Using Base64 image data instead of picture files in css to reduce the number of requests, online transfer to base64 website: http://tool.css-js.com/base64.html
5. Use css animation instead of javascript animation
6. Use font icons
7. Use CSS sprite (Sprite)
8. Use svg graphics
9. Avoid using CSS expressions

body{
 background-color: expression( (new Date()).getSeconds()%2 ? "#B8D4FF" : "#F08A00" );  
}

10. Avoid using css filters

javascript:

1. Reduce the number of reference libraries
2. Using requirejs or seajs to load js asynchronously
3. JS is introduced at the bottom of the page
4. Avoid global lookup
5. Using native methods
6. Replace complex if else statements with switch statements
7. Reduce the number of statements. For example, multiple variable declarations can be written as one sentence.
8. Initialize arrays or objects using literal expressions
9. Replace complex element injection with innerHTML
10. Use Event Agent (Event Delegation)
11. Avoid multiple access to dom selection sets
12. High frequency trigger event settings using function throttling
13. Caching data using Web Storage