Introduction to jQuery
Before we talk about jQuery, let's start with a concept: what is a JavaScript framework library? In fact, it's a common js file, which encapsulates many functions or compatible codes. Of course, jQuery is a member of many libraries, so why should we learn jQuery? Let's talk about its characteristics.
- It solves the compatibility problem between different browsers (IE6+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome) only for js compatibility.
- Small size tens of kb use simple and convenient chain programming implicit iteration plug-in rich open source free;
jQuery Learning Website
jQuery: https://jquery.com/
jQuery Online API: https://api.jquery.com/
jQueryUI: https://jqueryui.com/
Just say it's not good. Let's experience it with some examples.
jQuery Quick Experience
Now let's use DOM and jQuery to implement a small case and experience it.
Requirements: Click the button to display the div below the button and add the background image;
<-- This is the page structure. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="button" value="Display effect" id="btn">
<div id="dv"></div>
</body>
</html><script>
// DOM mode
// If you add a script tag at the top of the page, you need to use window.onload
window.onload = function () {
document.getElementById('btn').onclick = function () {
var div = document.getElementById('dv');
div.style.width = '200px';
div.style.height = '200px';
div.style.backgroundColor = 'yellow';
}
}
</script>// jQuery approach
<script src="../jquery-1.12.2.js"></script>
<script>
// If you use jQuery, you need to import files first
$(function () {
$('btn').click(function () {
$('dv').css({'width': '200px', 'height': '200px', 'backgroundColor': 'red'});
});
});
</script>The examples above show that jQuery is still simpler than DOM; to learn systematically, or to start slowly, let's talk about the top-level objects in jQuery.
jQuery top-level object
Before we talk about top-level objects, we just recall top-level objects in DOM and BOM.
- Top Object document in DOM - --- Top Object in Page
- Top Object window in BOM--Top Object in Browser
- The top-level object jQuery in jQuery or$
Page loading events in jQuery
// In DOM, the page loading event onload can only occur once, such as
window.onload = function () {
console.log('hello');
}
window.onload = function () {
console.log('world');
}
// At this point, the page will only output the world, which is definitely unacceptable to us.// jQuery doesn't, and there's more than one way
<script src="../jquery-1.12.2.js"></script>
<script>
// The first is exactly the same as onload
// All content in the page is loaded before triggering the label image...
$(window).load(function () {
console.log('hello');
});
$(window).load(function () {
console.log('world');
});
// At this point, the page will output Hello World
// The basic tags in the second page can be triggered when they are loaded.
// 1. Read () page loading events are all written in --- method
$(document).ready(function () {
console.log('hello');
});
$(document).ready(function () {
console.log('world');
});
jQuery(function () {
console.log('hello');
});
jQuery(function () {
console.log('world');
});
$(function () {
console.log('hello');
});
$(function () {
console.log('world');
});
// As you can see, the top-level objects in jQuery are jQuery and$
// So most people prefer the last way to use it.
</script>DOM Object and jQuery Object Interchange
DOM object to jquery object is easy to operate, after all, the methods in jquery are encapsulated, and the compatibility problem is solved well, the code is few, and the convenience. jquery object to DOM object, because jquery files have been updated, many things are encapsulated and upgraded with the use of jquery, it is impossible to carry out all the DOMS used. Encapsulation, there are many unknown compatibility problems not encapsulated, so sometimes the problems that can not be solved in jquery need to be solved by native js code, so jquery objects sometimes need to be converted to DOM objects for operation.
<script src="../jquery-1.12.2.js"></script>
<script>
// Let's try the transformation in the HTML case above.
// DOM operation button, change color
window.onload = function () {
// btn is the DOM object
var btn = document.getElementById('id');
// DOM objects transform jQuery objects by placing DOM objects in $(DOM objects) - - objects
$(btn).click(function () {
// At this point, point this to jQuery through $(this)
$(this).css('backgroundColor', 'red');
});
}
// There are two ways jQuery objects can be converted to DOM objects. Let's show you
$(function () {
// $(' btn') is a jQuery object converted to a DOM object by. get(0)
$('#btn').get(0).onclick = function () {
this.style.backgroundColor = 'red';
}
});
$(function () {
// $(' btn') is a jQuery object converted to a DOM object by appending [0].
$('#btn')[0].onclick = function () {
this.style.backgroundColor = 'red';
}
});
/*
* DOM Objects and jQuery objects can be interoperable
* DOM Object to jQuery object
* $(DOM Object) --- jQuery object
* jQuery Object to DOM Object
* $(#btn)[0] --- DOM object
* $(#btn).get(0) ---- DOM object
*/
</script>Case Study of Web Switchlight
Requirements: Click on the button to switch the background color of the body; let's use DOM and jQuery to implement them respectively.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../jquery-1.12.2.js"></script>
<script>
// DOM mode
window.onload = function () {
// Get the button, register the click event
document.getElementById('btn').onclick = function () {
// Judging whether to turn on or off the light
if (this.value == 'Turn off the lights') {
document.body.style.backgroundColor = 'black';
this.value = 'turn on the light';
} else {
document.body.style.backgroundColor = 'white';
this.value = 'Turn off the lights';
}
}
}
// jQuery approach
$(function () {
$('#btn').click(function () {
// val() - - Gets the value of the button object
if ($(this).val() == 'Turn off the lights') {
$('body').css('backgroundColor', 'black');
// val('content') -- Set the value of the button
$(this).val('turn on the light');
} else {
$('body').css('backgroundColor', 'white');
$(this).val('Turn off the lights');
}
});
});
</script>
</head>
<body>
<input type="button" value="Turn off the lights" id="btn">
</body>
</html>