关注公众号 领VIP会员
下次再说
全栈web前端:jQuery交互实战视频课程(jQuery+Html5+CSS3.0页面布局)

独家

下载课程

下载学院APP

缓存视频离线看

微信公众号
收藏(223)

全栈web前端:jQuery交互实战视频课程(jQuery+Html5+CSS3.0页面布局)

课程目标: 学习web前端开发技能,深入了解jquery与html5、css3.0页面布局开发模式,通过实际...

4分 共134课时 共21小时42分钟 更新时间: 30天前

课程销量榜4

2424小时内答疑

课时永久观看

退15分钟内无条件退款

  1. 仅限付费视频课程适用
  2. 购买后15分钟内可以找到客服进行沟通退款
  3. 下载资料后不再享有退款特权
  4. 客服(Tel:400-101-1651)
  5. 最终解释权归51CTO学院所有

专属资料下载

课程介绍

课程大纲

学习资料

学员评价

课程目标
学习web前端开发技能,深入了解jquery与html5、css3.0页面布局开发模式,通过实际项目案例,完成全栈前端工程师学习之路。
适用人群
初学者、有一定基础的学员、希望深入了解jquery应用的学员、想要学习html5+css3.0的学员
课程简介
  • 什么是jQuery

    jQuery 是一个 JavaScript 库;jQuery 极大地简化了 JavaScript 编程;jQuery 很容易学习。

  • jQuery 的语法形式

    通过 jQuery,可以选取(查询,query) HTML 元素,并对它们执行“操作”(actions)。

  • jQuery 选择器声明

    jQuery 元素选择器和属性选择器允许通过标签名、属性名或内容对 HTML 元素进行选择。

  • jQuery 事件介绍

    事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。

  • jQuery 效果:隐藏、显示

    通过 jQuery,可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。

  • jQuery 效果: 淡入、淡出

    可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒;可选的 callback 参数是 fading 完成后所执行的函数名称。

  • jQuery 效果: 滑动

    通过 jQuery,您可以在元素上创建滑动效果,jQuery 拥有以下滑动方法:slideDown()、slideUp()、slideToggle()。

  • jQuery 效果: 页面动画(一)

    jQuery中,可以使用animate() 方法创建自定义动画。

  • jQuery 效果: 页面动画(二)

    jQuery 提供针对动画的队列功能,这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列,然后逐一运行这些 animate 调用。

  • jQuery 效果: 停止动画方法

    jQuery stop() 方法用于在动画或效果完成前对它们进行停止。

  • jQuery Callback 函数

    由于 JavaScript 语句(指令)是逐一执行的 - 按照次序,动画之后的语句可能会产生错误或页面冲突,因为动画还没有完成,为了避免这个情况,您可以以参数的形式添加 Callback 函数。

  • jQuery Chaining

    Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上)。

  • jQuery DOM 操作:获取

    jQuery 中非常重要的部分,就是操作 DOM 的能力。

  • jQuery DOM 操作:获取和设置

    Query attr() 方法也用于设置/改变属性值。

  • jQuery DOM 操作:添加元素

    通过 jQuery,可以很容易地添加新元素/内容,善加利用可制作出丰富多彩的效果。

  • jQuery DOM 操作:删除元素

    删除和添加元素是一个互逆的过程,却同样有着十分重要和常见的效果功能。

  • jQuery DOM 操作:获取并设置 CSS 类

    addClass() - 向被选元素添加一个或多个类,removeClass() - 从被选元素删除一个或多个类,toggleClass() - 对被选元素进行添加/删除类的切换操作。

  • jQuery DOM 操作:尺寸设置

    width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距);height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

  • jQuery 遍历层级关系(一)

    jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素,以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。

  • jQuery 遍历层级关系(二)

    通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先元素,当然,你也可以以层级的关系进行命名。

  • jQuery 遍历层级关系(三)

    追踪层级的方法虽然很多,但是需要我们认真筛选不同用法的方法进行开发操作。

  • jQuery 遍历层级关系(四)

    同层级之间选择方法有很多,如何更加合理的使用jquery方法处理项目,需要我们不断的实践和练习。

  • 图片动态弹出效果(一)

    html布局在前端开发中发挥十分重要的作用,良好的布局习惯,对我们实现复杂的特效有着十分便捷的帮助。

  • 图片动态弹出效果(二)

    css3.0的很多新增特性,为我们实现更加复杂美观的效果提供了便利。

  • 图片动态弹出效果(三)

    显示和隐藏效果,在我们的开发中是经常用到的jquery方法。

  • 图片动态弹出效果(四)

    使用外置js文件,将我们书写的js代码封装起来,既可以节省布局空间,也可以起到很好的归纳作用。

  • 图片动态弹出效果:使用插件

    Thickbox是一款十分好用的弹窗插件,可以十分轻松的完成我们图片动态弹出效果。

  • 图片相册效果(一)

    使用jquery可以完成很多绚烂的效果,比如相册效果。

  • 图片相册效果(二)

    简单的方法便可做出复杂的效果,这需要我们设计好效果逻辑。

  • 图片相册效果(三)

    书写自定义插件,更加便捷的服务于我们的开发应用中去。

  • 图片相册效果:插件使用

    好的插件,不仅外形美观,功能强大,而且更加利于我们完成**的效果。

  • 图文混合展现效果(一)

    图文布局模式,是前端布局的重要环节,很多效果绚丽的程序都是为此而生。

  • 图文混合展现效果(二)

    学会使用功能强大的插件,对于我们的开发事业来说事半功倍。

  • 图片放大插件使用

    许多有趣的插件在实际应用中有着十分重要的作用,合理利用布局和插件功能,会对我们的实际运营带来很大便利。

  • 焦点图制作(一)

    焦点图的应用在前端使用十分普及,我们不必进行代码书写,能够多收集掌握几个十分强大的插件才是上上之选。

  • 焦点图制作(二)

    对于焦点图的布局,我只想说,可以直接应用它们原有样式进行修改,这样将会大大提高我们的工作成效率。

  • 焦点图制作(三)

    在实际应用中,适当的改变需求,并不是不可饶恕的错误,在设计与实现之间,总会存在些许误差。

  • 多级导航:竖列导航菜单(一)

    多级导航菜单,是我们比较常见的菜单表现形式,不但可以节省展示空间,对于用户体验度的贡献也十分明显。

  • 多级导航:竖列导航菜单(二)

    导航菜单的实现有很多种方法,还有很多的插件,希望各位学员在课下一定要亲自研究几个好用的插件,这样对我们的工作和学习都有很大帮助和提高。

  • 多级导航:横向导航菜单(一)

    横向导航菜单一般作为网站的主要部分,肩负着十分重要的栏目分类任务,将导航做的更加**明确,是我们前端人员所追求的目标。

  • 多级导航:横向导航菜单(二)

    善加运用jquery dom方法,不仅能让我们写的程序美丽多彩,也能为我们的项目整体增添姿色。

  • 选项卡导航菜单:什么是选项卡

    选项卡的实现方法有很多种,视具体的情况的而定选择哪种方法实现它的功能。

  • 选项卡应用:二维码特效(一)

    一种形式的变化延伸,可以做出更多功能的效果出来。

  • 选项卡应用:二维码特效(二)

    二维条码/二维码是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的;在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念。

  • 选项卡应用:提示框效果(一)

    提示框其实就是变形的选项卡效果,提示框的展现,也是十分人性化的设计,能够对模糊的概念进行清晰的解释说明。

  • 选项卡应用:提示框效果(二)

    提示框实现十分简单,但是功效十分明显,**做成自定义插件使用,这样就可以大幅度的进行说明使用了。

  • 选项卡应用:右侧栏小工具(一)

    选项卡的一些特殊应用都是十分广泛的,而起也是十分具有用户体验度的,所以,大家在课下一定要好好进行练习使用。

  • 选项卡应用:右侧栏小工具(二)

    html巧妙的布局,也能为我们完成很多jquery效果,能为我们剩下不少“力”。

  • 选项卡应用:右侧栏小工具(三)

    有时候,繁琐的书写并不是坏事,可以更加明确的操控我们想要实现的效果。

  • 选项卡应用:选项卡插件制作(一)

    插件的编写,是将方法简洁化,这样能够更加灵活的完成我们想要的效果内容。

  • 选项卡应用:选项卡插件制作(二)

    创建函数的时候,一定要认清函数到底是全局函数还是局部函数。

  • 选项卡应用:选项卡插件制作(三)

    使用插件的时候,只需要将相关的变量参数传输到方法中去,就可以十分轻松的调用出我们想要的前端效果出来。

  • javascript弹窗

    运用常规弹窗解决一些问题,虽然十分方便,但是在美观程度上要大打折扣,所以,有时候,为了项目整体美观度,我们还是要考虑DIY弹窗的。

  • 一个简单的弹窗例子

    普通的弹窗十分容易实现,只需要运用显示隐藏的方法便可以轻易完成。

  • 普通弹窗制作(一)

    想要制作出美观且效果强大的弹窗,我们第一步便是要将弹窗布局好,因此,无论是进行效果实现还是展示层的敲定,布局页面就是我们的第一步。

  • 普通弹窗制作(二)

    简单的效果相互组合,便可以发挥超乎想象的功用,牢记各种常见方法的使用,对我们的前端布局用着十分重大的帮助。

  • 为弹窗添加遮罩层

    简单的点缀,会让布局的整个效果具有用户体验度。

  • 升级弹出效果

    运用jquery动画效果,可以做出更加炫酷多彩的效果,只要你有想象力,就可以做出令人折服的效果。

  • 实现弹窗自动关闭

    setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

  • 设定默认弹窗一天显示一次

    Cookie,有时也用其复数形式 Cookies,指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据。

  • 什么是AJAX

    AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新。

  • XMLHttpRequest 基础

    直接使用javascript实现异步通信,应该先定义XMLHttpRequest对象。由于不同浏览器对于XMLHttpRequest对象的定义不同,因此必须考虑浏览器的兼容性。

  • Ajax与服务器建立连接

    通过调用open()方法,建立异步连接;语法:xmlhttprequest.open(Method,Url,Async,User,Password)。

  • Ajax请求和响应(一)

    PHP是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点,利于学习,使用广泛,主要适用于Web开发领域。

  • Ajax请求和响应(二)

    使用send()方法,发送请求到服务器,并接受服务器端的响应信息。

  • jQuery Ajax

    在jquery中,ajax()方法属于**层的方法;第二层是load()、get()、post()方法;第三层是getScript()和getJSON()方法。

  • 设计一个简单的示例

    通过jQuery调用ajax方法,大大缩减了代码的书写,为开发带来了便利。

  • Jquery GET请求

    $.get() 方法使用 HTTP GET 请求从服务器加载数据。

  • Jquery getJSON()和getScript()

    getJSON() 方法使用 AJAX 的 HTTP GET 请求获取 JSON 数据;getScript() 方法使用 AJAX 的 HTTP GET 请求获取和执行 JavaScript。

  • Jquery POST请求

    $.post() 方法使用 HTTP POST 请求从服务器加载数据。

  • ajax()方法请求

    ajax() 方法用于执行 AJAX(异步 HTTP)请求;所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。

  • ajax请求相应状态

    Ajax请求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们的逻辑,在jQuery这里有两种Ajax事件:局部事件和全局事件。

  • ajax响应信息(一)

    responseText 获得字符串形式的响应数据;responseXML 获得 XML 形式的响应数据。

  • ajax响应信息(二)

    responseBody 将响应信息正文以Unsigned Byte数组形式返回;responseStream 以ADO stream对象的形式返回响应信息

  • ajax载入网页文件(一)

    jQuery load() 方法是简单但强大的 AJAX 方法。

  • ajax载入网页文件(二)

    load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

  • ajax载入网页文件(三)

    运用ajax()方法,以json格式解析数据内容。

  • 预设参数项

    该函数用于更改jQuery中AJAX请求的默认设置选项。之后执行的所有AJAX请求,如果对应的选项参数没有设置,将使用更改后的默认设置。

  • 预处理字符串

    serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。

  • jQuery 插件形式

    以jQuery方法的形式进行扩展;以工具函数的形式进行扩展;以选择器的形式进行扩展。

  • 使用extend()函数(一)

    jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。

  • 使用extend()函数(二)

    extend()工具函数所谓嵌套多个对象,有点类似于数组的合并的操作。

  • 使用extend()函数(三)

    jQuery.fn.extend(object);给jQuery对象添加方法。

  • 使用extend()函数(四)

    jQuery.extend(object); 为jQuery类添加类方法,可以理解为添加静态方法。

  • 自定义jQuery函数(一)

    jQuery自定义的很多种方法都是通过全局函数实现的。

  • 自定义jQuery函数(二)

    所谓全局函数,就是位于jQuery命名空间内部的函数,即工具函数。

  • 自定义jQuery函数(三)

    虽然在jQuery命名空间中,禁止使用大量的javascript函数名和变量;但是不可避免的会出现各种冲突,因此需要将一些函数或方法封装到另一个自定义的命名空间中。

  • 自定义jQuery函数(四)

    如果要向jQuery命名空间上添加一个函数,只需要将整个函数指定为jQuery对象的一个属性即可,其中jQuery对象名也可以简写为$。

  • 自定义jQuery命令(一)

    除了工具函数外,jQuery中大多数的功能都是通过jQuery对象的方法提供的。

  • 自定义jQuery命令(二)

    这些对象方法对于DOM操作来说十分方便。自定义jQuery函数通过jQuery对象添加属性即可。

  • 自定义jQuery命令(三)

    实际上,jQuery.fn对象就是jQuery原型对象的别名,使用别名更方便引用。

  • 自定义jQuery命令(四)

    在当前jQuery方法对象的环境中,调用each()方法,通过隐式迭代的方式,让this指针依次引用每一个匹配的DOM元素对象。

  • 自定义jQuery命令(五)

    让自定义插件返回当前jQuery对象,然后就可以在应用示例中连写行为。

  • 自定义选择器(一)

    jQuery允许开发人员扩展选择器功能;jQuery选择器使用一组正则表达式来分析选择符。

  • 自定义选择器(二)

    jQuery提供了:gt和:eq选择器,但是没有定义:ge(大于等于)和:le(小于等于)等选择器,我们需要自定义一个。

  • 自定义选择器(二)

    jQuery提供了:gt和:eq选择器,但是没有定义:ge(大于等于)和:le(小于等于)等选择器,我们需要自定义一个。

  • 自定义选择器(三)

    自定义选择器,会很大程度上解决我们的实际问题。

  • 自定义插件封装(一)

    封装插件第一步是定义一个独立的域。

  • 自定义插件封装(二)

    封装插件,能够更加规范化的处理项目。

  • 自定义插件优化(一)

    如果要发布自定义插件,应该确保插件的开放性和封闭性。

  • 自定义插件优化(二)

    如果要发布自定义插件,应该确保插件的开放性和封闭性。

  • 自定义插件优化(三)

    插件一般都需要用户设置参数,这个参数是灵活应用插件的体现。

  • 自定义插件优化(四)

    在设计插件时,必须考虑插件的暴露和隐私的关系。

  • 自定义插件优化(五)

    为创建闭包,可以将整个插件封装在一个函数中。

  • 自定义插件优化(六)

    在特殊情况下,jQuery对象方法会修改jQuery对象匹配的DOM元素,这时就有可能破坏方法返回值的一致性。

  • 项目概述

    鼠标经过目标对象对象时,会显示带有title属性的容器,如同一个标签一般,呈现title属性值包含的文本内容,目标对象一般是链接、图像等。

  • html5页面布局(一)

    任何项目开发之前,必先做好树目录构架,明确文件的存放位置与项目组的设计构架。

  • html5页面布局(二)

    良好的代码习惯能够为我们实现功能提供更加可靠的依据。

  • html5页面布局(三)

    css3的很多特性为我们的前端开发提供了十分便捷且强大的功能,所以,建议大家好好学习一下css3的一些新的特性和属性,应用到实际的项目中,但是一定注意兼容性。

  • 效果设计思路

    插件的实现中,css布局也起到了十分重要的作用,毕竟操作dom元素,css更有话语权。

  • jQuery实现思路

    对于jQuery的方法及封装,大家还是要多多练习,否则很难应用自如,并且也会产生代码陌生感。

  • 项目搭建

    本节课程将开始讲解html5布局的主要知识,以及其他涉及的相关知识点,希望大家能够认真的去听讲并且进行实际操作练习。

  • 引入字体图标概念(一)

    技术的发展为我们的开发带来了**的便捷,字体图标的出现更是节省了我们很多切图与开发的时间。

  • 引入字体图标概念(二)

    引入字体图标时,一定要注意字体的路径和定义方法,这样才能更好的帮助我们完成项目内容。

  • 首页顶部开发(一)

    web开发的着手点,一定是从开始写html代码开始的,打好布局,不仅可以让我们更轻松的完成前端页面项目,更能让程序开发人员得心应手。

  • 首页顶部开发(二)

    希望大家能够真正做到认真写代码的承诺,认真讲注解等细节做到位,经过长期积累,你会发现,这些都是成为一名优秀前端工程师的必备素质。

  • 首页顶部开发(三)

    无论是jQuery还是html5,都离不开长期的项目积累,因此,老师建议大家一定要认真对待每一个项目。

  • 首页顶部开发(四)

    效果的实现有多种方法,如何取决,全屏个人的理解,但是老师提醒大家,一定要有自己的想法。

  • 首页顶部开发(五)

    对于css3的新特性,老师只想说,多多接触,尽快掌握,这样能让你在以后的开发中更加耀眼。

  • 首页头部开发(一)

    本节课的主要内容是对页面的布局,当然大家若是感觉布局方面的知识已经学的很好了,可以简略的看一下。

  • 首页头部开发(二)

    背景透明度,这是css3的新特性,大家在使用新特性的同时,一定要注意它的兼容性。

  • 首页头部开发(三)

    遮罩层的设计,大家一定要注意滚动条的状态与最终的实现效果。

  • 首页头部开发(四)

    项目的搭建,总是伴随着分工,有时候在追究责任的时候,必要的反省一下自己的交接是否做到位了。

  • 首页头部开发(五)

    在做表单数据值判断时,正则表达式尤为重要和方便。

  • 首页焦点图开发(一)

    对于较为复杂的jQuery效果,老师建议大家使用插件实现。

  • 首页焦点图开发(二)

    在更改插件样式和功能的时候,一定要仔细,否则很容易出现插件效果错误。

  • 首页数据部分开发(一)

    理解页面效果也是前端工程师的工作之一,如何更能**的体现页面效果,需要前端工程师与美工多多沟通。

  • 首页数据部分开发(二)

    当今的页面设计,很多人追求炫酷的效果而忽略了用户体验度,这是十分危险的,再漂亮的东西没有价值都是无法长期存在的。

  • 首页理财专区开发(一)

    前端工程师很大一部分工作都是与html页面布局打交道的,因此,最主要的还是要将基础的东西学牢靠,才能步步为营。

  • 首页理财专区开发(二)

    本套课程内容比较多,建议大家分块学习,或者在实际的工作中,根据需求学习,这样能极大的提高学习效率。

  • 首页理财专区开发(三)

    阴影的特性也是css3的新属性,在使用的时候一定要把握好自己想要的效果,对了,注意兼容性问题。

  • 首页理财专区开发(四)

    问题能否被解决,就看我们能否找到一个点,靠这个点去完成效果和布局,轻松搞定一切对接。

  • 结课与总结

    本套课程已经结束了,老师祝愿各位能够学到自己想要的知识,再次给大家一个建议,多多练习永远都是**的捷径。

  • 第一阶段作业

    第一阶段作业

