网易云课堂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包含 ...
随机推荐
- scss编译
SASS?SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. sass有两种后缀名文件: sass(不使用大括号和分号)---不建议使用 ...
- iOS开发 个别页面是否支持页面旋转
- (BOOL)shouldAutorotate { return YES; }
- js 判断 是否位数字
isNaN(val) val为数字返回false 不为数字返回truedocument.write(isNaN(123)); document.write(isNaN(-1.23)); documen ...
- FullPage.js – 轻松实现全屏滚动（单页网站）效果
FullPage.js 是一个简单而易于使用的插件,用来创建全屏滚动网站(也被称为单页网站).除了可以创建全屏滚动效果以外,也可以给网站添加一些水平的滑块效果.能够自适应不同的屏幕尺寸,包括平板电脑和 ...
- final发布评语
final发布评语: 1.约跑(nice!)发布者:组长李权以及组员刘芳芳和于淼,对于约跑APP,final发布主要完成对于用户提出的(1.对话字数多导致头像被挤掉2.返回时没有完全退出)问题修改成功 ...
- nginx的ngx_http_request_t结构体
struct ngx_http_request_s { uint32_t signature; /* "HTTP" */ //请求对应的客户端连接 ngx_connection_t ...
- svn设置外网访问
1.设置路由器 默认协议为:https 端口号:443 服务器地址:https://主机名/svn/版本库 例:https://mleo-pc/svn/Share/ 也可就主机名用IP地址代替 如:h ...
- 简述alert和console.log的区别
生活中还是得有发现美好和差别的眼睛~~ 学习前端那么久既然还不知道alert和console.log的差别~~~~ 蓝瘦,香菇~~~ 本菜鸟一直以为alert和console.log其实是一样的用法, ...
- 关于maven
主要涉及的配置文件是setting.xml与pom.xml 其中setting配置文件主要负责加载jar包路径设置, pom.xml文件主要负责jar包配置. 包含jar包的版本. maven打包:之 ...
- javascript 实现tab菜单切换
<!DOCTYPE html> <html> <head> <title></title> </head> <body s ...