前言
  ：CSDN的小伙伴们大家好，今天跟大家分享一个简介的Javascript框架——JQuery。如果这篇文章对你有用，麻烦给我点个小赞以示鼓励吧
  ：博客主页：空山新雨后的java知识图书馆
  ☁️：今天天气阴沉，有点冷。
  :名言分享：君子在下位则多谤，在上位则多誉；小人在下位则多誉，在上位则多谤。——柳宗元
  上一篇文章：javaWeb三大组件
  欢迎大家一起学习，进步。加油

---

文章目录

一、JQuery相关概念二、JQuery的使用方法

2.1、下载JQuery2.2、JQuery简单使用2.3、JQuery和js对象的相互转换 三、JQuery的选择器和DOM操作

3.1、JQuery的基本操作3.2、JQuery的选择器分类3.3、JQuery的DOM操作

  3.3.1、内容操作  3.3.2、通用属性操作  3.3.3、 对class属性操作  3.3.4、CRUD操作: 四、JQuery的高级操作

4.1、JQuery动画操作4.2、JQuery的遍历方式4.3、事件的绑定4.4、插件：增强JQuery的功能

---

一、JQuery相关概念

  jQuery是一个快速、简洁的Javascript框架，是继Prototype之后又一个优秀的Javascript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装Javascript常用的功能代码，提供一种简便的Javascript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
  主要是为了简化我们的代码，其本质就是一些js文件，封装了js的原生代码

二、JQuery的使用方法 2.1、下载JQuery

在该网站下载对应的你需要的JQuery版本：https://jquery.com/download/
具体的方法可以参考菜鸟教程
各版本的区别：

目前jQuery有三个大版本：
1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，
   功能不再新增。因此一般项目来说，使用1.x版本就可以了，

2.x：不兼容ie678，很少有人使用，官方只做BUG维护，
   功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，

3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，
   一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。

jquery-xxx.js 与 jquery-xxx.min.js区别：

jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快一般使用这个版本

2.2、JQuery简单使用

首先导入JQuery的js文件，就是我们刚刚下载好的文件，
代码演示：

    
    
    



    div1=======



    div1=======

2.3、JQuery和js对象的相互转换

JQuery对象在操作时，更加方便。JQuery对象和js对象方法不通用的.

两者相互转换的方式

  * jq – > js : jq对象[索引] 或者 jq对象.get(索引)
  * js – > jq : $(js对象)

三、JQuery的选择器和DOM操作 3.1、JQuery的基本操作

  学习选择器之前我们先了解几个基本操作，
1、事件的绑定
  之前在js代码中是使用的 document.get…()方法来获取对象，再绑定事件
  JQuery的直接就用 $("选择器") 事件绑定
2、入口函数
  之前的入口函数：window.onload=function() {}
  JQuery：$(function() {});
window.onload 和 $(function) 区别

  * window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
  * $(function)可以定义多次的。

代码演示：

  //jQuery的入口函数的学习：$(function() {}); 以前的入口函数 ：window.οnlοad= function() {}
    $(function () {
        // jQuery的事件绑定学习,以前的绑定单击事件，对象.onclick = function() {}
        $("#bu").click(function() {
            alert("按钮的单击绑定测试")
        });
    });

3、样式控制
  JQuery的样式控制简单了解一个,就是使用css方法：JQuery自带的方法，可以控制样式
  具体的使用方法：

$(function() {
         //利用css的方式，以键值对的方式传值
         $("#div1").css("background-color","red")
         //写法二
         $("#div2").css("backgroundColor","blue")
     })

3.2、JQuery的选择器分类

1. 基本选择器

  1. 标签选择器（元素选择器） * 语法： $(“html标签名”) 获得所有匹配标签名称的元素
  2. id选择器 * 语法： $("#id的属性值") 获得与指定id属性值匹配的元素
  3. 类选择器 * 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
  4. 并集选择器： * 语法： $(“选择器1,选择器2…”) 获取多个选择器选中的所有元素

