📌  相关文章
📜  jQuery-基础

📅  最后修改于: 2020-10-23 08:14:15             🧑  作者: Mango

jQuery是使用JavaScript功能构建的框架。因此，您可以使用JavaScript中可用的所有功能和其他功能。本章将解释最基本的概念，但在jQuery中经常使用。

串

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

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

号码

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

5350
120.27
0.26

布尔型

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

以下是JavaScript布尔值的有效示例-

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

对象

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

数组

您可以使用数组字面量来定义数组，如下所示：

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]
}

功能

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

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

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

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

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

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

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

争论

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

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

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

arguments对象还具有被调用方属性，该属性引用您所在的函数。例如-

function func() {
   return arguments.callee; 
}

func();                // ==> func

语境

JavaScript的著名关键字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

范围

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

  • 全局变量-全局变量具有全局作用域，这意味着它在JavaScript代码中的任何地方都已定义。

  • 局部变量-局部变量仅在定义它的函数中可见。函数参数始终是该函数的局部参数。

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

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

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

打回来

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

jQuery的事件系统到处都使用此类回调，例如-

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

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

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

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

关闭

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

以下示例显示了变量计数器在创建，增量和打印函数中如何可见，但在函数外部却不可见-

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

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

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

代理模式

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

可以实例化代理来代替该实际主题，并允许对其进行远程访问。我们可以将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);
   };
    
})();

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

内建功能

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

以下是重要的JavaScript函数-

Sr.No. Method & Description
1

charAt()

Returns the character at the specified index.
2

concat()

Combines the text of two strings and returns a new string.
3

forEach()

Calls a function for each element in the array.
4

indexOf()

Returns the index within the calling String object of the first occurrence of the specified value, or -1 if not found.
5

length()

Returns the length of the string.
6

pop()

Removes the last element from an array and returns that element.
7

push()

Adds one or more elements to the end of an array and returns the new length of the array.
8

reverse()

Reverses the order of the elements of an array — the first becomes the last, and the last becomes the first.
9

sort()

Sorts the elements of an array.
10

substr()

Returns the characters in a string beginning at the specified location through the specified number of characters.
11

toLowerCase()

Returns the calling string value converted to lower case.
12

toString()

Returns the string representation of the number’s value.
13

toUpperCase()

Returns the calling string value converted to uppercase.

文档对象模型

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

现场演示
The jQuery Example
   
    
   
      

         
This is a paragraph.

         
This is second paragraph.

         
This is third paragraph.

这将产生以下结果-

以下是有关上述树结构的重点-

  • 是所有其他元素的祖先。换句话说，所有其他元素都是的后代。

  • 和元素不仅是后代，而且是的子代。

  • 同样，除了和的祖先，也是它们的父项。

  • 元素是

    的子代（和子代），和的子代，以及彼此相邻的

    元素的同级。

在学习jQuery概念时，对DOM有所了解将很有帮助，如果您不了解DOM，那么我建议您阅读有关DOM Tutorial的简单教程。