SlideShare a Scribd company logo
1 of 14
jQuery Lecturer-Allen
簡介 jQuery是一套 JavaScript的 Library,因此,你必須稍具 JavaScript 的基礎,至少寫過一些 JavaScript 才比較容易上手,並且看得懂後續的教學。 jQuery的核心程式並非包山包海、什麼都可以幫你做,相反地,jQuery主要是用在 DOM文件的操作,包含「快速選取元素(Element)」並且「做一些事情」,快速選取元素可以讓你一次選取單一或多個的元素,然後你可以將這些被選取的元素 做一些改變,例如隱藏、顯示等等。 此外 jQuery的核心程式還加強了非同步傳輸(AJAX)以及事件(Event)的功能,讓你更容易操作遠端文件及事件。
再談談 jQuery 的好 	1.官方文件詳細。(重要)2. 簡潔不笨重,壓縮後大約15KB (v1.2.6)。3. 只要你有 JavaScript 的基礎,不用再多去學習一大堆新語法。4. 不用去煩惱跨瀏覽器的問題,jQuery已經幫你作好了。(IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+)5. 支援CSS3選擇器。6. 社群活躍,你可以有很多人家寫好免費的 plugin用。7. 跟其它 library 一起使用也不衝突。(jQuery.noConflict())8. jQuery UI 幫你漂亮搞定 (Web 2.0?) 網站使用者介面。
jQuery 網站 Min版本在瀏覽器打開後會重新編碼一次,但對於伺服器負擔較輕。
開始使用 ,[object Object],[object Object]
jQuery 怎麼用來「快速選取元素」並且「做一些事情」呢? 請看看程式碼: $("div").addClass("special"); 移除Class removeClass(class) 以下符號的代表是? (# .input) div#body div.body div > div	 解釋:選取div id 為 body 的 <div> 解釋:選取 divclass 為 body 的 <div> 解釋:選取被 <div> 包住的下一層 <div>
控制CSS屬性
驗證事件
觸發事件
DOM
DOM 大家庭
作業 jQuery 表單驗證
教學網站 MSDN「邊做邊學」系列 jQuery - Write less, Do more SOHTANAKA
jQuery入門

More Related Content

What's hot

前端MVC之backbone
前端MVC之backbone前端MVC之backbone
前端MVC之backboneJerry Xie
 
JavaScript Code Quality
JavaScript Code QualityJavaScript Code Quality
JavaScript Code QualityJoseph Chiang
 
第10章
第10章第10章
第10章paoapao
 
Backbone.js and MVW 101
Backbone.js and MVW 101Backbone.js and MVW 101
Backbone.js and MVW 101Jollen Chen
 
JQuery 学习
JQuery 学习JQuery 学习
JQuery 学习cssrain
 
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨移动Web开发框架jqm探讨
移动Web开发框架jqm探讨newker
 
Node getting-started
Node getting-startedNode getting-started
Node getting-startedlylijincheng
 
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会Joseph Chiang
 
面向未来的重构
面向未来的重构面向未来的重构
面向未来的重构Kejun Zhang
 
更好的文件组织
更好的文件组织更好的文件组织
更好的文件组织Kejun Zhang
 
Browser Object Model
Browser Object ModelBrowser Object Model
Browser Object Modeljay li
 
J Query基础教程
J Query基础教程J Query基础教程
J Query基础教程yiditushe
 
程式人雜誌 2015年三月
程式人雜誌 2015年三月程式人雜誌 2015年三月
程式人雜誌 2015年三月鍾誠 陳鍾誠
 
程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號鍾誠 陳鍾誠
 
面向开发的前端性能优化
面向开发的前端性能优化面向开发的前端性能优化
面向开发的前端性能优化li qiang
 
AngularJS training in Luster
AngularJS training in LusterAngularJS training in Luster
AngularJS training in LusterJason Chung
 

What's hot (20)

jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
前端MVC之backbone
前端MVC之backbone前端MVC之backbone
前端MVC之backbone
 
JavaScript Code Quality
JavaScript Code QualityJavaScript Code Quality
JavaScript Code Quality
 
第10章
第10章第10章
第10章
 
Backbone.js and MVW 101
Backbone.js and MVW 101Backbone.js and MVW 101
Backbone.js and MVW 101
 
JQuery 学习
JQuery 学习JQuery 学习
JQuery 学习
 
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
 
Node getting-started
Node getting-startedNode getting-started
Node getting-started
 
不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会不断归零的前端人生 - 2016 中国软件开发者大会
不断归零的前端人生 - 2016 中国软件开发者大会
 
Vue.js
Vue.jsVue.js
Vue.js
 
面向未来的重构
面向未来的重构面向未来的重构
面向未来的重构
 
更好的文件组织
更好的文件组织更好的文件组织
更好的文件组织
 
Browser Object Model
Browser Object ModelBrowser Object Model
Browser Object Model
 
How tovuejs
How tovuejsHow tovuejs
How tovuejs
 
J Query基础教程
J Query基础教程J Query基础教程
J Query基础教程
 
用Vue改dom
用Vue改dom用Vue改dom
用Vue改dom
 
程式人雜誌 2015年三月
程式人雜誌 2015年三月程式人雜誌 2015年三月
程式人雜誌 2015年三月
 
程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號
 
面向开发的前端性能优化
面向开发的前端性能优化面向开发的前端性能优化
面向开发的前端性能优化
 
AngularJS training in Luster
AngularJS training in LusterAngularJS training in Luster
AngularJS training in Luster
 

Viewers also liked

A month by month guide to On Hold Marketing for Restaurants and Hospitality.
A month by month guide to On Hold Marketing for Restaurants and Hospitality.A month by month guide to On Hold Marketing for Restaurants and Hospitality.
A month by month guide to On Hold Marketing for Restaurants and Hospitality.Advitel_crow_greencm15
 
Google blogger 教學
Google blogger 教學Google blogger 教學
Google blogger 教學鈺棠 徐
 
Linux 教育訓練
Linux 教育訓練Linux 教育訓練
Linux 教育訓練Bo-Yi Wu
 
CSS入門教學
CSS入門教學CSS入門教學
CSS入門教學鈺棠 徐
 
Passing The Joel Test In The PHP World
Passing The Joel Test In The PHP WorldPassing The Joel Test In The PHP World
Passing The Joel Test In The PHP WorldLorna Mitchell
 
PHPUnit best practices presentation
PHPUnit best practices presentationPHPUnit best practices presentation
PHPUnit best practices presentationThanh Robi
 
JavaScript/CSS 2015 Autumn
JavaScript/CSS 2015 AutumnJavaScript/CSS 2015 Autumn
JavaScript/CSS 2015 AutumnKoji Ishimoto
 
Redis for the Everyday Developer
Redis for the Everyday DeveloperRedis for the Everyday Developer
Redis for the Everyday DeveloperRoss Tuck
 
Redis in Practice
Redis in PracticeRedis in Practice
Redis in PracticeNoah Davis
 

Viewers also liked (13)

A month by month guide to On Hold Marketing for Restaurants and Hospitality.
A month by month guide to On Hold Marketing for Restaurants and Hospitality.A month by month guide to On Hold Marketing for Restaurants and Hospitality.
A month by month guide to On Hold Marketing for Restaurants and Hospitality.
 
Google blogger 教學
Google blogger 教學Google blogger 教學
Google blogger 教學
 
Linux 教育訓練
Linux 教育訓練Linux 教育訓練
Linux 教育訓練
 
Why react matters
Why react mattersWhy react matters
Why react matters
 
Introducing PostCSS
Introducing PostCSSIntroducing PostCSS
Introducing PostCSS
 
CSS入門教學
CSS入門教學CSS入門教學
CSS入門教學
 
Passing The Joel Test In The PHP World
Passing The Joel Test In The PHP WorldPassing The Joel Test In The PHP World
Passing The Joel Test In The PHP World
 
PHPUnit best practices presentation
PHPUnit best practices presentationPHPUnit best practices presentation
PHPUnit best practices presentation
 
The road to php 7.1
The road to php 7.1The road to php 7.1
The road to php 7.1
 
JavaScript/CSS 2015 Autumn
JavaScript/CSS 2015 AutumnJavaScript/CSS 2015 Autumn
JavaScript/CSS 2015 Autumn
 
jQuery in 15 minutes
jQuery in 15 minutesjQuery in 15 minutes
jQuery in 15 minutes
 
Redis for the Everyday Developer
Redis for the Everyday DeveloperRedis for the Everyday Developer
Redis for the Everyday Developer
 
Redis in Practice
Redis in PracticeRedis in Practice
Redis in Practice
 

Similar to jQuery入門

jQuery easy use
jQuery easy usejQuery easy use
jQuery easy useDesBear Li
 
前端杂乱分享
前端杂乱分享前端杂乱分享
前端杂乱分享shyboyzk
 
Jquery插件easy ui属性汇总
Jquery插件easy ui属性汇总Jquery插件easy ui属性汇总
Jquery插件easy ui属性汇总1100122566
 
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)Jia Mi
 