加载中
所属章节 资料名称 文件大小 下载
相关资料推荐

暂时还没有学习资料~

5

    1
    非常糟

    2
    很差

    3
    一般

    4
    很好

    5
    非常好

    • 0%
    • 0%
    • 0%
    • 0%
    • 0%
    加载中
    没有了哦~

    讲师介绍

    赵甲迪

    赵甲迪

    讲师评分:4.2

    国内知名互联网金融平台产品经理、移动端项目总监,互联网公司技术总监,医疗项目网络架构师,PHP工程师,培训讲师

    学院服务

    关注公众号领取
    免费VIP会员

    添加学院管家微信进入
    学习社群

    讲师推荐专题

    专题一 前端工程师从入门到精通系列专题:实战之路

    9门课 立省:¥93.80 合计:¥375.20 购买

    专题二 Web前端工程师入职实训系列套餐

    5门课 立省:¥40.90 合计:¥209.10 购买

    专题三 JavaScript精通之路(实战开发必备视频教程)

    4门课 立省:¥20.32 合计:¥210.68 购买

    35478人学习过

    订阅专栏更多

    推荐图书

    7日学霸榜 有35478人与你一起学习

    课程介绍

    课程大纲

    学习资料

    学员评价

    ¥ 119.00

    课程评价

    发表客观评价,上限可得35学分(会员可得70学分)

    全栈web前端:jQuery交互实战视频课程(jQuery+Html5+CSS3.0页面布局)

    该课程已有 人评价

    课程与描述相符

    老师的讲解表达

    老师的答疑服务

    匿名

    在线
    客服
    在线
    客服

    下载Android客户端

    下载iphone 客户端

    关注官方微信

    返回
    顶部