CSS和Javascript简单复习资料

CSS：

内联样式表 标签内直接加style=””

嵌入式样式表 定义在<head>标签

<style type=”text/css”>

外部样式表

<link rel=”StyleSheet” href=”style.css”>

选择器：

HTML选择器：接在html标签后加css

如：p{color:red}

class选择器：1 在html标签后加class名，再加css

如：p.red{color:red}

2 直接加class名，再加css

如：.red{color:red} 注意前面有个点

ID选择器：在ID前加一个#号

如：#red{color:red} ID选择器只为某一ID的控件使用

关联选择器：有嵌套的html标签，用空格隔开

如：P EM{color:red}

组合选择器：多个html标签，用逗号隔开

如： H1,H2,H3{color:red}

伪元素选择器：HTML元素：伪元素

如：A:link{color:red}

注释：使用 /* … */ 进行注释，不可嵌套

javascript：

javascript的数据类型：

基本数据类型：数值、字符串、布尔、空、undefined

注意：javascript中字符串是基本类型，传递的是值，不是地址。和java不同。

转义字符

变量：字母、数字、下划线、美元符$ ，以字母开头

javascript的函数：

function 函数名 (参数){
函数体；

return 表达式；

}

注意：函数由function定义。

形参：javascript不要求实参和形参个数相等，可以通过使用function_name.arguments.length来得到传过来的参数的个数。

内部函数：    encodeURI / decodeURI

parseInt / pareFloat

isNan 检测parseInt / pareFloat的值是否是NaN

escape / unescape 对一个字符串进行编码后的字符串

eval 把一个字符串作为一个JavaScript表达式

javascript：

javascript的数据类型：

基本数据类型：数值、字符串、布尔、空、undefined

注意：javascript中字符串是基本类型，传递的是值，不是地址。和java不同。

转义字符

变量：字母、数字、下划线、美元符$ ，以字母开头

javascript的函数：

function 函数名 (参数){
函数体；

return 表达式；

}

注意：函数由function定义。

形参：javascript不要求实参和形参个数相等，可以通过使用function_name.arguments.length来得到传过来的参数的个数。

内部函数：    encodeURI / decodeURI

parseInt / pareFloat

isNan 检测parseInt / pareFloat的值是否是NaN

escape / unescape 对一个字符串进行编码后的字符串

eval 把一个字符串作为一个JavaScript表达式

javascript的对象：

对象的属性：不需要先定义，可以直接使用

对象的方法：

定义：对象名.方法名 = 函数名

调用：对象名.方法名()

如：

//定义了一个方法

function sayname(){

alert(“name”);

}

object1.say=sayname;

object1.say();

对象的定义：

对象定义时，对象的属性可以自己定义。

用for ( var prop in object) {}可以遍历object里面的属性

内部对象：    Object对象： new Object() 新建一个对象

String对象：

属性：    length

方法：    indexOf() / lastIndexOf()

match(正则表达式)

正则表达式：

以/ …. /作为标志

使用test()方法，符合条件返回true

replace() 替换第一次出现的字符

split() 返回一个数组

substring() 截位置 / substr() 截长度

Math对象：   Math对象是静态对象，需要用Math.方法名()调用

Date对象：   new Date() 构造方法

getYear() / getMonth()+1 / getDate() / getDay/ getTime()

toString方法：     toString()可以转换进制 如toString(2);

数组：    var arr = new Array();

同一个数组中可以加不同类型的值。数组的长度可变。

javascript的局部变量建立后，可以在整个函数体内中的任何地方使用。

事件驱动(通用)： onClick();

onChange()： text / textarea 输入字符时

select 中选项改变时

onSelect()：   text / textarea 中文字被选中时

onFocus() / onBlur 获得 / 失去 焦点

onLoad() / onUnload();

document对象：

方法：

write() / writeln() 使用后要用 close() 关闭

getElementById / getElementsByName 得到元素

createElement()

包含对象：

forms数组 得到<form></form>对象

links数组 得到<a href=””></a>对象

anchors数组 得到<a name=””></a>对象

all数组 得到所有对象

body对象：          事件：

onselectstart  =”return false” 时就不能选择网页上的东西了

onscroll

包含对象：

all

style

form对象：          方法：   submit()

reset()

事件：    onsubmit   函数体内 return true or false 判断是否提交表单

包含对象：

text / textarea / select / checkbox / radio：

方法：    blur / focus

click

add (select 用)

属性：    disabled / readOnly

value

checked

select特殊的属性：

multiple 是否可以复选

selectedIndex 选择的Index

options 返回options数组

option属性

text / value

selected

index

事件：   onChange

onSelect

onFocus

onBlur

window对象：      方法：    alert() / prompt() / confirm() ：

prompt()返回的是值 / confirm()返回 true/false

open() / close()

setInterval() / setTimeout()   对应 clearInterval / clearTimeout

moveTo / resizeTo

showModalDialog() / showModalessDialog()