20131004 - Backbone js 介紹 by Bryan
20131004 - Backbone js  介紹 by Bryan20131004 - Backbone js  介紹 by Bryan
20131004 - Backbone js 介紹 by BryanLearningTech
 
Jquery指南
Jquery指南Jquery指南
Jquery指南yiditushe
 
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程yiditushe
 
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程appollo0312
 
Js高级技巧
Js高级技巧Js高级技巧
Js高级技巧fool2fish
 
Script with engine
Script with engineScript with engine
Script with engineWebrebuild
 
Java 1(Java概述)
Java 1(Java概述)Java 1(Java概述)
Java 1(Java概述)xzdbd
 
Javascript primer plus
Javascript primer plusJavascript primer plus
Javascript primer plusDongxu Yao
 
1, java intro
1, java intro1, java intro
1, java introted-xu
 
Javascript template & react js 初探
Javascript template & react js 初探Javascript template & react js 初探
Javascript template & react js 初探wantingj
 
Hello reactJS 0~1 Bulid my first web app
Hello reactJS 0~1 Bulid my first web appHello reactJS 0~1 Bulid my first web app
Hello reactJS 0~1 Bulid my first web apphungjie19
 
網站設計100步
網站設計100步網站設計100步
網站設計100步evercislide
 

Similar to jQuery入門 (20)

