1. 什么是jquery
是js 封装的一个框架，用来少操作，多做事。
2. jquery 怎么使用。
1. 需要下载jquery 的支持框架包。
2. 在项目目录下引入 框架包
3. 调用jquery中的方法使用。
3. 自己封装一套js 框架，理解Jquery 是什么！！
相当于js中的抽取出来的一些方法。
提取到外部的js文件中。
当我们想要使用的时候，script标签中用src属性引入这些js文件。
然后就可以是 script标签的js代码中，使用这些外部js文件包含的方法了。
4. jq 框架的版本：
（1）Jquery版本介绍
1.1 相关版本
支持IE678，其他的高版本浏览器不支持。
2.1 相关版本
不支持IE678 ，其他的高版本浏览器，兼容较差
一些jquery方法，不能用。
3.1之后的版本
不支持IE678, 对其他高本版浏览器支持较好。
（2）jQ发布版本 和 开发版本的区别：
开发学习版：jquery-x.x.x.js 用于学习，开发
可以查看源码，且内部的结构是格式化后的，
方便我们阅读源码，和查看注释
体积较大。 200- 300K左右。
项目发布版：jquery-x.x.x.min.js 用于项目发布集成代码
查看源码，没有格式，里面没有结构，没有注释
全部代码紧凑在一起，不利于查看源码。
体积较小，100k以内
5. jQuery能做什么
访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合
jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率
6.jQuery的优势 （市场使用占有率70%以上）
体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持
7. 窗体加载事件，和页面加载完成方法。
（1）window 对象的窗体加载事件。onload
-1- 加载时机是：
当窗体中的dom对象加载到内存的时候，就调用该方法。
-2- 调用次数：
只能调用一次。
-3- 写法用法：
window.οnlοad= function () {
alert("2222")
}
（2）Jquery 的ready方法：
-1- 加载时机是：
当页面中的内容被显示出来的时候触发的方法。
-2- 调用次数：
可以调用多次。
-3- 写法用法：
$(document).ready(function (){
alert("11111111111");
});
-4- 简写方法：
$(function (){
alert("5555554");
})
-- 扩展dom加载的过程。（见图解）
html页面所有元素读取——> 加载到内存成为dom对象onload触发 ——>显示到页面——>ready状态
8. Jquery 操作页面元素。
（1）用addClass()方法，给元素添加一个class属性，
根据属性值，在style标签中，操作样式的改变和添加
<head>
<meta charset="UTF-8">
<title>设置类属性，操作样式改变</title>
<script src="js/jquery-3.3.1.js"></script>
<style>
.h1{background-color: red;}
</style>
</head>
<body>
<h1 id="h1">111111111111</h1>
</body>
<script>
$(function (){ //入口函数简写
$("h1").click(function (){ //获取h1元素对象，并调用click方法
$("#h1").addClass("h1"); //给h1元素，设置class属性，值为h1
});
})
</script>
(2) 用css() 方法，直接给元素对象，设置属性。
css方法参数
设置一个属性
css("属性","属性值") ;
同时设置多个属性
css({"属性1":"属性值1","属性2":"属性值2"...}) ;
（3）jquery常见的事件及方法。
（1）事件方法：
click() 点击事件响应的方法。
mouseover() 鼠标移入的响应方法
mouseout() 鼠标移出的响应方法
用法：
$(选择器).mouseover(function (){
//鼠标移除触发的函数代码;
})
（2）元素操作方法：
hide() 元素隐藏的方法
show() 元素显示出来的方法。
next() 获取下一个兄弟元素对象
prve() 获取上一个兄弟元素对象
html() 给元素的文本内写入东西
9. 补充拓展：
1.在元素对象的方法中，获取当前元素。
用$(this) 即可。
例如：
<h1 id="title"> 你是人间四月天 </h1>
<script>
$("#title").click(function(){
$(this).css("background-color","red");
});
</script>
2. a标签，通过 addClass 设置class属性值，然后影响样式改变的问题。
出现问题： 如果a标签跳转到的是本页面。
用a标签对象 调用addClass() 方法，设置clss属性的时候。
在style标签中，通过clss属性值，操作样式改变，
让一个元素隐藏显示的操作的时候。会出现没有效果。
原因：a标签，操作了样式的同时，通过a标签的跳转功能会刷新本页面。
一些通过事件响应的操作，刷新页面后，事件操作不显示。
10. jquery 对象，和dom对象，相互转换。
<h1 id="h1"></h1>
(1) jquery ——> dom对象
var h1 = $("#h1")[0];
h1即为dom对象，可以操作js方法。
例如给h1中写入文本内容。
h1.innerHTML = "11111";
(2) dom对象 ——> jquery
var h1 = document.getElementById("h1");
var $h1 = $(h1); //dom 转 jquery·
jquery对象写入文本的方法 html();
910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
