网易云课堂JS笔记
JS能做什么？？
----网易官网：选项卡
----京东：
Hbuilder编辑器介绍
JavaScript简介
ECMAScript：javaScript组成语法和基本对象
DOM:文档对象模型，描述处理网页内容方法和接口
BOM:浏览器对象模型，描述与浏览器进行交互的方法和接口
BOM->查看什么浏览器
JavaScript特点
跨平台web脚本语言
向html页面添加交互行为：跟DOM一样的
可与服务器进行通信：可与服务器进行通信（Ajax）
JavaScript出现位置
========简单实例
1.document.getElementById('btn');
2.给按钮添加点击事件
按钮.onclick=function(){
//修改属性
元素.style.样式名=值
/*这是CSS的注释*/
//js中的单行注释
/*多行注释*/
//页面中的代码一般是从上往下，从左往右执行
如何解决呢？
使用window.onload=function(){
}
什么时候使用js
当js代码需要获取中的元素的时候，如果script是在元素之前，那就需要加window.onload
如果script标签是放在了元素后面，就不需要加window.onload
获取div的属性：document.getElementByI的('box').href;
console.log(link.href);
//打印出来是一个uncode转码字符
//切记不要拿href与src娶到的值做判断
js->变量
可变的量（值）
变量的好处
1.可复用
2.可以精简代码
var a=20;
console.log(a);
变量命名规则
1.允许字母，数字，下划线_，美元符$任意组合而成
2.不允许数字开头
3.不能使用关键字和保留字
驼峰命名
大驼峰:
首字母大写
Math\Date//一般是系统内部使用的
小驼峰
从第二个字母开始首字母大写
getElementById();
-->Js函数
作用:复用代码s
function fn(){
}
函数名命名的时候尽量遵守变量命名规则
-->Js匿名函数(没有名字的函数)
function(){
}
使用匿名函数的条件：
1.被赋值形式所出现
2.被事件调用
匿名函数不能直接申明
eg:window.onload:事件
=赋值
-->修改属性
var btn=document.getElementById("btn");
btn.onclick=function(){
console.log(btn.value);
btn.value='小按钮';
}
btn.style.font-size是不能获取的，js不认-,还会报错
如何解决呢:
console.log(btn.style['font-size']);
console.log(btn.className);//能够获得class的值
如果非要用'.'，要把'-'去掉，把'-'后面的首字母大写即可
-->获取innerHtml
window.onload=function(){
var btn=document.getElementById("btn");
var box=document.getElementById("box");
btn.onclick=function(){
console.log(box.innerHTML);
box.innerHTML='<span>新字符串</span>';
}
}
-->点击按钮DIV循环显示
<input type="button" name="btn" id="btn" value="切换" />
<div id="box">
</div>
<script type="text/javascript">
var btn=document.getElementById("btn");
var box=document.getElementById("box");
var temp='block'
btn.onclick=function(){
if(temp=='block')
{
box.style.display='none';
temp='none';
}
else{
box.style.display='block';
temp='block';
}
}
</script>
在给innnerHTML设置值的时候，如果这个值里面有html元素，在页面上会被解析
---------->点击下一张图片
<div id="pic">
<img width="100%" src="img/1.jpg" id="img" />
</div>
<div id="btn">
<input type="button" name="prev" id="prev" value="上一张" />
<input type="button" name="next" id="next" value="下一张"/>
</div>
<script type="text/javascript">
var prev=document.getElementById("prev");
var next=document.getElementById("next");
var img=document.getElementById("img");
var arrayimg=['1','2','3','4'];
var len=arrayimg.length;
var n=0;
var i=1;
prev.onclick=function(){
n--;
if(n==-1)
{
n=3;
}
img.src='img/'+arrayimg[n]+'.jpg';
img.src=srcpath;
}
next.onclick=function(){
n++;
if(n==4)
{
n=0;
}
var srcpath='img/'+arrayimg[n]+'.jpg';
img.src=srcpath;
}
</script>
----->js中定义数组
var arr=['a','b','c','d'];
href和src
href:是链接地址
src：是图片的地址
---------获取标签
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/**
* document.getElementById
* 通过id名称去获取一个元素
*
* W3c规定id在页面上只能有一个值
* getElementsByTagName(标签名称)
* 通过标签名称获取一组元素
* 主语：目的限制范围
* documen 从整个文档中获取一个元素
*
* 父级 从父级下面去获取一级元素
*
* getElementsByTagName
* 获取到是一个集合，类数组
* 类数组；类似数值，但是数组中的一些方法，它没有
* 它只具备数组中的length和下标
*
*
*/
window.onload=function(){
var list=document.getElementsByTagName('li');
list[2].style.background='green';
var ulid=document.getElementById('ulid');
var list2=ulid.getElementsByTagName('li');
list2[3].style.background='red';
}
</script>
</head>
<body>
<ur>
<li>red</li>
<li>green</li>
<li>blue</li>
<li>pink</li>
</ur>
<ur id="ulid">
<li>red</li>
<li>green</li>
<li>blue</li>
<li>pink</li>
</ur>
</body>
-->Js中querySelector(Css选择器)
通过css选择器获取到一个元素，如果有重复的，那她只取第一个
主语
document 从整个文档里去获取元素
父级 从父级里去获取元素
eg:var xx=document.querySelector('.classname');
-->Js中的querySelectorAll('#color ul li xx');
var list=document.querySelectorAll('#color ul li');
//list[list.length-1]获取最后一个元素
注意：getElementsByTagName('li')和querySelectorAll('li');
区别：前者动态获取后者静态获取
-->js中的this：
当前对象：不能当作变量名
只能读，不能写，它的值只能用，不能修改
1.在函数外：代表window
2.在函数内使用
1>函数是直接调用则This指向window
2.被事件所调用，并且是以赋值的形式出现
谁调用this指向谁
document.onclick=fn;//document
网易云课堂JS笔记的更多相关文章
- 网易云课堂js学习笔记
javascript:用来在页面中编写特效的,和html/css一样都是由浏览器解析的 javascript语言: 一.js如何运行的(javaScript,jscript,vbscript,appl ...
- [干货教程]仿网易云课堂微信小程序开发实战经验
本篇文章想跟大家分享下:我们公司“湖北诚万兴科技”最近刚帮客户定制开发.目前已上线的“哎咆课堂”微信小程序的开发经验分享.首先大概介绍下这个小程序所涉及到的主要技术点:微信登录.微信支付.微信小程序F ...
- XMind与MindManager哪个好（网易云课堂老师:Array老师讲解稿）
XMind与MindManager哪个好 作者:网易云课堂老师:Array老师讲解稿 思维导图是一种将放射性思考具体化的方法,可以将人们的创造性思维及时捕捉并呈现,深受商业人士的喜爱.目前,XMind ...
- Python爬虫入门教程 21-100 网易云课堂课程数据抓取
写在前面 今天咱们抓取一下网易云课堂的课程数据,这个网站的数据量并不是很大,我们只需要使用requests就可以快速的抓取到这部分数据了. 你第一步要做的是打开全部课程的地址,找出爬虫规律, 地址如下 ...
- Python实例之抓取网易云课堂搜索数据（post方式json型数据）并保存到数据库
本实例实现了抓取网易云课堂中以‘java’为关键字的搜索结果,经详细查看请求的方式为post,请求的结果为JSON数据 具体实现代码如下: import requests import json im ...
- 《Python自动化测试修炼宝典》线上课程已经成功入驻网易云课堂......
<Python自动化测试修炼宝典>线上课程已经成功入驻网易云课堂...... IT测试老兵利用工作之余,亲自录制的<Python自动化测试修炼宝典>线上课程已经成功入驻网易云课 ...
- [Chat]实战：仿网易云课堂微信小程序开发核心技术剖析和经验分享
本Chat以一个我参与开发并已上线运营近2年——类似网易云课堂的微信小程序项目,来进行微信小程序高级开发的学习. 本场Chat围绕项目开发核心技术分析,帮助你快速掌握在线视频.音频类小程序开发所需要的 ...
- 教你爬取腾讯课堂、网易云课堂、mooc等所有课程信息
本文的所有代码都在GitHub上托管,想要代码的同学请点击这里
- 网易云课堂《JS原创视频教程-知识点类》
http://caniuse.com/#index //Can I use... Support tables for HTML5, CSS3, etc-支持h5和css3的情况列表 JS包含 ...
随机推荐
- CSS垂直居中的方法
前端开发过程中,水平垂直居中是比较常用的.下面直接开门见山,看看不同方法实现垂直居中的各自优点和其不足之处. 1.将“line-height”和“height”设置成一致 这种方法用来实现单行垂直居中 ...
- 理论基础知识之————KB Kb Kbps 相关单位的区别和换算
换算公式 8bit(位)=1Byte(字节) 1024Byte(字节)=1KB 1024KB=1MB 1024MB=1GB 1024GB=1TB 容量是大写的 B 而传输的速度是小写的 b bps ...
- fiddler_技巧01
1.选择一个包后,要点击 "Inspectors"标签页 才能有"Raw"标签页 才能看到原始的详细信息 2. 3. 4. 5.
- point
7.10 []getch->_getch []错误:fatal error C1189: #error : EasyX is only for C++ :.c改为.cpp
- 第一次写Web API接口
API是什么?只知道是网络接口,具体怎么写?不会!如何调用?不会!那怎么办? 第一次的经历~~ 需求:为其他项目提供一个接口 功能:为项目提供询盘信息和商家信息,格式为Json字符串 拿过来,就开始做 ...
- js之事件冒泡和事件捕获
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...
- nginx的ngx_http_request_t结构体
struct ngx_http_request_s { uint32_t signature; /* "HTTP" */ //请求对应的客户端连接 ngx_connection_t ...
- Oracle一个事务中的Insert和Update执行顺序
今天碰到了一个奇怪的问题,是关于Oracle一个事务中的Insert和Update语句的执行顺序的问题. 首先详细说明下整个过程: 有三张表:A,B,C,Java代码中有一段代码是先在表A中插入一条数 ...
- Delphi与Windows 7下的用户账户控制(UAC)机制 及 禁用兼容性助手
WIN7, Vista提供的UAC机制,它的主要目的是防止对于操作系统本身的恶意修改.对于Delphi程序的影响,UAC主要在于以下几点:1.由于UAC机制,Delphi对于系统的操作可能无声的失败, ...
- 《精通C#》自定义类型转化-扩展方法-匿名类型-指针类型（11.3-11.6）
1.类型转化在C#中有很多,常用的是int类型转string等,这些都有微软给我们定义好的,我们需要的时候直接调用就是了,这是值类型中的转化,有时候我们还会需要类类型(包括结构struct)的转化,还 ...