网易云课堂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包含 ...
随机推荐
- 内存屏障 & Memory barrier
Memory Barrier http://www.wowotech.net/kernel_synchronization/memory-barrier.html 这里面讲了Memory Barrie ...
- $.inArray（）
原文链接:http://www.css88.com/jqapi-1.9/jQuery.inArray/ jQuery.inArray( value, array [, fromIndex ] )返回: ...
- eclipse遇到不会部署的情况
1.先看下右下角有没有在进行的进程,例如validating 验证中.那就关闭验证的选项 2.看下problem栏有没有问题.会导致building不了.
- jenkins+git+maven搭建自动化部署项目环境
简介 折腾了两个晚上,趁着今晚比较有空,把jenkins+git+maven搭建自动化部署项目环境搭建的过程记录一下,这里我把github作为git的远程仓库(https://github.co ...
- 20145218&20145240 《信息安全系统设计基础》实验二 固件设计
20145218&20145240 <信息安全系统设计基础>实验二 固件设计 实验报告链接:http://www.cnblogs.com/20145240lsj/p/6035512 ...
- [hadoop] hadoop-all-in-one-伪分布式安装
hadoop伪分布式-all-in-one安装 #查看hadoop 版本 [root@hadoop-allinone-200-123 bin]# pwd /wdcloud/app/hadoop-2.7 ...
- 十天精通CSS3学习笔记 part3
第8章 CSS3中的变形与动画(上) 变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度. ...
- JS基本概念
1.一切(变量.函数名.操作符)都区分大小写 2.标识符:第一个字符必须为字母.下划线或者美元符号,其他字符可以是字母.下划线.美元符号或者数字 3.数据类型 1)undefined:用var声明的变 ...
- 对HTML5校验 自定义验证信息
在HTML5中,表单可以定义一个属性required来触发默认的校验机制,比如: <input type="text" required /> 弹出的错误提示默认为英文 ...
- [HTML/HTML5]6 使用图像
6.1 将图像作为Web页面的前景元素 使用img元素,就可以在Web页面中添加图像.img是image的缩写.只需在img元素中添加src(source的缩写)属性,并为该属性设置相应的值,就可以 ...