代码演示：

  
    
    
	
	
	
	 
			
		 
		 
		 
		 
		  
	   

	    	 id为one       
		 
		
		 

	    	   id为two   class是 mini 
		       
class是 mini
		 
		
		 

		 	    class是 one 
		       
class是 mini
			   
class是 mini
		 
		 

		 	  class是 one 
		       
class是 mini01
			   
class是 mini
		
		class为spanone的span元素
		class为mini的span元素
		
	

2. 层级选择器

  1. 后代选择器 * 语法： $("A B ") 选择A元素内部的所有B元素
  2. 子选择器 * 语法： $(“A > B”) 选择A元素内部的所有B子元素

代码演示：

    
    
    
    
    








    id为one


    id为two class是 mini
    
class是 mini


    class是 one
    
class是 mini
    
class是 mini


    class是 one
    
class是 mini01
    
class是 mini

    span
		

3. 属性选择器

  1. 属性名称选择器 * 语法： $(“A[属性名]”) 包含指定属性的选择器
  2. 属性选择器 * 语法： $(“A[属性名=‘值’]”) 包含指定属性等于指定值的选择器
  3. 复合属性选择器 * 语法： $(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器

代码演示：

    
    
    
    
    












    id为one div


    id为two class是 mini div title="test"
    
class是 mini


    class是 one
    
class是 mini
    
class是 mini


    class是 one title="test02"
    
class是 mini01
    
class是 mini


    这是隐藏的




    动画

4. 过滤选择器

  1. 首元素选择器 * 语法： :first 获得选择的元素中的第一个元素
  2. 尾元素选择器 * 语法： :last 获得选择的元素中的最后一个元素
  3. 非元素选择器 * 语法： :not(selector) 不包括指定内容的元素
  4. 偶数选择器 * 语法： :even 偶数，从 0 开始计数
  5. 奇数选择器 * 语法： :odd 奇数，从 0 开始计数
  6. 等于索引选择器 * 语法： :eq(index) 指定索引元素
  7. 大于索引选择器 * 语法： :gt(index) 大于指定索引元素
  8. 小于索引选择器 * 语法： :lt(index) 小于指定索引元素
  9. 标题选择器 * 语法： :header 获得标题（h1~h6）元素，固定写法

代码演示：

    
    
    
    
    













    id为one


    id为two class是 mini
    
class是 mini


    class是 one
    
class是 mini
    
class是 mini


    class是 one
    
class是 mini01
    
class是 mini

5. 表单过滤选择器

  1. 可用元素选择器 * 语法： :enabled 获得可用元素
  2. 不可用元素选择器 * 语法： :disabled 获得不可用元素
  3. 选中选择器 * 语法： :checked 获得单选/复选框选中的元素
  4. 选中选择器 * 语法： :selected 获得下拉框选中的元素

代码演示：

    
    
    
    
    




















美容
IT
金融
管理





男
女






    程序员
    中级程序员
    高级程序员
    系统分析师


    本科
    博士
    硕士
    大专





    id为two class是 mini div
    
class是 mini



    class是 one
    
class是 mini
    
class是 mini


    class是 one
    
class是 mini01
    
class是 mini

3.3、JQuery的DOM操作   3.3.1、内容操作

html(): 获取/设置元素的标签体内容 内容 --> 内容text(): 获取/设置元素的标签体纯文本内容 内容 --> 内容val()： 获取/设置元素的value属性值

代码演示：

    
    
    
    





标题标签

  3.3.2、通用属性操作

attr(): 获取/设置元素的属性removeAttr():删除属性prop():获取/设置元素的属性removeProp():删除属性

attr和prop区别？

  1. 如果操作的是元素的固有属性，则建议使用prop
  2. 如果操作的是元素自定义的属性，则建议使用attr

代码演示：

    
    
    


    

    



    
北京
    
天津

  3.3.3、 对class属性操作

addClass():添加class属性值removeClass():删除class属性值toggleClass():切换class属性
  * toggleClass(“one”):
    * 判断如果元素对象上存在class=“one”，则将属性值one删除掉。
     如果元素对象上不存在class=“one”，则添加css(): 操作css属性代码的

代码演示：

    
    
    
    
    










有一种奇迹叫坚持
自信源于努力


    id为one



    id为two class是 mini
    
class是 mini



    class是 one
    
class是 mini
    
class是 mini


    class是 one
    
class是 mini01
    
class是 mini

    span
		

  3.3.4、CRUD操作:

append():父元素将子元素追加到末尾 * 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾prepend():父元素将子元素追加到开头 * 对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头appendTo(): * 对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾prependTo()： * 对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头after():添加元素到元素后边 * 对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系before():添加元素到元素前边 * 对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系insertAfter() * 对象1.insertAfter(对象2)：将对象1添加到对象2后边。对象1和对象2是兄弟关系insertBefore() * 对象1.insertBefore(对象2)： 将对象1添加到对象2前边。对象1和对象2是兄弟关系remove():移除元素 * 对象.remove():将对象删除掉empty():清空元素的所有后代元素。 * 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点

代码演示：

    
    
    
    
    







    
北京
    
天津
    
重庆


    
反恐
    
星际

Hello1

    
    
    







    
北京
    
天津
    
重庆

Hello
 how are 
you?

四、JQuery的高级操作 4.1、JQuery动画操作

1、三种方式显示和隐藏元素

1、默认的显示和隐藏方式
  1. show([speed,[easing],[fn]])
  2. hide([speed,[easing],[fn]])
  3. toggle([speed],[easing],[fn])
2. 滑动显示和隐藏方式
  1. slideDown([speed],[easing],[fn])
  2. slideUp([speed,[easing],[fn]])
  3. slideToggle([speed],[easing],[fn])
3. 淡入淡出显示和隐藏方式
  1. fadeIn([speed],[easing],[fn])
  2. fadeOut([speed],[easing],[fn])
  3. fadeToggle([speed,[easing],[fn]])

参数解释：
  1. speed：动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如：1000)
  2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
    * swing：动画执行时效果是 先慢，中间快，最后又慢
    * linear：动画执行时速度是匀速的
  3. fn：在动画完成时执行的函数，每个元素执行一次。
