登录  /  注册
首页 > web前端 > js教程 > 正文

JQuery实战教程源码免费下载

发布: 2017-08-14 15:06:54
原创
2390人浏览过

下载地址:http://www.php.cn/xiazai/code/1765

第一讲:

本节学到的JQuery及其他开发知识:

1负责页面内容,CSS负责页面样式,Javascript负责页面行为

2.HTML中应该有DOCTYPE来告知浏览器的渲染显示方式

3.可以先定义p或span节点用于以后显示服务器返回数据。

4.border属性可以控制页面元素的边框

5.background-***可以控制背景图,以及背景图的位置,重复显示的方式

6.可以通过#idname或.classname的方式来个制定的html节点定义样式

7.可以通过$(document).ready(function(){})的方式来定义页面装载完成时,需要执行的方法。

8.可以通过$()方法来获得页面的指定节点,参数是某种css的选择器

9.可以在$()方法返回的jquery对象上执行各种Jquery的方法来获取数据,定义事件,执行操作。

10.val()方法可以获得节点的value属性值

11.html()方法可以设定某个节点中的html内容

12.click()方法可以响应鼠标点击事件

13.keyup()方法可以响应键盘弹起的事件。

14.$.get()方法可以和服务器端进行get方式的交互,注册的callback方法会再数据回来的时候被调用,这个方法会接收到代表服务器端返回数据的一个纯文本的参数

15.addClass() removeClass()方法可以给某个节点添加或删除一个class

16.发送给服务器端的数据在javascript中做两次encodeURI,然后在服务器端的代码中按UTF-8的方式做一次URLDecode,可以解决中文乱码问题。

相关专题推荐:《jquery实战视频

第二讲

本节学到的JQuery及其他开发知识:

1.table中可以包含thead和tbody

2.表头的内容可以放到th中

3.table{}这种写法称作标签选择器,可以对整个页面所有table产生影响。

4.table td{}这种写法表示的是table中包含的所有td。

5.可以通过border-collapse: collapse这种方式来使表格中的单元格的边框合并。

6.当th上由背景色时,这个th属于的tr上定义的背景色会无效。

7.$(function(){})是$(document).ready(function(){})的简化写法

8.$(“tbody tr”)可以返回tbody中的所有tr节点

9.$(“tbody tr:even”)可以返回tbody中所有索引值是偶数的tr节点

10.css方法可以用于设定或获取节点的css属性,参数名是css的属性名。

11.JQuery的对象内容包含着选择器对应的DOM节点,以数组形式保存

12.get方法可以获得JQuery对象中包含的某一个DOM节点

13.function中的this代表执行这个function的对象

14.$()方法的参数是一个DOM对象时,这个方法相当于把DOM对象转换成JQuery对象。

15.children方法可以获得某个节点的子节点,可以制定参数来限制子节点的内容。

16.如果选择器返回的JQuery对象中包含多个DOM节点,在这个对象上注册类似click这样的事件时,所有DOM节点都会用于事件

17.html方法可以设置或获取节点的HTML内容

18.val方法可以获取或设置节点的value值

19.$()方法的参数如果是一段正确的HTML文本,则可以创建一个DOM节点,并包装成JQuery对象

20.JQuery大部分方法都会返回执行这个方法的JQuery对象,因此可以采用链式方法的写法来编写给予JQuery的代码。

21.width方法可以设置或获取某个节点的宽度

22.appendTo方法可以将一个节点追加到另一个节点所有子节点的后面

23.阻止事件传递可以让当前节点的事件返回false

24.trigger方法可以触发某个javascript的事件发生。

25.JQuery中某个事件方法的参数function上可以定义一个event的参数,JQuery会屏蔽浏览器的event差异,传给我们一个可用的event对象

26.JQuery的event对象上有一个which的属性可以获得键盘按键的键值

27.13表示回车键,27表示ESC键

第三讲

本节学到的JQuery及其他开发知识:

1.页面中的菜单项可以通过嵌套的ul和li来表示

2.菜单最外层为ul,一层每个主菜单放在一个li中,如果有子菜单,在这个主菜单的li中建立新的ul,再依次嵌套即可构建多层的菜单。

