Introduction to Jquery and its detailed usage-JS Tutorial-php.cn

This article brings you an introduction to Jquery and its detailed usage. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Introduction to Jquery

Jquery is an excellent Javascrīpt framework. It is a lightweight js library (only 21k after compression). It is compatible with CSS3 and various browsers (IE 6.0, FF 1.5, Safari 2.0, Opera 9.0). The application of Jquery to our projects can free programmers from designing and writing complex JS applications and turn their attention to functional requirements rather than implementation details, thereby increasing the development speed of the project. It helps simplify JavaScript and Ajax programming. It allows you to easily manipulate documents, handle events, implement special effects and add Ajax interaction to web pages on your web pages.

2. Features of jQuery

a. Lightweight b. Rich application c. DOM operation, event processing, motion animation, AJAXd . Cross-browser (browser compatibility is no longer considered) e. Chain call f. Implicit iteration g. Rich plug-in library......

3. jQuery Use

to introduce jQuery

路径引入
<script src=&#39;文件路径&#39;></script>
引入在线资源
<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>

Copy after login

entry function

$(document).ready(function(){    
//类似于原生js的window.onload
});
//简写
$(function(){   });

Copy after login

and window.onload Difference

Difference 1: Different writing numbers

The Js entry function can only appear once. If it appears multiple times, there will be an event coverage problem.
jQuery’s entry function can appear any number of times without event coverage.

Difference 2: Different execution timings

The Js entry function is executed after all file resources are loaded. These file resources include: page documents, external js files, external css files, pictures, etc.

#The entry function of jQuery is executed after the document is loaded. The completion of document loading means: after the DOM tree is loaded, you can operate the DOM without waiting for all external resources to be loaded.

DOM object and jQuery object

jQuery object:

jQuery selector gets the DOM The object is then encapsulated, making it a jQuery object with jQuery methods. To put it bluntly, it is a repackaging of the DOM object.

Convert jQuery object to DOM object

First way:

var btn1 = $btn[0];

Copy after login

// At this point, the jQuery object $btn is converted into a DOM object btn1 (this method is recommended). The second method

var btn2 = $btn.get(0);// 此时就把jQuery对象$btn转换成了DOM对象btn2

Copy after login

DOM object is converted into jQuery

Use $(domObject) package to wrap it into a jQuery object

jQuery selector

jQuery selector is the power of jQuery It provides a set of methods to make it more convenient for us to obtain the elements on the page. The syntax is consistent with CSS selectors.

Basic Selector

"#"

Id Selector

--Example

$(“#btnShow”).css(“color”, “red”);

Copy after login

Select an element with the id btnShow (the return value is a jQuery object)

"."

Class selector

--Example

$(“.liItem”).css(“color”, “red”);

Copy after login

Select containing All elements of class liItem

"element"

##Tag selector

--Example

$(“li”).css(“color”, “red”);

Copy after login

Select all elements with the tag name li

##"Space"

Hierarchical selector (descendant selector)

--Example

$(“#j_wrap li”).css(“color”, “red”);

Copy after login

Select all descendant elements of the element with id j_wrap li

##">"

Children Selector

##-- Example

$(“#j_wrap > ul > li”).css(“color”, “red”);

Copy after login

Select all child elements ul of all child elements of the element with id j_wrap li

##Basic filter selector

":eq(index)"

选择匹配到的元素中索引号为index的一个元素，index从0开始

--示例

$(“li:eq(2)”).css(“color”, ”red”);

Copy after login

选择li元素中索引号为2的一个元素

":odd"

选择匹配到的元素中索引号为奇数的所有元素，index从0开始

--示例

$(“li:odd”).css(“color”, “red”);

Copy after login

选择li元素中索引号为奇数的所有元素

":even"

选择匹配到的元素中索引号为偶数的所有元素，index从0开始

--示例

$(“li:odd”).css(“color”, “red”);

Copy after login

选择li元素中索引号为偶数的所有元素

筛选（方法）

find(selector)

查找指定元素的所有后代元素（子子孙孙）

--示例

$(“#j_wrap”).find(“li”).css(“color”, “red”);

Copy after login

选择id为j_wrap的所有后代元素li

children()

查找指定元素的直接子元素（亲儿子元素）

--示例

$(“#j_wrap”).children(“ul”).css(“color”, “red”);

Copy after login

选择id为j_wrap的所有子代元素ul

siblings()

查找所有兄弟元素（不包括自己）

--示例

$(“#j_liItem”).siblings().css(“color”, “red”);

Copy after login

选择id为j_liItem的所有兄弟元素

parent()

查找父元素（亲的）

--示例

$(“#j_liItem”).parent(“ul”).css(“color”, “red”);

Copy after login

选择id为j_liItem的父元素

eq(index)

查找指定元素的第index个元素，index是索引号，从0开始

--示例

$(“li”).eq(2).css(“color”, “red”);

Copy after login

选择所有li元素中的第二个

jQuery各大版本的引用

官网jquery压缩版引用地址:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
jquery-3.0.0
官网jquery压缩版引用地址:
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
jquery-2.1.4
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
jquery-2.1.1
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
jquery-2.0.0
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
jquery-1.11.3
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
jquery-1.11.1
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.1.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
jquery-1.10.2
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
jquery-1.9.1
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
jquery-1.8.3
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
jquery-1.7.2
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
jquery-1.6.4
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.4.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
jquery-1.5.2
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.5.2/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.2.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
jquery-1.4.4
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.4.4/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
jquery-1.4.2
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.2.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
jquery-1.3.2
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.3.2.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.3.2.min.js"></script>
jquery-1.2.3
百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.2.3/jquery.min.js"></script>
微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.2.3.min.js"></script>
官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.2.3.min.js"></script>

Copy after login

The above is the detailed content of Introduction to Jquery and its detailed usage. For more information, please follow other related articles on the PHP Chinese website!