关注我们

jQuery - 简明教程

jQuery是使用JavaScript函数构建的框架。因此，您可以使用JavaScript中可用的所有函数和其他函数。

String 字符串

JavaScript中的字符串是一个不可变的对象，包含一个，一个或多个字符。以下是JavaScript串的有效示例-

"This is JavaScript String"
'This is JavaScript String''This is "really" a JavaScript String'"This is 'really' a JavaScript String"

Numbers 数字

JavaScript中的数字是双精度64位格式的IEEE 754值。它们是不变的，就像字符串一样。以下是JavaScript Numbers的有效示例-

5350
120.27
0.26

Boolean 布尔

JavaScript中的布尔值可以是 true 或 false 。如果数字为零，则默认为false。如果一个空字符串默认为false。

true      //true
false     //false
0         //false
1         //true
""        //false
"hello"   //true

Objects 对象

JavaScript非常支持对象概念。您可以使用对象文字来创建对象，如下所示:

var emp={
   name: "Zara",
   age: 10
};

您可以使用点符号来编写和读取对象的属性，如下所示:

//Getting object properties
emp.name  //==> Zara
emp.age   //==> 10

//Setting object properties
emp.name="Daisy"  //<== Daisy
emp.age=20      //<== 20

Arrays 数组

您可以使用数组文字来定义数组，如下所示:

var x=[];
var y=[1, 2, 3, 4, 5];

数组具有 length 属性，可用于迭代-

var x = [1, 2, 3, 4, 5];

for (var i = 0; i < x.length; i++) {
   //Do something with x[i]
}

Functions 函数

JavaScript中的函数可以命名或匿名。可以使用 function 关键字定义命名函数，如下所示:

function named(){
   //do some stuff here
}

可以使用与普通函数类似的方式定义匿名函数，但是它没有任何名称。

可以将匿名函数分配给变量或传递给方法，如下所示。

var handler = function (){
   //do some stuff here
}

JQuery非常频繁地使用匿名函数，如下所示:

$(document).ready(function(){
   //do some stuff here
});

Arguments 参数

JavaScript变量 arguments 是一种具有 length 属性的数组。以下示例很好地解释了它-

function func(x){
   console.log(typeof x, arguments.length);
}

func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

arguments对象还具有一个 callee 属性，该属性引用您所在的函数。如-

function func() {
   return arguments.callee; 
}

func();                //==> func

Context 上下文

JavaScript著名关键字 this 始终引用当前上下文。在函数中 this 上下文可以更改，具体取决于函数的调用方式-

$(document).ready(function() {
   //this refers to window.document
});

$("div").click(function() {
   //this refers to a div DOM element
});

您可以使用内置函数 call()和 apply()方法来指定函数调用的上下文。

它们之间的区别在于它们如何传递参数。 Call将所有参数作为参数传递给函数，而apply接受一个数组作为参数。

function scope() {
   console.log(this, arguments.length);
}

scope() //window, 0
scope.call("foobar", [1,2]);  //==> "foobar", 1
scope.apply("foobar", [1,2]); //==> "foobar", 2

Scope 范围

变量的范围是程序在其中定义的区域。 JavaScript变量只有两个范围。

全局变量 - 全局变量具有全局范围，这意味着它在JavaScript代码中的任何地方都已定义。
局部变量 - 局部变量仅在定义了局部变量的函数中可见。函数参数始终在该函数本地。

在函数体内，局部变量优先于具有相同名称的全局变量-

var myVar = "global";     //==> Declare a global variable

function () {
   var myVar = "local";   //==> Declare a local variable
   document.write(myVar); //==> local
}

Callback 回调

回调是作为参数或选项传递给某些方法的普通JavaScript函数。一些回调只是事件，被调用以使用户有机会在触发特定状态时做出反应。

jQuery事件系统在所有地方都使用此类回调，如-

$("body").click(function(event) {
   console.log("clicked: " + event.target);
});

大多数回调提供参数和context。在事件处理程序示例中，使用一个参数Event调用回调。

一些回调是返回某些内容所必需的，其他则使该返回值是可选的。为了防止表单提交，submit事件处理程序可以返回false，如下所示:

$("#myform").submit(function() {
   return false;
});

Closures 闭包

每当从某个内部范围内访问在当前范围之外定义的变量时，都会创建闭包。

以下示例显示了变量 counter 在create，increment和print函数中如何可见，而在函数外部却不可见-

function create() {
   var counter = 0;
	
   return {
      increment: function() {
         counter++;
      },
	   print: function() {
         console.log(counter);
      }
   }
}

var c = create();
c.increment();
c.print();     //==> 1

这种模式使您可以使用对外部不可见数据进行操作的方法来创建对象。应当指出，数据隐藏是面向对象编程的基础。

Proxy Pattern 代理

代理是可以用于控制对另一个对象的访问。它实现了与此另一个对象相同的接口，并将任何方法调用传递给该对象。该另一个对象通常称为真实对象。

可以化代理来代替该实际主题，并允许对其进行远程访问。无涯教程可以将jQuery的setArray方法保存在一个闭包中，并如下重写它-

(function() {
   //log all calls to setArray
   var proxied = jQuery.fn.setArray;

   jQuery.fn.setArray = function() {
      console.log(this, arguments);
      return proxied.apply(this, arguments);
   };
	
})();

上面的代码将其包装在一个函数中，以隐藏 proxied 变量。然后，代理将所有调用记录到该方法，并将该调用委托给原始方法。使用 apply(this，arguments)可以确保调用者将无法注意到原始方法与代理方法之间的区别。

Built-in 内置函数

JavaScript附带了一组有用的内置函数。这些方法可用于操作字符串，数字和日期。

以下是重要的JavaScript函数-

链接：https://www.learnfk.comhttps://www.learnfk.com/jquery/jquery-basics.html

来源：LearnFk无涯教程网

Sr.No.	Method & Remark
1	charAt() 返回指定索引处的字符。
2	concat() 合并两个字符串的文本并返回一个新字符串。
3	forEach() 为数组中的每个元素调用一个函数。
4	indexOf() 返回指定值的第一次出现在调用字符串对象内的索引；如果未找到，则返回-1。
5	length() 返回字符串的长度。
6	pop() 从数组中删除最后一个元素并返回该元素。
7	push() 将一个或多个元素添加到数组的末尾并返回该数组的新长度。
8	reverse() 反转数组元素的顺序-第一个变为最后一个，最后一个变为第一个。
9	sort() 对数组的元素进行排序。无涯教程网
10	substr() 从指定位置开始通过指定数量的字符返回字符串中的字符。
11	toLowerCase() 返回转换为小写的调用字符串值。
12	toString() 返回数字值的字符串表示形式。
13	toUpperCase() 返回转换为大写的调用字符串值。

Document Object Model

文档对象模型是HTML的各种元素的树状结构，如下所示-

复制代码

<html>
   <head>
      <title>The jQuery Example</title>
   </head>
	
   <body>
      <div>
         <p>This is a paragraph.</p>
         <p>This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>