directory
The concept of jQuery
JQuery Quick Start
1. Download jQuery
2. Import the JQuery JS file
3. Use jQuery
JQuery objects and JS objects are different and transformed
JQuery to js
Js to jQuery
Hello! Hello ah, I am gray little ape, a super will write bug program ape!
Before we look at the differences and transformations between jQuery objects and JS objects, let’s start with a brief introduction to the jQuery framework.
The concept of jQuery
JQuery is a fast, concise JavaScript framework and a great JavaScript code library (or JavaScript framework) after Prototype. JQuery is designed to “write Less, Do More”, which is to write Less code and Do More things. It encapsulates common JavaScript functionality and provides a simple JavaScript design pattern that optimizes HTML document manipulation, event handling, animation design, and Ajax interaction. Its purpose is to simplify JS development
For JavaScript frameworks, they are essentially JS files that encapsulate the native JS code.
JQuery Quick Start
1. Download jQuery
There are three major versions of jQuery:
1. X version: compatible with IE678, the most widely used, currently the official only do BUG maintenance, functionality is no longer added. So for general projects, 1.x version is ok, final version: 1.12.4 (May 20, 2016)
2. X version: incompatible with IE678, rarely used, currently only official BUG maintenance, no new features. If not compatible with lower versions of browsers can be used 2.x, final version: 2.2.4 (May 20, 2016)
3. X version: not compatible with IE678, only supports the latest browser. The 3.x version will not be used unless specifically requested, and many older jQuery plug-ins do not support this version. At present, this version is the official major update maintenance version. About the latest version can be viewed on the official website, direct to the official website.
When you download jQuery, you will find that there are usually two js files, one with. Min and one without. Min.
Jquery-xxx.js is the same as jquery-xxx.min.js.
1. Jquery-xxx.js: Development version For programmers, with good indentation and comments. A little bit bigger
2. Jquery-xxx.min. js: production version Used in the program without indentation. Make it smaller. Faster program loading
So we usually import the second production version of jquery-XXX.min.js when we use it
2. Import the JQuery JS file
Import the min.js file
Then import a link to the JS file in the header of the HTML file as follows:
<head>
<meta charset="UTF-8">
<title>Jquery Quick Start</title>
<script src="Js/jquery - 3.3.1. Min. Js." "></script>
</head>
Copy the code3. Use jQuery
When we use jQuery to get element objects, we can use “$()” as a selector to get the contents of the tag body. Here is a practical comparison of obtaining tag content with and without jQuery.
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery Quick Start</title>
<script src="Js/jquery - 3.3.1. Min. Js." "></script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<script>
// Get the specified ID object from the jQuery object
var div1 = $("#div1");
var div2 = $("#div2");
// Output the result via alert (get the value in jQuery form)
alert(div1.html());
alert(div2.html());
/** * Here are some ways to do this without using jQuery ** /
// Do not use jQuery to get the specified ID object
var div3 = document.getElementById("div1");
var div4 = document.getElementById("div2");
// Do not use jQuery to get element content
alert(div3.innerHTML);
alert(div4.innerHTML);
</script>
</body>
</html>
Copy the code
JQuery objects and JS objects are different and transformed
Compared with JS objects, jQuery objects are more convenient to operate and their code is more concise
However, it is important to note that the methods of jQuery objects and JS objects are not universal, so what if we want to use JS methods in jQuery, or jQuery methods in JS?
Therefore, I will share with you the conversion between jQuery objects and JS objects
JQuery to js
Get (index) convert jQuery object to JS object, then use JS methods.
Use the following code in detail:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Conversion between jquery and JS objects</title>
<script src="Js/jquery - 3.3.1. Min. Js." "></script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<script>
/** * jQuery to js ** /
// get all the HTML element objects named div from js
var divs = document.getElementsByTagName("div");
alert(divs.length); // It can be used as an array
// Change the body of all divs tabs to "AAA"
for (var i = 0; i<divs.length; i++){// divs[i].innerHTML = "aaa"
$(divs[i]).html("ccc") // Convert js divs[I] to jQuery
}
</script>
</body>
</html>
Copy the codeJs to jQuery
Use the “$” character to enclose js objects in parentheses, such as $(js object).
Then you can use the jQuery method,
Use the following code in detail:
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Conversion between jquery and JS objects</title>
<script src="Js/jquery - 3.3.1. Min. Js." "></script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<script>
/** * js to jQuery ** /
// get all HTML objects named div using jQuery
var $divs2 = $("div");
alert($divs2);
// Change the body of all divs tabs to "AAA"
// $divs2.html("bbb");
$divs2[0].innerHTML = "ddd"; // Convert jQuery object objects to JS
$divs2.get(1).innerHTML = "eee" // Convert jQuery object objects to JS
</script>
</body>
</html>
Copy the codeJQuery selector, DOM manipulation, and jQuery’s advanced functions are also discussed in this article.
Think useful remember to like attention yo!
Grey ape accompany you to progress together!
