前言：
完成课程设计的同时，顺便溜了一波JQ，，，虽然后面老师说根绝VUE以及AJ等趋势，Jq很快就会成为过去，但是基础性的学习永远都是基础，，，
一、JQuery学习
1.jQuery选择器：
选择器 | 功能描述 | 示例 |
element | 根据指定元素名匹配所有元素 | $("div")选取所有的<div>元素 |
.class | 根据指定类名匹配所有元素 | $(".test")选取所有class为test的元素 |
#id | 根据指定id 匹配一个元素 | $("#test")选取id为test的元素 |
2.对元素内容进行操作
html() | 获取第1个匹配元素的HTML内容 |
html(content) | 设置第1个匹配元素的HTML内容 |
text() | 获取所有元素包含的文本内容组合起来的文本 |
text(content) | 设置所有匹配元素的文本内容 |
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery测试</title>
<script src="./js/jquery.min.js"></script>
</head>
<body>
<div class="top">页面头部</div>
<div class="main">
<font color="red"><b>总有纳闷一群人</b></font>
页面中部奥术大师
</div>
<div class="footer">页面尾部</div>
<script>
$(function(){
//通过修改CSS使文本居中
$(".top").css("text-align","center");
//通过修改CSS使文本加粗
$(".main").css("font-weight","bold");
//通过修改CSS添加背景色
$(".footer").css("background","#ccc");
});
var mymain=$(".main");
var html=mymain.html();
var text=mymain.text();
console.log(html);
console.log(text);
</script>
</body>
</html>输出结果：
结合应用：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery测试</title>
<script src="./js/jquery.min.js"></script>
</head>
<body>
<button id="button">点击id测试按钮1</button>
<button id="button1">点击id测试按钮2</button>
<button class="button">点击类测试按钮1</button>
<button class="button">点击类测试按钮2</button>
<script>
$('#button').click(function(){
alert('按钮标题为：'+$(this).text());
});
$('#button1').click(function(){
alert('按钮标题为：'+$(this).text());
});
$('.button').click(function(){
alert('按钮标题为：'+$(this).text());
});
</script>
</body>
</html>
页面加载函数：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery测试</title>
<script src="./js/jquery.min.js"></script>
<script>
//位置1 测试
var test1 = $(".test").text();
console.log("位置1：" + test1);
//位置2 测试
$(function(){
var test2 = $(".test").text();
console.log("位置2：" + test2);
});
</script>
</head>
<body>
<div class="test">页面内容</div>
<script>
//位置3 测试
var test3 = $(".test").text();
console.log("位置3：" + test3);
</script>
</body>
</html>
//结果分析，因为位置2使用了jQuery简化的页面加载函数，因此在1、3位置执行完后才页面加载完毕输出位置2
实战：
个性相册：
目标：
- 编写图片上传的HTML页面，实现图片展示相框类型 的选择
- 使用jQuery对DOM文档进行操作，完成图片的创建与展示
- 利用jQuery完成“上移”“下移”“删除”按钮的创建与功能实现
基础知识：
1.元素的遍历：
jQuery提供了each()方法，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test_5</title>
</head>
<body>
<ul>
<li>PHP</li>
<li>IOS</li>
<li>java</li>
<li>UI</li>
</ul>
<script type="text/javascript">
/*使用each（）方法可以遍历选择器匹配的所有li
该方法的参数是一个回调函数，每个匹配元素都会
执行这个函数，在此例子中，
index表示索引位置从0开始，element表示当前的元素
有趣的是：在回调函内部可以直接使用$(this)表示当前元素
*/
$("li").each(function(index,element){
console.log("第"+(index+1)+"个："+$(element).text());
});
</script>
</body>
</html>2.元素查找：
查找：
语法 | 说明 |
find(expr) | 搜索所有与指定表达式匹配的元素 |
parents([expr]) | 取得一个包含所有匹配元素的祖先元素的元素集合（不包含根元素） |
parent([expr]) | 取得一个包含所有匹配元素的唯一父元素的元素集合 |
siblings([expr]) | 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈的元素集合 |
next([expr]) | 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合 |
prev([expr]) | 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合 |
过滤
eq(index) | 获取第N个元素 |
hasClass(class) | 检查当前的元素是否含有某个特定的类，如果有，则返回true |
is(expr) | 用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式，就返回true |
has(expr) | 保留包含特定后代的元素，去掉那些不含有指定后代的元素 |
下面以find()和eq（）进行详细讲解
JS部分：
//获取div下的所有Ul
$uls=$("div").find("ul");
//为下标为0的ul设置背景色,为整个ul上色，
$uls.eq(0).css('background-color','#ccc');
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test_5</title>
<script src="./js/jquery.min.js"></script>
</head>
<body>
<div>
<ul>
<li>PHP</li>
<li>IOS</li>
<li>java</li>
<li>UI</li>
</ul>
<ul class="special">
<li>Java_Base</li>
<li>Java_Senior</li>
</ul>
</div>
<script type="text/javascript">
/*使用each（）方法可以遍历选择器匹配的所有li
该方法的参数是一个回调函数，每个匹配元素都会
执行这个函数，在此例子中，
index表示索引位置从0开始，element表示当前的元素
有趣的是：在回调函内部可以直接使用$(this)表示当前元素
*/
$("li").each(function(index,element){
console.log("第"+(index+1)+"个："+$(element).text());
});
//获取div下的所有Ul
$uls=$("div").find("ul");
//为下标为0的ul设置背景色,为整个ul上色，
$uls.eq(0).css('background-color','#ccc');
</script>
</body>
</html>3.元素属性操作
（1）基本属性操作
语法 | 说明 |
attr(name) | 取得第1个匹配元素的属性值，否则返回undefined |
attr(properties) | 将一个键值对形式的JSON对象设置为所有匹配元素的属性 |
attr(name,value) | 为所有匹配的元素设置一个属性值 |
attr(name.function) | 为所有匹配的元素设置一个计算的属性值 |
removeAttr(name) | 从每一个匹配的元素中删除一个属性 |
由于attr()只能获取第一个匹配元素的属性值通常与each()一起用
（2）class元素操作
语法 | 作用 | 说明 |
addClass(class) | 追加样式 | 为每个匹配的元素追加指定的类名 |
removeClass(class) | 移除样式 | 从所有匹配的元素中删除全部或者指定的类 |
toggleClass(class) | 切换样式 | 判断指定类是否存在，存在则删除，不存在则添加 |
若要匹配到的元素添加和移除多个样式类名，则样式类名之间可使用空格进行分割
（3）value属性操作
语法 | 说明 |
val(0 | 读取指定表单元素的值 |
val(value) | 向指定的表单元素写入值 |
MOST importantly:val()方法还可以操作表单袁术的属性和选中的情况，支持表单中的多选元素。当要获取的元素是<select>元素时，返回结果是一个包含所选值的数组。
4.元素样式操作
语法 | 说明 |
css(name) | 获取第一个匹配元素的样式 |
css(properties) | 将一个键值对形式的JSON对象设置为所有匹配元素的样式 |
css(name.value) | 为所有匹配的元素设置样式 |
width() | 获取第一个匹配元素的当前宽度值（返回数值类型结果） |
width(value) | 为所有匹配的元素设置宽度样式 |
height() | 获取第一个匹配元素的当前高度值（返回数值型结果） |
height(value) | 为所有匹配的元素设置高度样式（可以是字符串或数字） |
5.文档节点操作
（1）节点追加
父子节点：
语法 | 说明 |
append(content) | 向每个匹配的元素内部追加内容 |
prepend(content) | 向每个匹配的元素内部前置内容 |
appendTo(content) | 把所有匹配的元素追加到指定元素集合中 |
prependTo(content) | 把所有匹配的元素前置到指定元素集合中 |
兄弟节点：
语法 | 说明 |
after(content) | 在每个匹配的元素之后插入内容 |
before(content) | 在每个匹配的元素之前插入内容 |
insertAfter(content) | 把所有匹配的元素插入到指定元素集合的后面 |
insertBefore(content) | 把所有匹配的元素插入到指定元素集合的前面 |
（2）节点替换
语法 | 说明 |
replaceWith(content) | 将所有匹配的元素替换成指定的HTML/DOM元素 |
replaceAll(selector) | 用匹配的元素替换掉所有selector匹配到的元素 |
（3）节点删除
语法 | 说明 |
empty（） | 删除匹配的元素结合中所有子节点 |
remove([expr]) | 删除所有匹配的元素及子节点 |
detach([expr]) | 删除所有匹配的元素及子节点（保留所有绑定的时间、附加的数据等） |
（4）节点复制
语法 | 说明 |
clone([false]) | 赋值匹配的元素并且选中这些赋值的副本，默认参数为false |
clone(true) | 参数设置为true时，复制元素的所有事件处理 |
二、控制浏览器缩放
考虑到前端很多界面会因为突然强制放大和缩小，参考了CSDN现在这种提示，为了给用户更好的体验感可以提价控制浏览器缩放同时也可以做出相应的提示！！
//控制缩放的JS，亲测实用；
window.addEventListener('mousewheel',function(e){
if(e.ctrlKey && window.devicePixelRatio ===1){
e.preventDefault();
alert('<span>警告</span>', '请勿缩放浏览器！')
}
},false);
window.onresize = function(){
zoomWarn();
};
zoomWarn();
function zoomWarn(){
if(window.devicePixelRatio !==1){
alert('<span>警告</span>', '<span>请将浏览器缩放还原为100%！</span>')
}
}