3.浏览器中ul和li元素默认情况下文字前都有圆点标识符,li元素会有缩进。Opera浏览器比较特殊,li的标识符和其他浏览器不同。

4.list-style属性值为none时,可以清除ul和li前面的小圆点

5.清除子菜单的缩进值,需要padding和margin都为0,其中IE6和IE7只有margin也为0的时候才可以清除缩进值

6.可以使用background-image来指定一个元素的背景图,如果背景图比元素的实际大小要小,那么背景图会自动在横向和纵向上重复显示,知道填满整个区域

7.可以使用bakcground-repeat来控制背景图的重复填充方式。

8.如果一个元素上同时定义了背景图和背景色,那么有背景图的地方是不会显示背景色的

9.text-decoration属性值为none时,可以取消文字上的下划线

10.background-position可以控制背景图的位置,属性值既可以用数值,也可以用center,left,top这些值来控制横向和纵向的位置。这个属性的两个值,第一个对应横向,第二个对应纵向

11.background-image的值为none表示没有背景图

12.background-repeat的值为no-repeat时,背景图不会在所在的区域中重复显示。

13.IE6以外的其他浏览器可以通过设定display的值为block来让a元素充满所在的区域。对于IE6,则需要设定display为inline-block,同时设定a的宽度。

14.display的值为none可以用于隐藏元素。

15. .main a和.main > a的不同之处,前者选择使用了.main的这个class的元素内部所有的a节点,后者只选择.main的子节点中的a节点

16.show,hide方法可以用于显示或隐藏元素,没有参数时的效果和修改css的display属性效果一样。参数可以是单位为毫秒的数字,或者是’slow’,’normal’,’fast’这三个文字,

都可以来控制完成显示或隐藏需要的时间。注意这时动画效果时靠不断改变元素的宽度和高度来实现的。

17.toggle方法更为强大,可以省去我们判断元素是显示还是隐藏的状态,直接让显示的元素隐藏起来,隐藏的元素显示出来。参数使用方法和show,hide相同。

18.slideDown,slideUp可以实现向下或向上卷动的效果,实际上是通过指定时间内修改元素的高度来实现动画效果。需要注意的是这两个方法参数为空的情况和show,hide不同。

19.slideToggle和toggle达到的效果类似

20.DOCTYPE对于JQuery中的动画是有影响的。没有DOCTYPE定义时,在IE中,JQuery的动画会出现闪烁的糟糕效果。

21.float的值是left,可以使原本各自位于一行的元素全部在一行中向左浮动。

22.可以给多个选择器定义同样的样式,选择器之间用,分割。同样对于JQuery的$方法,也可以传入过个选择器。

第四讲

本节学到的JQuery及其他开发知识:

1.一组标签用一个ul来管理,每一个标签是ul中的一个li;标签下面的内容就是用p来管理

2.跟在浮动元素(float)之后的元素会围绕着浮动元素,如果不希望有这种围绕,可以在浮动元素之后的那个元素上定义clear属性,

3.实现当前标签和内容区域的融合,可以通过使用相同的背景色,外加当前标签使用同颜色的边框来实现。

4.JQuery中的mouseover,mouseout方法对应标准javascript的onmouseover,onmouseout事件,可以处理鼠标进入和离开的事件。

5.在一个包含了多个元素的JQuery对象上执行each方法,可以注册给each方法的那个function的内容被每一个元素执行。同时这个

  function还可以接收到一个参数,表示这个元素的索引值。 JQuery中的很多方法也用到了each

6.eq方法可以根据索引值只得到JQuery对象中包含的多个元素中的某一个元素,并仍然返回元素对应的新JQuery对象。

7.选择器中使用eq,例如$(“p:eq(1)”)

8.addClass和removeClass方法用于添加和移除元素的class定义。

9.Javascript中的setTimeout方法可以延时执行某些代码,对应的clearTimeout可以清除设定的延时操作。

10.做一个AJAX应用的时候,可以考虑现在FireFox上调试通过,然后再到其他浏览器中进行检查,并修正可能的兼容性问题。

