Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to install and use jQuery". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

JQuery object

JQuery is a set of javascript script libraries compatible with multiple browsers. The core idea is to write less and do more. Using jQuery will greatly improve the efficiency of writing javascript code, help developers save a lot of work, and make the written code more elegant, more robust and "more powerful". At the same time, the rich jQuery plug-ins on the network also make our work become "with jQuery, everything so easy." Because we are already standing on the shoulders of giants.

JQuery was released by American John Resig on barcamp in New York in January 2006, attracting many JavaScript experts from all over the world to join, led by Dave Methvin team for development. Today, jQuery has become the most popular javascript framework, with more than 55% of the top 10000 most visited websites in the world using jQuery.

Download and install Jquery

download

Download the jQuery library from jquery.com

Version

JQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7,or 8. (ie6 7 8 is not supported, if you need to download 1.x)

(1) full version: jquery-2.1.4.js-- > Learning version (learning source code is the best way to learn)

(2) compressed version: jquery-2.1.4.min.js-- > development version (compressed version, reduced transmission)

Current version: jquery-3.4.1.js

Advantages

(1) provide powerful functional functions

(2) solve the browser compatibility problem

(3) implement rich UI and plug-ins

(4) correcting wrong script knowledge

Installation

You can introduce it on the page.

Jquery core

The $symbol represents a reference to a jQuery object in jQuery, and "jQuery" is the core object. Through this object, you can get the jQuery object, call the methods provided by jQuery, and so on. Only jQuery objects can call methods provided by jQuery.

$jQueryDom object and Jquery wrapper set object

Defining the concepts of Dom objects and jQuery wrapper sets will greatly speed up our learning. The original DoM object only has the methods and properties provided by the DOM interface, and the objects obtained through js code are dom objects, while the objects obtained through jQuery are jQuery wrapper set objects, referred to as jQuery objects, and only jQuery objects can use the methods provided by jQuery.

Dom object

Get the Dom object in javascript, and the Dom object has limited properties and methods:

Var div = document.getElementById ("testDiv"); var divs = document.getElementsByTagName ("div")

Jquery wrapper set object

It can be said that the extension of Dom object. In the jQuery world, all objects, whether one or a group, are encapsulated into a jQuery wrapper set, such as getting an jQuery wrapper set that contains an element:

Var jQueryObject = $("# testDiv")

Dom object to Jquery object

The Dom object is converted to a jQuery object, and you only need to wrap it with the $() method.

Var domDiv = document.getElementById ('mydiv'); / / get Dom object mydiv = $(domDiv)

Jquery object to Dom object

To convert jQuery objects to Dom objects, you only need to fetch the elements in the array.

/ / the first way to get the jQuery object var jqueryDiv = jQuery ('# mydiv'); / / the second way to get the jQuery object jqueryDiv = $('# mydiv'); var dom = jqueryDiv [0]; / / convert the acquired jquery object to dom

The object obtained by traversing the array of jQuery objects is a Dom object, which can be converted to a jQuery object through $().

$('# mydiv') .each (function () {/ / traversal var jquery = $(this);})

Case study:

Write less, do more console.log ("- get dom object -") / / dom object var domDiv = document.getElementById ("mydiv"); console.log (domDiv) Console.log ("- get jquery object -") / / get jquery object / / the first way var jqueryDiv = jQuery ('# mydiv'); console.log (jqueryDiv); / / the second way jqueryDiv = $('# mydiv'); console.log (jqueryDiv) Console.log ("- dom to jquery-") / / dom to jquery wrapper set / object var obj = $(domDiv); console.log (obj) Console.log ("- jquery to dom-") / / jquery object to dom object var dom = $('# mydiv') [0]; / get jquery object to dom / / or var dom2 = jqueryDiv [0]; / / convert jquery object to dom console.log (dom); console.log (dom2) / * this represents the dom object Not the jquery object * / console.log ("- dom to jquery-") $('# mydiv') .each (function () {/ / selects all elements where id is mydiv through the id selector and then traverses / / then each element traverses is the tag element where id is mydiv Plain / / and this represents the current element var jquery = $(this) Console.log ("- jquery to dom-") $('# mydiv') .each (function () {var dom3 = this;}); that's all for "how to install and use jQuery". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.