catalogue
IV jQuery encapsulation principle
I event processing
1.CDN
The full name of CDN is Content Delivery Network, that is, content distribution network. CDN is an intelligent virtual network based on the existing network. Relying on the edge servers deployed everywhere, CDN enables users to obtain the required content nearby through the load balancing, content distribution, scheduling and other functional modules of the central platform, reduces network congestion, and improves user access response speed and hit rate. The key technologies of CDN mainly include content storage and distribution technology.
2. Baidu resource library
Originally, there were many files distributed based on CDN Technology in Baidu static resource public library, such as various versions of jQuery, but now Du static resource public library has been hung. So I recommend it to you Byte beating static resource common library , the content is relatively complete. Search jquery in the search bar, find jquery in the J bar and click,
Select the version and click. There are two methods to import jQuery. One is to import js files, and the other is to directly make src the corresponding URL!
Click Copy TAG (to import the code, you don't have to knock it by yourself, just paste it directly) and paste it in the code.
3. Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- <script src="../js/jquery-1.9.1.js" type="text/javascript" charset="UTF-8"></script> -->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/1.7/jquery.min.js" type="application/javascript"></script>
<script type="text/javascript">
/* ready Event: the operation executed after the page is loaded, which is equivalent to the onload of JS*/
// $(function(){})
// jQuery(function(){})
// $(document).ready(function(){})
$(function(){
/*****************Event base binding******************/
//The binding method of other events is the same as below. Just change the event name!!!
//It is placed in the ready event to bind the click event to the corresponding button after the page is loaded
$("#btn1").click(function(){
alert("Click event");
})
/*****************bind Event binding******************/
// $("#btn2").bind('click',function(){
// alert("bind click event binding");
// });
//It is suitable for binding multiple events with the same object to reduce the amount of code, that is, json format
$("#text1").bind({
'mouseover':function(){
//Output to console
console.log("Mouse up bind");
},
'focus':function(){
alert("Move cursor in");
}
//and so on
})
/*****************One time event binding******************/
//Bind only once, that is, the event will expire after it is executed once
$("#btn3").one('click',function(){
alert("One time event binding");
})
/*****************trigger Event operation******************/
$("#btn4").click(function(){
// Events that call other objects
$("#btn1").trigger('click');
$("#btn3").trigger('click');
})
/*****************Unbinding of events******************/
$("#btn5").click(function(){
//Unbind all events on the specified object
$("#btn1").unbind();
//Unbind the specified event on the specified object
$("#text1").unbind("focus");
})
// $(".btn6").click(function(){
// alert("click the binding of the event");
// })
//The following method can add elements, but cannot add corresponding events
$("body").append('<input type="button" name="" class="btn6" value="Event action 2" />');
//Perform the following operations to make the element binding events added by the above method (the live method can be used before 1.7, but not after 1.7)
$(".btn6").live('click',function(){
alert("btn6 Click event bound");
})
})//ready event
</script>
</head>
<body>
<input type="button" name="" id="btn1" value="Event binding" />
<input type="text" name="" id="text1"/>
<input type="button" name="" id="btn3" value="One time event binding"/>
<input type="button" name="" id="btn4" value="trigger"/>
<input type="button" name="" id="btn5" value="Event unbinding" />
<input type="button" name="" class="btn6" value="Event operation" />
</body>
</html>
II Animation function
Just understand. Because I was also the front end of learning to pave the way for back-end learning, so I tasted it.
A plug-in library is recommended: www.jq22.com COM /, there are many ready-made animations, web pages, functions and all kinds of
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
height: 200px;
background-color: #00A40C;
}
#div2{
height: 200px;
background-color: yellow;
/* hide */
/* display: none; */
}
</style>
<script src="../js/jquery-1.9.1.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
//Get div object
var div1=$("#div1");
//Hide animation within 3s (gradient)
//div1.hide(3000);
//Display animation within 3s (gradient)
//div1.show(3000);
//Hidden display, hidden display
//$("div").toggle(3000);
//Slide up
//div1.slideUp(3000);
//Slide down
//div1.slideDown(3000);
//What is sliding on becomes sliding down, and what is sliding down becomes sliding up
//$("div").slideToggle(3000);
//Fade out
div1.fadeOut(3000);
// Fade in
div1.fadeIn(3000);
})
})
</script>
</head>
<body>
<input type="button" id="btn1" value="Animation trigger" />
<hr />
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
III jQuery plug-in
JQuery UI: slightly. If you want to see it, just go to the rookie tutorial. You don't use much.
IV jQuery encapsulation principle
1. Advantages of closures
(1) It can reduce the objects of global variables and prevent global variables from being huge in the past, which makes them difficult to maintain
(2) Prevent modifiable variables because internal variables are inaccessible and cannot be modified externally. Safe.
(3) Another way to read variables inside a function is to keep the values of these variables in memory.
2. Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//() is the function executor
/***************Self calling of anonymous functions***************/
// Execution of anonymous functions without parameters
// (function (){
// alert("I am an anonymous function");
// })()
//Execution of parameterized anonymous functions (anonymous functions only execute the first one)
// (function (a,b,c){
// alert("I am an anonymous function" + A + '--' + B + '--' + C);
// })(100,200,300)
/**************Mounting of local variables****************/
(function (){
var a=100;//local variable
//Mount a to the window object at runtime
window.vv=a;
alert(a);
})()
function test(){
alert('A local variable that calls an anonymous function'+window.vv);//Equivalent to alert(vv);
}
test();
/*****************Closure principle******************/
function testA(){
var a=10;
function testB(){
alert(a);
var b=100;
//window.tmp=b;
return b;
}
var c=testB();
//alert(tmp);
alert(c);
}
testA();
</script>
</head>
<body>
<h1>jQuery Packaging principle in</h1>
<h2>Self calling of anonymous functions</h2>
<h3>Closure principle</h3>
<h4>
</h4>
</body>
</html>