Summary of what you need to know about getting started with jQuery

This time I will bring you a summary of the jQuery Getting Started Instructions. What are the Notes of the jQuery Getting Started Instructions. The following is a practical case. Let’s take a look.

jQuery object

•jQuery object is an object generated by wrapping a DOM object through jQuery.

•jQuery objects are unique to jQuery.

•Only jQuery objects can use jQuery methods. Any methods of DOM objects cannot be used in jQuery objects, and conversely, DOM objects cannot use any jQuery methods.

•Convention: If you obtain a jQuery object, add $

in front of the variable.•The jQuery object encapsulates multiple DOM objects, and the jQuery object is an array-like object

•The difference between arrays and array-like objects

1. The type of array is Array

2. The type of array-like object is Object

DOM object to jQuery object

•Use $() to convert DOM After the object is packaged, it can be converted into a jQuery object

var item = document.getElementsByTagName('ul')[0], // DOM对象
  $item = $(item); // jQuery对象

jQuery object is converted into a DOM object

jQuery object through the get(index provided by jQuery ) method to get the corresponding DOM object

var $ul = $('ul'),
  ul = $ul.get(0);

jQuery object is an array-like object, and the corresponding DOM object can be obtained through the [] method.

Array-like object

Array-like object is essentially an object, but its storage method is similar to the structure of an array

•arguments object----accepts the number of function arguments
•jQuery object----The bottom layer is the dom object

Properties

•length attribute (length of array | number of elements)

method

•get(index): put according to index Return the corresponding dom object
•eq(index): Return the corresponding jQuery object according to index
•index(): Find the index value of the element

ready and onlaod Difference

ready

1. Has abbreviation
2. Allows multiple
3 to appear in one HTML page. Execute after loading the DOM structure
4. Fast execution speed

onload

1. There is no abbreviation
2. In an HTML page, only Use a
3. You need to wait until all resources of the page are loaded before executing
4. The execution speed is slower than ready

jQuery animation

Basic hiding and display effects

•show()/hide()

$('p').show(1000).hide(1000);

If used on the same jQuery object, chain operations can be used.

Sliding animation effect

•slideDown()/slideUp()

$('p').slideUp(1000).slideDown(1000);

Fade in and out

•fadeIn() fade in
•fadeOut( ) Fade out

$('p').fadeIn(1000).fadeOut(1000);

Concurrency and queuing effects

•Concurrency effect: Set multiple animations to be executed at the same time
•Queue effect: Set multiple animations and execute them in sequence

jQuery plug-in

The role of jQuery plug-in

•Extend the functions of jQuery
•Present componentization Features

Date plug-in - layDate plug-in

•Initial use of layDate
1.Introducing laydate.js
2.laydate(options)

Develop plug-in

Global function

Global function is actually jQuery itself Methods.

Some of jQuery’s built-in functions are implemented through global functions.

•比如$.ajax（）就是典型的全局函数

向 jQuery 命名空间添加一个函数，只需要将这个新函数指定为 jQuery 本身的一个属性

$.globalFunction = function(){
  // todo...
};

可以通过 jQuery.globalFunction（）或者 $.globalFunction（）来调用

当需要添加多个函数可以使用$.extend（）函数

$.extend({
  functionOne: function(){
    // todo...
  },
  functionTwo: function(){
    // todo...
  }
});

通过上述代码可以添加全局函数，但是代码存在有关命名空间的风险

我们可以把属于一个插件的所有全局函数封装到一个对象

$.plugins = function(){
  functionOne: function(){
    // todo...
  },
  functionTwo: function(){
    // todo...
  }
};

通过上述代码，其实是为全局函数创建了另一个方法 --- plugins

functionOne 和 functionTwo 已经成为 plugins 对象的属性。

$.plugins.functionOne();
$.plugins.functionTwo();

添加 jQuery 实例对象的方法

$.fn.method = function(){};对象方法的环境

在任何插件方法内部，关键字 this 引用的都是当前调用方法的 jQuery对象，因此可以在 this 上面调用任何内置的 jQuery 方法。

方法连缀

通过 return this 来实现链式操作

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jquery上传表单样式

jQuery解析xml文件详解

The above is the detailed content of Summary of what you need to know about getting started with jQuery. For more information, please follow other related articles on the PHP Chinese website!