jQuery

1.   jQuery介绍

• 1.  jQuery选择器;（掌握）
• 2.  jQuery ajax请求;（掌握）
• 3.  jQuery二级联动;（掌握）

1. 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高级应用)

1. 使用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对象转换

 

1. 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")

1. 选择器练习

5.1.  selector.html

 

5.2.  select.html

 

5.3.  checkbox.html

 

5.4.  form.html

 

 

5.5.  user.html

 

 

1. 其他方法

6.1.  附加对象

append(content) 向每个匹配的元素内部追加内容。

content String(htmlString),Element(DOM), jQuery对象

 

6.2.  克隆clone

clone()克隆匹配的DOM元素并且选中这些克隆的副本。

6.2.1.   没有事件

clone(true)元素以及其所有的事件处理并且选中这些克隆的副本

6.2.2.   可以克隆事件

 

 

 

 

 

1. jQuery ajax请求

7.1.  原生js版本二级联动缓存问题

7.1.1.   放到function的最前面

 

7.1.2.   先从缓存取

 

7.1.3.   没有,发出ajax请求,放入缓存

 

1. 二级联动jQuery版本

8.1.  页面

 

8.2.  Js

 

8.3.  type参数

如果后台

response.setContentType("text/json; charset=UTF-8");

那上面$.get里面的type参数’json’可以不写

 

 

 

 

 

 

 

 

 

1. 课程总结

9.1.  重点

1. jQuery各种选择器：讲过的选择器必须记下来
2. jQuery的方法：讲过的方法必须记下来

9.2.  难点

1. 5道练习题
2. jQuery版本二级联动+缓存
3. 常见异常
4. 课后练习
5. jQuery版本二级联动+缓存
6. 面试题
7. 扩展知识或课外阅读推荐

13.1.         扩展知识

13.2.         课外阅读

1. jQuery 3.0十大新特性

http://www.jb51.net/article/87998.htm