jQuery

#jQuery

什么是jQuery

• 什么是jQuery是一个快速，简洁的JavaScript框架(js库，JavaScript代码库)。jQuery设计的宗旨的"write Less,Do More",即倡导写更少的代码，做更多的是。它封装JavaScript常用的功能代码，提供简洁的JavaScript设计模式，事件处理，动画设计和Ajax交互。

jQuery特点

• 快速获取文档元素(并非原始的dom元素)
• 提供了更多丰富美观的动态效果
• 创建AJAX无刷新网页
• 提供对JavaScript语言增强
• 增强的事件处理
• 更改网页内容

jQuery库包含以下功能:

• HTML元素获取
• HTML元素的操作
• CSS操作
• HTML事件函数
• JavaScript特效和动画
• HTML DOM遍历和修改
• AJAX

jQuery安装

网页中添加jQuery
可以通过多种方法在网页中添加jQuery

• 从jQuery官网(jQuery.com)下载jQuery库。
• 从CDN中载入jQuery。
• 加速器:<script src="https://code.jquery.com/jquery-3.4.1.min.js"integrity=“sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=” crossorigin=“anonymous”>

jQuery.js和jQuery.min.js的区别

• 两个文件完全一样
• jQuery.js文件中的代码没有进行处理的源代码，使用于研究
• jQuery.min.js文件里的代码进行特殊处理(压缩文件，合并文件)，文件容量更小，使用于生成环境，加载速度更快。
• jQuery具有独特的链式语法和短小清晰的多功能接口。

jQuery语法

通过jQuery，选取(查询，query)HTML元素，并对它进行操作(actions)
基础语法：$(selector).actions()

• $(美元符号)定义jQuery
• 选择器(selector)"查询"和"查找"HTML元素
• jQuery的actions()执行对元素的操作

jQuery选择器

• jQuery选择器允许对HTML元素组或单个元素进行操作
• jQuery选择器基于元素的id,类,类型,属性,属性值等(几乎支持所有的css选择器)
• jQuery中所有的 选择器都是以美元符开头 $()==jQuery()
• 注意 jQuery获取的元素是经过处理之后的HTML元素，并非原始的HTML元素，因此在使用过程中，获取的 jQuery对象只能使用jQuery的操作方法，不能混用原生js方法。

jQuery选择器

语法	描述
$(“”)	选取所有元素
$(this)	选取当前HTML元素
$(‘p.box’)	选取class为box的 p 元素
$(‘p:first’)	选取第一个 p 元素
$(‘ul li:first’)	选取第一个 ul 元素的第一个 li 元素
$(‘ul li:first-child’)	选取每一个 ul 元素的第一个 li 元素
$(‘[href]’)	选取带有href属性的元素
$(‘a[target=’_blank’]')	选取所有traget属性值等于"_blank"的 a 元素
$(‘a[target!=’_blank’]')	选取所有traget属性值不等于"_blank"的 a 元素
$(‘:button’)	选取所有type="button"的 input 元素和 button 元素
$(‘tr:even’)	选取偶数位置的 tr 元素
$(‘tr:odd’)	选取奇数位置的 tr 元素

jQuery常见的DOM事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mousedown	keyup	input	scoll
mouseup	-	focus	unload
mouseenter	-	blur	-
mouseleave	-	-	-
mouseout	-	-	-
mouseover	-	-	-
mousemove	-	-	-
hover	-	-	-

jQuery事件方法 语法

• click()
• dblclick()
• mouseenete()
• mouseleave()
• mousedown()
• mouseup()
• hover()
• focus()
• blur()

jQuery bind()

• 向元素添加事件处理程序
• bind()方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。

jQuery on()

• jQuery 1.7版本以后，on()方法是向被选元素添加事件处理程序的首选方法。
• 注意：使用on()方法添加的事件处理程序使用于当前以及未来的 元素 (比如有脚本创建的 元素)

jQuery DOM 操作

• 获取和设置内容
  text() 设置或返回元素的文本内容
  获取：$(selector).text()设置：$(selector).text(‘要给元素设置的文本内容’)
  html() 设置或返回所选元素的所有内容
  获取：$(selector).html()设置：$(selector).html(‘百度123123’)
  val() 设置或返回表单字段的值
  获取：$(selector).val()设置：$(selector).val(‘百度123123’)
  attr() 设置或返回元素的属性值
  获取：$(selector).val{(}^{\prime }属性名{称}^{\prime })设置：$(selector).val(‘属性名称’,‘属性值’)
• 添加元素
  append()-在被选元素内部的结尾插入内容(允许包含HTML内容)

  $('.showBox'