Jquery实战视频教程学习

概述：

JQuery是一个兼容多浏览器的javascript库，本次学习的内容主要有概念、环境及入门实例，可以编辑的表格，横向纵向菜单，标签页效果，级联下拉框，窗口效果。通过这些知识的学习对Jquery有了系统的了解。

学习JQuery之前你会想，JQuery是什么，上面已经提到，我为什么要学习它？现在的水平适不适合学习它？什么情况下学习JQuery呢？我可以学到什么等一系列问题，小编来告诉你。

适合：

1、准备做AJAX前台开发

2、熟悉Java,.Net,PHP,Python,Ruby... ...

3、熟悉Javascript,了解AJAX，想提高

4、网页设计师，熟悉CSS

可以学到：

1、Jquery的API使用

2、网上一些小实例的实现方法

3、一些HTML,CSS,Javascript的小知识

使用者：

如今都是谁在使用JQuery呢？

也就是说，想跟上潮流，JQuery是你必学的材料之一。

特点

切入正题，我们了解一下JQuery的特点。

1、Write less，Do more

2、JQuery is designed to change the way that you write JavaScript

3、支持各种主流浏览器，包括IE6以上，FireFox2以上，Safri2以上和Opera9以上的版本。

4、以强大的CSS选择器为基础，几乎所有的操作都先使用选择器查找DOM对象，然后对其进行各种操作。

5、屏蔽浏览器差异，对DOM的操作提供了方便的扩展，易用的事件处理API和动画API。

6、强大的插件机制。

7、社区活跃，文档非常齐全。全部配有示例。学习容易，易用性很高。

分享知识

分享学到的JQuery及其他的开发知识。

概述、环境及小实例：

1、HTML负责页面内容，CSS负责页面样式，Javascript负责页面行为

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

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

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

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

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

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

8、可以通过$()方法返回的jquery对象上执行各种Jquery的方法来获取数据，定义事件，执行操作。

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，可以解决中文乱码问题。

可以编辑的表格：

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键

横向纵向菜单：

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

2、可以使用background-image来指定一个元素的背景图，如果背景图比元素的实际大小要小，那么背景图会自动生成在横向和纵向上重复显示，直到填满挣个区域。

3、可以使用background-repeat来控制背景图的重复填充方式

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

5、text-decoration属性值为none时，可以取消文字上的下划线

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

7、background-image的值为none表示没有背景图

8、background-repeat的值为no-repeat时，背景图不会在所在的区域中重复显示。

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

10、display的值为none可以用于隐藏元素。

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

12、.show,hide方法可以用于显示或隐藏元素，没有参数时的效果和修改css的display属性效果一样。参数可以是单位为毫秒的数字，或者是'show','normal','fast'这三个文字，都可以来控制完成显示或隐藏需要的时间。注意这时动画效果时靠不断改变元素的宽度和高度来实现的。

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

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

15、slideToggle和toggle达到的效果类似

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

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

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

标签页效果：

1、一组标签用一个ul来管理，每一个标签是ul中的一个li；标签下面的内容就是用div来管理

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，例如$("div: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、div元素居中显示的方法：给div设定宽度，然后margin-left和margin-right的值都为anto。简写方法是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方法可以和服务器端地址，第二个参数是发送给服务器端的数据，参数是Javascript的对象，采用名值对的方式表示，第三个参数是回调方法，第四个参数指示服务器端返回的数据类型，JQuery会根据这个参数帮助我们进行转换。get方法只有第二个参数不同，其他几个参数用法相同。

12、Javascript中的简单对象定义方式是{key1: value1, key2: value2}
13、JSON的数据格式其实就是Javascript中的一个对象或数据定义的文本格式内容，比如{key1: value1, key2:[1,2,3]}或[1,2,{key2: value2}]
14、可以直接$(“<option></option>”)的方法来建立下拉框中的选项，然后用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事件，本例中用于捕捉图片加载完成的事件

窗口效果：

1、页面中模拟的窗口可以通过html的div标签来实现，窗口中的标题栏和内容区域可以再分别用一个div来表示
2、让一组div看起来是窗口的样式，有很多种方法，比如可以设定整个窗口使用一种背景色，然后内容区域使用另一种背景色，并且给窗口设置一定的padding值（或者是内容区域设置边框），已达到内容区域和标题栏以后窗口外边的对比，从而看起来是一个窗口的效果。
3、正确理解float的效果，实际上会影响到后面的一个元素和float的元素之间的显示效果，因此这个例子中如果html代码中img位于标题栏的最后时，float: right导致图片跑到了内容区域的最右边。只有在html里面将img放到标题栏文字的前面，这个时候float: right才会使图片刚好位于标题栏的最右边
4、overflow属性值为auto时，当内容区域很多超过了定义的高度或宽度时，就会显示滚动条。
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的学习很顺利，印象最深的是它与JS相似之处。因为之前学过，所以非常顺手。HTML负责页面内容，CSS负责页面样式，Javascript负责页面行为。此视频的学习积累了很多的属性和方法，以后还要在实战中多多应用才是。BS这一块的内容，一定要快速得了解地看完，多做项目，在实践中深入学习。很期待自己能够实习的那一天。