10分钟带你jQuery入门
沉沙 2018-06-22 来源 : 阅读 1084 评论 0

摘要:本篇教程对jQuery知识体系进行了细致的梳理,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。

1. 环境搭建

 

下载jQuery文件库

在jQuery的官方网站(//jquery.com)中。

 

 2. jQuery 基础选择器

 

2-1 #id 选择器         


2-2 element 选择器


2-3 .class 选择器


2-4 * 选择器


2-5 sele1,sele2,seleN分组选择器


2-6 ance desc选择器


2-7 parent > child选择器


2-8 prev + next选择器


2-9 prev ~ siblings选择器

 

使用示范: $('#id')、$('.class')

 

3.  jQuery过滤性选择器

 

3-1 :first过滤选择器


3-2 :eq(index)过滤选择器


3-3 :contains(text)过滤选择器


3-4 :has(selector)过滤选择器


3-5 :hidden过滤选择器


3-6 :visible过滤选择器


3-7 [attribute=value]属性选择器


3-8 [attribute!=value]属性选择器


3-9 [attribute*=value]属性选择器


3-10 :first-child子元素过滤选择器


3-11 :last-child子元素过滤选择器


4.  jQuery表单选择器


4-1 :input表单选择器


4-2 :text表单文本选择器


4-3 :password表单密码选择器


4-4 :radio单选按钮选择器


4-5 :checkbox复选框选择器


4-6 :submit提交按钮选择器


4-7 :image图像域选择器


4-8 :button表单按钮选择器


4-9 :checked选中状态选择器


4-10 :selected选中状态选择器


5.  jQuery 操作DOM元素


5-1 使用attr()方法控制元素的属性


5-2 操作元素的内容


5-3 操作元素的样式


5-4 移除属性和样式


5-5 使用append()方法向元素内追加内容


5-6 使用appendTo()方法向被选元素内插入内容


5-7 使用before()和after()在元素前后插入内容


5-8 使用clone()方法复制元素


5-9 替换内容


5-10 使用wrap()和wrapInner()方法包裹元素和内容


5-11 使用each()方法遍历元素


5-12 使用remove()和empty()方法删除元素


6.  jQuery 事件与应用


6-1 页面加载时触发ready()事件


6-2 使用bind()方法绑定元素的事件


6-3 使用hover()方法切换事件


6-4 使用toggle()方法绑定多个函数


6-5 使用unbind()方法移除元素绑定的事件


6-6 使用one()方法绑定元素的一次性事件


6-7 调用trigger()方法手动触发指定的事件


6-8 文本框的focus和blur事件


6-9 下拉列表框的change事件


6-10 调用live()方法绑定元素的事件


7. jQuery 动画特效


7-1 调用show()和hide()方法显示和隐藏元素


7-2 动画效果的show()和hide()方法


7-3 调用toggle()方法实现动画切换效果


7-4 使用slideUp()和slideDown()方法的滑动效果


7-5 使用slideToggle()方法实现图片“变脸”效果


7-6 使用fadeIn()与fadeOut()方法实现淡入淡出效果


7-7 使用fadeTo()方法设置淡入淡出效果的不透明度


7-8 调用animate()方法制作简单的动画效果


7-9 调用animate()方法制作移动位置的动画


7-10 调用stop()方法停止当前所有动画效果


7-11 调用delay()方法延时执行动画效果


8.  jQuery 实现Ajax应用


8-1 使用load()方法异步请求数据


8-2 使用getJSON()方法异步加载JSON格式数据


8-3 使用getScript()方法异步加载并执行js文件


8-4 使用get()方法以GET方式从服务器获取数据


8-5 使用post()方法以POST方式从服务器发送数据


8-6 使用serialize()方法序列化表单元素值


8-7 使用ajax()方法加载服务器数据


8-8 使用ajaxSetup()方法设置全局Ajax默认选项


8-9 使用ajaxStart()和ajaxStop()方法


9.jQuery 常用插件


9-1 表单验证插件——validate


9-2 表单插件——form


9-3 图片灯箱插件——lightBox


9-4 图片放大镜插件——jqzoom


9-5 cookie插件——cookie


9-6 搜索插件——autocomplete


9-7 右键菜单插件——contextmenu


9-8 自定义对象级插件——lifocuscolor插件


9-9 自定义类级别插件—— twoaddresult


10. jQuery UI型插件


10-1 拖曳插件——draggable


10-2 放置插件——droppable


10-3 拖曳排序插件——sortable


10-4 面板折叠插件——accordion


10-5 选项卡插件——tabs


10-6 对话框插件——dialog


10-7 菜单工具插件——menu


10-8 微调按钮插件——spinner


10-9 工具提示插件——tooltip


11.  jQuery 工具类函数


11-1 获取浏览器的名称与版本信息


11-2 检测浏览器是否属于W3C盒子模型


11-3 检测对象是否为空


11-4 检测对象是否为原始对象


11-5 检测两个节点的包含关系


11-6 字符串操作函数


11-7 URL操作函数


11-8 使用$.extend()扩展工具函数


11-9 使用$.extend()扩展Object对象

 

本文由职坐标整理发布,学习更多的jQuery相关知识,请关注职坐标WEB前端jQuery频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程