javascript:用来在页面中编写特效的，和html/css一样都是由浏览器解析的

javascript语言：
一、js如何运行的（javaScript,jscript,vbscript,applet）

二、输出
alert(什么类型都可以)
document.write(字符串)

三、如何在html中使用js
1.使用<script></script>将js语法嵌入到html中，可以使用多个，每一个之间都是有关联的
2.href="javascript:js代码"
3.事件中
4.写到外部文件中（.js）<script src="文件位置"></script>

js语法：
命名规范：
1.一定要有意义
2.不能以数字开头，不能是系统的关键字
大小写：javaScript严格区分大小写
变量名和函数：驼峰式命名
对象：每个单词首字母都要大写 Date(); new Object();
分号：
功能执行语句加分号 var name="lisi";

结构定义语句后面不加分号 if function(){}
注释：
// 单行
/* */ 多行
四、变量
var a=10; 跟别的语言不一样，js只要浏览器没有关闭，变量一直在浏览器内存中。
注意：javaScript是弱类型语言，（和PHP一样）

var a=10; 声明
int a=10; 赋值

五、数据类型

typeof(变量)
1.number(int float double) 注意：计算时还是按整型和浮点型分开使用
2.string (string char)-----------所有的浮点数都是近似数，10个0.1相加等于0.9999999999....
3.boolean
4.object(object,array，null)注意：分别处理
5.undefiend 没有声明变量

字符串声明，"" '' 双引号和单引号都是一样的。所有转义都可以使用

+连接两个字符串

六、运算符和表达式

算数运算符号
赋值运算符号
条件运算符号
逻辑运算符号
位运算符号
其他运算符号
七、流程控制
一个整型，一个字符类型，用switch，其他类型就用别的好了。

八、函数
定义：是一段完成"指定功能"的已经"命名"的代码段。
1.函数名
2.参数 --根据需要使用参数
3.函数体（功能）
4.返回值（可选）

函数遇到return 就终止了。
看函数的类型： alert(typeof(函数名（）))这样是错误的-----加了括号是调用函数，这里应该去掉括号
函数的类型是function
函数可以赋给一个变量， var test=function(){
alert("################");
}
函数不加（），代表这整个函数。
回调函数：变量解决不了的问题，传一个函数进去。
例：function talble(start,end,check){
for(var i=start;i<end;i++){

if(check(i)){
document.write(i+"<br/>");
}
}
}
//1.从这个函数中（10，500）取出3的倍数
//2.从这个函数中（-200，200）取出负数

table(10,500,function(num){
if(num%3==0){
return true;
else
return false;
}
})
函数只有调用才能使用到，

应用：
全局：在函数外面声明的变量
局部：在函数内部声明的变量
var test=10；
function demo(){test+=20} demo();demo(); alert(test);-----50

九、对象
十、内置js对象
十一、数组

DOM和BOM

DOM-----文档对象模型

document(HTML或XML)
object对象(html元素转成的js对象)

1.转成对象的方式：
a.标记名(多个) ---id（唯一） ,,name（多个）
doucument.getElementsByTagName("div")-----document.getElementyById()-----document.getElementsByName()

2.操作属性

var shopping = document.getElementById("purchases");
shopping.setAttribute("title","a list of goods");

3.操作内容
innerText----火狐里不兼容，ie能用，火狐的话用textContent
innerHTML(设置或取出内容，带上了HTML标签)

4.操作样式
对象.style.backgroundColor=""
对象.style.fontSize=""

对象.className=""---------批量操作

获取某个区域内的元素----document.getElementById().getElementsByTagName()

事件处理：

一、事件源：任何一个html元素（节点）body,div,button,p,a ,h1........

二、事件：你的操作
鼠标：
click 单击
dbclick 双击
contextmenu(在body)文本菜单

mouseover 放上
mouseout 离开
mousedown 按下
mouseup 抬起
mousemove 移动
键盘：
keypress
keyup
keydown
文档：
load: 加载(页面全部加载完后再执行)
unload: 关闭
beforeunload:关闭之前

表单：
focus:焦点
blur 失去焦点
submit:提交
change: 改变
其他：
scroll:滚动事件
selected:事件

三、事件处理程序

有3种方法加事件：

第一种：
格式：on事件---比如onclick onMouseover

<button onclick='getElementById("demo").innerHTML=Date()'>现在的时间是??</button>

第二种：
对象.on事件=处理程序
对象.onclick=function(){}

第三种：
<script for="事件源" event="事件">事件处理程序</script>

屏蔽右键按钮
<body oncontextmenu="return false"></body>

在外部引用的js里写 onload=function(){} ----------这样可以在页面全部加载完之后再执行相关操作了。。

