JS笔记

JS笔记

js顺序

1,获取标签,元素

2,确定事件

3,具体操作

1, onmouseover="wenzi.style.display='block';"

on mouse over

onkeypress 在用户按下并放开任何字母数字键时发生。系统按钮(例如,箭头键和功能键)无法得到识别。[响应一个键]

onkeyup 在用户放开任何先前按下的键盘键时发生。

onkeydown 在用户按下任何键盘键(包括系统按钮,如箭头键和功能键)时发生。[响应几个键的组合]可以响应Ctrl、Alt、Shift等功能键和键的组合,而onkeypress不能

onfocusout 失去光标事件

onfocus 获得光标事件

onabort 图片下载被打断时

onblur 元素失去焦点时

onclick 鼠标点击

ondblclick 鼠标双击

onerror 加载文档或图片发生错误时

onmousedown 鼠标被按下时

onmousemove 鼠标被移动时

onmouseout 鼠标离开元素时

onmouseover 鼠标经过元素时

onmouseup 释放鼠标按键时

onunload 用户离开页面时


on操作:几乎每一个事件前面都要加上on

mouse:鼠标,表示这是一个鼠标事件

over:鼠标悬浮

out:鼠标离开

onclick  on+click  鼠标左击事件

click: 鼠标点击

js是一种基于事件驱动的语言。

事件:用户的操作还有其他的一些操作。

2. wenzi.style.display

id

. 相当于中文的“的”

点前面的是具有某个属性的集合或者叫做对象

点后面的是前面的对象的属性(特征)或者方法(行为)。

文字的style的display

面向对象:

var ergouzi = {};

ergouzi.height = 180;

ergouzi.age = 18;

ergouzi.eat=function(){

}

3. =的作用:

赋值号,将某个值赋值给某一个量。

4. ;的作用:

表示一条代码的结束,每一条完整的代码在结束的时候需要加上一个分号,让浏览器知道这个语句结束了。可以执行了。

需要注意的在JS里面分号之后如果其他代码是另起一行的话,这个分号是可以省略的,但是作为规范,我们每一句话后面都要自觉的加上分号。

以后再代码部署的时候有可能会压缩JS代码,也需要具有规范的代码格式。

oDiv.onclick = function(){

oDiv.style.display = 'block';

oDiv.style.height = '200px';

}

5. 函数:不是数学中的函数

计算机里面函数其实就是一堆代码的封装。对外就是某一个功能的实现,类似于机器上的按钮。

函数的格式

// function 是函数的关键字

// over 是函数名

// ( )  传递参数

// { }  里面去实现功能,类似于CSS的{}

function over(){

//代码实现

}

函数的使用

func_name();    函数名+();

6. 第一个兼容问题:

能否直接使用元素的ID来进行操作元素的属性。

需要获取出来这个元素。JS提供了一个方法。

document.getElementById('元素的id名称');

7. 变量:可以变化的量叫做变量。 var x = 4; 8+x

常量:不可以变化的量叫做常量。  4    9+4

变量也可以理解成一个容器。

var: 告诉浏览器,我后面的是一个变量。

8. document.getElementById('oDiv') 根据元素的id获取元素对象

JS的组成

ECMAScript 约等于JavaScript 语法核心

DOM: document object model  文档对象模型

BOM: browser object model  浏览器对象模型

get Element By Id  为了好记忆

获取  元素  根据  id

9. 注释

HTML的注释 <!-- 注释的内容 -->

CSS的注释  /* 注释的内容 */

JS的注释:

单行注释: // 注释的内容

多行注释: /*

注释的内容

注释的内容

*/

10. 驼峰命名法

大驼峰:

GetName    每一个单词的首字母都要大写。

一般命名对象以及类

小驼峰:

getElementByID 每一个单词的首字母大写,第一个单词除外。

一般命名变量以及函数

11. 下划线命名法

每一个单词之间使用下滑线连接。

例如:user_name

12. 标识符命名规则:也就是起名字的规则。

1.字母数字下划线$组成

2.一般是一字母或者$开头的。不能以数字开头

3.起名字尽量使用英文,可以使用中文或者汉字但是不推荐

4.要有意义,不要使用a,b,c单字母定义。

13. background-image:url();

