JQuery（一）---- JQ的选择器，属性，节点，样式，函数等操作详解

JQuery的基本概念

JQuery是一个javascript库，JQuery凭借着简洁的语法和跨平台的兼容性，极大的简化了js操作DOM、处理事件、执行动画等操作。JQuery强调的理念是：'write less, do more'(写的少，做的多)。

1.JQuery的版本

版本	兼容范围
1.x版本	能够兼容IE678浏览器
2.x版本	不兼容IE678浏览器
3.x版本	不兼容IE678浏览器，更加的简洁

名称	大小	说明
jquery.js(开发版)	约229KB	完整无压缩版本，主要用于测试、学习和开发
jquery.min.js(生产版)	约31KB	经过压缩，主要用于产品和项目，基本无可阅读性

2.JQuery的使用

　　1.使用JQuery必须先导入jquery-x.x.x.js文件。

<script src="js/jquery-3.1.1.js"></script>

　　2.JQuery中的选择器
　　　　$("选择器名称").函数名();
　　　　例子：console.log($("#div1"));
　　　　注意：$是JQuery的缩写，也就是说，选择器可以使用JQuery(":input")

　　　　选择器：查帮助文档，这里就不再赘述了。

　　3.JQuery中的文档就绪函数： $(document).ready(function(){});

            //JS中的文档就绪函数
            window.onload= function(){

            }

            //JQuery的文档就绪函数
            $(document).ready(function(){
                console.log($("#div1"));
            });
            //简写模式
            $(function(){})

　　4.JQuery文档就绪函数与window.onload的区别

类别	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后(包括图片，视频)才能执行	网页中所有DOM结构绘制完毕后就执行，并不会等待图片、文件的加载
编写个数	只能写一个，不能同时写多个，如果同时写了多个，下面的会把上面的覆盖	能同时编写多个，两个入口函数互不影响
简化写法	无	$(function(){});

　　5.JS对象和JQuery对象：

　　　　①使用$取到的节点为JQuery对象，只能调用JQuery方法，不能调用原生JS方法。

　　　　　　正确的：$("#div1").click(function(){})

　　　　　　错误的：$("#div1").onclick = function(){}（使用JQuery对象调用原生JS）

　　　　　　同理，使用getElement系列函数取到的为原生JS对象，也不能调用JQuery函数。

【JQuery对象与JS对象的相互转换】
　　(1)JQuery转JS：

方法一(常用)：[index]
var $box = $("#box");       // JQuery获取到的对象
var box = $box[0];          // 转成JS对象
box.innerHTML = "哈哈哈";   // 使用JS的方法

方法二：get(index)
var $box = $('#box');       // JQuery获取到的对象
var box = $box.get(0);      // 转成JS对象
box.innerHTML = "哈哈哈";   // 使用JS对象的方法

　　(2)JS转JQuery：
　　　　　　JS对象转成JQuery对象的十分简单，只需要用$()把JS对象包裹起来就是一个JQuery对象。

var box = document.getElementById("#box");  // 获取的JS对象
$(box).click(function(){});      // 转成JQuery对象

　　6.解决JQuery多库冲突问题：
　　　　页面中如果同时引入多个JS框架，可能导致$冲突。
　　解决办法：
　　　　(1)使用jQuery.noConflict()：使用JQuery放弃在全局使用$。
　　　　(2)使用jQuery关键字代替$,或者使用一个自执行函数：

!functio($){
　　//在自执行函数中，可以使用$替代jQuery
　　//除自执行函数外的其他区域，禁止JQuery使用$
}(jQuery);

DOM操作

1.添加节点

