jQuery视频教程从入门到精通
讲师： 
5220
5220jquery视频教程从入门到精通，课程主要包含：jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
课程介绍
给大家详细讲解jquery的使用方法和应用场景，希望大家能够有进一步的提示，成为前端编程大牛！
适合人群：有html基础的和javascript基础。
课程简介：
该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习HTML5的必备基础语言)，web前端基础知识，如何搭建环境，看懂帮助手册，从浅到深一点一滴为您讲解编程思路，解决以后实际开发当中遇到的那些坑，解决各个浏览器之间的兼容性问题，在实际开发当中一套代码兼容各大主流浏览器，提高编程效率。
课程目录：
第一章：ready的使用
index.html页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上拉刷新</title>
<style>
.news-wrap{width:500px;height:auto;border:solid 1px #0AA6E8;padding-top:10px;padding-bottom:10px;}
.news-wrap .list{width:100%;height:200px;border-bottom:1px solid #FF0000;line-height:50px;}
</style>
</head>
<body>
<div id="news-wrap" class="news-wrap">
<div class="list">新闻1</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻1</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
</div>
<script src="jquery.js"></script>
<script src="uprefresh.js"></script>
<script>
$(function(){
var oNewsWrap=$("#news-wrap");
oNewsWrap.uprefresh({"curPage":1,"maxPage":10,"offsetBottom":100},function(curpage){
$.ajax({
type:"get",
url:"http://jsonplaceholder.typicode.com/posts/"+curpage+"/comments",
success:function(data){
var str='';
for(i in data){
str+='<div class="list">'+data[i].name+'</div>'
}
oNewsWrap.append(str);
}
});
});
});
</script>
</body>
</html>
uprefresh.js代码：
+function($){'use strict';
var UpRefresh=function(opts,callback){
if(opts instanceof Object) {
this.opts = opts;
this.iMaxPage=this.opts.maxPage;
this.oWin=$(window);
this.fnCallback=callback;
this.oHtml=$("html");
this.iOffsetBottom=this.opts.offsetBottom;
this.iCurPage=this.opts.curPage;
this.init();
}
};
UpRefresh.prototype={
init:function(){
var _this=this;
_this.eventScroll();
},
eventScroll:function(){
var _this=this;
_this.oWin.on("scroll",_this.scrollBottom());
},
scrollBottom:function(){
var _this=this;
var bScroll=true;
return function(){
if(!bScroll){
return;
}
bScroll=false;
setTimeout(function(){
var iScrollHeight=$(document).innerHeight();//等于offsetHeight
var iScrollTop=_this.oWin.scrollTop();
var iWinHeight=_this.oWin.height();
if(iScrollHeight-(iWinHeight+iScrollTop)<=_this.iOffsetBottom){
if(_this.iCurPage<_this.iMaxPage) {
//console.log("scrollHeight:"+iScrollHeight+",winHeight:"+(parseInt(iScrollTop)+parseInt(iWinHeight)));
_this.iCurPage++;
//console.log(_this.iCurPage);
_this.fnCallback(_this.iCurPage);
}
}
bScroll=true;
},600);
}
}
};
$.fn.uprefresh=function(opts,callback){
return new UpRefresh(opts,callback);
}
}(window.jQuery);
适合人群：有html基础的和javascript基础。
课程简介：
该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习HTML5的必备基础语言)，web前端基础知识，如何搭建环境，看懂帮助手册，从浅到深一点一滴为您讲解编程思路，解决以后实际开发当中遇到的那些坑，解决各个浏览器之间的兼容性问题，在实际开发当中一套代码兼容各大主流浏览器，提高编程效率。
课程目录：
第一章：ready的使用
- 第一节：ready的使用
- 第一节：jquery选择器(一)
- 第二节：jquery选择器(二)
- 第三节：jquery选择器(三)
- 第一节：jquery的事件(一)
- 第二节：jquery的事件(二)
- 第三节：开发一个拖拽盒子效果的Demo
第四章：jquery文档的操作
- 第一节：jquery文档的操作(一)
- 第二节：jquery文档的操作(二)
- 第三节：jquery文档的操作(三)
第五章：jquery遍历
- 第一节：jquery遍历(一)
- 第二节：jquery遍历(二)
第六章：jquery动画效果
- 第一节：jquery动画效果
第七章：Ajax的使用
- 第一节：Ajax、get、post、同步异步详解
第八章：jquery插件的制作
- 第一节：插件的制作原理
第九章：实战项目
- 第一节：实战天猫首页原生js改装成jquery(一)
- 第二节：实战天猫首页原生js改装成jquery(二)
- 第三节：实战jquery无限滚动加载插件
index.html页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上拉刷新</title>
<style>
.news-wrap{width:500px;height:auto;border:solid 1px #0AA6E8;padding-top:10px;padding-bottom:10px;}
.news-wrap .list{width:100%;height:200px;border-bottom:1px solid #FF0000;line-height:50px;}
</style>
</head>
<body>
<div id="news-wrap" class="news-wrap">
<div class="list">新闻1</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻1</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
<div class="list">新闻2</div>
</div>
<script src="jquery.js"></script>
<script src="uprefresh.js"></script>
<script>
$(function(){
var oNewsWrap=$("#news-wrap");
oNewsWrap.uprefresh({"curPage":1,"maxPage":10,"offsetBottom":100},function(curpage){
$.ajax({
type:"get",
url:"http://jsonplaceholder.typicode.com/posts/"+curpage+"/comments",
success:function(data){
var str='';
for(i in data){
str+='<div class="list">'+data[i].name+'</div>'
}
oNewsWrap.append(str);
}
});
});
});
</script>
</body>
</html>
uprefresh.js代码：
+function($){'use strict';
var UpRefresh=function(opts,callback){
if(opts instanceof Object) {
this.opts = opts;
this.iMaxPage=this.opts.maxPage;
this.oWin=$(window);
this.fnCallback=callback;
this.oHtml=$("html");
this.iOffsetBottom=this.opts.offsetBottom;
this.iCurPage=this.opts.curPage;
this.init();
}
};
UpRefresh.prototype={
init:function(){
var _this=this;
_this.eventScroll();
},
eventScroll:function(){
var _this=this;
_this.oWin.on("scroll",_this.scrollBottom());
},
scrollBottom:function(){
var _this=this;
var bScroll=true;
return function(){
if(!bScroll){
return;
}
bScroll=false;
setTimeout(function(){
var iScrollHeight=$(document).innerHeight();//等于offsetHeight
var iScrollTop=_this.oWin.scrollTop();
var iWinHeight=_this.oWin.height();
if(iScrollHeight-(iWinHeight+iScrollTop)<=_this.iOffsetBottom){
if(_this.iCurPage<_this.iMaxPage) {
//console.log("scrollHeight:"+iScrollHeight+",winHeight:"+(parseInt(iScrollTop)+parseInt(iWinHeight)));
_this.iCurPage++;
//console.log(_this.iCurPage);
_this.fnCallback(_this.iCurPage);
}
}
bScroll=true;
},600);
}
}
};
$.fn.uprefresh=function(opts,callback){
return new UpRefresh(opts,callback);
}
}(window.jQuery);
精品好课
VUE是目前最火的前端框架之一，就业薪资很高，本课程教您如何快速学会VUE+ES6并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习VUE高薪就...
React是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习React高薪就...
React和VUE是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React和VUE并应用到实战，教你如何解决内存泄漏，常用库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习Re...
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程，本课程教你如何快速学会VUE和uni-app并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己...
HTML5基础入门视频教程，教学思路清晰，简单易学必会。适合人群：创业者，只要会打字，对互联网编程感兴趣都可以学。课程概述：该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器，利用mp4转成m3u8格式的视频，并在移动端和PC端进行播放支持m3u8直播格式，兼容...
React是前端最火的框架之一，就业薪资很高，本课程教您如何快速学会React并应用到实战，对正在工作当中或打算学习React高薪就业的你来说，那么这门课程便是你手中的葵花宝典。
jquery视频教程从入门到精通，课程主要包含：jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......