jQuery学习之二---jq核心

还是那句话，我在这边只选择一些我已经看懂的，不能传播错误信息不是吗，哈哈，然后就是我个人觉得比较重要的，OK，下面开始学习，加油啊，一起加油！

jQuery核心函数

1、jquery([selector,[context]])
这个函数接收两个参数，
第一个是包含CSS选择器的字符串，然后通过这个字符串去匹配一组元素。其实通俗来说就是用选择器以jq的方式去获取匹配到元素。

比如：用jQuery去获取div中的p标签
<div>
    <p></p>
    <p></p>
</div>
$("div>p");//<p></p>,<p></p>
获取到以后我们就可以进行别的操作了，比如设置个字体颜色什么的
$("div>p").css("color","pink");

第二个参数context，这个属性在 jQuery version 1.10 中被弃用。
我们就稍微了解一下就可以了。
默认情况下, 如果没有指定context参数，$()将在当前的 HTML document中查找 DOM 元素；如果指定了 context 参数，如一个 DOM 元素集或 jQuery 对象，那就会在这个 context 中查找。
2、jquery(html)：这个方法用来动态创建DOM元的HTML标记的字符串，其实也就是jq中创建标签的方法。

$("<div></div>");这样就创建了一个div标签了
简写方法：$("<div/>");

---

jQuery对象方法

3、each(callback)
以每一个匹配的元素作为上下文来执行一个函数。每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数（从零开始的整型）。
其实说白了就是遍历获取到的元素，根据元素的下标进行某些操作。

比如：有两个img标签，给其设置上src
    <img/><img/>
    $("img").each(function(i){
        this.src = "test"+i+".jpg";
    });

4、length：返回jq对象中元素的个数

<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").length;//2

5、get(index)
这个函数的用法就是在里面传一个数字，目的是匹配到获取到的第几个元素。我们都知道用$获取到的是一个jq对象，当我们在某些时候需要用到js原生对象进行操作的时候，这个方法就派上用场了。

<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").get(0);//<img src="test1.jpg"/>
这种方法等同于：$("img")[0];
经由这种方法得到的结果跟用get是一样的，因为jq对象，其实是一个数组形式，用这种数组取值的方法也是可以取到它所匹配到的值的。

6、index（）搜素匹配的元素，并返回相应元素的索引值，从0开始计数
如果不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
参数可以有好多：DOM对象，jq对象，选择器

$('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，不传递参数，返回这个元素在同辈中的索引位置。  

---

数据缓存

7、data（）在元素上存放或读取数据,返回jQuery对象。
removeData（）移除data存储的数据
（1）在一个div上存取数据

<div></div>
$("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
这个例子说明了：没存是取不到的，但是存了以后还是可以重新设置它的值的，然后也可以进行removeData操作。

（2）在一个div上存取名/值对数据
解释：名/值对
其实就是一种数据格式，模板是{name:”萍子”}；

<div></div>
$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first  //16;
$("div").data("test").last  //pizza!;

（3）在HTML5规范中div中读取预存的data-[key]值

<div data-test="good good study"></div>
$("div").data("test");//good good study

好了，以上部分是我挑选的一些jq核心的内容，哎呀，这大周末的，好嘞，过周末去了，拜拜~