名称	用法	描述
append()	$("#div1").append("<img src='../01-HTML基本标签/img/Female.gif' />");	在div的内部最后追加一个图片
appendTo()	$("<img src='../01-HTML基本标签/img/Female.gif' />").appendTo("#div1")	把一个图片追加到div1的内部最后
prepend()	$("#div1").prepend("<img src='../01-HTML基本标签/img/Female.gif_temp.bmp' />");	在div的内部最前边加入一张图片
prependTo()	$("<img src='../01-HTML基本标签/img/Female.gif_temp.bmp' />").prependTo("#div1");	把一个图片追加到div1的内部最前边
after()	$("#div1").after("<p>这是一个P标签</p>")	在div1的外部最后，插入节点
insertAfter()	$("<p>这是一个P标签</p>").insertAfter("#div1");	将一个节点插入div1的外部的最后
before()	$("#div1").before("<p>这是一个P标签</p>");	在div1外部的前边插入一个节点
insertBefore()	$("<p>这是一个P标签</p>").insertBefore("#div1");	将一个节点插入到div1的外部的最前面

2.包裹节点

名称	用法	描述
wrap()	$("div").wrap('<i></i>')	为每一个选中的节点都套一个父节点
wrapAll()	$("div").wrapAll('<i></i>')	将选中的所有节点包裹在同一个父节点中
unwrap()	$("#div1 p").unwrap()	删除选中节点的父节点
wrapInner()	$("#div1").wrapInner('<div></div>')	将选中的节点中的所有子元素包裹在一个新的父节点中（新的父节点依然是当前元素的子节点，而且是当前元素的唯一子节点）

3.替换节点

名称	用法	描述
replaceWith()	$("#div1 p").replaceWith("<span>1</span>")	将选中的节点重新替换成新的节点
replaceAll()	$("<span>1</span>").replaceAll("#div1 p");	用新的节点替换所有选中的节点

4.删除节点

名称	用法	描述
empty()	$("#div1").empty();	清空当前节点中的内容，但会保留当前节点标签
remove()	$("#div1").remove();	删除当前节点已经当前节点的子节点
detach()	$("#div1").detach()	删除当前节点已经当前节点的子节点，与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

remove()和detach()的区别：
　　使用remove()删除的节点，在恢复后，将不再保留节点所绑定的事件。
　　使用detach()删除的节点，在恢复后，可以保留节点之前所绑定的事件。

5.复制节点

　　clone()：拷贝复制节点，它也有深拷贝和浅拷贝。深拷贝和浅拷贝的区别就是，深拷贝会复制绑定的事件，而浅拷贝不会复制绑定的事件。

　　写法：clone(true)为深拷贝，默认不传或者传false就是浅拷贝。

JS中的cloneNode()和JQuery中的clone()的区别：

　　(1)cloneNode()如果不传入参数或者参数传入false，表示只克隆当前节点，不克隆子节点。传入true表示克隆当前节点以及子节点。

　　(2)clone()无论传入的是true还是false，都克隆当前节点以及子节点，传入true表示克隆节点的同时将保留节点的事件，否则表示只克隆节

6.查找节点

使用JQuery选择器，查找到需要的元素后，可以使用attr()方法来获取它的各种属性的值，text()方法来获取它的文本内容。

　　　　console.log($("#div1 p").attr("title"));//查询div1下面的p标签的title属性值。

　　　　console.log($("#div1 p").text())；//查询div1下面的p标签的文本内容

7.创建节点

　　创建元素节点很简单，直接使用 $(html)，html就是需要添加的元素。$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。

　　　　　　var li = $("<li title="城市">深圳</li>");

　　　　　　$("#div1").append(li);

属性和CSS类的操作

1.attr操作

　　(1)attr()，可以用来获取属性也可以用来设置属性。当attr()参数为一个的时候，即属性名称，表示的是获取属性。当attr()里面的参数是两个的时候，即属性名称和对应的值，表示的是设置属性。如果想要设置多个属性，参数就是一个json对象（键值对的形式）。

                //获得属性
                $("#div1").attr("id");
                //添加属性
                $("#div1").attr("class","cls");
                //添加多个属性
                $("#div1").attr({
                    "class":"cls1",
                    "name":"name1",
                    "style":"color:blue"
                });

　　　　除了attr方法类似的还有：html()、text()、height()、width()、val()、css()等方法，不传参则是获取值，传参则是设置值。

　　(2)removeAttr()：删除节点属性。（删除多个属性用空格隔开）

　　　　　　$("#div1").remove("cls")

