Introduction to jQuery:
jQuery is an efficient, concise and feature rich JavaScript library. Its API is easy to learn and compatible with many browsers. It greatly simplifies the development of JavaScript code, including HTML element selection, HTML element operation, CSS operation, HTML event function, JavaScript special effects and animation, HTML DOM traversal and modification, AJAX and Utilities.
jQuery benefits:
- Lightweight. The core file is only tens of kb, which will not affect the page loading speed.
- Cross browser compatibility, basically compatible with the mainstream browsers.
- Chain programming, implicit iteration.
- Support for events, styles and animation, which greatly simplifies DOM operation.
- It supports plug-in extension development and has a wealth of third-party plug-ins.
- Free and open source.
Steps to use jQuery:
1. Download jQuery:
Download jQuery to the official website address: https://jquery.com/ , select the version you need. The general differences between different versions are as follows:
1x: compatible with lower version browsers such as IE 678, and the official website will not be updated
2x: incompatible with IE 678 and other lower version browsers, and the official website will not be updated
3x: it is incompatible with IE 678 and other lower version browsers. It is the version mainly updated and maintained by the official
2. Import the jQuery file into the project:
There are two formats of jQuery files in the downloaded compressed package. Select the compressed file ending in min.js (it is OK not to compress, and the compressed file is generally selected in the production environment) and introduce it into the head tag through the recommendation of script tag:
<head>
<script type="text/javascript" src="jquery.min.js"></script><!-- type="text/javascript"Can be omitted,of course jQuery Files can be used cdn Other network resources -->
</head>
3. Write jQuery code in the new script tag:
Because jQuery is actually encapsulated javascript code, jQuery code and javascript code can be written to each other, but they have their own API s and cannot be confused, such as:
<script>
// Write jQuery code and javascript code:
$('p').text('This is a text');
function myf(){};
</script>
jQuery syntax:
Entry function (document ready function):
Because jQuery cannot manipulate DOM elements when the page is not loaded, in order to avoid this problem, jQuery encapsulates the same method as onload event in javascript, such as:
<script>
// The first one is $(function() {write jquery Code:}). This one is relatively simple. It is recommended to use:
$(function() {
$('div').text('hello word');
});
// The second kind: through $(document) The ready() method implements load delay. Similarly, use function() {to write jQuery Code:}
$(document).ready(function() {
$('div').text('hello word');
});
</script>
be careful:
1. In jQuery, $is the top-level object of jQuery. Any $in jQuery can be replaced by jQuery (Q in jQuery is capitalized). Using jQuery keyword in jQuery can solve the problem of $naming conflict in other languages;
2. The above two methods refer to the loading of DOM elements, which is equivalent to the DOMContentLoaded method in native javascript, and do not refer to pictures and other reference resources.
Substantive comparison between jQuery object and DOM object:
The method of jQuery is different from that of javascript, so it cannot be confused. For example, innerHTML in DOM element and jQuery html() cannot be confused;
JQuery objects are also different from javascript objects. The essence between them is that jQuery objects are generated by wrapping DOM objects with the $symbol, and jQuery objects are a pseudo array.
Mutual conversion of jQuery object and DOM object:
Because jQuery objects are generated after being wrapped by $, DOM objects can only be wrapped by the $symbol or jQuery, such as:
<script>
var divs = document.querySelector('div');
divs.innerText = 'hello';
// Convert this $jQuery object to a DOM object:
$(divs).css('color', 'red');
</script>
Because jQuery objects are actually pseudo arrays with DOM objects as elements, you can get a DOM element by index. Generally, the element with index 0 is the DOM element itself. Therefore, jQuery objects are generally converted into DOM objects by [0]. However, jQuery provides a get(0) method to convert into DOM elements, such as:
<script>
var $box = $('div');
$box.html('hello word');
// Convert jQuery object to DOM object via [0]:
$box[0].style.color = 'skyblue';
// Convert to DOM object through get():
$box.get(0).style.fontSize='20px';
</script>
jQuery selector:
The selectors in the native javascript have compatibility problems, and the use is relatively simple. jQuery encapsulates a wealth of selectors without compatibility problems. Its syntax is $('CSS selector'), as follows:
Base selector:
<script>
// 1 label selector:
$('div').text('hello');
// 2.class selector:
$('.p').html('<a href = "https://www.baidu. Com "> Baidu < / a >);
// 3.id selector:
$('#a').css('color', 'green');
// 4. Wildcard selector:
$('*').css('fontSize', '30px');
// 5. Union selector:
$('.p,a,span').css('fontSize', '12px');
// 6. Intersection selector:
$('a.as').css('textDecoration', 'none');
</script>
Level selector:
Level selectors refer to parent selectors, parent selectors, child selectors, descendant selectors, etc.
<script>
// 1. Descendant selector: select all p tags in div with class name of box
$('.box p').css('color', 'blue');
// 2. Offspring selector: select the parent-child p tag of div with class name of box
$('.box > p').css('color', 'red');
</script>
Attribute selector:
Attribute selector refers to the selection through the ['attribute'] expression:
<script>
// 1. Select the tag with class attribute:
$('[class]').css('color', 'red');
// 2. Select the tag with class attribute and class value of li:
$('[class="li"]').css('fontSize', '30px');
// 3. Select a tag with a href attribute but no href value #:
$("[href!='#']").css('textDecoration', 'none');
// 4. Select the item with href attribute, and the href value is displayed by Tag at the end of com:
$("[href$='.com']").css('display', 'none')
</script>
Filter selector
Filter selector refers to filtering through special characters:
<script>
// 1. Select the first li in a group:
$('li:first').css('color', 'yellow');
// 2. Select the last li in a group:
$('li:last').css('color', 'red');
// 3. Select li with index 3:
$('li:eq(3)').css('color', 'pink');
$('li').eq(3).css('fontSize', '28px');
// 4. Select li with odd index:
$('li:odd').css('backgroundColor', 'skyblue');
// 5. Select li with even index:
$('li:even').css('backgroundColor', 'gray');
</script>
Node selector:
Node selector refers to operations similar to nodes in DOM, as follows:
<script>
// 1. Select the parent element of li with the class name of li2: special reminder: when an element has multiple parent elements, the selector of a specific parent element can be passed in the bracket of parent()
$('li.li2').parent().css('listStyle', 'none');
// 2. Select the parent-child level li in the ul whose class name is ul2:
$('.ul2').children().css('listStyle', 'decimal');
// 3. Find all span s in div:
$('div').find('span').css('color', 'orange');
// 4. Find all the sibling elements of ul with class name ul2: special reminder: the selector of the specific element to be found can be passed in the brackets of siblings()
$('ul.ul2').siblings('span').css('fontSize', '30px');
// 5. Find all subsequent sibling elements with id of lia element:
$('#lia').nextAll().css('color', 'blue');
// 6. Find all the previous sibling elements of the class named li2 element:
$('.li2').prevAll().css('color', 'skyblue');
</script>
Tip: the pictures and other materials in this article come from the Internet. If there is infringement, please send an email to: 810665436@qq.com Contact the author to delete.
Author: Kuhai