事件对象：event 它的属性：srcElement 事件源对象
keyCode 事件发生时的键盘码
clientX 白色区域的x轴距离
clientY
screenX 屏幕的x轴
screenY
returnVlaue
cancleBubble 取消某个方法

event 这个事件对象在火狐里面不兼容，要想兼容，写：var ev=e || window.event;

<div onkeypress="show()">
<script>
function show(){
alert(event.keyCode);
}
</script>

</div>

定时器：setInterval(function(){},1000)

关闭定时器的操作：clearInterval();

setTimeout()

　　 从载入后延迟指定的时间去执行一个表达式或者是函数;
       仅执行一次 ;和window.clearTimeout一起使用.

setInterval()

　　 在执行时,它从载入页面后每隔指定的时间执行 一个表达式或者是函数;(功能类似于递归函数)；和window.clearInterval一起使用.

鼠标移动上去图片能够移动：

<div id="one" style="position:absolute;left:100px;top:100px;width:200px;height:30px;background:red;"></div>

<script>

var one=document.getElementById("one");

var down=false;
var dx=0;
var dy=0;
document.onmousemove=function(e){
var ev=e || window.event;
if(down){
one.style.top=ev.clientY-(dy-sy);
one.style.left=ev.clientX-(dx-sx);
}

}

one.onmousedown=function(){

var ev=e || window.event;
dx=ev.clientX;
dy=ev.clientY;
sx=parseInt(one.style.left);
sy=parseInt(one.style.top);
if(!down)
down=true;

}
document.onmouseup=fuction(){
if(down)
down=false;
}

</script>

window对象：当前浏览器窗体--------所有对象都是窗体对象的子对象，，包括document，event,frames,location

它的属性：status
opener
closed

方法：alert()
confirm()----确认框 onclick="return confirm("您确定要取消吗？")"
setInterval()-----只要页面上动的东西，都要用到这个
clearInterval()

setTimeout()-----只执行一次
clearTimeout()
open()

做一个页面上滚来滚去的图片

<html >

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>Document</title>

 </head>

 <body>

 <div id="one" style="background:red;position:absolute;left:0;top:0;width:100px;height:100px;">我是广告</div>

<script>

   var x=0;

   var y=0;

   var xs=10;

   var ys=10;

  var one=document.getElementById("one");

  function move(){

             x+=xs;

             y+=ys;

           if(x>=document.body.clientWidth-one.offsetWidth-20 || x<=0){

                 xs=-1*xs;

          }

          if(y>=document.body.clientHeight-one.offsetHeight-20 || y<=0){

                  ys=-1*ys;

          }

          one.style.left=x;

          one.style.top=y;

      }

   var dt=setInterval("move()",200);

   one.onmouseover=function(){

                 clearInterval(dt);

    }

   one.onmouseout=function(){

               dt=setInterval("move()",100);

    }

</script>

 </body>

</html>

window.open("url","窗口名称","窗口的相关参数");

用连接打开的窗口么有父子关系，用window.open方法打开的窗口存在父子关系。

找到父窗口：opener

做跑马灯效果
var num=0;
var dir=1;
var space="";
setInteval(function(){

if(num>40||num<0){
dir=-1*dir;
}
num+=dir;
var space="";
for(var i=0;i<num;i++){
space+="";
}
window.status=space+"www.brbphp.com";},100)

做frameset的时候也存在父子关系

window.parent.parent最外层的那个窗口

window.parent.parent.frames[0] 获得了分层结构的子窗口，数组形式，从上到下，从左到右数

window.parent.parent.frames['main'] 也可以通过name来查找

window对象中的常用对象属性：

它的子对象：document--
location---跳转位置
html的跳转--<meta http-equiv="refresh" content="3;url=http://www.baidu.com">--3秒钟后刷新这个页面
js的跳转：window.navigate(url)
location.href='url'
location='url';也可以跳转
location.replace=（'url'）---前面的都是重定向，这个是替换，后退不回去
location.reload();-----刷新，可放在定时器里定时刷新。
要记住的：
location='url',,,,,,,location.reload();
history----历史对象
javascript:history.back()
javascript:history.go(-1)--返回上一步，，-2就是返回上两步
screen---屏幕对象

screen.width
表单对象：

document.forms.username;
document.表单名称.username----取表单的内容

表单的属性：
action
method
title---不常用
enctype

表单的方法：

submit();

事件：
onfocus();焦点事件
onblur();失去焦点
onchange();内容改变触发

登陆界面光标为表单第一个输入框：
onload="document.getElementById("表单的id").username.focus()"----用户操作更方便

onsubmit---表单提交之前触发，成功了就提交过去了，失败了就提交不过去

<form name="" action="" onsubmit="return check()" method="">

