zoukankan      html  css  js  c++  java
  • Jquery Types 小结

          JavaScript provides several built-in(内置的) datatypes. In addition to those, this page documents virtual types(虚类) like Selectors, enhanced pseudo-types(伪类) like Events and all and everything you wanted to know about Functions.

          jQuery除了包含原生JS中的内置数据类型(built-in datatype),还包括一些扩展的数据类型(virtual types),如Selectors、Events等。

    一、Anything

    在jQuery文档中任何虚拟类型(virtual type)的使用表明可以使用任何类型或应该被期望。

    二、String

    A string in JavaScript is an immutable(不变的) object that contains none, one or many characters.

    (1)var typeOfStr = typeof "hello world";//typeOfStr为“string"

    (2)内置方法(Built-in Methods):

    "hello".charAt( 0 ) // "h"
    "hello".toUpperCase() // "HELLO"
    "Hello".toLowerCase() // "hello"
    "hello".replace( /e|o/g, "x" ) // "hxllx"
    "1,2,3".split( "," ) // [ "1", "2", "3" ]

    (3)length属性:返回字符长度,比如"hello".length返回5

    (4)String转换为Boolean:一个空字符串("")默认为false,而一个非空字符串为true(比如"hello")。

    三、htmlString

    在jQuery文档用于表示一个或多个DOM元素的String被指定为htmlString,通常创建和插入文档中。当作为jQuery()函数的一个参数传递时,该字符串如果是以<tag>开始和解析,直到最后>字符。示例如下:

    $( "<b>hello</b>" ).appendTo( "body" );  // <body><b>hello</b></body>
    $( "<b>hello</b>bye" ).appendTo( "body" );  // <body><b>hello</b></body>
    $( "bye<b>hello</b>" ).appendTo( "body" );  // 语法错误(Syntax error), unrecognized expression: bye<b>hello</b>
    $( $.parseHTML( "bye<b>hello</b>" ) ).appendTo( "body" );  // <body>bye<b>hello</b></body>
    $( "<b>hello</b>wait<b>bye</b>" ).appendTo( "body" );  // <b>hello</b>wait<b>bye</b>:

    四、Number

    在原生JavaScript中,Number是64位格式IEEE 754双精度(double-precision)值。就像字符串是不可变的。所有常见操作符等同于在于c语言中可以应用于数字(+, -, *, /, % , =,  +=, -=, * =, /=, ++, --)。

    (1)String转换为Boolean:If a number is zero, it defaults to false.

    (2)Math,数学对象:

    Math.PI // 3.141592653589793

    Math.cos(Math.PI) // -1

    (3)Parsing Numbers,转换为数字:parseInt和parseFloat方法

    parseInt( "123" ) = 123 // (implicit decimal(十进制))
    parseInt( "010" ) = 8 // (implicit octal(八进制))
    parseInt( "0xCAFE" ) = 51966 // (implicit hexadecimal(十六进制))
    parseInt( "010", 10 ) = 10 // (explicit decimal(十进制))
    parseInt( "11", 2 ) = 3 // (explicit binary(二进制))
    parseFloat( "10.10" ) = 10.1

    (4)Numbers to Strings,数字转换为字符串

    [1]当将Number粘到(append)字符串后的时候,将得到字符串。

           "" + 1 + 2; // "12"      "" + (1 + 2); // "3"   "" + 0.0000001; // "1e-7"   parseInt( 0.0000001 ); // 1 (!)

          [2]或者用强制类型转换:

          String(1) + String(2); //"12"   String(1 + 2); //"3"

    (5)NaN and Infinity(Both NaN and Infinity are of type "number"):

    如果对一个非数字字符串调用parseInt方法,将返回NaN(Not a Number),isNaN常用来检测一个变量是否数字类型,如下:

    parseInt( "hello", 10 ) // NaN    isNaN( parseInt("hello", 10) ) // true

    Infinity表示数值无穷大或无穷小,比如  1 / 0 // Infinity。

    另外 NaN==NaN 返回false,但是 Infinity==Infinity 返回true。

    (6)Integer 和 Float:分为表示整型和浮点型,都是数字类型。

    五、Boolean:布尔类型,true或者false。

    六、Object对象

    (1)JavaScript中的一切皆对象。对一个对象进行typeof运算返回 "object"。

    var x = {};    var y = { name: "Pete", age: 15 };

    (2)对于上面的y对象,可以采用点记法(Dot Notation)获取属性值,比如y.name返回"Pete",y.age返回15

    (3)Array Notation(数组访问方式访问对象)

           var operations = { increase: "++", decrease: "--" }

           var operation = "increase" ;   operations[operation] // "++";

           operations["multiply"] = "*"; // "*", 往operations对象中添加了一个key-value对。

    (4)迭代循环(Iteration),for-in-loop

    var obj = { name: "Pete", age: 15 };
    for( key in obj ) { alert( "key is " + [ key ] + ", value is " + obj[ key ] ); }
     
    $.each()jQuery的特有方式,如下:
    jQuery.each( obj, function( key, value ) {
      console.log( "key", key, "value", value );
    });

     (5)Boolean default:任何对象不管有无属性和值,都默认为true;

    (6)Prototype,对象原型属性,jQuery中用fn(Prototype的别名)动态为jQuery Instances添加对象(函数)

    var form = $("#myform");
    console.log( form.clearForm ); // undefined
     
    // jQuery.fn == jQuery.prototype
    jQuery.fn.clearForm = function() {
      return this.find( ":input" ).each(function() {
        this.value = "";
      }).end();
    };
    console.log( form.clearForm ); // function
    form.clearForm();// works for all instances of jQuery objects, because the new method was added

    七、 OPTIONS,可选

    几乎所有的jQuery插件都提供了一个基于OPTIONS的API,OPTIONS是JS对象,意味着该对象以及它的属性都是optional(可选的)。允许用户自定义(customization)。

    比如采用Ajax方式提交表单,

    $("#myform").ajaxForm();//默认采用Form的Action属性值作为Ajax-URL,Method值作为提交类型(GET/POST)

    $("#myform").ajaxForm({ url: "mypage.php", type: "POST" });//则覆盖了提交到的URL和提交类型

    八、Array,数组

    (1)var y = [ 1, 2, 3 ];    typeof [ 1, 2, 3 ]; // "object"    Array是可变的lists。Array也是对象。

    (2)读取或设置Array中元素的值:var val = arr[0];//val为1

    (3)Array中元素赋值,arr[2] = 4;//现在arr第三个元素为4

    (4)Iteration,数组循环(遍历)

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

          [2]但是当考虑性能时,则最好只读一次length属性,如下:

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

    [3]通过变量(variable)

    for ( var i = 0, item; item = a[i]; i++ ) { // Do something with item }
    [4] jQuery提供了each方法遍历数组:  
    var x = [ 1, 2, 3 ];
    jQuery.each( x, function( index, value ) {
      console.log( "index", index, "value", value );
    });

    (5)数组的length属性也可添加元素,对数组调用push方法,二者都将一个元素添加到数组末尾:

    var x = [];  x.push( 1 );  x[ x.length ] = 2;  x // [ 1, 2 ]

    (6)数组其他内置方法:

          var x = [0, 3, 1, 2];

          x.reverse() // [2, 1, 3, 0],反转

          x.join(" – ") // "2 - 1 - 3 - 0",插入

          x.pop() // [2, 1, 3],取出最后一个

          x.unshift(-1) // [-1, 2, 1, 3],不移换,该方法在IE中不返回length属性

          x.shift() // [2, 1, 3],移换

          x.sort() // [1, 2, 3],排序

          x.splice(1, 2) // [ 2, 3 ]用于插入、删除或替换数组元素,这里为删除从index=1开始的2个元素

    (7)Boolean Default,无论是否为空,均默认为true

    (8)Array<Type> ,可将数组作为参数传递,Array<String>

    九、PlainObject

    1)该类型为键值对( key-value pairs),通过jQuery.isPlainObject()方法可验证

    var a = [];  var d = document;  var o = {};

    typeof a; // object  typeof d; // object  typeof o; // object

    $.isPlainObject( a ); // false  $.isPlainObject( d ); // false  $.isPlainObject( o ); // true

    十、Date

    (1)使用new Date()创建日期对象,需传递数字参数,参数顺序为:year, month, day, hour, minute, second, millisecond

    例如:new Date( 2014, 0, 1, 8, 15 ); //January 1st, 2014, at 8:15,月份为0~11.

    十一、Function,函数

    (1)在JavaScript函数可以命名或匿名(anonymous)的。任何函数都可以分配给一个变量或传递给一个方法,但是通过成员函数这种方式可以使他们的上下文中调用另一个对象(即有不同的“this”对象)。例如:

    [1]function named() {}  [2]var handler = function() {}  以下为匿名函数
    [3]$( document ).ready(function() {});  [4]$( "a" ).click(function() {});
    [5]$.ajax({ url: "someurl.php", success: function() {} });
    typeof(handler);// function

    (2)Arguments,参数

    [1]有length属性

    function log( x ) { console.log( typeof x, arguments.length ); }
    log(); // "undefined", 0  log( 1 ); // "number", 1  log( "1", "2", "3" ); // "string", 3
    [2]参数也有callee属性
    var awesome = function() { return arguments.callee; }
    awesome() == awesome // true

    (3)Context, Call and Apply

    [1]在JavaScript中,变量"this"总是指当前上下文。默认情况下,"this"指的是窗口对象。这个上下文可以改变在一个函数,这取决于如何被函数调用。在jQuery中所有事件处理程序附带处理元素作为上下文被调用。

    $( document ).ready(function() {  // this refers to window.document  });
    $( "a" ).click(function() {  // this refers to an anchor DOM element  });

     (4)作用范围(Scope)

    //全局(global)var x = 0;
    (function() { // 私有(private)  var x = 1;  console.log( x ); // 1 })();
    console.log( x ); // 0

    (5)闭包(Closures)

    当一个变量在当前范围外被定义从内部范围访问时,闭包(Closures)被创建。

    function create() {
      var counter = 0;//被定义在Create()内
      return {  increment: function() { counter++; },
                print: function() { console.log( counter );} } }
    var c = create(); c.increment(); c.print(); // 1

    (6)代理模式(Proxy Pattern):支持基本的面向对象编程(aspect-oriented programming (AOP))

    (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"变量。将Jquery的setArray方法放进一个闭包,并且重写它。然后代理(proxy)记录所有方法的调用和原始调用的委托。使用apply( this, arguments )保证调用者不能注意到原方法及代代理(proxied)方法之间的区别。 

     (7)回调(Callback):回调是一个简单的JS函数作为参数传递给一些方法或选项。

    [1]带参数:$( "body" ).click(function( event ) { console.log( "clicked: " + event.target ); });
    [2]返回:$( "#myform" ).submit(function() { return false; });

    十二、选择器(Selector):选择器在jQuery中用来从一个DOM文档中选择DOM元素。

    十三、事件(Event)

    DOM对象模型( Document Object Model)的标准事件:blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, and keyup.

    十四、元素(Element):在文档对象模型(DOM)中一个元素可以有attributes, text,和children。

    $( "input[type='text']" ).on( "blur", function() {
    if( !this.value ) { alert( "Please enter some text!" ); } });  //this.value 相当于$(this).val()

    十五、jQuery

    [1]JQuery对象包含DOM元素的集合。比如$('p')即返回所有<p>...</p>。

    [2]jQuery对象本身的表现更像一个数组,对象有length属性,也可以通过index([0]~[length - 1])访问DOM元素集合中的某个。但是不是数组,不具备数组的某些方法,比如join()。

    [3]可以使用别名$()调用,除非调用jQuery.noConflict()来禁用这个选项。

    [4]许多jQuery方法返回jQuery对象本身,所以可以采用链式调用:$( "p" ).css( "color", "red" ).find( ".special" ).css( "color", "green" );

    [5]但是如果你调用的方法会破坏jQuery对象,比如find()和filter(),则返回的不是原对象。要返回到原对象只需要再调用end()方法即可。 

    十六、XMLHttpRequest:Ajax技术体系中最为核心的技术

    jQuery的一些Ajax函数返回本机XMLHttpRequest(XHR)对象,或者把它作为参数传递给success/error/complete处理程序(handlers),这样就可以做额外处理或者监视请求。注意,,当一个XHR对象实际在请求中使用时,Ajax函数只返回或传递一个XHR对象。

    参考来自: http://docs.jquery.com/Types 

  • 相关阅读:
    死工资的缓慢呆板已不能适合这个新型的商业社会。
    java获取前一天时间SimpleDateFormat,java判断某个时间段
    设置 DNS,防止 DNS 污染,清除 DNS 缓存ipconfig /flushdns
    win7 怎么设置开机直接进入桌面? netplwiz 命令
    AWS免费云服务套餐申请步骤及常见问题
    阿里云自定义镜像可以免费保存,ECS实例到期后自定义镜像手动快照不会被删除
    php获取字符串长度函数strlen和mb_strlen
    PHP HTML混写,PHP中把大块HTML文本直接赋值给字符串变量的方法
    人工智能跟脑神经科学没有关系。没有出差错的机会,就没有进化的可能。要想自己把事情做成功,就需要弄清楚事物的本质。
    python GIL 全局锁,多核cpu下的多线程性能究竟如何?
  • 原文地址:https://www.cnblogs.com/xinaixia/p/4073900.html
Copyright © 2011-2022 走看看