11.cursor属性可以控制元素上的鼠标样式,pointer的属性值表示手型样式,也就是我们常见的链接鼠标样式

12.position属性可以控制元素定位的方式,值为relative时表示相对原来的位置进行定位。可以通过设定top,left,bottom,right的值来控制元素相对原来的位置进行移动

13.z-index可以控制元素在页面中的层高,值越大就会在页面的层越靠前,也就会覆盖住一些z-index值较低的元素。只有position的值为relative或absolute的元素,z-index才会生效。

14.JQuery中的load方法十分强大,可以把一个指定的静态,动态页面或服务器端程序输出的数据装入到执行load方法的JQuery对象包装着的元素中。

15.load方法还支持部分装载,在装入的页面地址后面加空格,然后使用选择器,就可以把页面中符合选择器的部分装入进来。

16.被load的页面一定要是UTF-8编码的,否则装入后中文会出现乱码。

17.bind可以用于给指定的节点绑定Javascript的事件或JQuery中定义的事件。对于JQuery中没有直接提供注册方法的事件,可以用这种方式注册。方法的第二个参数可以是事件执行的方法定义。

18.ajaxStart,ajaxStop对应ajax交互开始前和结束后的事件,给某一个节点注册了这两个事件后,当前页面的ajax交互开始前和结束后,就会执行指定的方法。

第五讲

1.img标签的alt属性要写上,在图片尚未装载进来或图片不存在时,这个属性的文字信息会显示出来

2.select表示下拉框,下拉框的每一项都是一个option,option开始结尾标签中的内容会显示在页面上,value属性的值则是用于在JQuery中用val方法获取并发送给服务器的。

定义了selected的属性值为selected时,表示当前option被选中

3.p元素居中显示的方法:给p设定宽度,然后margin-left和margin-right的值都为auto。简写方法是margin: 0 auto;

4.html的p标签表示一个段落的内容,其中的内容会独占一行或多行,后面的内容会另起一行显示

5.为了让p中文字和图片居中,可以使用text-align属性,属性值为center。p标签默认有margin-top和margin-bottom的值,需要的话可以通过css清除

6.visibility的属性值为hidden时,元素隐藏,但是和display为none不同的时,在页面中任然占据一定空间,只是不显示

7.多个选择器如果有相同的属性值,可以放在一起定义,选择器之间用逗号分割

8.change方法对应标准Javascript中的onchange事件,可以处理下拉框内容变化的事件

9.parent方法可以获得一个节点的父节点

10.next方法可以获得一个节点的下一个兄弟节点,对应的previous方法可以获得一个节点的上一个兄弟节点

11.$.post方法可以和服务器端发起post的异步请求。第一个参数是请求的服务器端地址,第二个参数是发送给服务器端的数据,参数是Javascript的对象,采

用名值对的方式表示,第三个参数是回调方法,第四个参数指示服务器端返回的数据类型,JQuery会根据这个参数帮我们进行转换。get方法只有第二个参数不同,其他几个参数用法相同

12.Javascript中的简单对象定义方式是{key1: value1, key2: value2}

13.JSON的数据格式其实就是Javascript中的一个对象或数据定义的文本格式内容,比如{key1: value1, key2: [1,2,3]}或[1,2,{key2: value2}]

14.可以直接$(“”)的方法来建立下拉框中的选项,然后用appendTo这样的方法加入到下拉框中

15.attr方法可以设置或获取某一个节点的属性值

16.ajaxStart在每一个JQuery发出的ajax请求开始前执行,ajaxStop在JQuery队列中所有的ajax请求结束后执行,ajaxComplete在每一个JQuery发出的ajax请求结束后执行

17.fadeOut和fadeIn可以实现淡出淡入的效果,参数内容和slideUp,slideDown方法类似。

18.animate方法可以实现任意的动画效果,可以控制某个css属性在某个时间内进行变化,从而达到动画的效果

19.opacity可以改变元素的透明度,IE中使用过滤器实现,100表示完全显示,0表示完全透明,非IE浏览器使用opacity属性,1表示完全显示,0表示透明。JQuery在animate方法