document.form(表单名称).username.value=='' -----取表单内容

onscroll=""-----滚动事件

-----------页面上有一个图片随着滚动条移动位置不变---------------------

<style>

#tu{

position:fixed;-----相对于html的位置，可以防止在拉动滚动条时 出现图片闪烁
top:100px;
left:100px;

}
</style>

<body>
<testarea cols="100" rows="100"></textarea>

<img src="" id="tu">
</body>

注意：文件头加上dtd文件头

jquery

网易云课堂js学习笔记的更多相关文章

  1. 网易云课堂Dubbo学习笔记

    可以在这里下载dubbo的原码:https://github.com/alibaba/dubbo Dubbo架构原理:

  2. 网易云课堂JS笔记

    JS能做什么?? ----网易官网:选项卡----京东: Hbuilder编辑器介绍 JavaScript简介 ECMAScript:javaScript组成语法和基本对象 DOM:文档对象模型,描述 ...

  3. [干货教程]仿网易云课堂微信小程序开发实战经验

    本篇文章想跟大家分享下:我们公司“湖北诚万兴科技”最近刚帮客户定制开发.目前已上线的“哎咆课堂”微信小程序的开发经验分享.首先大概介绍下这个小程序所涉及到的主要技术点:微信登录.微信支付.微信小程序F ...

  4. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  5. 《Python自动化测试修炼宝典》线上课程已经成功入驻网易云课堂......

    <Python自动化测试修炼宝典>线上课程已经成功入驻网易云课堂...... IT测试老兵利用工作之余,亲自录制的<Python自动化测试修炼宝典>线上课程已经成功入驻网易云课 ...

  6. 【转】Backbone.js学习笔记（二）细说MVC

    文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...

  7. [Chat]实战：仿网易云课堂微信小程序开发核心技术剖析和经验分享

    本Chat以一个我参与开发并已上线运营近2年——类似网易云课堂的微信小程序项目,来进行微信小程序高级开发的学习. 本场Chat围绕项目开发核心技术分析,帮助你快速掌握在线视频.音频类小程序开发所需要的 ...

  8. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  9. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

随机推荐

  1. 2019-03-27-day020-单继承与多继承

    昨日回顾 类的加载顺序 类内部的代码什么时候执行? 除了方法里面的代码 其余的所有内容都是在执行这个文件的时候就从上到下依次执行的 不需要调用 如果有同名的方法.属性,总是写在后面的会生 class ...

  2. 2016ICPC-大连 A Simple Math Problem （数学）

    Given two positive integers a and b,find suitable X and Y to meet the conditions: X+Y=a Least Common ...

  3. 【Python】练习题

    练习1:有两个磁盘文件A和B,各存放一行字母,要求把这两个文件中的信息合并(按字母顺序排列), 输出到一个新文件C中 import os file1_path="e:\\test3\\2.t ...

  4. 复杂的动态布尔表达式性能评估(1)--Antlr4实现

    前言: 规则引擎中, 往往涉及到多个条件构成了复杂布尔表达式的计算. 对于这类布尔表达式, 一是动态可变的(取决于运营人员的设定), 二是其表达式往往很复杂. 如何快速的计算其表达式的值, 该系列文章 ...

  5. [LeetCode&Python] Problem 606. Construct String from Binary Tree

    You need to construct a string consists of parenthesis and integers from a binary tree with the preo ...

  6. GitHub使用教程、注册与安装

    GitHub注册与安装 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请调整网页缩放比例至200%) 1 进入GitHub官网:http ...

  7. CSS使用方法

    CSS行内样式: 在开始标签内添加style样式属性 如:<p style="color:red;">内容</p> CSS内部样式: 内部样式(嵌入样式), ...

  8. 09 Collection,Iterator,List,listIterator,Vector,ArrayList,LinkedList,泛型,增强for,可变参数，HashSet，LinkedHashSet，TreeSet

    09 Collection,Iterator,List,listIterator,Vector,ArrayList,LinkedList,泛型,增强for,可变参数,HashSet,LinkedHas ...

  9. 实验吧—Web——WP之 简单的sql注入之2

    直接打开解题连接: 既然是SQL注入,那么我们就要构造注入语句了,这个就要有耐心一个一个去尝试了 输入语句 1'and 1=1 # 和 1'and/**/1=1/**/#后 对比一下,发现是过滤掉了空 ...

  10. 实验吧—隐写术——WP之 男神一般都很低调很低调的！！

    首先我们打开解题连接~ 是直接给我们下载了一个压缩文件,解压后得到: 确实是很帅的小哥哥呢,呵呵...... 分析题目提示,“获取隐藏在图片中的flag”,嗯~这句很重要,他决定了我们要先用那种工具 ...