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

时间 2020-06-01

原文原文链接

JQuery的基本概念

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

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文件。
css

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

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

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

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

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

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

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

　　5.JS对象和JQuery对象：json

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

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

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

　　　　　　同理，使用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.取到或者设置节点的宽高

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

3.位置

1 $("#div1").offset()：返回一个节点相对于浏览器左上角的偏移量，返回的是一个对象{top:20,left:20}。 2 注意：此方法测量时会将margen算入偏移量的距离。 3 
4 $("#div1").position()：返回一个节点相对于父容器的偏移量。
 5 注意： (1)使用此方法，要求父元素必须是定位元素。若是父元素不是定位元素，则依然是相对于浏览器左上角进行测量。 6  　　　(2)此方法，测量偏移时，将不考虑margen，而会将margen视为当前容器的一部分。 7 $(window).scrollTop(200)：设置或取到滚动节点的滚动条的位置。

JQuery函数

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

 1                 //each相似于foreach
 2                 $("#ul1 li").each(function(index,item){  3                     //true 相似continue false 相似于break
 4                     if(index%2 != 0){  5                         return true;  6                         
 7  }  8  console.log(index)  9  console.log($(item).text()) 10                     //在回调函数中，this指向当前调用函数的节点对象
11                     //this是一个JS对象，若是要用JQ对象，须要使用$(this)
12                     $(this).text($(this).text()+"12314"); 13                 });

(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对象