首页
书籍
《感悟jQuery》
[秘笈区]
匿名用户
登录
感悟jQuery
next
序言
参考资料
网上参考资料汇总
jQuery学习前提
js为什么会有兼容性问题?
js练习
js自定义滚动条
滚动条距离原理
index.html
index.css
index.js
带控制文字内容的js
内容滚动距离原理
js正则表达式
系统学习
常见正则表达式
营业执照正则表达式
手机号正则表达式
中文姓名
jQuery系统学习
jQuery基础
来源推理
来源分析
原生态js和jQuery代码对比
使用jQuery的原因
jQuery官网
jQuery版本
jQuery是什么
jQuery的好处
jQuery特点
自带循环
独特的表达式选择
隔行换色
多种赛选方法
链式操作
取值赋值一体
常用方法
.attr()
特例:
如果没有该属性
过滤:.filter(),.not(),has()
兄弟节点
.find(),.eq()
.index()
初级选项卡
原生态js写选项卡(初级)
jQuery改写
实战意义的选项卡
第1版:
.addClass(),.removeClass()
.addClass()
一次添加多个class
.removeClass()
.width()
【重难点】插入节点
.insertBefore()
.appendTo()
.prependTo()
巧记|等价关系|区别
应用
创建元素
.remove()
【重难点】事件绑定.on(),.off()
滚动距离
获取
.scrollTop()
.scrollLeft()
设置
位置、大小
居中的弹框
获取窗口的宽度和高度
距离左侧
难点
jQuery函数中的this
按属性找节点
在某元素之前之后添加新元素
在某元素之后添加新元素
案例详解
在某元素之前添加新元素
jQuery高级
jQuery工具
遍历json对象
正则表达式
系统学习
应用案例
密码验证6-18
jQuery实用案例
案例1:图片切换
效果
源代码
ind_about.html
ind_about.css
ind_about.js
案例2:视频播放前的广告倒计时
原理分析
效果
源代码
html
css
js
案例3:自定义select标签
效果
源代码
nav.html
diy_select_tag.html
diy_select_tag.css
diy_select_tag.js
写模板网站过程
效果
源代码
index.html
index.css
index.js
案例4:图片放大
实现原理
效果
源代码
link.html
link.css
link.js
jQuery功能开发
专题1:自定义轮播图
插件1:垂直轮播
效果
源代码
index.html
index.css
index.js
插件2:水平轮播
实现原理
效果
源代码
index.html
index.css
index.js
改进:添加自适应
项目应用
效果
相关源代码
index_huoban.html
融合PHP
index_huoban.css
index_huoban.js
改进:显示3张
源代码
index.html
index.css
index.js
项目应用
动态计算图片宽度
动态计算图片宽度的完整js
定位左右按钮
改进:显示3张(不对称显示)
效果
源代码
index.php
full_screen_lunbotu_index2.html
full_screen_lunbotu_index2.css
full_screen_lunbotu_index2.js
改进:显示3张(不对称,同时有焦点)
源代码
full_screen_lunbotu_index_yisheng.html
full_screen_lunbotu_index_yisheng.css
full_screen_lunbotu_index_yisheng.js
兼容移动端触摸滑屏
full_screen_lunbotu_index_yisheng.html
full_screen_lunbotu_index_yisheng.js
用到jquery插件:jquery.touchSwipe.js
jquery.touchSwipe.min.js
插件3:全屏轮播(若隐若现)
效果
源代码
index.html
index.css
index.js
弥补:不若隐若现的js
更多专业插件
专题2:自定义选择
插件4:自定义单选
实现原理
相关代码
diy_single_select.html
插件5:自定义多选
relation_multi_select.html
relation_multi_select.css
relation_multi_select.js
套入模板之后
relation_multi_select.html
对应PHP
项目中的应用
插件6:自定义选项卡
效果
源代码
login.html
login.css
login.js
综合:携带贴边显示和隐藏
效果
源代码
login.html
login.css
login.js
专题3:自定义上传
插件7:自定义上传文件
实现原理
效果
源代码
UploadFile.class.php
header.html
myup_file.html
myup_file_init.css
myup_file.css
myup_file_init.js
myup_file.js
AjaxAction.class.php
BingliAction.class.php
DeleteAction.class.php
应用场景:病例模块
注意:pdf文件可以直接用浏览器打开
说明:h5限制客户端文件类型
插件8:自定义上传图片
实现原理
效果
添加过程
修改过程
源代码
Upload.class.php
参考:Upload-原始.class.php
myup.html
myup.js
myup_init.css
myup.css
AjaxAction.class.php
扩展一个新的
myup2.html
myup2.js
应用场景:新闻模块
index.html
search_page.html
add.html
edit.html
item.html
NewsAction.class.php
DeleteAction.class.php
相关数据表
应用场景2:五指CMS移植
PHP判断异步
插件9:自定义图片处理
专题4:时间和日历
插件10:水平时间轴
插件11:垂直时间轴
插件12:自定义日历
所需知识
静态样式
第1步:布局
设置阴影
bootstrap的table去掉格子边框
最终布局
效果
源代码
index_data_picker.html
index_date_picker.css
日历数据规矩
日期对象(Date)
常见应用
案例1
案例2
js匿名函数的应用
自定义插件mydatepicker.js
案例
源代码
index_data_picker.html
index_date_picker.js
效果
专题5:自定义导航
种类1:简单的二级导航(自适应)
效果
源代码
nav.html
套入模板后
nav.css
nav.js
应用
nav.html
nav.css
nav.js
套入模板之后
nav.html
应用2
nav.html
nav.css
nav.js
index.html
效果
专题6:自定义滚动条
核心点
原生态js实现
一开始
效果
源代码
index.html
index.css
index.js
限制范围
控制其他的区域去
场景1:控制高度随着改变
效果
源代码
index.html
index.css
index.js
场景2:控制内容的滚动
一开始
对比
初步效果
源代码
改进1:溢出隐藏
鼠标滚轮事件
jQuery实现
应用
应用1
应用2
专题7:自定义音乐播放器
专题8:自定义视频播放器
jQuery项目应用
项目1:月子会所项目中
效果1:选中div的效果
效果
源代码
ind_about.html
ind_about.css
ind_about.js
效果2:返回顶部
效果
源代码
效果3:人性化弹出二维码
效果
源代码
html
css
js
项目2:蓝星
项居中的二级导航
实现功能
源代码
nei_nav.html
nei_nav.css
jQuery扩展插件
jQuery实用案例
2018-11-08 21:46
诶呀,权限不够