JQuery——纵览小结

【前言】

近来几天看了几集JQuery视频，视频中通过讲一些案例来间接介绍了JQuery的相关知识和技术，之前也写过其中的个别例子，今天就把看完的视频进行宏观的小结一下。详情请见下文！

【正文】

一、概图

JQuery——纵览小结

二、解图

JQuery视频共7集，讲解了6个实例（用户名校验、可编辑表格、菜单效果、标签页效果、级联下拉框、窗口效果），例子基本上也都有一个简单的套路。

套路——【先用HTML中的标签来定义页面内容；然后用CSS调整表格样式；最后用JQuery设计页面行为，在JQuery中先找到要做相应处理的DOM节点，触发节点的事件，触发过程中的可以用CSS方法在JQuery中修改节点属性。】

下面就简单说一下每个例子！

1、用户名校验

①HTML使用的标签：

②JQuery使用的方法：

◆val()方法：获得节点的value属性值

◆html()方法：设定某个节点中的HTML内容

◆removeClass()方法:移除元素的class定义

◆addClass()方法:添加元素的class定义

2、可编辑表格

①HTML使用的标签：

②JQuery使用的方法：

◆click()方法：响应鼠标点击事件

◆keyup()方法：响应键盘弹起事件

◆trigger()方法：触发被选元素的指定事件类型

◆appendTo()方法：将一个节点追加到另一个节点所有子节点的后面

3、菜单效果

①HTML使用的标签：

②JQuery使用的方法：

◆indexOf()方法:可返回某个指定的字符串值在字符串中首次出现的位置。

◆slideToggle()方法:通过使用滑动效果（高度变化）来切换元素的可见状态。

4、标签页效果

①HTML使用的标签：

②JQuery使用的事件方法：

◆mouseover()事件:鼠标进入事件，即当鼠标指针位于元素上方时，发生此事件

◆mouseout()事件:鼠标离开事件，即当鼠标指针从元素是移开时，发生此事件

5、级联下拉框

①HTML使用的标签：

②JQuery使用的方法：

◆children()方法:返回被选元素的所有直接子元素

◆parent()方法:获得当前匹配元素集合中每个元素的父元素

◆next()方法：获得一个节点的下一个兄弟节点

◆attr()方法:设置或获取某一个及节点的属性值

◆animate()方法：实现任意的动画效果，可以控制某个CSS属性在某个时间内进行变化，达到动画的效果

◆data()方法：用于缓存数据。缓存可以提高系统的运行效率，降低服务器端的负荷

6、窗口效果

①HTML使用的标签：

注：此实例的窗口效果就是通过div标签以及CSS代码呈现出来的，窗口的标题栏和内容区域分别是一个div标签

②JQuery使用的事件、方法、函数：

◆show()方法:显示

◆hide()方法:隐藏

◆slideUp()方法:通过使用滑动效果，隐藏备选元素，如果已经显示出来的话

◆fadeOut()方法:使用淡出效果来隐藏被选元素，假如该元素是隐藏的

◆dequeue()方法:终止一个自定义的队列函数

◆is()方法:判断一个对象是否满足is方法参数中的JQuery选择器

◆scroll事件:当用户滚动指定的元素时，发生此事件

◆resize事件：当调整浏览器窗口的大小时，发生此事件

◆setTimeout函数：用来指定某个函数或某段代码，在多少毫秒之后执行。即延迟执行某些代码，对应的可用clearTimeout清除设定的延迟操作

JQuery——纵览小结

相关推荐