jQuery视频教程从入门到精通
讲师: 5567
jquery视频教程从入门到精通,课程主要包含: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);
精品好课