`

Javascript及JQuery视频教学

 
阅读更多

第0讲 内容概述

Javascript有以下三部分组成:

   ECMAScript (Flash:actionscript, Silverlight)

   DOM

   BOM

 

document.getElementById('mydiv').style.left

 

第1讲 JavaScript背景知识

结构(Structure)                 HTML XHTML

表现(Presentation)           CSS

行为(Behavior)                  ECMAScript, DOM, BOM

 

第2讲 JavaScript基础

Camel标记法

Pascal标记法

匈牙利标记法

数组:  a

布尔值: b

浮点数: f

函数:    fn

整数:    i

对象:    o

正则表达式: re

字符串:    s

变型:       v

 

未定义: Undefined

空:       Null

对象:    Object

 

1. 字符串函数(String):

length属性

charAt(i)

indexOf()

lastIndexOf()          找不到返回-1

 

 

slice, substring, substr

slice支持负数,并且支持数组操作

substring可以倒置序号,负数为0

substr起始位置,长度

 

document.write可以直接写html网页

 

2. 数值型(Number)

 

9e5 科学计数法

toExponential()

 

3. 布尔型 (Boolean)

true,false

typeof(true)

 

数值类型转换为字符串,可以用toString(2,8,16)进行进制转换。

 

boolean
number
string
object

 

4. 数组

var arr = new Array(1,"1",true);

var arr = [1,2,3];

 

join()方法,改变连接数组项的“,”分隔符

split()方法,字符串风格成数组

reverse()方法,数组反序,可以用来进行字符串反转

sort()方法,数组元素排序

push(),pop实现栈的功能

 

var iNumber = Number(prompt("请输入一个数字", ""));
if (isNaN(iNumber)) {
}

 

日期对象

var myDate = new Date();

date1 - date2 毫秒数

 

new Date("month dd,yyyy hh:mm:ss")

new Date("month dd,yyyy")

new Date(yyyy,mth,dd,hh,mm,ss);

new Date(yyyy,mth,dd);

new Date(ms);

 

Math Object

ceil() floor(), round()

 

Math.floor(Match.random()*total + firstnumber)

 

Window对象

var win = window.open(url,"_blank","height=300,width=400,resizable=yes");

 

oWin.close();

oWin.opener

 

if (window.confirm("xxx")) {}

 

document Object

anchors

applets

embeds

forms

images

links

 

Location Object

location.href = url

location.replace(url)  不可以使用后退

location.reload(true,false)       默认是false

 

Navigator 对象

userAgent属性可以检测浏览器版本及操作系统版本

 

Screen 对象

window.moveTo(0,0);

window.resize(screen.availWidth,screen.availHeight);

 

 

第3讲 CSS基础

 

行内样式  style

内嵌式   <style></style>

链接式

导入式 @import url(1.css);

 

标记选择器    <p>

类别选择器

 .class

 

ID选择器

#id

 

p b {}   b标记嵌套p才有效

 

子选择器    ul.myList > li > a

属性选择器   a[title=CSS] {};

 

CSS设置文字效果

(1)文字样式

font-family    字体

font-size       字号

color

font-weight  粗细

font-style     斜体

text-decoration     下划线,删除线,顶划线

(2)段落文字

(3)首字放大

 

参见 project CSS基础   首字放大.jsp

 

 CSS设置图片效果

(1)图片的边框           

参见 project CSS基础   图片的边框样式.jsp

(2)图文混排

参见 project CSS基础   图文混排.jsp

 

CSS页面背景设置

(1) 设定背景颜色实现页面分块

参见 project CSS基础   背景颜色实现页面分块.jsp

(2) 设定背景图片

参见 project CSS基础   背景图片.jsp

(3) 设定超链接效果

参见 project CSS基础   设定超链接效果.jsp

 

 

第4讲 CSS进阶

 

1. <div>与<span>

 

<div>是段落标记

<span>是行标记

 

2. 盒子模型

content,border,padding和margin四个部分组成

 

浏览器兼容性:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

IE:height+width指content + padding + border

Firefox:content

 

3. 元素的定位

float定位

float:left;

position定位 absolute    四个属性:left,rigth,top,bottom

position: absolute;

 

父块采用position时,则子块相对与父块

 

若子块采用position:relative,则父块设置的padding起作用

 

若不希望div大小充满屏幕,自己设置float或width

 

Z-index: 页面垂直管理

 

CSS排版观念

<div id="container">

     <div id="banner">

     <div id="content">

     <div id="links">

     <div id="footer">

</div>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    精通JavaScript+Jquery视频教程(共16讲)(15)

    精通JavaScript+Jquery视频教程(共16讲)(15)

    精通Javascript+jQuery视频下载

    提供的“精通 Javascript+jQuery 视频下载地址.txt”文件很可能是视频课程的链接列表,通过这些视频教程,学习者可以按照章节逐步学习,理论结合实践,从而全面提高自己的 JavaScript 和 jQuery 技能。 总之,精通 ...

    2010年北风网CJ讲师JavaScript_Ajax_jQuery视频教程下载地址

    在学习过程中,配合教程提供的文本资料《2010年北风网CJ讲师JavaScript+Ajax+jQuery视频教程.txt》,可以加深对课程内容的理解,巩固所学知识。该文档可能包含了课件笔记、代码示例、练习题和解决方案,是学习过程中...

    jQuery视频教程及详细说明

    **jQuery视频教程及详细说明** 本教程旨在深入探讨jQuery这一强大的JavaScript库,它极大地简化了网页的DOM操作、事件处理、动画制作以及Ajax交互。jQuery以其简洁的语法和丰富的插件,成为前端开发者不可或缺的...

    一头扎进 JQUERY 视频教程 java1234出品

    《一头扎进 JQUERY 视频教程》是由java1234出品的系列教程,旨在帮助初学者快速理解和掌握jQuery这一强大的JavaScript库。jQuery是Web开发中的一个关键工具,它简化了JavaScript的许多复杂操作,使得DOM操作、事件...

    JQuery实战视频教程源码及PPT

    《JQuery实战》视频教程源码及PPT是一套针对前端开发者精心编排的课程资源,旨在深入浅出地教授如何高效使用JQuery这一强大的JavaScript库。本教程通过丰富的实例和PPT讲解,帮助学习者从基础到进阶,全面掌握JQuery...

    《精通javascript+jquery》完整版:共计44.5M—part3

    《精通JavaScript+jQuery》是针对Web前端开发人员的一本深入学习指南,主要涵盖了JavaScript语言的基础与高级特性,以及jQuery库的广泛使用。JavaScript是一种广泛应用于客户端网页开发的脚本语言,它赋予网页动态...

    动力节点ssm框架视频及讲义,javascript+jquery+ajax视频

    在动力节点的这套视频教程中,你将学习如何整合SSM框架,创建高效的数据访问层,以及如何在前端使用JavaScript、jQuery和Ajax进行交互。这包括但不限于以下内容: 1. Spring框架的基本概念,如IoC容器、bean的生命...

    妙味视频+JavaScript+jquery+html5+css3视频教程(88GB)+项目实战

    《妙味视频+JavaScript+jQuery+HTML5+CSS3视频教程(88GB)+项目实战》是一套全面而深入的Web前端技术学习资源,旨在帮助学员掌握JavaScript、jQuery、HTML5和CSS3的核心概念和实战技能。这个压缩包包含了大量的教学...

    1 妙味课堂原创JavaScript视频教程 JS基础教程5课资料

    妙味课堂的这个原创JavaScript视频教程,旨在帮助初学者系统地学习和掌握JS的基础知识。 教程共分为5课,涵盖了JavaScript的基础内容,以下是每一课可能涉及的关键知识点: **第1课:JavaScript入门** - ...

    精通javascript+jquery(源代码).rar

    这个“精通javascript+jquery(源代码)”的压缩包显然包含了一个教学资源,提供了源代码实例,帮助学习者深入理解这两种技术。 JavaScript 是一种轻量级的解释型编程语言,主要用于客户端的网页开发。它允许开发者...

    JQuery教程全集

    在《JQuery教程全集》的第一章中,作者首先阐述了为何选择 JQuery 这个 JavaScript 库。随着 Web 开发技术的发展,JavaScript 的使用变得越来越普遍。然而,在没有库或框架的支持下,编写复杂的 DOM 操作和 AJAX ...

    artech-javascript-jquery-15

    【标题】"artech-javascript-jquery-15" 暗示了这是一个关于JavaScript和jQuery的第15个主题的教程或者讲座内容,可能是视频形式。Artech可能是一个教育机构或个人,专注于IT技术的教学。 【描述】"artech-...

    精通Javascript+jQuery 视频教程 在线观看

    5. 下载技巧:文档中提到了如何下载视频教程的技巧,指出可以使用特定的软件嗅探并下载flv格式的视频文件,这说明了在无法在线直接观看教程的情况下,用户也可以通过其他途径获取教学资源。 综上所述,文件内容所...

    HTML+CSS+JavaScript+JQuery+JSP

    HTML+CSS+JavaScript+JQuery+JSP学习笔记为本人看各种教程视频记录下来的,希望对大家有帮助。

    JQuery实战视频教程中需要使用的JQuery文件

    **jQuery实战视频教程中需要使用的JQuery文件** 在学习JavaScript库和框架的过程中,jQuery是一个非常重要的工具,尤其对于初学者来说,它简化了许多DOM操作、事件处理和Ajax交互。本教程将聚焦于jQuery的核心概念...

    李炎恢jQuery EasyUI视频教程

    ### jQuery EasyUI视频教程知识点概览 #### 一、jQuery EasyUI简介 - **定义**:jQuery EasyUI是一种简化Web开发的工具集,它通过整合jQuery框架与一系列UI组件,帮助开发者快速创建出功能丰富且视觉效果良好的用户...

    jQuery视频弹出效果

    通过以上步骤,我们便能实现一个基本的jQuery视频弹出效果。在实际项目中,可能还需要考虑其他因素,如防止页面滚动、阻止视频自动播放等,以提供更完善的用户体验。此外,除了YouTube,还可以集成其他视频平台(如...

    artech-javascript-jquery-11

    【描述】"artech-javascript-jquery-11"的描述简洁,但我们可以推测这是ArtTech系列教程的一部分,专注于jQuery的深入学习。这个系列可能已经涵盖了基础概念,现在正向更专业或特定的主题发展,比如高效的选择器、...

Global site tag (gtag.js) - Google Analytics