showModalDialog()中可以用第二个参数向对话框传值

对话框可以用returnValue返回值

事件：    onresize事件

对象：    location：地址栏对象，可以得到地址栏或者改变网页

刷新：reload()

event：得到事件源

frames：数组

screen：提供显示器信息

history： go(0 / -1)  / back() /     forward()

navigator：浏览器信息

document：文档信息

赞 (0)

相关推荐

  • CSS和Javascript简单复习资料

    CSS: 内联样式表 标签内直接加style="" 嵌入式样式表 定义在<head>标签 <style type="text/css"> 外部样式表 <link rel="StyleSheet" href="style.css"> 选择器: HTML选择器:接在html标签后加css 如:p{color:red} class选择器:1 在html标签后加class名,再加css 如:p.re

  • 利用前端HTML+CSS+JS开发简单的TODOLIST功能（记事本）

    利用前端HTML+CSS+JS开发简单的TODOLIST功能（记事本）

    1.简单介绍 在学习完HTML.CSS和一些JS后,博主也利用一些空余的时间的写了一个关于JS简单应用的Demo,主要实现的是一个Todolist(类似于记事本)的应用,可以实现数据的增.删.改.查,并且使用localStorage实现数据的本地持久化存储,具体就接着往下看吧. 2.运行截图    往输入框里输入内容:    进行添加后默认添加到未完成一栏: 将刚刚添加的事项进行修改: 修改成功:    将修改成功后的事项设置成已完成:    对"干饭"."睡觉"进

  • 使用母版页时内容页如何使用css和javascript

    好处有了,问题也接着来了.原来在频道页和列表页中有其各自的css引入和一些javascript函数,当使用母版页时,放在内容页中这些css样式和javascript函数怎么处理呢?因为大家知道,使用母版页的内容页是不能包含<head></head>标记的,而css和javascript函数的声明是要放到<head></head>中间的,这些css样式和javascript函数如何处理呢?上网查了一下,大致有三种解决方案:方案一:把所有的css样式和javas

  • 分享10个优化代码的CSS和JavaScript工具

    分享10个优化代码的CSS和JavaScript工具

    检查和测试代码来发现任何潜在错误,从而在放到网站上之前及时消除错误是一个非常重要的过程.代码检查的过程也俗称为是Web设计师 和开发者之间的linting.作为一个设计师,如果你想要写出高度优化的代码,那么你一定需要linting工具.有两种类型的代码检查工具.一种是在 执行时间检查代码中的错误和bug.另一种是使用静态代码分析技术并在执行前检查码.后者因为可以节省时间和麻烦显然更佳. 事实上,linting可以放在不同的阶段.如果你喜欢在敲代码的时候测试代码,那么你可以使用lint工具.当然,

  • js css+html实现简单的日历

    js css+html实现简单的日历

    web页面中很多地方都会用到日历显示,选择等,本文用html.css.javascript实现简单的日历.完成以后的效果与页面左侧的效果差不多,可以切换上个月.下个月.也可以根据实际情况进行扩展. html html部分比较简单,声明一个div,具体的html用javascript生成.整体内容大概是这样的: <!doctype html> <html> <head> <meta charset='utf-8'> <link rel='styleshe

  • 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效.

  • JavaScript简单下拉菜单实例代码

    JavaScript简单下拉菜单实例代码

    本文实例讲述了JavaScript简单下拉菜单实例代码.分享给大家供大家参考.具体如下: 这是一款JavaScript实现的下拉菜单演示代码,带渐变效果的CSS+jQuery菜单,向下滑出型的菜单,最高支持两级,网上常见到的一种菜单风格,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-xlcd-down-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

  • 利用CSS、JavaScript及Ajax实现图片预加载的方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 实现图片预加载可以使用css.JavaScript.Ajax三种方法.下面分别介绍这些方法的实现. 使用CSS 单纯的使用css可以将图片加载到页面元素的背景上,这种方法简单.高效: #d

  • js改变style样式和css样式的简单实例

    js可实现用户对页面中的选择条件改变页面中的样式,页面样式可以通过style修饰,也可以通过css修饰,先来看一下js改变style样式,代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Change.html</title> <meta http-equiv="content-t

  • JavaScript简单实现弹出拖拽窗口（二）

    JavaScript简单实现弹出拖拽窗口（二）

    接上文JavaScript简单实现弹出拖拽窗口(一)进行学习.  下面开始具体分析代码部分:  首先我们先确认下结构:  悬浮窗口:初始不可见.包括标题栏和内容栏,标题栏内有标题和关闭按钮.  遮罩层:初始不可见.用于设置弹出悬浮窗口时的半透明背景,  按钮:用于点击弹出悬浮窗口. 下面进行详细解释  1.要让窗口能自由移动,那么窗口的定位(position)应该采用绝对定位(absolute):    /*登录浮层组件*/ .popup{ display:none; /*初始隐藏*/ widt

随机推荐