代码演示

    
    
    
    







    div显示和隐藏

4.2、JQuery的遍历方式

jq对象.each(callback)
语法： jquery对象.each(function(index,element){});
* index:就是元素在集合中的索引
* element：就是集合中的每一个元素对象
* this：集合中的每一个元素对象回调函数返回值： * true:如果当前function返回为false，则结束循环(break)。 * false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
$.each(object, [callback]) object对象即可是jQuery对象又可以是js对象for…of: jquery 3.0 版本之后提供的方式 for(元素对象 of 容器对象)

代码演示：

    
    
    
    



    
北京
    
上海
    
天津
    
重庆

4.3、事件的绑定

1. jquery标准的绑定方式
  * jq对象.事件方法(回调函数)；
  * 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
  * 表单对象.submit();//让表单提交

代码演示：

2. on绑定事件/off解除绑定
  * jq对象.on(“事件名称”,回调函数)
  * jq对象.off(“事件名称”)
  * 如果off方法不传递任何参数，则将组件上的所有事件全部解绑
代码演示：

3. 事件切换：toggle
  * jq对象.toggle(fn1,fn2…)
  * 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2…

  * 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

代码演示：

    
    
    
    
    





    点击按钮变成绿色，再次点击红色

4.4、插件：增强JQuery的功能

1. $.fn.extend(object)
  * 增强通过Jquery获取的对象的功能 $("#id")
代码演示

	


    
    
    
    






足球
篮球
排球

2. $.extend(object)
   * 增强JQeury对象自身的功能 $/jQuery
代码演示