jQuery精要-优快云博客

jQuery是一个优秀的javascript库(类似Java里面的jar包)，兼容css3和各大浏览器，提供了dom、events、animate、ajax等简易的操作。并且jquery的插件非常丰富，大多数功能都有相应的插件解决方案。jquery的宗旨是 write less, do more。

概念：jQuery是JavaScript的一个工具库，将js的一些常用操作封装成了方法，从而简化js操作html。

jQuery最主要的作用是简化js操作HTML

知识点-JQ和JS对象转换【重点】

js对象：使用js方式【document.getElementXxx()】获取的对象，称为js对象，可以调用js的属性和方法

jQuery对象：使用jQuery方式【$("选择器")】获取的对象，称为jQuery对象，可以调用jQuery中的方法

问题：js对象不能调用jQuery中提供的方法，jQuery对象不能调用js中提供的属性和方法

解决：如果你想使用js对象调用jQuery方法，或者你想使用jQuery对象调用js属性方法，就需要进行js对象和jQuery对象的转换

jQuery本质上虽然也是js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象而不是js方式获得的DOM对象。使用js方式获取的对象是js的DOM对象，使用jQuery方式获取的对象是jQuery对象。两者的转换关系如下

js的DOM对象转换成jQuery对象，==语法：$(js对象)==

jQuery对象转换成js对象，==语法：jquery对象[索引]== 或 jquery对象.get(索引); 一般索引写0

事件在jq里面都封装成了方法. 去掉了JS里面.on 语法:

js：<button onclick="fun01()">改变内容</button><br>
jQuery：jq对象.事件方法名(function(){ //事件操作 });

eg:点击事件
btn.click(function(){...});

点击事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<button id="btn01">点击</button><br>
<script>
//基本事件使用语法：jq对象.事件方法( function(){事件处理} );
$("#btn01").click(function () {
alert("点我很开心！");
});
</script>
</body>
</html>

获得焦点和失去焦点

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
name: <input type="text" id="name"><br>

内容改变事件

鼠标相关的事件

键盘相关事件

<body>
<input type="text" name="name" id="name"><br>

<script>
/*需求5：键盘按下松开事件*/
$("#username").keydown(function () {
console.log("键盘按下");
});
$("#username").keyup(function () {
console.log("键盘松开");
});
</script>
</body>

JQ选择器【重点】

选择器名称	语法	解释
标签选择器（元素选择器）	$("html标签名")	获得所有匹配标签名称的元素
id选择器	$("#id的属性值")	获得与指定id属性值匹配的元素
类选择器	$(".class的属性值")	获得与指定的class属性值匹配的元素

层级选择器

选择器名称	语法	解释
后代选择器（子子孙孙）	$("A B ")	选择A元素内部的所有B元素
子选择器(儿子)	$("A > B")	选择A元素内部的所有B子元素
兄弟选择器(弟弟)	$("A + B")	获得A元素同级的下一个B元素
相邻选择器(所有弟弟)	$("A ~ B")	获得A元素同级的所有B元素

基本过滤选择器

选择器名称	语法	解释
首元素选择器	:first	获得选择的元素中的第一个元素
尾元素选择器	:last	获得选择的元素中的最后一个元素
非元素选择器	:not(selecter)	不包括指定内容的元素
偶数选择器	:even	偶数，从 0 开始计数
奇数选择器	:odd	奇数，从 0 开始计数
等于索引选择器	:eq(index)	指定索引元素
大于索引选择器	:gt(index)	大于指定索引元素
小于索引选择器	:lt(index)	小于指定索引元素

表单属性选择器

选择器名称	语法	解释
可用元素选择器	:enabled	获得可用元素
不可用元素选择器	:disabled	获得不可用元素
选中选择器	:checked	获得单选/复选框选中的元素
选中选择器	:selected	获得下拉框选中的元素

css(name)	获取CSS样式
css(name,value)	设置CSS样式
addClass(className)	添加CSS类样式
removeClass(className)	移除CSS类样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<style>
.color{
background-color: red;
}
</style>
</head>
<body>
<div id="divId" style="width: 200px;height: 200px;border: 1px solid black"></div>
<button id="btn01">获取样式</button>
<button id="btn02">设置样式</button>

$("#btn02").click(function () {
//$("#divId").css("width","500px");
$("#divId").css({"width":"500px","height":"500px"});
});

//需求：当鼠标移入div时设置背景颜色为红色，移出恢复原样
$("#divId").mouseover(function () {
$(this).addClass("color");
}).mouseout(function () {
$(this).removeClass("color");
});
</script>
</body>
</html>

API方法	解释
attr(name,[value])	获得/设置属性的值
prop(name,[value])	获得/设置属性的值(checked，selected)

使用JQ操作DOM

API方法	解释
val([value]) js中value	获得/设置输入框的值
text([value]) js中innerText	获得/设置元素的文本内容不会解析html标签
html([value]) js中innerHtml	获得/设置元素的标签体内容会解析html标签

jQuery创建,插入

API方法	解释
$("A")	创建A元素对象
append(element)	添加成最后一个子元素，两者之间是父子关系
prepend(element)	添加成第一个子元素，两者之间是父子关系
appendTo(element)	添加到父元素的内部最后面 B.appendTo(A) = A.append(B)
prependTo(element)	添加到父元素的内部最前面 B.prependTo(A) = A.prepend(B)
before(element)	添加到当前元素的前面，两者之间是兄弟关系
after(element)	添加到当前元素的后面，两者之间是兄弟关系