jQuery视频教程从入门到精通

讲师:李杰    观看数量 1347
jquery视频教程从入门到精通,课程主要包含:jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
学习完整课程
课程介绍
给大家详细讲解jquery的使用方法和应用场景,希望大家能够有进一步的提示,成为前端编程大牛!

适合人群:有html基础的和javascript基础。

课程简介:

该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习HTML5的必备基础语言),web前端基础知识,如何搭建环境,看懂帮助手册,从浅到深一点一滴为您讲解编程思路,解决以后实际开发当中遇到的那些坑,解决各个浏览器之间的兼容性问题,在实际开发当中一套代码兼容各大主流浏览器,提高编程效率。

课程目录:

第一章:ready的使用
  • 第一节:ready的使用
第二章:jquery选择器
  • 第一节:jquery选择器(一)
  • 第二节: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无限滚动加载插件
实战项目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);
精品好课
React实战视频教程仿京东移动端电商
React是前端最火的框架之一,就业薪资很高,本课程教您如何快速学会React并应用到实战,对正在工作当中或打算学习React高薪就业的你来说,那么这门课程便是你手中的葵花宝典。
jQuery视频教程从入门到精通
jquery视频教程从入门到精通,课程主要包含:jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
最新React视频教程从入门到实战附源码下载
React是前端最火的框架之一,就业薪资很高,本课程教您如何快速学会React并应用到实战,对正在工作当中或打算学习React高薪就业的你来说,那么这门课程便是你手中的葵花宝典。
HTML5视频播放器video开发教程
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器,利用mp4转成m3u8格式的视频,并在移动端和PC端进行播放支持m3u8直播格式,兼容...
HTML5基础入门视频教程易学必会
HTML5基础入门视频教程,教学思路清晰,简单易学必会。适合人群:创业者,只要会打字,对互联网编程感兴趣都可以学。课程概述:该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
收藏
学习完整课程