Home >Web Front-end >JS Tutorial >jQuery Getting Started Guide for Beginners_jquery

jQuery Getting Started Guide for Beginners_jquery

WBOYOriginal: 2016-05-16 15:45:061157browse

What is jQuery and what can it do for us? If you are a web developer and have written JavaScript programs, then you are probably using jQuery. If you have not tried it, you have at least heard of it. In fact, jQuery can be said to be the most popular JavaScript library at this stage. According to statistics from relevant departments, about 28% of websites around the world are using jQuery. This number may be a bit exaggerated, but it shows the popularity of jQuery. This article only gives a brief introduction to the use of jQuery and serves as an introductory tutorial.
Download the jQuery code and load it on the page

First you need to download the latest jQuery code from the jQuery official website. jQuery officially provides two versions, one is compressed and the other is not compressed. If you do not plan to read or analyze For jQuery source code, it is recommended to download the compressed version because it is smaller. After the download is completed, load it in your HTML code. The loading method is as follows:

<html>
 <head>
 <title>jQuery tutorial</title>
 <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
 </head>
 <body>
 jQuery tutorial
 </body>
</html>

Of course, due to the current popularity of jQuery, many websites also provide online jQuery API, such as Google API, so we can load jQuery through the following methods:

Copy code The code is as follows:

f8e4fb3ff4e81922b59a4edd2a78188b2cacc6d41bbb37262a98f745aa00fbf0

A parameter ver=1.1.4 is added after the address. It should be noted that the JavaScript code cannot receive any parameters. This parameter is added here just to allow the browser to obtain the latest version from the server, because You may already have the jquery.min.js file in your browser cache before. This is just to avoid caching.
How jQuery code is executed

When learning to write jQuery code, the first thing you need to touch is the document ready event processing mechanism. Almost all your jQuery code must be written in this event. This thing has two main functions:

Make sure the jQuery code is executed only after the web page is fully loaded. Because if there are DOM elements in the web page that have not been fully loaded, using jQuery code to access or manipulate DOM elements will cause an error.
Differentiate jQuery code from other code to a certain extent.

The code is generally written as follows:

<script type="text/javascript">
$(document).ready(function() {
 // 所有的 jQuery 代码都写在这里
});
</script>

Select DOM elements using jQuery selectors

jQuery encapsulates a function $("") that allows us to conveniently select DOM elements in HTML documents. Here are a few simple ways to use it.

$("div"); // 选择当前 HTML 文档中的所有 DIV 元素
$("#myElement"); // 选择当前 HTML 文档中 ID 为 "myElement" 的元素
$(".myClass"); // 选择当前 HTML 文档中 class 为 "myClass" 的元素
$("p#myElement"); // 选择当前 HTML 中 ID 为 "myElement" 的段落 P 标签元素
$("ul li a.navigation"); // 选择列表元素中 class 为 "navigation" 的超链接

jQuery supports almost all CSS selector methods

$("p > a"); // 选择所有 P 标签中的超链接 A 元素
$("input[type=text]"); // 选择 input 元素中 type 为 text 的元素
$("a:first"); // 选择当前页面中的第一个超链接 A 元素
$("p:odd"); // 选择当前页面中序数为奇数的段落 P 元素
$("li:first-child"); // 选择列表中的第一个元素

jQuery itself also defines some selector methods. Here are a few examples:

$(":animated"); // 选择所有正在执行动画效果的元素
$(":button"); // 选择所有按钮元素 （input 或 button）
$(":radio"); // 选择所有单选框元素
$(":checkbox"); // 选择所有复选框元素
$(":checked"); // 选择所有已经在 选定状态 的单选框和复选框
$(":header"); // 选择所有标题元素 （h1, h2, h3, h4 ...）

Manipulate and access class names in CSS

Using jQuery, you can add and remove class names for DOM elements, and it is very convenient to use. Here are a few typical usage methods:

$("div").addClass("content"); // 为所有 <div> 元素添加名为 "content" 的类
$("div").removeClass("content"); // 移除所有 <div> 元素中，名为 "content" 的类
$("div").toggleClass("content"); // 交替所有 <div> 元素中，名为 "content" 的类 （如果该元素中不存在这个类，则为它加上这个类；如存在，则移除之）

Of course, you can also use jQuery to detect whether a certain class is being used in an element. The code is as follows

if ($("#myElement").hasClass("content")) {
 alert("存在名为 content 的类！");
}
else {
 alert("不存在名为 content 的类！");
}

