前言   ：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文件，就是我们刚刚下载好的文件， 代码演示：

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…”) 获取多个选择器选中的所有元素

代码演示：

class为spanone的span元素

class为mini的span元素

2. 层级选择器

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

代码演示：

span

3. 属性选择器

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

代码演示：

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）元素，固定写法

代码演示：

5. 表单过滤选择器

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

代码演示：

美容

IT

金融

管理

男

女

程序员

中级程序员

高级程序员

系统分析师

本科

博士

硕士

大专

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属性代码的

代码演示：

有一种奇迹叫坚持

自信源于努力

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():将对象的后代元素全部清空，但是保留当前对象以及其属性节点

代码演示：

• 北京
• 天津
• 重庆

• 反恐
• 星际

• 北京
• 天津
• 重庆

Hello

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：在动画完成时执行的函数，每个元素执行一次。 代码演示

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 代码演示

文章链接

 您阅读本篇文章共花了：