jQuery是轻量级的js库，兼容CSS3，还兼容各种浏览器。
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML/CSS DOM、事件、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
一 jQuery基本用法
jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器
1 引入jQuery库
<script type="text/javascript" src="/js/jquery-3.1.1.min.js" ></script>
或者
<script type="text/javascript" src="/js/jquery-3.1.1.js" ></script>jquery是原始文件，较大，但方便阅读
jquery.mini进行过特殊的处理,如变量的名称基本都写成一个字母,而且格式缩进都被删除了，文件小，但无法方便阅读
2 jQuery基本选择器
选择器基本语法：$(selector)
2.1 id选择器
$("#id") :根据id属性
等价于 document.getElementById("id")2.2 标签选择器
$("标签名"):根据标签名
等价于document.getElementsByTagName("标签名")2.3 类选择器
$(".class值") :根据class属性
等价于 document.getElementsByClassName("className")3 jQuery对象与JavaScript对象
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法。
虽然jQuery对象是包装DOM对象后产生的，但是jQuery对象无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法。
3.1 js对象转成jQuery对象
语法：$(js对象)---->jQuery对象
3.2 jQuery对象转成js对象
语法1：jQuery对象[下标，从0开始]
语法2：jQuery对象.get(下标，从0开始)
二 jQuery选择器
1 层次选择器
//获得所有form标签下的所有input标签元素
alert($("form input").length);//4
alert($("#f1 input").length);//3
//获得f3的直接的input子元素
alert($("#f3>input").length);//22 增强选择器
//获得第一个input子元素
//val() 获取选择的元素的值，相当于js中的value
alert($("#f1 input:first").val())
//获取最后一个子元素
alert($("#f1 input:last").val());
//根据指定索引获取子元素，子元素索引从0开始
alert($("#f1 input:eq(1)").val());
//gt 获取大于指定索引的元素，
//如果获得了多个元素，val()表示获取查找到的第一个元素得值
alert($("#f1 input:gt(0)").val());
//lt 获取小于指定索引的元素
alert($("#f1 input:lt(1)").val());
//odd索引为奇数的元素，索引从0开始
//css(),设置元素的css样式
$("table tr:odd").css("background-color", "aquamarine");
//even索引为偶数的元素
$("table tr:even").css("background-color", "bisque");
$("table tr:first").css("background-color", "blue")
.css("color", "yellow");
//不会取消原来的样式
//$("table tr:first").css("color", "yellow");
//获得所有的标题标签 （h1-h6）
$(":header").css("color", "red");3 属性选择器
//html()相当于innerHtml
alert($("div[id='d1']").html());
alert($("input[name='age']").val());
//获取有id属性的div元素
alert($("div[id]").length);
//设置html内容
$("div[id='d1']").html("<b>hahaha</b>");
$("#d1").text("hahaha");
$("input[name='age']").val(30);4 表单选择器
// :input 包括input、select、textarea
alert($(":input").length);//7
//input标签
alert($("input").length);//5
//针对type
alert($(":text").length);//1
alert($(":password").length);
alert($(":radio").length);
alert($(":checkbox").length);
alert($(":submit").length);5 表单对象属性选择器
//选中状态
//alert($(":checkbox:checked").length);
//alert($(":checkbox:checked").val());
//非选中状态
//alert($(":checkbox:NOT(:checked)").length);
//获得选中的option
alert($("option:selected").text());
alert($("option:selected").val());
//非选中状态 如果使用html(),只会显示第一个元素的内容
//如果使用text() 会显示所有的元素的内容
alert($("option:not(:selected)").html());
alert($("option:not(:selected)").text());三 jQuery常用方法
1 遍历
each()：是jQuery中专用于迭代数组、对象的方法，参数为一个处理函数，this表示当前需要迭代的js对象
//数组属于js对象
var arr = [1, 2, 3, 4, 5];
//jQery对象.each()遍历
$(arr).each(function(){
//this 表示遍历的每个元素，this是js对象
//alert(this);
});
//each中的函数的参数：index 表示索引，item表示遍历的元素
$(arr).each(function(index, item){
//alert(index);
//alert(item);
});
//遍历
//each的第一个参数可以是js对象或jQuery对象
$.each(arr, function(){
//alert(this);
});
$.each(arr, function(index, item){
//alert(index);
});
$.each($(arr), function(){
//alert(this);
});
var obj = [{name:"zhagnsan", age:10}, {name:"lisi", age:20}];
$(obj).each(function(){
//alert(this.name);
//alert(this.age);
});
var obj1 = {name:"zhangsan", age:10};
//遍历对象时，function的参数表示对象中元素的key值和value值
$.each(obj1, function(key, value) {
//alert(key);
//alert(value);
});
</script>2 dom操作
val()：获取value属性的值
val("XXX")：设置value属性值
text()：获取HTML元素的值
text("XXX")：设置HTML元素的值
html()：获取HTML元素的html格式的值
html("XXX")：设置HTML元素的html格式的值
$(html格式的字符串)：创建html元素对象，比如 $("
remove()：删除自已及其后代节点
append()：追加到父元素之后
prepend()：追加到父元素之前
<script>
//创建DOM对象
var $div = $("<div>hello</div>");
var $p = $("<p><font color='red'>world</font></p>")
//document.createElement("div");
//在最后添加子元素
$("body").append($div);
//在最前面添加子元素
$("body").prepend($p);
//删除元素
//$("table").remove();
//删除元素下的所有子元素
//$("body").empty();
</script>3 修改属性
attr(name)：获取属性值
attr(name,value)：给符合条件的标签添加属性
removeAttr()：删除已存在的属性
和attr()类似的方法还有prop(),具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()
<script>
//获取元素属性对象的值
//alert($("table").attr("width"));
//设置属性的值
$("table").attr("width", "300");
//$("table").removeAttr("border");
//prop()获取、设置属性的值
//alert($("table").prop("border"));
</script>4 样式相关方法
addClass()：增加已存在的样式
removeClass()：删除已存在的样式
hasClass()：判断标签是否有指定的样式，true表示有样式，false表示无样式
toggleClass()：如果标签有样式就删除，否则增加样式
<script>
//添加class属性值
$("#d6").addClass("divC");
$("#d5").removeClass("divC");
function btnClick(){
//如果原来有class属性，删除，如果没有，加上
$("div").toggleClass("divC");
}
</script>5 其他
offset()：获取对象的left和top坐标
offset({top:100,left:200})：将对象直接定位到指定的left和top坐标
width()：获取对象的宽
width(300)：设置对象的宽
height()：获取对象的高
height(500)：设置对象的高
<script>
//获得元素的宽度
//alert($("table").width());
//设置宽度
$("table").width(200);
//设置高度
$("table").height(80);
//获取浏览器宽度、高度
alert($(window).width());
// 设置元素的偏移量
$("div").offset({top:20, left:30})
</script>show()：显示对象
hide()：隐藏对象
fadeIn()：淡入显示对象
fadeOut()：淡出隐藏对象
slideUp()：向上滑动
slideDown()：向下滑动
slideToggle()：上下切换滑动
<script type="text/javascript">
// 隐藏 显示
//$("img").hide(2000);
//$("img").show(2000);
// 淡出淡入
$("img").fadeOut(2000);
$("img").fadeIn(2000);
</script>四 jQuery常用事件
ready：在浏览器加载web页面时触发，可以写多次ready事件，不会后者覆盖前者，依次从上向下执行，我们常用$(函数)简化
click：单击触发
dblclick：双击触发
change：当内容改变时触发
focus：焦点获取
blur：焦点失去
select：选中所有的文本值
mousemove：在指定区域中不断移动触发
mouseover：鼠标移入时触发
mouseout：鼠标移出时触发
hover：该方法有两个参数，第一个表示鼠标移动到元素上时触发事件的函数，第二个表示离开时触发事件的函数
submit：在提交表单时触发，true表示提交数据，false表示不提交
ready:
<script>
$(document).ready(function(){
alert("页面加载完成");
});
//简化的写法
$(function(){
alert("页面加载完成2");
});
</script>click:
$("#btn1").click(function(){
alert("点我干啥");
});dbclick:
var flag = 0;
//双击事件
$("div").dblclick(function(){
if(flag == 0){
$(this).css("background-color", "yellow");
flag = 1;
}else{
$(this).css("background-color", "white");
flag = 0;
}
});focus:
$(function(){
//让元素得到焦点
$("#in1").focus();
//获得焦点时触发的事件
$("#in2").focus(function(){
//$(this).select();
$(this).val("");
});
});mouseover:
//鼠标移动到元素上是触发事件
$("table tr").mouseover(function(){
$(this).css("background-color", "yellow");
});
//鼠标离开元素触发事件
$("table tr").mouseout(function(){
$(this).css("background-color", "white");
});hover:
$("table tr").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "white");
})submit:
<script>
//表单的提交事件
//如果返回false，不会向后台提交数据
$("form").submit(function(){
var v = $(":text").val();
//去除字符串两端的空白字符
v = $.trim(v);
if(v.length == 0){
$("#s1").text("必须输入姓名");
return false;
}
});
</script>附录
毒鸡汤
1、保持早睡，至少能修复30%的颜值bug。
2、猛看片，不挑国家。 不管是中国的，日本的还是美国的，各个国家的奥斯卡、纪录片、TED、科普片都可以去看。补充自己的知识盲区，聊天时还能有更多话题。
3、不刷朋友圈、某音。 每天比同龄人，至少多出1小时时间，用来看书、护肤、健身。
4、吃饭时，不看任何电子屏幕（手机、电视、电脑）。 很简单，追剧不差这点时间，反而一起吃饭的人很重要，多聊会天，说不定就发现了一个好项目。其次，还能防止颈椎病。
5、说话柔软，内心坚硬，做事果断。 做到这三点的人，人生会像开挂一样，工作顺利，爱情美满。
6、嘴巴闭合时，舌尖要轻抵在上颚，脸型才会更好看，呼吸也会更顺畅哦。
7、一不开心就喜欢收拾东西，等到房间被收拾得焕然一新，心情就开始变美丽。
8、多向大佬学习。 结识良师益友，是成长进步的最快方式。
9、提高睡眠质量，才能高效休息，提高做事效率！黛西提高睡眠质量的小技巧： ①睡前不进食不喝水；②睡前三件套：泡脚、冥想、听书；③果睡。
10、人生80%的时间，往往都要用来工作，解决问题，剩下的20%时间，一定要做一些能减压的事。 比如，假期去小众景点旅行，感受异地人文风情和自然风光，既为生活增添乐趣，还能让工作更有动力。
11、永远保持对新知识、新技能的汲取。 不论是生活还是工作上的技能，每天花30分钟专注去学习，会让你避免原地踏步的同时，有机会抓住更多机遇和意外惊喜。
12、定期运动。 慢跑、俯卧撑、卷腹、瑜伽等等都可以。坚持下来，你会发现，以后遇到什么困境和挑战，都难不倒你！
13、灵活运用「番茄工作法」。 工作学习25min，用5min来休息。人的注意力是极易分散的，无法长时间专注。将时间分块的好处是，可以保证每个时间段内，注意力是最集中的。
14、拜访亲朋好友，带点水果、酒水过去，对方口里说不用不用，其实心里乐着呢！
15、早起时，不要老想着起床的痛苦，要想想一些让人幸福的事，刺激一下你的大脑皮层，提高大脑兴奋度。 比如，可以吃一顿美味的早餐，可以看到暗恋的同学/同事。
16、刷牙洗脸时，放点BGM，不仅能放松心情，还能变身电影主角，放点新闻、财经等资讯，不仅能get到更多有用信息，还能唤醒大脑，调整好状态。
17、再忙也要吃早餐，给自己充充电。 有段时间工作忙，经常不吃早餐，结果皮肤超干，整个人沧桑了三岁！而且，还会因为饿肚子，拉低至少10%的工作效率！
18、做事要有「提前思维」。 比如，睡前想一想明天要做的事，把要带出门的东西准备好（文件、证件、钥匙、纸巾等等）。这样，第二天就不会慌慌张张，忘东忘西啦。
19、千万别躺着接工作电话！ 躺着接电话声音会不一样，会让你整个人都显得很懒。 每次我躺着接我妈电话，她在电话里头都能准确判断出来：你是不是还在睡觉？
20、出门前，无论多急，都花5秒照下镜子。 不光可以检查一下发型、穿搭，还可以对镜子里的自己笑一笑，给自己打打气！没有搬不完的砖，只有不努力的打工人，加油，打工人！
21、日常分类记账，并坚持理财。比如伙食、交通、服饰、生活用品等等，让自己知道赚的钱大头都花哪了，避免浪费。 接着学会理 财，这是提高经济力的最核心关键。操作得当，会使你的收入实现指数级增长。
22、在小hong书上学简单耐看的懒人餐，不仅造福自己，还能造福身边人。或许，还能凭借精湛厨艺，俘获你的心动男神/女神哦。
23、发消息，少发语音，能发文字就发文字。（异地恋情侣除外）
24、不会在朋友圈立各种flag，只会在成功后分享喜悦。 立各种flag，别人只会在心里想：咦~又在吹牛皮；直接晒出成绩单，别人才会疯狂给你摁赞。
25、生活遇到难题，先花5分钟时间嚼一块口香糖，再去思考怎么处理。
26、学会自己消化糟糕的情绪。 再痛苦，也不会随便找人倾诉。你哭得再大声，别人只会觉得你很吵。你的伤疤再深，别人只会觉得很难看。
27、需要专注做事时，比如写文、写报告，可以做这三件事： ①把手机有多远放多远 ②用发夹把头发挽起，深呼吸一口气 ③心里默念：3、2、1，变身！
28、享受独处的时间。 不必通过合群证明自己，别人参加各种局的时间，可以用来沉淀自己，认真生活。比如，散步、听歌、读书，都挺好。
29、要想治好拖延症，凡事先做「10min」。 万事开头难，当你开始做了10min，你会发现继续做下去也没有那么难。
30、坚持写作，坚持用备忘录记录灵感。写作不仅可以用输出倒逼输入，还能通过写作变现。
31、读书，各种类型都去读。 哲学类、社科类、历史类 、文学类 、自然科学类等等。读书，是一辈子都值得去做的事，持续大量地阅读能带给你的，不止是浮于纸面的知识，更重要的是对你思维认知的隐性提升。
32、每天花15min，复盘一下当日。 问问自己，今天收获了什么？哪里做的不好？做得不好的原因是什么？以后怎样避免或改进？坚持一个月，你会发现你能把事都做得更好了。
33、及时清洗穿过的内衣裤，并且不要和其他衣服混着洗，这样才能防止细菌交叉感染，身体才会干干净净，无异味。
34、不追求100%达标，75%就够了。 人不是电脑程序，不是下达指令就能100%执行。不用对自己要求太高，逼急了只会自暴自弃。
35、适当「直爽」一些。 别人请教专业问题，会耐心为他解答，一来可以帮助别人，二来可以巩固自身专业知识。如果对方送小礼物，会大方收下并表达惊喜。因为，有来有往，才能让关系更亲密、更融洽。
36、拒绝「低价值」社交。 几百年没联系的同学，突然让你参加他的婚礼；关系很一般的同事，邀你下载拼多多帮他砍一刀。不想去，不想下载，就找个理由拒绝。不要想着拒绝别人不好，平时也没见他们这么关心你。
37、不会一股脑地帮别人。因为有些忙，有些人，真的不值得帮！
38、为自己保留1㎡的「秘密空间」。 没有神秘感的人，就像一部没有悬念的书，看了几眼就让人不想再读。
39、去外地时，带一个轻便的相机扫街。 拍下街道上摇摇晃晃的树影，拍下小巷子里下棋的老爷爷，拍下路边的煎饼果子摊。 不是为了发朋友圈，而是为了感受更多烟火气息，给日常写作带来更多奇妙的灵感。
40、听别人发表不同观点时，不随意中断他人的讲话，而是耐心聆听，认真消化。这样不仅显得你有礼貌、有教养，还能让你从中学会用不同的视角看问题。
41、日常多说谢谢，尤其是别人帮你拿外卖、快递的时候，你不经意的一句「谢谢」，对小哥就是莫大的鼓舞。