jQuery 基础入门 
















提醒：键盘左右键可以切换页面

 Sorry,  PPT is not suitable for Hackers : ( 

Outline 

jQuery 简介

jQuery 选择器

 jQuery 和 DOM

 jQuery 事件处理

 jQuery UI 和特效

 jQuery Advance & Plug-in






 jQuery 简介

关于 jquery

jQuery 是一个广泛被使用的JS 函式库 (Library)，其标榜写越少做越多 (The Write Less,  Do More)的强大功能，可以让使用者更轻易的操作 DOM API、变更网页的外观、显示动画和进行事件处理

* 建议在使用jQuery前，对于JS 和  DOM 要有一定程度了解






使用 jquery


1. 到官方网站下载 jQuery (minified 版本档桉较小为正式上线使用，开发用unpressed版本)

2. 将下载的.js 档桉引入
 <script src="jquery.js"></script>

3.  开始使用 jQuery !

第一个 jQuery 程式

有了jQuery，可以用更简洁的方式选取元素并更改其属性值

 jQuery(document).ready(function() {    console.log('Hi jQuery');});
$ 为 jQuery别名，特殊变量名称。 $()函数是呼叫建构函数建立的jQuery物件，参数document为HTML物件本身，然后注册了 ready 事件，括号中为匿名函数，处理事件

demo 

jQUERY 程式架构

一般使用 jQuery情境在于要用更简洁方式和DOM来做互动，所以必须等到 DOM完成载入(不用等到所有资源载入)后，才开始执行 jQuery 程式

1.  jQuery(document).ready(function() { … })  [常用]
当 document 物件下所有 DOM 物件都可以正确取得时，就会触发事件，也可简写为 $(function() { … });

2.  jQuery(window).load(function() { … })
同 JS 裡的 window.onload 事件，会等所有资源载入

参考文件：
使用 jQuery(document).ready() 与 window.onload 注意事项

JQUERY 程式基本语法


一般jQuery脚本声明是由 $()函数开始，可以分为三个部分：

1. 选择器
可以参考使用CSS选择器写法，找出符合条件元素
2. 动作
替元素套用样式或是建立动画、互动等
3. 参数
执行动作所需的参数

 $(选择器字符串).method(参数);



串连 chaining


由于jQuery方法的传回值为jQuery对象本身，所以可以使用串联的方法依序执行多个方法，达到简洁语法的效果

 $('.xd').css('color', 'red'); $('.xd').html('Hi JS'); $('.xd').addClass('XDDD');

 $('.xd').css('color', 'red').html('Hi JS').addClass('XDDD');

练习一
利用jQuery的方法，选取一元素，动态改变其颜色







 jQuery 选择器

JQUERY 选择器


jQuery选择器可以说是jQuery的核心，亦即需要先选择出你想要处理的元素，才可以进行接下来事件处理、更改样式、建立动画等功能

在 $() 函数中只有一种参数，为选择器语法字串。透过传入选择器语法字串进入$()函数，可以回传一个符合条件的jQuery物件，在根据回传的对象调用jQuery方法进行处理



JQUERY 选择器


基本上，jQuery选择器有三种(类似CSS选择器写法)

1.  标签名称
$('element')

2. id 属性
$('#idName')

3. class 属性
$('.className')






 jQuery 和 DOM

存取 CSS 


使用jQuery可以简单的存取元素的CSS属性值

css('属性名', '属性值') 
为元素套用CSS样式或取出元素CSS属性值


存取 CSS 样式类型


可以用不同方式来存取CSS样式类别

addClass()
增加样式类别
hasClass()
检查是否有该样式类别
removeClass()
移除样式类别

toggleClass()
如果没有则新增，若有则移除样式类别

JQUERY 与 DOM 处理

常用于新增、删除、修改DOM的方法：

1. html() 即innerHTML 将参数HTML Tag取代DOM元素内容
2. text()  即innerText 将参数文字内容取代DOM元素内容
3. prepend() 将参数的HTML Tag新增成为第一个子元素
4. append() 将参数的HTML Tag新增成为最后一个子元素
5. before() 将参数的HTML Tag 插入元素之前
6. after() 将参数的HTML Tag 插入元素之后
7. remove() 从DOM删除此元素






 jQuery 事件处理

JQUERY 事件处理


事件处理是JS也是jQuery非常重要的功能，jQuery扩充了原生JS的事件处理，提供更强大的一些功能

1. 使用on来绑定事件(和JS原生比较看看)

 $('#xd').on('click', eventHandler); function eventHandler(event){    $(this).css('color', 'red'); };






 jQuery UI 和特效

jquery 特效方法


jQuery提供常用的特效，让使用者可以轻松使用：
显示、隐藏、滑动、渐入渐出等

使用方法：
$('选择器').特效方法(duration , callback function);

1. 持续时间(duration)
特效持续时间，单位为毫秒，可为关键字fast(约200毫秒)
2. 回呼函数(callback function)
当特效结束时所调用函数

显示与隐藏特效


1. show() 显示元素

2. hide() 隐藏元素
 
3. toggle() 按一下可以切换显示或隐藏元素


demo 

滑动特效


1. slideDown() 元素向下滑动

2. slideUp() 元素向上滑动

3. slideToggle() 切换元素向上和向下滑动


demo

淡出淡入特效


由改变透明度可以达到淡出淡入效果

1. fadeIn() 淡入元素

2. fadeOut() 淡出元素

3. fadeToggle() 切换淡出、淡入元素

4. fadeTo() 元素渐渐转变成指定透明度

demo 

练习 二
制作开服表清单(请参考首页开服表)
麻烦和JS写法做比较
 







 jQuery Ajax

Ajax定义


AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）


        AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。就是利用JS来无刷新与后端交互，通过get和post方式把数据发送到后端，或者请求后端的数据，然后根据请求的数据进行改变DOM节点等操作，从而取消掉用form的submit方式一提交就会跳转页面的情况，像在创建账号的时候检测此用户名是否存在就是一个典型的案例。

原生JS实现AJAX

        所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建XMLHttpRequest 对象。


GET方法

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","demo_get.php?id=1&name=lemoo&t=" + Math.random(),true);
xmlhttp.send();

  • 传递参数直接在?后指定，多个参数用&分隔
  • GET请求同一URL时会有缓存，通过参数是否一致来判断
  • 解决缓存问题，加个时间戳使每次参数不一致，上例中的t=Math.random()





POST方法

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","ajax_test.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
}
  • POST没有缓存
  • POST发送的数据量大
  • AJAX无法发送文件
  • readyState改变时触发onreadystatechange事件，4为完成
  • status是返回状态，200是成功，404是未找到页面
  • responseText是返回的数据，为字符串格式


jQuery Ajax方法
















jQuery Ajax调试

调试方式：在运行AJAX的页面按F12(Chrome下)，进入“Network”选项卡，点击"XHR"过滤器，然后触发AJAX的事件。



一般来说，处理AJAX，用jQuery的get和post的就够用，如果是JSON数据的话用getJSON，注意缓存问题，特殊的应用再考虑用ajax()，另外，AJAX还有一个很严重的问题是跨域，这个以后再说。







 jQuery Advance & Plug-in 

Made with Slides.com