2.prop操作

　　(1)获取、设置属性时用prop()方法与attr()方法一样，当prop()参数为一个的时候，即属性名称，表示的是获取属性。当prop()里面的参数是两个的时候，即属性名称和对应的布尔值。

　　(2)在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr()方法，只能用prop()方法。

　　(3)removeProp()：删除节点属性

　　　　　　prop()和attr()的不同：在读取 属性名="属性值"的属性时，attr将返回属性值和undefinded；而prop返回true或false。也就是说attr()要取到的属性必须是在标签上已经写明的属性，否则无法取到。

3.CSS类的操作

　　addClass()：在原有class的基础上新增class名。

　　removeClass()：删除指定的class名称，其余未删除的class名依然保留。

　　toggleClass()：切换指定的class名称。如果类名存在则删除它，如果类名不存在则添加它。

　　hasClass()：用来判断是否包含一个class的名称。返回值为true或false。

CSS样式操作

1.通过css()设置属性

(1)通过css()的方法设置或者获取样式，无论样式属性是从外部导入的，还是直接写在HTML标签里面的，属于行级样式表。添加多个样式的时候，css()，里面的参数是一个对象。传入一个参数的时候是表示获得当前CSS样式的属性值。

(2)通过回调函数返回值修改CSS的样式

2.取到或者设置节点的宽高

 $("#div1").height();  // 获取 p 元素的高度值
 $(window).height();  // 获取页面可视区的高度
 $("#div1").width();  // 获取 p 元素的高度值
 $(window).width();  // 获取页面可视区的高度
 $("#div1").innerHeight();  //取到节点的高+padding，不包含border和margen
 $("#div1").innerWidth();   //取到节点的宽+padding，不包含border和margen
 $("#div1").outerHeight();       //取到节点的高+padding+border（不传参），不包含margen
 $("#div1").outerWidth(true);    //取到节点的宽+padding+border+margen（传参数：true）

3.位置

 $("#div1").offset()：返回一个节点相对于浏览器左上角的偏移量，返回的是一个对象{top:20,left:20}。
 注意：此方法测量时会将margen算入偏移量的距离。

 $("#div1").position()：返回一个节点相对于父容器的偏移量。
 注意： (1)使用此方法，要求父元素必须是定位元素。如果父元素不是定位元素，则依然是相对于浏览器左上角进行测量。
  　　　(2)此方法，测量偏移时，将不考虑margen，而会将margen视为当前容器的一部分。
 $(window).scrollTop(200)：设置或取到滚动节点的滚动条的位置。

JQuery函数

(1)each()：用于遍历JQuery中的对象数组，在回调函数中,可以使用return true相当于continue，return false相当于break；

                 //each类似于foreach
                 $("#ul1 li").each(function(index,item){
                     //true 类似continue    false  类似于break
                     if(index%2 != 0){
                         return true;

                     }
                     console.log(index)
                     console.log($(item).text())
                     //在回调函数中，this指向当前调用函数的节点对象
                     //this是一个JS对象，如果要用JQ对象，需要使用$(this)
                     $(this).text($(this).text()+"12314");
                 });

(2)$("#ul1 li").size()/$("#ul1 li").length：返回查询元素的个数

(3)get()：将JQuery对象转换为JS对象。传入index表示取出第几个，返回一个JS对象。如果不传入参数那么返回全对象的数组。

(4)$.each(arr/obj,function(index,item){})：对传入的数组或对象进行遍历，可以是JQuery对象数值，也可以是JS中的数组和对象。

(5)$.map(arr,function(index,item){return item}):数组映射，返回一个新数组.

(6)$.inArray()：检测一个值是否在数组中，返回下标。参数1：值，参数2：数组，参数3：查找的起始下标。（没找到为-1）

(7).toArray()：将选中的JQuery的DOM集合，恢复成数组，数组的每一个是JS对象。

(8).marge()：合并俩个数组。

(9)parseJSON：将一个JSON字符串转换成JSON对象。

(10)$.contains(父对象，字对象)：父对象和子对象必须是JS对象