开启jquery之旅

什么是jquery呢？在笔者理解看来，jquery就是利用封装好的js文件，用更少的代码实现复杂的功能，其本质上就是另一种形式的原生javascript.

一、在使用jquery之前，我们需要注意以下几点：

1、注意：通过JQ获取到的元素是JQ对象，通过元素的document.getXXX获取到的元素是原生对象。

2、 ！！！原生对象不能调用JQ的方法和属性。

3、！！！JQ的对象不能调用原生的方法和属性

例如： $(".content").innerHTML = "123"；（ 这种写法是无效的）。

二、jquery对象如何转原生对象

1、JQ对象[0]

例如：$(".content")[0].innerHTML = "显示";

2、JQ对象.get(0)

例如：$(".content").get(0).innerHTML = "显示2";

三、获取元素的多种方法

1、 $("") 里面放字符串-选择器。

$(".item");或者$("input[type=radio]");或者$("div:not(.item)");

$("p:first");//first是所有标签的第一个；或者：$("p:nth-child(1)");等等，由于选择器很多，这里就不由于举例了，反正所有的选择器这里都适用。

2、根据索引找元素，索引从0开始。

odd奇数索引：$("p:odd").css("color", "red");

even偶数索引：$("p:even").css("color", "red");

eq(2) 索引值为2：$("p:eq(2)").css("color", "red");

四、创建、添加、包裹、删除元素

1、创建

$("<p>插个P标签</p>")//括号里的字符串直接是标签。

2.添加

 p.append(span) 给p插入子级span

p.appendTo(body) 把p插入body里面

prepend 和 prependTo用法和append一样，不同点在于prepend是在最前面插入。

.after()： content后面有一个item2

$(".content").after($("item2"));

 insertAfter 把item2插入到content之后

$(".item2").insertAfter(".content");

3.包裹与去掉包裹的父级

①例如：给每个p标签用一个div包裹起来

$("p").wrap("<div></div>");//wrap里面的参数可以使标签，也可以是函数。

当参数是函数的时候：jquery会把函数的返回值作为包裹p的父级来使用，

例如：

②wrapAll 给所有的p加一个共同的父级，父级在第一个p的位置:

    $("p").wrapAll("<div></div>");

③给p标签的内容加个B标签：

$("p").wrapInner("<b></b>");

④去掉包裹的父级:

$(".content").unwrap();

4、删除元素

①remove删除元素的时候同时删除事件和数据

②detach删除元素的时候会保留事件和数据

$("p:nth-child(3):last").css("color", "yellow").click(function(){

console.log("123");

}).detach().appendTo(document.body);

$("p:nth-child(3):last").css("color", "yellow").click(function(){

console.log("123");

}).remove().appendTo(document.body);

五、修改或者获取css样式：

2、jquery属性：

注意：attr一般用于获取或者设置自定义属性；

           prop一般用于获取系统自带属性。

           当我们在获取src的时候，prop是绝对路径。

           获取系统自带的属性，可以适用prop，用attr可能获取不到。

                       $(":checkbox").prop("checked");

                       $(":checkbox").attr("checked",true);

设置属性：

---

六、jquery事件

附加：移交$的使用权。正常情况下$就代表jQuery，如果和其他变量名有冲突，JQ可以把$的使用权移交出去，调用该方法之后，$就不在代表jQuery了。例如：

                  用变量接收返回值，以后就可以用$$来代表JQ----

                                    var $$ = $.noConflict();

1、ready事件：document.ready和window.onload类似，都是文档加载完毕之后执行。不同点在于document.ready可以绑定多个事件。

例如：

①$(document).ready(function(){

console.log("文档加载完毕");

})

②$(document).ready(function(){

console.log("文档加载完毕2");

})

③// 简化版写法，最常用的写法

$(function(){

console.log("文档加载完毕3");

})

上述①②③都能正常执行，不存在后者覆盖前者的情况。

2、事件绑定：

一般情况下我们这样写：

$("div p:first-child:first").click(function(){

                       相关语句......

 });

比较正式的格式：

     // on,绑定事件，四个参数

        div.on(type,selector,obj,fn)

       // type:字符串类型，放的是事件类型，如：click

       // selector:字符串类型，是选择器，代表过滤，只有这个选择器内的元素才会触发事件.

       // obj:对象类型，给事件传的参数

       // fn: 函数，事件触发之后执行的函数

       // 这里指定只有在点击span标签的时候才会触发点击事件

      $("div p:first-child:first").on("click","span",{name:"月",age:18},function(ev){

                       console.log(ev.data);//打印的是{name:"明月",age:18}，这里有参数，如果没有obj就不能使用参数

     })

3、移除事件：off();

// div.off();移除所有事件

// div.off(“click”);移除所有点击事件

// div.off(“click”,fn);移除函数为fn的点击事件

//用off()绑定一次性的事件，意味着只能点击一次：

例如：

备注：在jq事件中，所有形参的函数内部的this都是标签本身，而不是jq对象

 jq本身就是对标签的操作

 var wrap = $("#wrap");

wrap.click(function(){

// this,这里打印的是id为wrap的这个标签本身，即标签对象

 console.log(this);

// 这里输出的就是jq对象

// console.log($(this));

七、遍历jquery数组、对象：

备注：for in ：遍历数组、对象,遍历对象的时候，可以得到对象的所有属性名，遍历数组得到的是下标。

例如：

 var arr = ["hello","how","are","you"];

 var obj = {name:"明月",age:18};

①for(index in arr){

console.log(index);

console.log(arr[index]);

}

②for(key in obj){

console.log(key);

console.log(obj[key]);

}

小练习：用jquery的each方法遍历对象，获取被点击的元素的下标。代码如下：