1. jQuery介绍
- 1. jQuery选择器;(掌握)
- 2. jQuery ajax请求;(掌握)
- 3. jQuery二级联动;(掌握)
- jQuery介绍
2.1. 兼容各种浏览器
jQuery是继prototype之后又一个优秀的Javascript框架。
它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器,最新版本是jQuery3.x。
2.2. 和原生js比较
2.2.1. 写原生的js比较麻烦
1.document.getElementById("mytime");
$("#mytime") #代表id选择器
2.2.2. Ajax处理
创建XMLHttpRequest对象,open方法,监听属性onreadystatechange,send方法
$.get(url,{json格式参数},function(data){
});
$.post(url,{json格式参数},function(data){
});
2.2.3. 有很多jQuery插件
2.3. 怎样才能学会jQuery
选择器(获取dom里面元素的方式)的各种用法
jQuery的很多内置方法,
如果有个div id=mydiv,需要把div隐藏
document.getElementById("mydiv").style.display=”none”;
$(“#mydiv”).hide();
学习怎样使用jQuery的各种插件
学习自己写jQuery插件(后面在讲,js高级应用)
- 使用jQuery
3.1. 版本
3.2. 正确写引人script-完整标签
<script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script>
3.3. 错误写引人script-自结束标签
<script type="text/javascript" src="/js/jquery-1.11.2.min.js"/>
3.4. Web项目里面正确引入js
3.4.1. 在jsp最好使用绝对路径 就是以/开头
3.4.2. 在css的代码里面最好使用相对路径 就是以..
background-image: url(../images/fc02_3.jpg);
3.5. 页面加载事件
3.6. jQuery===$
===先比较类型,在比较值
返回值:true
因为其他的js框架也可能使用$符号, 使用jQuery来处理
3.7. DOM对象与jQuery对象转换
- jQuery 选择器
4.1. 基本选择器:前面3个必须掌握
4.1.1. Id选择器 #
$("#myDiv")
如果有多个相同id,只能操作第一个;id最好只定义一个
如果要操作的控件在循环里面(id会重复出现),就不能使用id选择器。
4.1.2. .class 样式(类)选择器 .
$(".div").html("xxx");
如果有多个对应的样式,都可以全部进行操作
4.1.3. element 元素选择器
$("div").html("xxx");
$("input").val("所有的input");
如果有多个对应的控件,都可以全部进行操作
4.1.4. * 所有元素(控件)
console.debug($("*"));获取所有的页面控件
4.1.5. selector1选择器
console.debug($("div,input"));
4.2. 层次选择器(有上下级关系)
4.2.1. 祖先 后代
在给定的祖先元素下匹配所有的后代元素
$("form input")
4.2.2. 父亲 儿子
在给定的父元素下匹配所有的子元素
$("form>input")
$("#table tr")
4.2.3. 元素 紧接下一个元素
匹配所有紧接在 prev 元素后的 next 元素
$("form+input")
4.2.4. 元素 所有下一个元素
匹配 prev 元素之后的所有 siblings 元素
$("form~input")
- 选择器练习
5.1. selector.html
5.2. select.html
5.3. checkbox.html
5.4. form.html
5.5. user.html
- 其他方法
6.1. 附加对象
append(content) 向每个匹配的元素内部追加内容。
content String(htmlString),Element(DOM), jQuery对象
6.2. 克隆clone
clone()克隆匹配的DOM元素并且选中这些克隆的副本。
6.2.1. 没有事件
clone(true)元素以及其所有的事件处理并且选中这些克隆的副本
6.2.2. 可以克隆事件
- jQuery ajax请求
7.1. 原生js版本二级联动缓存问题
7.1.1. 放到function的最前面
7.1.2. 先从缓存取
7.1.3. 没有,发出ajax请求,放入缓存
- 二级联动jQuery版本
8.1. 页面
8.2. Js
8.3. type参数
如果后台
response.setContentType("text/json; charset=UTF-8");
那上面$.get里面的type参数’json’可以不写
- 课程总结
9.1. 重点
- jQuery各种选择器:讲过的选择器必须记下来
- jQuery的方法:讲过的方法必须记下来
9.2. 难点
- 5道练习题
- jQuery版本二级联动+缓存
- 常见异常
- 课后练习
- jQuery版本二级联动+缓存
- 面试题
- 扩展知识或课外阅读推荐
13.1. 扩展知识
13.2. 课外阅读
- jQuery 3.0十大新特性
http://www.jb51.net/article/87998.htm