jQuery easy use
jQuery easy usejQuery easy use
jQuery easy use
 
前端杂乱分享
前端杂乱分享前端杂乱分享
前端杂乱分享
 
Jquery插件easy ui属性汇总
Jquery插件easy ui属性汇总Jquery插件easy ui属性汇总
Jquery插件easy ui属性汇总
 
J Query Learn
J Query LearnJ Query Learn
J Query Learn
 
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
 
A
AA
A
 
A
AA
A
 
Angularjs
AngularjsAngularjs
Angularjs
 
20131004 - Backbone js 介紹 by Bryan
20131004 - Backbone js  介紹 by Bryan20131004 - Backbone js  介紹 by Bryan
20131004 - Backbone js 介紹 by Bryan
 
Jquery指南
Jquery指南Jquery指南
Jquery指南
 
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
 
Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程Struts+Spring+Hibernate整合教程
Struts+Spring+Hibernate整合教程
 
Js高级技巧
Js高级技巧Js高级技巧
Js高级技巧
 
Script with engine
Script with engineScript with engine
Script with engine
 
Java 1(Java概述)
Java 1(Java概述)Java 1(Java概述)
Java 1(Java概述)
 
Javascript primer plus
Javascript primer plusJavascript primer plus
Javascript primer plus
 
1, java intro
1, java intro1, java intro
1, java intro
 
Javascript template & react js 初探
Javascript template & react js 初探Javascript template & react js 初探
Javascript template & react js 初探
 
Hello reactJS 0~1 Bulid my first web app
Hello reactJS 0~1 Bulid my first web appHello reactJS 0~1 Bulid my first web app
Hello reactJS 0~1 Bulid my first web app
 
網站設計100步
網站設計100步網站設計100步
網站設計100步
 

jQuery入門