jQuery基础

最新推荐文章于 2023-06-11 13:49:24 发布

suetmuiwong

最新推荐文章于 2023-06-11 13:49:24 发布

阅读量408

点赞数

分类专栏： JQuery

本文链接：https://blog.youkuaiyun.com/suetmuiwong/article/details/51158873

版权

JQuery 专栏收录该内容

0 篇文章

订阅专栏

一、jQuery开发入门

1、官网：http://jquery.com

2、$(document).ready((function)(){ //程序段 } ) 也可以写成$(function(){ }) 等于js代码的 window.οnlοad=function() { //程序段}

二、JQuery选择器

1、基本选择器：层次选择器；过滤选择器：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤器；表单选择器

2、基本选择器：ID选择器：#id、元素选择器：element、类的选择器：.class、匹配所有的元素：*、将每一个选择器匹配到的元素合并后一起返回：selectorI,selectorN

3、层次选择器：主要的层次关系包括后代、父子、相邻、兄弟关系。根据祖先元素匹配所有的后代元素：ancestor descendant、根据父元素匹配所有的子元素：parent>child、匹配所有紧接在prev元素后的相邻元素：prev+next、匹配prev元素之后的所有兄弟元素：prev~siblings

4、简单过滤选择器：书写时都以（：）开头。:first 、:last、:not(selector)、:even、:odd、:eq(index)、:gt(index)、:lt(index)、:header、:animated

5、内容过滤选择器：:contains(text)、:empty、:has(selector)、:parent

6、可见性过滤选择器：:hidden、:visible

7、属性过滤选择器：以“【”号开头，以“】”号结束。[attribute]、[attribute=value]、[attribute!=value]、[attribute^=value]、[attribute$=value]、[attribute*=value]、[selector1][selector2][selectorN]

8、子元素过滤选择器：:nth-child(eq|even|odd|index)、:first-child、:last-chlid、:only-chlid

9、表单对象属性过滤选择器：:enabled、:disabled、:checked、:selected

10、表单选择器：:input、:text、:password、:radio、:checkbox、:submit、:image、:reset、:button、file

三、JQuery操作DOM

1、元素属性操作：获取元素的属性：attr(key,value)、attr(key,function(index))；删除元素：removeAttr(name)；元素内容操作：html()、html(val)、text()、text(val)；元素样式操作：直接设置元素样式值：css(name,value)；添加CS类别：addClass(class)；类别切换：toggleClass(class)；删除类别：removeClass( [class] )。

2、创建节点元素：$(html)。

3、插入节点：内部插入节点方法：append(content)、append(function(index,html))、appendTo(content)、prepend(content)、prepend(function(index,html))、prependTo(content)、外部插入节点方法：after(content)、after(function)、before(content)、before(function)、insertAfter(content)、insertBefore(content)。

4、复制节点：clone()、clone(true)。

5、替换节点：replaceWith(content)、replaceAll(selector)。

6、包囊节点：wrap(html/elem/fn)、unwrap()、wrapAll(html/elem)、wrapInner(html/elem/fn)。

7、遍历元素：each(callback)：其中参数callback是一个function函数，该函数还可以接受一个形参index，此形参为遍历元素的序号（从0开始）；如果需要访问元素中的属性，可以借助形参index，配合this关键字来实现元素属性的设置或获取；each(function(index){ })。

8、删除元素：remove([exprl])、empty()。

四、JQuery中的事件与应用

1、事件机制：使用stopPropagation()方法阻止事件的冒泡过程，也可以通过语句return false实现停止事件的冒泡过程。

2、页面载入事件：ready()方法的工作原理：几种相同写法：$(docuement).ready(function(){ //代码部分})；$(function() { //代码部分 }))

3、绑定事件：bind(type,[data],fn)

4、切换事件：hover(over,out)方法：hover(function(){ //执行代码一 },function(){ //执行代码二 })、toggle()方法：每次单击后依次调用函数。

5、移除事件：unbind()方法：移除元素绑定的事件：unbind([type],[fn])

6、其他事件：方法one()：为所选的元素绑定一个仅触发一次的处理函数，语法：one(type,[data],fn)；方法trigger()：在所选择的元素上触发指定类型的事件，语法：trigger(type,[data])

7、应用：1、表单应用：文本框中的事件应用、下拉列表框中的事件应用。2、列表应用。3、网页选项卡的应用

五、JQuery的动画与特效

1、显示与隐藏：show()方法与hide()方法，可以同时改变元素的多个属性宽度、高度、透明度；动画效果的show()与hide()方法：show(speed,[callback])、hide(speed,[callback])：其中speed值可以选：slow、normal、fast；toggle()方法：toggle()、toggle(switch)、toggle(speed,[callback])

2、滑动：（1、slideDown()与slideUp()方法：slideDown()方法的格式；slideDown()方法的格式：slideDown(speed,[callback])、slideUp()方法的格式：slideUp(speed,[callback])。2、slideToggle()方法：可以根据当前情况的显示状态自动进行切换：slideDown(speed,[callback])）

3、淡入淡出：（1、fadeIn()与fadeOut()方法：仅改变元素的透明度：fadeIn()方法的格式：fadeIN(speed,[callback])；fadeOut()方法的格式：fadeOut(speed,[callback])。2、fadeTo()方法：改变透明度，宽度与高度都不发生改变：将透明度指定到某一个值，调用格式：fadeTo(speed,opacity,[callback])。）

4、自定义动画：（1、简单的动画：animate()：语法格式：animate(params,[duration],[easing,[callback]])：参数params表示用于制作动画效果的属性样式和值的集合，[duration]表示三种默认的速度：slow、normal、fast或自定义的数字、[easing]为动画插件使用用于控制动画的表现效果：linear和swing。2、移动位置的动画：eg：animate({ left:"20px" top:"70px" },3000)。3、列队中的动画。4、动画停止和延时：停止：stop()方法：格式：stop([clearQueue],[gotoEnd])、延时：delay()方法：格式：delay(duration,[queueName])）

5、动画效果浏览相册中的图片

六、Ajax在JQuery中的应用

1、加载异步数据（1、JQuery中的load()方法：调用格式为：load(url,[data],[callback]).2、JQuery中的全局函数getJSON()：调用格式为：$.getJSON(url,[data],[callback])。3、JQuery中的全局函数getScript()：调用格式：$.getSript(url,[callback])。4、JQuery中异步加载XML文档：调用格式为：$.get(url,[data],[callback],[type])。）

2、请求服务器数据（1、$.get()请求数据（不太适合传递数据量较大的数据，同时，请求的历史信息会保存在浏览器缓存中。）：客户端向服务器传递参数时，使用的格式是{key0:value0,key1:value1,……}，如果参数是中文格式，必须能通过encodeURL()进行转码。2、$.post()请求数据：调用格式：$.post{url,[data],[callback],[type]}。3、serialize()序列化表单：调用的语法格式：serialize()：该方法的功能是将所选的DOM元素转换成能随AJAX传递的字符串）

3、$ajax()方法（1、$.ajax()的基本概念：调用语法格式：$.ajax([options])。2、$.ajaxSetup()设置全局Ajax：调用格式：$.ajaxSetup([options])）

4、Ajax中的全局事件（1、ajaxStart与ajaxStop全局事件。2、ajaxComplete(callback)与ajaxSend(callback)。3、ajaxError(callback)与ajaxSuceess(callback)）

5、综合案例分析——用Ajax实现新闻点评即时更新。

七、JQuery常用插件

1、JQuery插件概述：1、引入：<script src="jscript/jquery-1.4.2.js"></script> <script src="jscript/jquery.form.js"></script>。

2、插件的调用：$(function() { &("form").ajaxSubmit();})

2、验证插件validate：由于该验证插件默认的提示信息时英文版的，为了汉化验证提示信息，需要在页面部分引入一个中文验证信息库：<script src="ja-7-1/jquery.validate.message_cn.js"></script>；调用：$(function() { $("#frmV").validate { { //表单验证时执行的代码}}})

3、表单插件form：1、formSerialize()：用于格式化表单中有用的数据，并将其自动整理成适合Ajax异步请求的URL地址格式。2、clearForm()：清除表单中所有输入值的内容。3、restTorm()：重置表单中所有的字段内容。

4、Cookie插件cookie

5、搜索插件AutoComplete：$(文本框元素).autocomplete(urlOrData,[option])

6、图片灯箱插件notesforlightbox：$(需要操作的事件).lightBox()

7、右键菜单插件contextmenu

8、图片放大镜插件jqzoom

9、自定义JQuery插件（插件的种类：封装方法插件、封闭函数插件、选择器插件）

10、综合案例分析——使用uploadify插件实现文件上传功能。

八、JQuery UI插件

1、认识JQuery UI：交互、微件、效果或动画

2、JQuery UI交互性插件（1、拖曳插件：draggable：调用方法：draggable(options)。2、放置（存放）插件：droppable：调用代码：droppable(option)。3、排序插件：sortable：调用格式：sortable(options)）

3、JQuery UI微型插件（1、折叠面板插件：accordion：调用格式：accordion(options)。2、日历：datepicker：调用格式：$(".selector).datepicker(options)。3、选项卡插件：tabs：调用格式：tabs(options)。4、对话框插件：dialog：调用格式：$(".selector".dialog(options))）

4、综合案例分析——使用JQuery UI插件以拖动方式管理相册。

九、JQuery实用工具函数

1、utilities函数：调用格式：$.函数名() 或JQuery.函数()

2、工具函数的分类（1、流量器的检测：浏览器名称或版本信息：$.browser；盒子模型：是否为标准的W3C盒子模型，其调用方式：$.support.boxModel或$.support.boxModel。2、数组和对象的操作：遍历数组：$.esch()：调用格式：$.each(obj,fn(paral,para2))；遍历对象；数据筛选：JQuery.grep()：调用格式：$.grep(array,funcition(elementOfArray,indexInArray,[invert]))；数据变更：$.map()：调用格式：$.map(array,callback(elementOfArray,indexInArray))；数据搜索：$.inArrary()：调用格式：$.inArray(value,array)。3、字符串操作：$.trim()：删除掉字符中左右两边的空格符：调用格式：$.trim(str)。4、测试操作：$.isArray(abj)、$.isFunction(obj)、$.isEmptyObject(obj)、$.isPlainObject(obj)、$.contains(container,contained)。5、URL操作：$.param()：调用的格式：$.param(obj,[traditional])）

3、工具函数的扩展：$.extend()

4、其他工具函数——$.proxy()：调用格式：$.proxy(function,scope)

5、综合案例分析——使用jquery扩展工具函数实现对字符串指定类型的检测。

十、JQuery性能优化与最佳实践

1、优化选择器执行的速度（1、优先使用ID与标记选择器。2、使用JQuery对象缓存。3、给选择器一个上下文：$(expression,[context])。）

2、处理选择器中的不规范元素标志（1、选择器中含有特殊符号：在特殊字符前添加转义符“\\”。2、选择器中含有空格符号。）

3、优化事件中的冒泡现象：stopProgation()方法和target()

4、使用data()方法缓存数据：1、根据元素中的名称定义或返回存储的数据，调用格式：data([name])。2、根据元素中的名称在元素上存储或设置数据，调用格式：data(name,value)。3、移除元素中存放的数据，调用格式：removeData(name)。

5、解决JQuery库与其他库的冲突：1、jQuery在其他库后导入，可以通过函数jQuery.noConfict()，将变量"$"的使用权过渡给需要使用的其他JS库，其调用格式：jQuery.noConflict()。2、jQuery在其他库前导入。

6、使用子查询优化选择器性能：先查找最外层的元素，保存起来，在查找更近的一层元素，进行保存，最后，在最接近的外层中，使用find()方法，查找需要的元素。

7、减少对DOM元素直接操作。

8、正确区分DOM对象与JQuery对象（1、DOM对象与JQuery对象的定义。2、DOM对象与JQuery对象的类型转换：DOM转换成JQuery：通过JQuery方法$()进行包装、JQuery转换成DOM 通过[index]与get(index)方法。）