jQuery_day01(基础语法)

陈浩夏JQuery1.8基础教程V1.3时间：2012年12月授课：陈浩夏版权所有：陈浩夏day01：jQuery基础&入门学习要点：1、2、一、jQuery简介1、jQuery是什么？jQuery是一个JavaScript函数库，是一个JavaScript框架JavaScript框架有很多，比如：prototype、jQuery、ExtJS等等以后有机会一定要学学ExtJS，一个功能非常强大的JavaScript框架jQuery的通用性非常的好jQuery的设计思想是将原始的dom对象封装成一个jQuery对象，通过调用jQuery对象的方法来实现对原始dom对象的操作这样设计的目的是：为了更好的兼容不同的浏览器，简化代码2、jQuery库-特性jQuery库包含以下特性：HTML元素选取HTML元素操作CSS操作HTML事件函数JavaScript特效和动画HTMLDOM遍历和修改AJAX（重点）陈浩夏JQuery1.8基础教程V1.3时间：2012年12月授课：陈浩夏版权所有：陈浩夏3、下载jQuery官网：共有两个版本的jQuery可供下载：一份是精简过的（一般用于实际部署环境）：jquery-1.8.3.min.js另一份是未压缩的（供调试或阅读）：jquery-1.8.3.js4、向您的页面添加jQuery库jQuery库位于一个JavaScript文件中，其中包含了所有的jQuery函数可以通过下面的标记把jQuery添加到网页中：headscripttype=text/javascriptsrc=jquery.js/script/head请注意，script标签应该位于页面的head部分5、示例：隐藏html元素隐藏页面的所有p元素（对比直接用JavaScript和使用jQuery）示例：demo01-js.html用原生JavaScript实现!DOCTYPEhtmlPUBLIC-//W3C//DTDHTML4.01Transitional//EN=Content-Typecontent=text/html;charset=UTF-8titledemo/titlescripttype=text/javascriptfunctionhideOrShow(){//获取html页面所有的p元素的dom对象陈浩夏JQuery1.8基础教程V1.3时间：2012年12月授课：陈浩夏版权所有：陈浩夏varallPs=document.getElementsByTagName(p);//循环for(vari=0;iallPs.length;i++){//判断是显示/隐藏if(allPs[i].style.display==||allPs[i].style.display==block){allPs[i].style.display=none;}else{allPs[i].style.display=block;}}}/script/headbodycenterh2用JavaScript显示/隐藏所有段落/h2p段落1：点击下面的按钮我将被隐藏..../pp段落2：点击下面的按钮我将被隐藏..../pbuttononclick=hideOrShow()点击/button/center/body/html示例：demo01-jq.html用jQuery实现陈浩夏JQuery1.8基础教程V1.3时间：2012年12月授课：陈浩夏版权所有：陈浩夏!DOCTYPEhtmlPUBLIC-//W3C//DTDHTML4.01Transitional//EN=Content-Typecontent=text/html;charset=UTF-8titledemo/titlescripttype=text/javascriptsrc=script/jquery-1.8.3.js/scriptscripttype=text/javascript$(function(){$(button).click(function(){//获取所有的p元素，jQuery对象//调用jQuery对象的toggle方法：显示或者隐藏元素$(p).toggle();});});/script/headbodycenterh2用jQuery显示/隐藏所有段落/h2p段落1：点击下面的按钮我将被隐藏..../pp段落2：点击下面的按钮我将被隐藏..../pbutton点击/button/center/body/html陈浩夏JQuery1.8基础教程V1.3时间：2012年12月授课：陈浩夏版权所有：陈浩夏二、jQuery基本语法1、文档就绪函数示例：demo02-js.htmlwindow.onload=function(){...}访问HTML文档的元素，必须先载入文档对象模型(DOM)当window.onload函数执行的时候，说明所有东西已经载入，包括图像和横幅等等要知道较大的图片下载速度会比较慢，因此用户必须等待大图片下载完毕才能看到window.onload()执行的代码效果，这样就花费了很长的等待时间，这不是我们想要的对于此，jquery提供了一个ready事件,你可以使用以下的代码片段示例：demo02-jq.html$(document).ready(function(){//你的代码});$(document)意思是说，获取整个网页文档对象（类似的于window.document）$(document).ready意思就是说，获取文档对象就绪的时候上面这段代码的意思是检查文档对象直到它能够允许被操作（注：这样做比window.onload()函数要快的多，因为只要文档对象载入完成就能够执行代码了，而不需要等待页面中的图片下载是否已经完成）---这是我们想要的示例：demo02-jq.html//或者简略的写法：$(function(){陈浩夏JQuery1.8基础教程V1.3时间：2012年12月授课：陈浩夏版权所有：陈浩夏//你的代码});2、jQuery语法jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作基础语法是：$(selector).action()美元符号：$定义jQuery选择符（selector）“查询”和“查找”HTML元素jQuery的action()执行对元素的操作示例：demo03-jq.html$(this).hide()-隐藏当前元素$(p.test).hide()-隐藏所有class=test的段落课堂练习：demo03-jq.html$(p).hide()-隐藏所有段落$(#test).hide()-隐藏所有id=test的元素图示：陈浩夏JQuery1.8基础教程V1.3时间：2012年12月授课：陈浩夏版权所有：陈浩夏三、jQuery选择器（重点/难点）-day02详细介绍选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器如果能熟练地使用选择器，不仅能简化代码，而且可以达到事半功倍的效果1、补充/复习：CSS选择器CSS是一项出色的技术，它使得网页的结构和表现样式完全分离利用CSS选择器能轻松地对某个元素添加样式而不改动HTML结构，只需通过添加不同的CSS规则，就可以得到各种不同样式的网页要使某个样式应用于特定的HTML元素，首先需要找到该元素在CSS中，执行这一任务的表现规则称为CSS选择器选择器语法描述示例陈浩夏JQuery1.8基础教程V1.3时间：2012年12月授课：陈浩夏版权所有：陈浩夏标签选择器E{CSS规则}以文档元素作为选择符td{font-size:14px;width:120px;}a{text-decoration:none;}ID选择器#ID{CSS规则}以文档元素的惟一标识符ID作为选择符#note{font-size:14px;width:120px;}类选择器E.classNamw{CSS规则}以文档元素的class作为选择符div.note{font-size:14px;}群组选择器E1,E2,E3{CSS规则}多个选择符应用同样的样式规则td,p,div,a{font-size:14px;}后代选择器EF{CSS规则}元素E的任意后代元素F#linksa{color:red;}通配选择器*{CSS规则}以文档的所有元素作为选择符*{font-size:14px;}几乎所有主流浏览器都支持上面这些常用的选择器此外CSS中还有伪类选择器(E:Pseudo-Elements{CssRules})、子选择器(EF{CssRules})、临近选择器(E+F{CssRules})和属性选择器（E[attr]{CssRules}）等。但遗憾的是，主流浏览器并非完全支持所有的CSS选择器示例：demo04-css.html/*ID选择器*/#demo{color:red;font-size:30px;陈浩夏JQuery1.8基础教程V1.3时间：2012年12月授课：陈浩夏版权所有：陈浩夏}/*class样式选择器*/.demo{font-weight:bold;}/*标签选择器*/p{background-color:#eee;color:blue;font-size:20px;}注意：把CSS应用到网页中有3种方式，即行间样式表、内部样式表和外部样式表上例中使用的是内部样式表，内部样式表的缺点是不能被多个页面重复使用的图示：陈浩夏JQuery1.8基础教程V1.3时间：2012年12月授课：陈浩夏版权所有：陈浩夏2、jQuery选择器（概念）jQuery中的选择器完全继承了CSS的风格利用jQuery选择器，可以非常便捷和快速地找出特定的DOM元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器学会使用选择器是学习jQuery的基础，jQuery的行为规则都必须在获取到元素后才能生效jQuery元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML元素进行选择选择器允许您对HTML元素组或单个元素进行操作在HTMLDOM术语中：选择器允许您对DOM元素组或单个DOM节点进行操作示例：demo05-jq.htmlscripttype=text/javascriptfunctiondemo(){alert('JavaScriptdemo.');}/scriptponclick=demo();点击我/p像上面这样把JavaScript代码和HTML代码混杂在一起的做法同样也非常不妥，因为它并没有将网页内容和行为分离，所以建议使用下面的方法示例：demo05-jq.htmlscripttype=text/javascript$(function(){$(.demo).click(function(){alert(我被点击了...);});陈浩夏JQuery1.8基础教程V1.3时间：2012年12月授课：陈浩夏版权所有：陈浩夏});/scriptstyletype=text/css.demo{color:blue;font-size:20px;font-weight:bold;}/stylepclass=demo点击我/pjQuer