table of Contents
2. Import the js file of JQuery
The difference and conversion between jQuery object and JS object
Hello! Hello, I am the little gray ape, a programmer who can write bugs!
Before understanding the difference and conversion between jQuery object and JS object, let's start with a simple introduction to the jQuery framework.
jQuery concept
jQuery is a fast and concise JavaScript framework. It is another excellent JavaScript code library (or JavaScript framework) after Prototype. The purpose of jQuery design is "write Less, Do More", that is, advocating to write less code and do more. It encapsulates the functional codes commonly used in JavaScript, provides a simple JavaScript design mode, optimizes HTML document operation, event handling, animation design and Ajax interaction. The purpose of its use is to simplify JS development
For JavaScript frameworks, they are essentially js files that encapsulate the native code of js.
jQuery quick start
1. Download jQuery
There are currently three major versions of jQuery:
1.x version: Compatible with ie678, the most widely used, currently only BUG maintenance is officially done, and the function is no longer added. Therefore, for general projects, the 1.x version is sufficient, the final version: 1.12.4 (May 20, 2016)
2.x version: not compatible with ie678, few people use it, currently the official only does BUG maintenance, and the function is no longer added. If you don’t consider compatible low-version browsers, you can use 2.x, the final version: 2.2.4 (May 20, 2016)
3.x version: not compatible with ie678, only supports the latest browser. Unless special requirements, the 3.x version is generally not used, and many old jQuery plugins do not support this version. The current version is the official main update and maintenance version. You can check the latest version on the official website and go directly to the official website .
When we download and use jQuery, we will find that there are generally two js files, one with .min and the other without .min.
The difference between jquery-xxx.js and jquery-xxx.min.js:
1. jquery-xxx.js: development version. For programmers, there are good indentation and comments. Bigger
2. jquery-xxx.min.js: production version. Used in the program without indentation. Smaller size. The program loads faster
So we generally import the second production version of jquery-xxx.min.js when using it
2. Import the js file of JQuery
Import the min.js file
Then import the link to the js file in the head of the html file, as shown below:
<head>
<meta charset="UTF-8">
<title>jquery快速入门</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>3. Use of jQuery
When we use jQuery to get the element object, we can use "$()" as a selector to get the content in the tag body. The following is a practical comparison between using jQuery and not using jQuery to get the label content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery快速入门</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对象获取指定ID对象
var div1 = $("#div1");
var div2 = $("#div2");
//通过alert将结果输出（以jQuery形式获取值）
alert(div1.html());
alert(div2.html());
/**
* 以下是不使用jQuery的方法
* */
//不使用jQuery获取指定ID对象
var div3 = document.getElementById("div1");
var div4 = document.getElementById("div2");
//不使用jQuery获取元素内容
alert(div3.innerHTML);
alert(div4.innerHTML);
</script>
</body>
</html>
The difference and conversion between jQuery object and JS object
Compared with JS objects, jQuery objects are more convenient to operate and the code is more concise
But it should be noted that the methods of jQuery object and JS object are not universal, so what should we do if we want to use js method in jQuery, or use jQuery method in js?
Therefore, here to share with you the mutual conversion between jQuery object and JS object
jQuery to js
Use jQuery object [index] or jQuery object.get (index) to convert jQuery object into js object, then js method can be used.
Use the following code in detail:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery和js对象的相互转换</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 转为 js
* */
//1、通过js方式获取名叫div的所有html元素对象
var divs = document.getElementsByTagName("div");
alert(divs.length); //可以将其当成数组来使用
//对divs中所有div让其标签体内容变为“aaa”
for (var i = 0;i<divs.length;i++){
// divs[i].innerHTML = "aaa"
$(divs[i]).html("ccc") //将js对象divs[i]转化为jQuery对象
}
</script>
</body>
</html>js to jQuery
Use "$" brackets to include js objects, such as: $(js object)
Then you can use the jQuery method,
Use the following code in detail:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery和js对象的相互转换</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 转化为 jQuery
* */
//2、通过jQuery方式获取所有名叫div的所有html对象
var $divs2 = $("div");
alert($divs2);
//对divs中所有div让其标签体内容变为“aaa”
// $divs2.html("bbb");
$divs2[0].innerHTML = "ddd"; //将jQuery对象对象转化为js
$divs2.get(1).innerHTML = "eee" //将jQuery对象对象转化为js
</script>
</body>
</html>Well, I will share the content about the difference and conversion between jQuery object and JS object here first, and then I will continue to share jQuery selectors, DOM operations and advanced advanced content of jQuery with my friends.
If you find it useful, remember to like and follow!
Little Grey Ape will accompany you to make progress together!
