网易云课堂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包含 ...
随机推荐
- Java输入输出流进阶
输入输出的内容是文本内容,考虑使用字符流. 输入输出的内容是二进制内容,考虑使用字节流. 凡是能用记事本打开并查看的内容称为文本文件,反之则为二进制文件. package ch15; import j ...
- NPOI的使用Excel模板导出
private string ExportScMeeting(DataTable source) { string templateFile = Server.MapPath(@"Excel ...
- [分享] 封装工具ES4配置文件解释
[分享] 封装工具ES4配置文件解释 LiQiang 发表于 2015-2-3 14:41:21 https://www.itsk.com/thread-346132-1-4.html [分享] 封装 ...
- Loading加载小插件,用户可以选择html格式或canvas格式，自定义loading图片，canvas色彩搭配可根据个人喜好
;(function($) { $.Loading = function(options) { //暴漏插件默认值 $.Loading.defaults = { speed: 200, //弹出层淡出 ...
- c++11的右值引用、移动语义
对于c++11来说移动语义是一个重要的概念,一直以来我对这个概念都似懂非懂.最近翻翻资料感觉突然开窍,因此记下.其实搞懂之后就会发现这个概念很简单,并无什么高深的地方. 先说说右值引用.右值一般指的是 ...
- javascript 之 prototype继承机制
理解Javascript语言的继承机制 javascript没有"子类"和"父类"的概念,也没有"类"(class)和"实例&qu ...
- javascript 字符串总结
match():查找字符串中特定的字符,如果找到这个字符,则返回这个字符: indexOf():定位这个字符串中某一个指定的字符首次出现的位置: sub():把字符串显示为下标: sup():把字符串 ...
- ES5——函数，对象，方法，this
JS由表达式和语句组成 表达式:计算出一个值,但并不进行任何操作,不改变计算机运行状态 语句:包括 声明语句,赋值语句,控制结构 函数,对象,方法,this 数组和对象:是两个非常重要的数据类型 函数 ...
- 苹果MacBook Air安装win7
同事的一台mba,说iOS不习惯,希望装一个win7系统.机器看上去很小巧精致,运行iOS速度飞快.试着点了下鼠标,没反应,翻过来看了下,有个电源开关.拨了一下,细小的指示灯闪了闪,应该加上电了.唉, ...
- 在Emacs 24.4中使用在线字典
使用Emacs时经常需要查英语字典怎么办?切到浏览器查?太慢.我想到一个高效的解决方案,利用新发布的Emacs 24.4中的Web浏览器eww,在Emacs中集成一个在线字典,查询光标处的字,一键搞定 ...