第一章 开始Jquery
1 资源
下载jquery源代码 http://docs.jquery.com/Downloading_jQuery
2 调用
使用<script type="text/javascript" src="lib/jquery.js"></script> 根据个人jquery.js文件的路径不同改变 src的值
如果你使用外部文件custom.js调用jquery,使用<script type="text/javascript" src="lib/custom.js"></script>
同样是根据路径的不同更改src
使用$(document).ready(function(){ //your code });包含jquery代码
3 jquery 官方网站 http://jquery.com/
4 jquery 中文社区 http://bbs.jquery.org.cn/frame.php?frameon=yes&referer=http%3A//bbs.jquery.org.cn/thread-8-1-1.html
http://bbs.51js.com/viewthread.php?tid=79244
5 $()函数是一个工厂即工厂函数,是一个基本的创建块,选择文档的一部分,即得到的是一个元素
a tag name : $("p");
an ID : $("#some-id");
a class : $(".some-class");
获得子节点元素: $("#some-id > li ");
给不含某个类名的其他的标签付class :$("#some-id li:not(.some-class)").addClass("some-other-class");
就是给li标签中class不是some-class的定义一个class some-other-class
当存在多个Js库的时候$()标签可能会产生误解,因为其是js通用的标签,这时要使用jQuery代替$
6 添加类 $("").addClass("类名"); 删除类$("").removeClass("类名");
7 jQuery 允许我们确定函数调用的时间,DOM 被加载后才调用。使用$(document).ready() 结构,不需要等图像加
载。
8 如何学习
初学,动手要勤于动脑(光看).
以demo为蓝本,一点一点的改,确保每一部修改都能运行。 一段时间后,你就会逐步掌握了。
不要急,初学任何东西都是这样的!
第二章 选择器-得到你想要的
1 css选择器
参见第一章中的 5
2 Xpath路径选择器
1)得到具有某个属性的标签:$('a[@title]'); 得到函数属性title的a标签
2)得到具有某个标签的标签:$('div[ol]'); 用来得到含有ol标签的div标签
3)正则表达式:
已知标签的开头:$('a[@href^="malito:"]'); 得到href属性以mailto:开头的a标签
已知标签的末尾:$('a[@href$=".pdf"]');得到href属性以.pdf为结束的a标签
已知标签中的任意位置含有的字符 :$('a[@href*="mysit.com"]');得到href属性中含有mysite.com字符的a标签
3 自定义选择器
1)得到一个对象或数组中的第二项:$('div.horizontal:eq(1)');得到样式class为horizontal的所有标签集合中的第二项
2) 得到任何div的父亲的第一个孩子:$('div:nth-child(1)'); ??
4 样式化交替的行
:odd 奇数行 $("tr:odd").addClass('some-class1') 给tr标签中的奇数行赋予样式some-class1
:even 偶数行 $("tr:even").addClass('some-class2') 给tr标签中的偶数行赋予样式some-class2
注意,在一个页面中如果有超过一个表格的话,或许这不是我们想看到的结果。例如,既然
在这个表格的最后一行有一个灰蓝的背景,那 么在下一个表格的第一行将会有一个灰黄的背
景。在第7章我们会研究如何避免这类问题。
:contains("string") 得到含有的字符串的标签的文本 $('td.contains("Henry")').addClass("some-class") 得到文本中含有Henry字符串的td标签,然后将some-class对应的样式赋给它
5 DOM遍历方法
参见书上的示例
$("th").parent().addClass("heading_line");
$("tr:not([th]):odd").addClass('odd');
$("tr:not([th]):even").addClass('even');
$('td:contains("Henry")').next().addClass('highlight');
1) 得到父节点:$("th").parent() 例:设置单独的行,利用单独行的子标签的找到其标签 即 $("th").parent().
addClass("some-class");增加类名到达样式特殊化的效果
2) 得到特殊行以外的兄弟节点:使用not([]) 例 :排除统一标签的特殊行 $("tr:not([th])");
3) 得到下一个兄弟节点 :使用.next() 例 :参见上面
4) 得到一个标签后面的兄弟节点:使用.sibling(); 例 :$('td:contains("Henry")').siblings().addClass('highlight');
5) gt()和eq(); 例 :$('td').parent().find('td:gt(0)') .addClass('highlight'); 得到td父标签,然后找到父标签的td
子标签,并过滤掉第一个td子标签,$('td:contains("Henry")').parent().find('td:eq(1)').addClass( 'highlight')
这个是得到上面所描述的第二个td子标签
6 访问DOM元素
1) get():得到元素,相当于document.getElementById() 如果要访问第一个元素用.get(0),如果有多个元素的话使用.
get(index)来选择,如果我们想知道 id 为#myelement 的元素的 tag name 的话,可以用:$('#myelement').
get(0).tagName,为了方便可以使用如下的方式$('#myelement')[0],同上面是一样的
第三章 事件——扣动扳机
3.1 在页面加载后执行任务
1 $(document).ready(function(){}); 使用这个在页面加载的时候执行js语句,相当于window.onload,可执行多个
函数 function aa(){} function bb(){} $(document).ready(function(){aa();bb()})是有效的
3.2 简单的事件
1 对于JS的综合的考虑:遵循渐进增强的原则,页面的样式转换器应该能够在javascript无效时隐藏起来,甚至跟好的是,
能够通过链接,到当前页面的替代版本而能起到应有的作用
2 书上是通过一个改变样式的示例来阐述如何执行一个事件,具体的请参考书
3 .bind() : 执行事件的函数 示例:$(document).ready(function(){$(#id).bind('click',function(){
$('body'.addClass('some-class');)});});
可以捆绑多个触发事件,这个示例是通过事件来改变不同的样式,可以添加也可以删除removeClass('some-class');
jquery有简写的方法,就是不用.bind直接接事件 ,$('#id').click(function(){});这种方式是比较常用的
4 环境关键字this :当触发任何事件的时候(这里是onclick事件),关键字this引用的都是携带相应行为的dom元素,这个
就相当于,我们在html中使用的<a id="alist" onclikc="change('this')">的效果是相同的
5 书上通过环境关键字this,简化了jquery代码 ,并使用多个函数中具有相同功能的代码归并在一个函数中,具体的流程参
见书上29-32页
3.3 复合事件
1 Jquery中自定义的事件处理程序.ready() , .toggle() , .hover() 后两个成为复合事件处理程序
3.3.1 显示和隐藏内容特性
1 两个函数 .toggle()和toggleClass() ,toggle()可以执行两种交替的样式变换,如果只是隐藏最好的方法是使用后者
示例:$('#id').toggle(function(){$('#id/.class').addClass('hidden')},function(){$('#id/.class').removeClass('hidden')};,)
$('#id').click(function(){$('#id/class').toggleClass('hidden')};) toggleClass方法是自动检查该类是否存在,存在删除,不存在添加,这个方法是很好用的
3.3.2
1 jquery实现的点击触发事件的标签可以不被限制在a标签和button按钮的范围,也就是说div标签也是可以执行.
toggle()方法的,还可以执行toggleClass();和.hover(),就像是鼠标划过一样
2 .hover() 示例:类似.toggle() 也是有两个函数 $('#id').hover(function(){$('#id/.class').addClass('class')},function(){$('#id/.class').removeClasss('class')});
3.3.3 事件扑获和事件冒泡机制,jquery会在事件冒泡阶段注册事件处理程序,首先相应事件的是最具体的元素,然后会向上冒泡到最外层的父元素。
3.3.4 .hover()可以解决事件冒泡机制带来的错误,所以使用.hover来代替mouseout();mouseover();
3.4 限制和终止事件
1 当使用onclick处理事件时,有必要对事件的作用范围进行限制.这时就要给事件函数传递一个参素就是event事件类
2 event.target:事件目标。这个事件的目标可以确定点击事件赋予的元素即$('#id')...中的id,而不会产生冒泡的事件,
避免其他的元素相应这个事件
实例:$('#div-id').click(function(event){if(event.target==this){(折叠的效果)}})就是说在没有 这个判读的时候,div-id代表的标签下的所有的元素标签都可以执行折叠的效果,加上这个就可以控制只 有点击id为div-di的标签是才能执行折叠的的效果
3 event.stopPropagation():避免所有的元素都相应这个事件
4 阻止默认事件操作,使用preventDefault();和返回false:,默认事件操作是指比如,点击a按钮转到相应的链接,提交表
单submint,转向到action指定的页面
5 事件传播和默认操作是相互独立的两套机制,stopPropagation();是阻止事件传播,而preventDefault()是阻止默认
操作的执行,而返回false是两者的结合;
6 unbind:反绑定,即接触事件操作,有利于控制冒泡。反绑定简写的方式现在不在使用
7 .one()函数不好用
8 .trigger():程序加载是执行的事件处理程序,在这里就是,当页面信息加载完成后执行折叠页面的效果
示例:$('#id').trigger('click');这里的id要和事件加载的id值保持一致$('#id').click();
简写:事件触发函数没有任何的参数,即$('#id').click();
第四章 效果—为操作添加艺术性
4.1 修改内联css
1 .css:读取已经存在的样式和添加样式,如果不是动态的改变样式的值的情况下,添加固定的样式类则和使用.addClass
是一样的,如果需要添加不断更新的类的属性的时候需要使用.css
示例:$('#id').css('property','value'); 多个属性$('#id').css({'property':'value','property1','vlaue1'})
以后每章具体的示例参见手册 .css('cursor','pointer')
2 parseFloat():从字符串中读取数字
示例 paresFloat("a2355",10)= 2355;这里面的10含义是确保为十进制数
3 slice():从指定的位置开始读取字符串
4 $('#id')[0].id:得到的是指定元素的id的值,因为使用$('#id')是创建一个jquery对象,所以要使用下标值
5 书上的示例在ie中是无效的??
4.2 基本的隐藏和显示
1 .hide():隐藏元素下的内容
示例 $('#id').hide();
2 .show():显示内容
示例 $('#id').show();
4.3 速度和效果
1 速度参数:.show('slow') .show('normal') .show('fast') 速度分别是0.6 0.4 0.2 秒,也可以使用具体的秒数,但 要注意不能加引号,.show(850) ,show和hide会同事修改多个样式,包括高度,宽度和不透明度
2 淡入淡出:.fadeIn('slow') 淡入 fadeOut(2000) 淡出
4.4 多重效果
1 fadeIn和fadeOut:不透明度
2 fadeTo:不透明度 示例fadeTo('slow',0.5),将不透明减退到0.5
3 slideDown()和slideUp():高度,slideUp('slow');向上折叠
4 animate():多重效果的自定义动画,包含四个参数,a:属性和样式映射,类似.css(),b:速度参数,c:可选的缓动类型
d:可选的回调函数,参数可以是任意的组合
5 通过CSS设置定位:在没有设置position的值时,所有的块级元素默认的css定位属性都是static,这个属性明确的告诉我 们在改变元素的定位属性,即使用position:定义位置,之前试图移动他们是没有作用的
参见示例
6 w3c中的css规范中的盒模型可以在http://www.w3.org/TR/REC-CSS2/box.html 中找到
7 获得各种宽度:.width(),按钮的宽度:$button.width(),边界的宽度:.css('paddingLeft'),.css('paddingRight'),
边的宽度:.css('borderRightWidth'),.css('borderLeftWidth');
4.5 并发和排队
1 排队效果就是使用.链接各种效果 :示例 .padeTo('slow',0.5).slideUp('slow')
2 对于非效果方法,排队的效果并不适用于他们,如.css('backgroundColor','#f00');无论放在哪都会先执行
3 对于非效果方法,是同时发生的
4 回调函数:可以使用回调函数来排列非效果方法
5 得到一个元素的兄弟节点,$(this).next();
6 在使用$(this).next.slideShow('slow',function(){ 在这里面再次使用$(this)时就是代表的是兄弟节点}),如果不想
是兄弟节点,那么就要在外面将$(this)赋予一个变量后再使用,var $thisPara =
$(this)(如果要想在ie中好用 ,就要现定义$thisPara=Object();,后在赋值就好用了),$thisPara.next.slideShow
('slow',function(){这时使用$thisPara就不是兄弟节点了})
第五章 DOM操作——基于命令改变页面
1 在网页中创建元素,属性和文本
5.1 操作属性
1 .each():类似for循环,方法带有index参数,类似循环计数器,
示例:$('#id').each(function(index){$(this).attr({'id','id'+index})})
2 .text():获取文本属性的值
示例:$('#id a').text();
3 $('div.chapter a[@href*=wikipedia]').each():这个是更确定作用的范围,具体的含义参看第二章
4 .attr():添加属性,示例 .attr({'rel','external'})
5.2 插入新元素
1 $():这个工厂方法的用处是在括号中的元素如果存在则,读取,如果不存在则创建新的元素。
如:$(<a href="http://www.sina.com">aa</a>)
2 .insertAfter(),after(),insertBefore(),before() :用于插入新元素,insertAfter()和after()的不同之处是
$('<a href="#top">back to top </a>').insertAfter('div.chapter p');
$('div.chapter p').after('<a href="#top">back to top </a>');
可以看到只是位置的不同,但就是这个不同在实现连缀其他方法的操作中,前者是对a元素做更多的操作,后者是对所选
择的元素进行连缀操作,所以方便还是前者。
3 eq()和gt():gt和eq的区别是gt作用于给定位置之后的元素,eq作用于当前元素
5.3 移动元素
1 什么叫隐式迭代
2 使用insertAfter和insertBefore插入,移动元素,那么注脚的次序就会被颠倒 参见示例,这两个插入都是在div标签之
外,即<div></div>+insertAfter之后
3 $A.appendTo('#id'):将内容插入到指定的元素中,即在div标签里面
$A.append('B'):也是将内容插入到指定的元素中,两者的区别是前者是把A追加到#id中,后者是相反,把B追加到A
中,实际上执行的是appendChild操作,添加为最后一个子结点
4 $a.prependTo($b):将a的内容移动到b标签中
$a.prepend($b) :将b的内容移动到a标签中,相当于appendChild();添加为第一个子节点
5.4 包装元素
1 $a.wrap(<li></li>):将内容a装入标签li中,即在$a的外层添加一个标签,例如可以是div,参见示例
5.5 复制元素
1 $a.clone().$b:将a复制到b处
2 $a.clone(false).$b:只会复制标签元素a里面的文本内容将不会复制
3 5.5.2 1 :使用样式定位元素内容
4 .prependTo()和.prepend()参见5.3
5 $a.find('b'):找到正在处理的元素a的后代元素的好方法,b可以是标签,id,class值
6 $a.html('b'):使用b替换a标签中的所有的内容,不能用于xml文档
7 $a.b.end().appendTo(c):end()是结束所有的进阶,回到最原始的处理元素,a,一般用作将a元素处理一系列操作
后,插入到c的子元素中
8 $a.text() :得到元素a中所有的文本,取出html标签
5.6 DOM操作方法的归纳
1 $('p').empty():删除元素中所有的子节点
2 $a.text('b') :使用文本b替换a元素中的内容
3 $a.remove():删除a标签及其所有的子结点,$a.remove('.class'):删除a标签中类是class的元素及其所有的子结点
第六章 AJAX 让网站与时俱进
6.1 基于请求加载数据
1 $a.load('b'):加载数据,引入html文件片段,b可以是函数,是一个Html文件的ur,a是引入的标签
2 $.each():这个和$a.each()的区别是后者只能迭代和执行jquery对象的函数,前者可以用于迭代任何对象和数组
3 $.getJSON():读取json文件,产生一个回调函数得到Json文件里面的数据,然后使用$.each()来取得输出的内容,只
是有一个问题在文件当中得到的始终不是一个json格式,而是把其当作字符串来处理,就是没有实现书上
面的示例
4 $.getScript('b'):得到调用的b.js文件
5 $.get():用get方式请求装入页面.主要是读取xml文件和向php文件中传递值和读取回调函数
6.2 选择数据格式
1 数据格式共有四种:就是6.1 中的 1 3 4 5具体采用何种方式要符合你的应用
2 应用:
html 片段:是最简单的,在不需要与其他应用程序共享数据的情况下使用
json:在性能和文件的大小上具有优势,易于重用。
javascript:对数是不推荐使用的,优势是可以将很少用到的行为提取到外本文件中去,减少加载的页面的代码量
xml:具有非常强大的可移植性,如果未知远程应用程序的时候,XML可提供很好的互操作性,缺点是过于庞大
6.3 向服务器传递数据
1 执行GET请求,就是在按钮或链接处,调用目标php文件的时候,在url的后面添加上?para参数,然后通过$.get()方法 传递参数给php文件,示例中使用的是$.get()方法,也可以把结果组织成json使用$.getJSON()的方法
2 执行post请求:1)可以与$.get()互换 2)使用$.load()方法简化,因为其默认的传递方式就是post,示例中的.load
()方法没有解决 rerurn false的问题
3 关于form的操作
1) $a.submit():对提交表单的事件进行操作,类似于$a.click()
2) .val():获取input标签中的value的值,如果里面有参数那么就是替换input中的value的值
3) .serialize():将input元素的内容连接成一个请求字符串,示例中还是有些问题
对form的操作还是选用form.js插件
6.4 关注请求
1 $a.ajaxStart():在AJAX开始执行是调用的函数
2 $a.ajaxStop():在AJAX最后一次请求活动结束时调用的函数
3 页面加载缓慢时候的处理,即先显示一个加载信息的图示,还有加载过后的显示信息的效果见示例
6.5 AJAX和事件
1 当再给页面中的h3 标签设置点击高亮的时候,由加载产生的字典标题的标签也是h3,但点击时并不会产生高亮的效果,
这是因为在加载时字典的词条还不是DOM的一部分,因此不会为他们绑定事件处理程序,解决,绑定的元素单独绑定自
己的事件处理函数,也就是说将事件处理函数设置成一个独立的函数,在页面显示和页面加载的内容里面都调用这个函数
就可以了
2 以上说明了如果只是给页面的时间单独增加事件的话,页面加载的内容在相同的情况下是不会执行此事件的。
3 双触发情况,就是有时在点击h3标签的时候会两次触发绑定事件这样就不会有效果产生,具体的解释参见书92页,解决
见4
4 限定事件绑定函数的作用域:$()函数可以接收两个参数,第二个用于限定搜索范围的dom节点,在绑定事件中使用这一
特性,就可以避免多事件绑定问题具体参见示例
5 利用事件冒泡来解决3的问题:就是在他们的父标签中加入绑定事件程序,然后在限制可以使用这个事件的子元素,利用
的是if($(event.target).is('h3')){} 来操作,注意$(event.target)和.is();
6.6 安全限制:没有看
第七章 表格操作
1 tr:odd和tr:even:前者代表第偶数个tr标签,后者代表第奇数个tr标签,可以用来设置具有交替效果的实现,不一定就
是tr标签,其他的任何标签都可以,这样很方面产生交替的效果
2 排序一般的是使用.sort()函数,比较复杂没有做完,包括很多的效果比如分页等等
3 如果tr是不规则的排列的话就要使用a:not([d])了将不规则的a元素的子元素d排除在外,a元素的其他子元素正常应用类
4 三种背景色
1) $a.not('[b]'):a元素中除去子元素b的其他子元素
2) .each(function(index){}):使用each内建的索引,就是遍历所有符合条件的元素,然后给每一个元素都赋予下标索
引
3) 将三种背景色的class写成数组,然后使用index % 3 取模的方式,作为数组的下标,在交替的时候都会采用索引除以
基数取模的方式,来实现效果
5 三行一组的交替背景色
1) 如果不是规则的使用索引,就要自定义一个索引控制标签,来产生效果
2) 同样是使用取模的方式来实现效果
6 行的高亮
1)主要是使用的标签排除,和toggleClass,removeClass,each 有问题效果没有实现,只是第一行出现了效果
7 提示信息
1)鼠标点击的位置成手掌状,只需在.click()之前加上$a.addClass('pointer').click()即可,充分利用.符号式
2) var dd=function(event){} event代表的是事件执行的元素
3)event.pageX:是元素当前x轴的位置,event.pageY是元素当前y轴的位置,xm=event.pageX-5就是代表在鼠标
左边5像素,ym=event.pageY+20,就是代表在鼠标下方20像素,注意在ie和firfox下的兼容问题 ,参见示例,另外一点也很重要,同样是参见示例。
4)$("<div class="tooltip">Click from d echi </div>")appendTo('body'); 可以使用这个语句直接把内容添加到body的最后面
5).hover(over,our):这个函数是鼠标的事件,前一个是鼠标悬停在对象上面执行的函数,后一个函数是鼠标移出这个对
象执行的函数
6).mousemove(function):当鼠标移动时触发的事件,function代表的是触发的函数,执行的效果就是当鼠标移动的时
候,效果也是随之移动
7)a.call('object,para'):a可以是函数对象也可以是类对象,此方法是把a赋予对象object,如果a是函数对象,那么在
类object中执行函数a,如果a是类对象,那么a中所有的方法在object中都是可以调用的,就相当于object是类a的继
承,para是a中需要用到的参数