jQuery之核心函数

Posted 2021-04-08 小伍前端

        相比任何一个web前端开发工作者，对于jQuery这个框架再熟悉不过了，小编前几天打开jquery的开发文档看到那么多的API，还是有一部分比较陌生，虽然大多数开发的时候都用的是jQuery，为此小编决定还是要温故而知新，重新复习一遍jQuery的开发文档，看完还是有不少收获，至少对于一些模糊的，知道这样写能达到目的函数，再一次看过之后明白了不少呢！废话不多说，以下是个人复习笔记：

一、核心函数

1、jquery([selector,[context]])

     其中：

    selector：用来查找的字符串

    context：作为带查找的DOM元素集、文档或jquery对象

这是jquery这个框架最核心的函数，几乎所有的核心功能都是通过这个函数实现的；其基本的用法是向它传递一个表达式（一般由CSS选择器组成），然后根据该表达式查找所有匹配的元素。通常在利用jquery开发的时候，很少会用到context这个参数，他的作用其实就是指定函数该从哪里去查找匹配的元素，不写这个参数，$()则在当前的html document中查找DOM元素。

我们直接上例子：

$("div>p");  //找到左右div元素下面的子元素
$(document.body).css("fontSize","12px"); //设置字体大小
$(myForm.elements).hide(); //隐藏表单的所有元素
$("input:radio",document.forms[0]); //在文档的第一个表单中，查找所有的单选按钮
$("div",xml.responseXML); //在一个由AJAX返回XML文档中，查找所有的div元素

2、jQuery(html,[ownerDocument]|[props])

     其中：

html：用于动态创建DOM元素的HTML标记字符串

ownerDocument：创建DOM元素所在的文档

props:用于附加到新创建元素上的属性、事件和方法

直接通过例子来理解:

//动态创建一个元素及其其中的内容，然后将其追加到body元素中
   $("<div><p>wujiang</p></div>").appendTo("body"); 
//创建一个input元素同时设置type属性，在IE中无效；在IE中有效需要这样写： $("<input type="checkbox">");
   $("<input>").attr("type","checkbox"); 

$("<div>",{

"class":"test",

text:"Click me!",

click:function(){

$(this).toggleClass("test");

     }

 }).appendTo("body");

3、jQuery(callback)

$(document).ready()的简写，即允许你绑定一个在DOM文档载入完成后执行的函数。你可以在一个页面中任意使用多个$(document).ready事件。

例：

$(function(){
//文档就绪
});

4、jQuery.holdReady(hold)

暂停或恢复.ready()事件的执行，但必须在执行.ready事件之前调用，否则没有效果；如果要延迟ready事件，则调用$.holdReady(true),在ready事件执行时，调用$.holdReady(false);

例：

$.holdReady(true);
$.getScript("myplugin.js",function(){
    $.holdReady(false);
});

二、对象访问

1、each(callback)

        匹配每一个元素来作为上下文执行一个函数，每次函数传进来时，函数中的this都会指向一个不同的DOM元素，同时还会传递给当前执行元素所在的index值；返回false则停止循环，返回true则进入下一次循环

例：

html:

<button>Change colors</button>
<span></span> 
<div></div> 
<div></div>
<div></div> 
<div></div>
<div id="stop">Stop here</div> 
<div></div>
<div></div>
<div></div>

js:

$("button").click(function(){
    $("div").each(function(index,domEle){
       $(domEle).css("backgroundColor","yellow");
       if($(this).is("#stop")){
           $("span).text("Stopped at div index #"+index);
           return false;
       }
    });
});

2、size()

      获取jquery对象中元素的个数

     

html:

<img src="test1.jpg"/>
<img src="test1.jpg"/>
<img src="test1.jpg"/>

js:

$("img").size();

结果：

3

3、length()

     获取jquery对象中元素的个数

         

html:

<img src="test1.jpg"/>
<img src="test1.jpg"/>
<img src="test1.jpg"/>

js:

$("img").length;

结果：

3

4、selector

      返回你用什么选择器来找到这个元素的。可与context一起使用，用于精确检测选择器查询情况。开发插件常用

     

例子：

$("ul")
   .append("<li>"+$('ul').selector+</li>")
   .append("<li>"+$('ul li').selector+</li>")
   .append("<li>"+$('div#foo ul:not([class])').selector+"</li>");
结果：
    ul
    ul li
    div#foo ul:not([class])

5、get([index])

      取得其中一个匹配的元素，$(this).get(0)与$(this)[0]等价

     

例：

html：

<img src="test1.jpg"></img src="test2.jpg">

js:

$("img").get(0);

结果：

[<img src="test1.jpg">]

6、index([selector|element])

     搜索匹配的元素，并返回相应元素的索引值，从0开始计数

   

例：

html:

<ul>
   <li id="foo">foo</li>
   <li id="bar">bar</li>
   <li id="baz">baz</li>
</ul>

js:

$('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
$('li').index($('#bar')); //1，传递一个jQuery对象
$('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
$('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的做引位置
$('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。  

三、数据缓存

1、data([key],[value])

      其中：

  key:存储的数据名

          value:将要存储的任意数据

在元素上存放数据（任何格式的数据），返回jQuery对象

           

例：

html:

<div></div>

js:

$("div").data("blah");  // undefined
$("div").data("blah", "hello");  // blah设置为hello
$("div").data("blah");  // hello
$("div").data("blah", 86);  // 设置为86
$("div").data("blah");  //  86
$("div").removeData("blah");  //移除blah
$("div").data("blah");  // undefined

    

   2、removeDate([name|list])

          在元素上移除存放的数据

          例子：

          $("div").removeDate("greeting");

四、插件机制

1、jQuery.fn.extend(object)

     用来扩展新的方法（常用来制作插件）

     

例：

jQuery.fn.extend({
    check:function(){
        return this.each(function(){
            this.checked = true;
        });
    },
    uncheck:function(){
        return this.each(function(){
            this.checked = false;
        });
    }
});
结果：
    $("input[type=checkbox]").check();
    $("input[type=radio]").uncheck();

2、jQuery.extend(object)

     扩展jQuery对象本身

     

例：

jQuery.extend({
    min:function(a,b){return a < b ? a : b},
    max:function(a,b){return a > b ? a : b}
});

结果：

 jQuery.min(2,3); //=>2
 jQuery.max(4,5); //=>5