中屏蔽了浏览器差异,直接使用opacity就可以达到淡入淡出的效果。

20.data方法可以用于缓存数据。缓存可以提高系统的运行效率,降低服务器端的负荷

21.可以使用Javascript中的Image对象来预装载图片,这样可以知道图片何时装载完成,以便给出一些图片装载的提示信息。

22.load方法可以对应Javascript中的onload事件,本例中用于捕捉图片加载完成的事件

第六讲

本节学到的JQuery及其他开发知识:

1.页面中模拟的窗口可以通过html的p标签来实现,窗口中的标题栏和内容区域可以再分别用一个p来表示

2.让一组p看起来是窗口的样式,有很多种方法,比如可以设定整个窗口使用一种背景色,然后内容区域使用另一种背景色,并且

给窗口设置一定的padding值(或者是内容区域设置边框),已达到内容区域和标题栏以后窗口外边的对比,从而看起来是一个窗口的效果。

3.正确理解float的效果,实际上会影响到后面的一个元素和float的元素之间的显示效果,因此这个例子中如果html代码中img位于标题栏的最后时,float: right导致图片跑到了内容区

域的最右边。只有在html里面将img放到标题栏文字的前面,这个时候float: right才会使图片刚好位于标题栏的最右边

4.overflow属性值为auto时,当内容区域很多超过了定义的高度或宽度时,就会显示滚动条。

本节学到的JQuery及其他开发知识:

5.position属性值为absolute时,元素将在页面中绝对定位,默认情况是相对页面的左上角进行定位。如果祖先节点中有position: relative的定义,则相对这个祖先节点的左上角进行定位

6.浏览器可视区域的宽和高可以通过$(window).width()和$(window).height()的方式来获得

7.浏览器滚动条的左边界和上边界可以通过$(window).scrollLeft()和$(window).scrollTop()来获得

8.窗口定位到屏幕可视区域的正中间,需要用窗口定位到屏幕可视区域的正中间,需要用屏幕可视区域的宽减去窗口的宽,然后除2,再加上滚动条的左边界值,才能获得窗口需

要的左边界值;上边界值也是同理的方法获得。

9.插件的编写方法:$.fn.myplugin =  function(){//mycode},方法中的this表示的是执行这个方法的jquery对象,注意方法应该在最后return this,以保证其他jquery方法可以级联操作。

10. instanceof可以用于判断一个变量是不是一个某个js类的实例,比如判断是不是一个Object,用法obj instanceof Object

11. typeof可以用于判断一个变量的数据类型,比如typeof str == “string”

12.height()和width()方法获得是元素本身的高和宽,innerHeight()和innerWidth()获得是包括了padding的高和宽,outerHeight()和outerWidth()获得是包括了border和padding的

高和宽,outerHeight(true)和outerWidth(true)获得是包括maring,border和padding的高和宽

13.scroll可以用于注册浏览器或某一个节点的滚动条滚动所需要执行的操作。

14.resize可以用于注册浏览器大小改变时所需要执行的操作。

15.jquery提供的事件操作在注册的时候是增量的,比如说我有两段代码都是$(window).scroll(function(){}),第二段的function内容不会覆盖到第一段,而是在scroll时,两段代码都被执行

16.animate方法可以对left,top值进行一定时间内的变化,达到动画的效果。

17.dequeue方法可以从动画队列的开头移除一个动画效果,并立即执行它。这样可以保证队列后面的动画不用等待开头的动画,也能执行。

18.is方法可以用来判断一个对象是否满足is方法参数中的jquery选择器

19. :visible选择器可以用于获取页面中的可见元素

20.浏览器间的差异导致在document.ready中中的代码获得浏览器可视区域宽高以及滚动条left,top的值不一定都是正确的,因此我们需要保证在这个方法完成之后再来获得这些值。

21.$.browser可以用于判断浏览器的类型,判断的方法可以是$.browser.msie == true,还可以使用的值包括$.browser.opera$.browser.safari $.browser.mozilla

22.$.browser.version可以判断浏览器的版本号,例如$.browser.version.indexOf(“8”)

以上就是JQuery实战教程源码免费下载的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号