如果要修改的属性是复合属性,那么要修改属性的名字,改为驼峰命名法。

obj.style.backgroundImage='url()';

14. true | false  布尔值 真和假

15. ==  判断是否相等

16.if判断

if(box.checked == true){

box.checked = false;

}else{

box.checked = true;

}

if(判断){

}

if(判断){

}else{

}

17.<a href="javascript:alert(1);">点击</a>

  a标签的href属性里面是可以实现js代码的。

18. 奇葩的class

一般来说我们操作标签的属性都是直接使用属性名进行操作。

如果遇到CSS里面的复合属性,我们把它改变成驼峰命名法

19. 操作属性的第二种方法

  第一种 obj.style.属性名 = 属性值

  第二种 obj.style[属性名]= 属性值

  区别:第二种是可以接受一个变量名为属性名

  但是如果接受的是一个具体的属性字符串,那么需要添加引号[]。

20. js的三种输出方式:

1.alert(); 提示窗口

2.console.log(); 在控制台输出

3.document.write();在文档调用本段js的地方输出

21.变量与字符串:

变量是一个容器,里面是用来存放东西的,可以使数字,也可以是字符串,也可以是对象,也可以是其他的东西,比如说布尔值。

字符串:一串字符

变量是可以接收字符串

也就是说在定义字符串的时候,可以使用单引号也可以使用双引号,

在代码中使用到字符串的时候必须要加上引号,使用变量的时候不需要(不能加)。

22.通过js的obj.style.样式操作的是元素的行间属性。

行间样式:直接写在HTML元素style属性中的样式

内部样式:写在HTML头部的style标签里面的样式

外部样式:通过link或者@import引入的外部样式

23优先级

如果样式没有冲突,那么所有的设置效果都会显示。

如果样式冲突 行间>所有。

外部样式与内部样式谁距离标签近,谁的优先级高

在操作元素样式的要统一,要不全部使用行间样式操作,要不全部统一为操作元素的类

24.js代码是按照从上到下的顺序加载的,执行也是从上到下的顺序。一行代码执行完之后,再加载下一行代码。一个页面中script标签有很多,他的执行也是从上到下。

25.匿名函数,当一个函数直接赋值的时候,这个时候函数不需要具有名字,类似的比如赋值事件,赋值给变量都不需要名字。

26.window.onload 页面加载事件,当整个页面所有的HTML标签加载完成的时候,会自动的触发这个事件,有了这个事件我们不需要考虑js的位置,写在onload事件函数里面的代码会在页面加载完成的时候执行。

27.js规范 自己写的js一般书写在body之前,所有的页面标签之后。

28.行间事件的提取 样式表现,行为与内容相分离。首先通过js获取出来要添加事件的标签,然后给这个标签添加指定的事件处理函数,最后实现函数。

29.页面添加js的方式

行间 a标签的href 行间事件

内部 写在script标签里

外部 通过script标签的src属性引入

30.一旦script标签通过src属性引入了外部的js文件,这个标签内部就不能写任何js代码。

31.document.getElementByTagName

获取的是一组数据,即便里面符合条件的只有一个,那么也是一组数据。

get  Element  s  By  Tag Name

获取 元素    们  根据  标签 名

32.document.getElementByClassName(他不会变色)

获取的是一组数据,即便里面符合条件的只有一个,那么也是一组数据。

get  Element  s  By  ClassName

获取 元素    们  根据  类名

33.while('条件'){

符合条件执行,如果一直符合,那就一直循环。

最后有一个改变条件,不然就是死循环。

}

34.if('条件'){

符合条件执行,只循环一次。

}

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,444评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,421评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,363评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,460评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,502评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,511评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,280评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,736评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,014评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,190评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,848评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,531评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,159评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,411评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,067评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,078评论 2 352

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,465评论 1 45
  • js简介 Js是一种基于事件和对象驱动的解释性、松散性的语言。 一切皆对象 javascript 布兰登艾奇 ...
    塔库纳玛哈哈阅读 1,203评论 0 2
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,113评论 0 21
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,168评论 0 3
  • 书中以飞行员作为故事的叙述者,主要讲述了小王子在离开自己的星球后所经历的一些事,以孩童的目光叙述了大人世界的荒谬,...
    老王头爱麻油阅读 242评论 0 0