前端之jQuery

目录

jQuery介绍

JQuery优势

jQuery对象

jQuery基础语法

基本使用

JQ选择器 对比js

基本筛选器<了解>

jQuery选择器查找标签之后的结果与js有何区别?

表单筛选器>>> 专门针对form表单内的标签

筛选器方法

jQuery操作标签

文本值操作

属性操作

文档处理

事件操作

悬浮事件

值监听事件

阻止后续事件

事件冒泡

事件委托

动画效果

---

jQuery介绍

jQuery是一个轻量级的兼容多浏览器的javascript库.它使用户能够更方便的处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

JQuery优势

它是一款轻量级JS框架, 核心文件只要10+kb.

是一个丰富的DOM选择器,

可以将多个操作写入一行代码里,是代码更加简洁,

事件,样式,支持动画, 支持Ajax操作.

跨浏览器兼容,

插件扩展开发.

'''版本区别''' 
1.x:兼容IE678
2.x:不兼容IE678
3.x:不兼容IE678  学习直接使用最新版即可
 

使用JQuery必须要先导入, 其本质就是一个js文件.

jQuery必须先导入才可以使用(html页面上得写导入语句>>>:容易忘)
jQuery本身就是一个js文件 里面写了一些js代码而已

网络CDN服务, 是只要计算机能够联网就可以直接导入>>> bootcdn

下载链接：jQuery官网

中文文档：jQuery AP中文文档

'''导入方式'''
1.本地jQuery文件
    不会收到网络影响
2.CDN加速服务
    需要确保有互联网
    min.js  压缩之后的文件 容量更小  
  .js          没有压缩的文件 容量稍大
 

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。

相当于： document.getElementById("i1").innerHTML;

虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象

拿上面那个例子举例，jQuery对象和DOM对象的使用：

$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

jQuery基础语法

$(selector).action()

基本使用

将页面上的两个p标签文本内容一个变成红色 一个变成绿色
原生的js代码
  

  let p1Ele = document.getElementsByTagName('p')[0]
  let p2Ele = document.getElementsByTagName('p')[1]
  p1Ele.style.color = 'red'
  p2Ele.style.color = 'green'

 jQuery代码

$('#d1').css('color','red').next().css('color','green')

JQ选择器 对比js

选择器	JQuery	CSS
id	$("#id')	#i1{ background -color:red; }
元素选择器		p {color :" red"}
标签	$("tagName")
class	$(".className")	.c1 { front_si