directory
The origin of the jQuery
JQuery project consists of 5 parts
Advantages of the jQuery framework
Import the jQuery library
JQuery selector
JQuery object and DOM object
Prev + next selector
Prev ~siblings selector
Simple filter for jQuery selector
The origin of the jQuery
JavaScript is a scripting language used to design web interactions, special effects, and front-end application development. Due to the compatibility of JavaScript language, the parsing of JavaScript and DOM by browsers is not uniform, which brings a lot of trouble to the efficient development of developers.
To simplify JavaScript development, several JavaScript code libraries have been created. The birth of JavaScript library marks the arrival of real Web application development and lays the foundation for rich client development.
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”, that is, 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.
The core features of jQuery can be summarized as follows: unique chained syntax and short and clear multi-functional interface; It has efficient and flexible CSS selectors and can be extended to CSS selectors. Have convenient plug-in extension mechanism and rich plug-in. JQuery is compatible with Internet Explorer 6.0+, FF 1.5+, Safari 2.0+ and Opera 9.0+.
JQuery project consists of 5 parts
The jQuery project includes:
- JQuery Core
- JQuery UI (Interface Library)
- Sizzle (CSS selector)
- JQuery Mobile (jQueryMobile)
- QUnit (Test Suite)
Advantages of the jQuery framework
1. Lightweight JQuery is very lightweight. It is less than 30KB with Packer written by Dean Edwards, and only 18KB with Min version and Gzip enabled on the server.
JQuery allows developers to use almost any selector from CSS1 to CSS3, as well as JQuery’s own advanced and complex selectors. Plugins can be added to support XPath selectors, and developers can even write their own selectors. Because JQuery supports selectors, developers with CSS experience can easily jump into JQuery’s learning curve.
JQuery encapsulates a large number of common DOM manipulation, so that developers can write DOM manipulation related procedures in a very handy. JQuery makes it easy to do a variety of things that would otherwise be very complex, making it possible for JavaScript novices to write great programs. JQuery’s event handling mechanism takes the essence of event handlers written by JavaScript expert Dean Edwards, so JQuery is pretty reliable when handling event bindings. JQuery also does a great job of leaving room for fallbacks, taking steps step by step, and non-invasive programming. 5. Ajax JQuery encapsulates all Ajax operations in a single function, $.ajax(), allowing developers to focus on the business logic when dealing with Ajax without having to worry about complex browser compatibility and XMLHttpRequest object creation and use. JQuery creates only one object named JQuery, under which all function methods are created. Its alias $can also communicate control at any time without contaminating other objects. The feature is that JQuery can coexist with other JavaScript libraries and be referenced in a project without worrying about late conflicts. 7. Excellent Browser Compatibility As a popular JavaScript library, browser compatibility is a must. JQuery works with IE6.0+,FF 2+,Safari2.+, and Opera9.0+. JQuery also fixes some browser differences so developers don’t have to build browser compatibility libraries before starting a project. The most unique feature of JQuery is its chained operation, which means that a set of actions that occur on the same JQuery object can be written directly to the same object. This feature makes JQuery code very elegant. 9. Implicit iteration when using JQuery to find all elements with the “. MyClass “class and then hide them. There is no need to loop through every returned element. Instead, methods in JQuery are designed as collections of objects that operate automatically, rather than individual objects, eliminating the need for a lot of looping structures, resulting in significantly less code. Developers can use selectors to select elements and then add events directly to them. This idea of completely separating the behavior layer from the structure layer allows JQuery developers and HTML or other page developers to do their own work, rather than the conflicted or do-it-yourself development patterns of the past. At the same time, the later maintenance is also very convenient, there is no need to find some functions in the HTML code and repeatedly modify the HTML code. 11. The rich plug-ins support the easy extensibility of JQuery, attracting developers from all over the world to write JQuery extension plug-ins. There are already hundreds of official plugins available, and new plugins are being interviewed all the time. JQuery documentation is very rich, at this stage there are many English documents, Chinese documents are relatively few. Many teams who love JQuery are working hard to improve the Chinese documentation of JQuery, such as the Chinese API of JQuery. JQuery is an open source product and anyone is free to use it and make changes.
A system of its own
JQuery is completely free from JavaScript design mode. It allows users to develop programs freely in jQuery environment, call jQuery() function to select relevant matching elements, and then perform operations directly on jQuery objects. Instead of switching back and forth between jQuery and JavaScript modes.
Import the jQuery library
JQuery library does not need to be installed, jQuery library is a JS file, we just need to import it to use jQuery.
Reference: www.runoob.com/jquery/jque…
JQuery selector
JQuery not only mimics the usage and functionality of CSS and Xpath selectors, but also customizes many filtering methods. Using these selectors together, you can select any element in the HTML you want.
A selector, colloquially, is a string that represents a particular semantics. You simply pass the selector string to the jQuery constructor to select a different DOM object and return the jQuery object.
JQuery selectors are divided into select and filter functions, and can be used together to form a selector string.
$(selector).methodName();
Multiple jQuery operations can be chained together with the following syntax:
$(selector).method1().method2().method3();
JQuery object and DOM object
JQuery code example:
<script src="Js/jquery - 1.11.0. Js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// Execute after the DOM element is loaded. Multiple $(document).ready can be executed simultaneously
//window.onload is executed after the page is loaded, which is slower than $(document).ready
$(document).ready(function(){
alert('the day is monday,really? 'The $()})document).ready(function(){
alert('no,no,no,today is Friday')})</script>
Copy the codeRunning results:
Looking for the label
<div id="box"></div>
Copy the codeThe DOM object looks for elements
/ / the DOM object
var jsdiv = document.getElementById('box')
Copy the codeJQuery packing set
// The name of a jquery object is preceded by a $
var $jqdiv = $('#box')
Copy the codeDOM and jQuery cannot be mixed
There are two ways to convert jQuery objects into DOM objects
Var jsdiv1 = $jqdiv[0]
$jqdiv.get(0) = $jqdiv.get(0)
<body>
<div id="box"></div>
<script type="text/javascript">
$(document).ready(function(){
var $jqdiv = $('#box')
var jsdiv1 = $jqdiv[0]
var jsdiv2 = $jqdiv.get(0)
console.log($jqdiv)
console.log(jsdiv1)
console.log(jsdiv2)
})
</script>
</body>
Copy the codeRunning results:
DOM objects are converted to jQuery objects
<script type="text/javascript">
$(document).ready(function(){
/ / the DOM object
var jsdiv = document.getElementById('box')
var $jqdiv1 = $(jsdiv)
console.log(jsdiv)
console.log($jqdiv1)
})
</script>
Copy the codeRunning results:
Prev + next selector
The prev + Next selector is used to match all next elements immediately after prev; prev and next are siblings
<body>
<div id="box">
aaaaaaaaa
</div>
<p>kkkkkkkk</p>
<div id="a">
oooooooooo
</div>
<p>lllllllll</p>
<script type="text/javascript">
$(document).ready(function(){
var $jqdiv1 = $("#box+p").html('bbbbbbbb')})</script>
</body>
Copy the codeRunning results:
Prev ~siblings selector
<body>
<div id="box">
aaaaaaaaa
</div>
<p>kkkkkkkk</p>
<div id="a">
oooooooooo
</div>
<p>lllllllll</p>
<script type="text/javascript">
$(document).ready(function(){
var $jqdiv1 = $("#box~p").html('bbbbbbbb')})</script>
</body>
Copy the codeRunning results:
Simple filter for jQuery selector
Simple filtering starts with a colon and is usually used to implement simple filtering
| :first | Description: | Matches the first element found, which is used in conjunction with the selector |
|---|---|---|
| Example: | Example $(“tr:first”) // matches the first row of the table | |
| :last | Description: | Matches the last element found, which is used in conjunction with the selector |
| Example: | $(tr:last”) // Matches the last row of the table | |
| :even | Description: | Matches all elements with an even index, counting from 0 |
| Example: | $(“tr:even”) // Matches even rows | |
| :odd | Description: | Matches all elements with an odd index value, counting from 0 |
| Example: | $(“tr:odd”) // Matches rows with odd index values | |
| :eq(index) | Description: | Matches an element with a given index value |
| Example: | $(“div:eq(1)”) matches the second div element | |
| :gt(index) | Description: | Matches all elements greater than the given index value |
| Example: | $(“span:gt(0)”) // Match span elements with index greater than 0. | |
| :lt(index) | Description: | Matches all elements less than the given index value |
| Example: | $(“div:lt(2)) // Matches div elements whose index is less than 2. | |
| :header | Description: | Matches such as H1, H2, H3…… Class title element |
| Example: | $(“:header) // Matches all header elements |
Example: Match the first div of class a and change its value
<body>
<div id="a">
aaaaaaaaaa
</div>
<div id="a">
oooooooooo
</div>
<div id="a">
cccccccccc
</div>
<script type="text/javascript">
$(document).ready(function(){
var $jqdiv1 = $("#a:first").html('asfasfadgsgd')})</script>
</body>
Copy the codeRunning results:
Learn together and make progress together. If there are any mistakes, please comment