Use jQuery to manipulate styles in CSS

You can easily add CSS styles to DOM elements using jQuery. Here are a few examples:

$("p").css("width", "400px"); // 为所有段落添加一个宽度
$("#myElement").css("color", "blue") // 将所有 ID 为 #myElement 的元素中文本颜色变为蓝色
$("ul").css("border", "solid 1px #ccc") // 为所有无序列表添加实线边框，且边框颜色为 #ccc

Add, remove, and append DOM elements or content to web pages

jQuery also provides many methods to manipulate DOM elements, such as changing the text in the operation tag. . . A few examples are as follows:

var myElementHTML = $("#myElement").html();
// 获取 ID 为 myElement 的元素中的所有内容，包括文本和 HTML 标签
// 这种方法类似于传统 JavaScript 中的 innerHTML

var myElementHTML = $("#myElement").text();
// 获取 ID 为 myElement 的元素中的文本，仅包括文本，HTML 标签除外

Similar to the above two methods, you can also change the HTML or text in the DOM element:

$("#myElement").html("<p>This is the new content.</p>");
// #myElement 中的内容将被这个段落替换掉

$("#myElement").text("This is the new content.");
// #myElement 中的内容将被这行文本替换掉

Append content within the element:

$("#myElement").append("<p>This is the new content.</p>");
// 保留标签内原有内容，并在末尾处追加新内容

For appending content to elements, jQuery has several other uses, such as: appendTo(), prepend(), prependTo(), before(), insertBefore(), after(), insertAfter(), each has its own Its characteristics, but its usage are similar to append().
jQuery event handling

Some specific event handlers can be implemented using the following methods:

$("a").click(function() {
 // 可以在这里写一些代码
 // 当超链接被点击的时候这里的代码将被执行
});

When the hyperlink is clicked, the code in function() will be executed. There are other events that can be used in the same way, such as: blur, focus, hover, keydown, load, mousemove, resize, scroll, submit, select.
Hide or show elements with jQuery

jQuery can also show or hide DOM elements very conveniently. The sample code is as follows:

$("#myElement").hide("slow", function() {
 // 这里可以写一些代码，当元素被隐藏后，这里的代码将被执行
});

$("#myElement").show("fast", function() {
 // 这里可以写一些代码，当元素被隐藏后，这里的代码将被执行
});

$("#myElement").toggle(1000, function() {
 // 这里可以写一些代码，当元素被隐藏/显示后，这里的代码将被执行
});

可以看到，当元素显示或隐藏的时候，是慢慢的渐渐变化的，这是因为上面用到了几个速度参数，如 slow，fast，除此之外还有 normal，数字 1000 表示毫秒数，可以自定义。如果没有设置速度参数，那么元素将直接显示或隐藏，一闪而过，没有任何动画效果。后面的第二个参数是一个 function，用来当显示/隐藏完毕后，再执行一些需要的代码，如果不需要，可省略此参数。

另外还有一种“渐隐渐显”的方法，也是动画效果，使用方法如下：

$("#myElement").fadeOut("slow", function() {
 // 这里的代码在 fade out 完成后执行
});

$("#myElement").fadeIn("slow", function() {
 // 这里的代码在 fade in 完成后执行
});

调整元素的透明度：

$("#myElement").fadeTo(2000, 0.4, function() {
 // 这里的代码在在调整透明度完成后执行
});

其中第一个参数是仍然是速度参数，第二个参数是透明度，但三个参数是一个匿名回调函数，当渐变完成后执行。
jQuery 之动画效果

jQuery 可以为 DOM 元素添加上下滑动效果：

$("#myElement").slideDown("fast", function() {
 // .......
});

$("#myElement").slideUp("slow", function() {
 // .......
});

$("#myElement").slideToggle(1000, function() {
 // .......
});

jQuery 的动画效果还可以应用在改变 DOM 元素样式的时候，使改变样式的过程以平滑过渡的方式进行，而且可以选择需要速度，示例如下：

$("#myElement").animate({
 opacity: 0.3,
 width: "500px",
 height: "700px"
 }, 
 1000, 
 function() {
 // ......
});

总的来说，jQuery 的动画效果很强大，但是也有其怪癖（例如要改变颜色的话，可能需要其它特定的插件）。jQuery 还有其它许多动画效果需要不断地去深入学习和挖掘。

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to some core methods in jQuery programming_jqueryNext article：Introduction to some core methods in jQuery programming_jquery

See more

jQuery Getting Started Guide for Beginners_jquery

Related articles