jQuery核心函数学习笔记

一、jQuery入门

1.jQuery隐式迭代和链式编程

在js中当给多个相同元素添加点击事件时需要进行遍历，而jQuery在方法的内部会为匹配到的所有元素进行循环遍历，简化我们的操作，方标调用，这就是隐式迭代。
链式编程是将多个操作通过“.”连接在一起成为一句代码。

        //隐式迭代
        // jQuery给获取到的所有a标签添加鼠标单击事件
        $("a").click(function () {
   
            console.log("click me！");
        });

        // 链式编程
        $(".myphoto").css("border","2px solid #FF0000").attr("alt","good");

2.jQuery的#符号

jQuery使用$的原因是： 书写简洁， 相对于其他字符与众不同， 容易被记住。
JQuery占用了两个变量： $ 和 jQuery。
$代表的就是jQuery。jQuery里面的$函数， 根据传入参数的不同， 进行不同的调用， 实现不同的功能， 返回的jQuery对象。

3.jQuery对象和DOM对象的相互转换

Dom对象是指使用JavaScript操作Dom返回的结果。
jQuery对象指的是使用jQuery提供的操作DOM的方法返回的结果。
需要注意的是：jQuery对象和DOM对象API不能混搭。
jQuery对象转成DOM对象
1.jQuery对象是一个类似数组的对象，可以通过下标[index]的方法得到相应的DOM对象。
2.jQuery本身提供了一种方法，通过get(index)方法得到相应的dom对象。
DOM对象转成jQuery对象
对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。方式为$(DOM对象), 转换后，就可以任意使用jQuery中的方法了。

二、jQuery核心函数

1、jQuery([selector,[context]])
这个函数也就是$();一般参数为包含css选择器的字符串，使用时向它传递一个表达式，然后根据这个表达式查找所有匹配的元素。jQuery核心功能都是通过这个函数实现，jQuery中一切都基于这个函数。如果没有指定context参数，$()将在当前的 HTML document中查找 DOM 元素；如果指定了 context 参数，如一个 DOM 元素集或 jQuery 对象，那就会在这个 context 中查找。

// 1、找到所有p元素，两种写法相似
var lis = $("ul>li");
var lis = $("li", $("ul"));

// 2、页面设置背景色
$(document.body).css( "background", "black" );

//3\在文档的第一个表单中，查找所有的单选按钮(即: type 值为 radio 的 input 元素)
$("input:radio", document.forms[0]);

2、jQuery(html,[ownerDocument])
这个是函数是根据HTML标记字符串动态创建元素,创建同时设置一系列属性值。

// 1、动态创建一个div元素以及其子元素，并将其追加到body元素中
$("<div><p>Hello</p></div>").appendTo("body");

// 2、创建input元素同时设定type属性，input的type只能写一次
// 在 IE 中无效:
$("<input>").attr("type", "checkbox");
// 在 IE 中有效:
$("<input type='checkbox'>");

// 3、动态创建一个 div 元素,给div添加属性和事件
$("<div></div>", {
   
	// 给新创建的div添加class属性,并且值为test
    "class": "test xx",
    // 给其设置文本内容
    text: "Click me!",
     // 给其添加事件
    click: function () {
   
         // toggleClass() 是jQuery里面的方法,如果存在（不存在）就删除（添加）一个类
         $(this).toggleClass("test");
     }
}).appendTo("body");

3、jQuery(callback)
$(document).ready()入口函数的简写。在js中，入口函数为window.onload，这个函数一个事件类型只能对应一个事件处理函数,如果多个,后面会覆盖前面的。在jQuery中，$(document).ready()函数实在文档加载完毕， 图片不加载的时候执行。可以有多个。

window.onload = function () {
   
    console.log("window.onload");
}

// 第一种写法：
$(document).ready(function () {
   
    console.log("1");
})

// 第二种写法
$().ready(function () {
   
    console.log("2");
})

// 第三种写法:
$(function () {
   
    console.log("3");
})

4、jQuery.holdReady(hold)
暂停或恢复.ready() 事件的执行。
延迟就绪事件，直到已加载的插件。

// 在这个里面使用jQuery插件
$.holdReady(true); // 暂停ready事件的指向
$.getScript("myplugin.js", function () {
   
    $.holdReady(false);
});

三、jQuery对象访问

1. each(callback)：以每一个匹配的元素作为上下文来执行一个函数。用来遍历jQuery对象的方法， 获取值的没有隐式迭代
2. size()， jQuery 对象中元素的个数。和length一样
3. length，jQuery 对象中元素的个数。
4. selector，返回传给jQuery()的原始选择器。返回你用什么选择器来找到这个元素的。
5. context，返回传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。没有指定传给document
6. get([index])，取得其中一个匹配的元素。 index表示的是下标
7. index([selector|element])搜索匹配的元素，并返回相应元素的索引值，从0开始计数。

四、数据缓存

1. data([key],[value])，在元素上存放数据,返回jQuery对象。
2. removeData([name|list])，在元素上移除存放的数据