网易云课堂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包含 ...
随机推荐
- javascript高级编程3第三章：基本概念 本章内容 语法 数据类型 流控制语句 函数
3.1 语法 ECMAScript的语法大量借鉴了C及其他类C语言的语法. 3.1.1 区分大小写 3.1.2 标识符 所谓标识符,就是值变量.函数.属性的名字,或者函数的参数.标识符可以是按照下列格 ...
- ROS学习笔记（六）——创建、编译包
$ cd ~/catkin_ws #如果新开一个终端,就需要先吧ROS的工作空间配置好 $ source devel/setup.bash #工作空间的环境配置 #正式开始创建包 $ catkin_c ...
- 剔除eclipse的configuration目录[转]
欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...
- 我的Time
C++改本地时间 #include<iostream> #include<windows.h> using namespace std; void main() { //tim ...
- centos6.5安装node.js
一次偶然的机会知道有nodejs这个东西,确实对它还是很感兴趣的.刚开始只知道它能让javascript写后台,然后前后台都由javascript来写,确实觉得真的挺爽,毕竟人总是喜欢在自己熟悉领域做 ...
- 7 -- Spring的基本用法 -- 3...
7.3 Spring 的核心机制 : 依赖注入 Spring 框架的核心功能有两个. Spring容器作为超级大工厂,负责创建.管理所有的Java对象,这些Java对象被称为Bean. Spring容 ...
- 最佳的 14 个免费的响应式 Web 设计测试工具
一旦你决定要搭建一个网站就应该已经制定了设计标准.你认为下一步该做什么呢?测试!我使用“测试”这个词来检测你网站对不同屏幕和浏览器尺寸的响应情况.测试在响应式网页设计的过程中是很重要的一步.如果你明白 ...
- git代码冲突解决
1.git fetch 跟git pull差别是前者不会和本地直接merge code,而后者会,所以git fetch更安全 git fetch origin master:tmpgit dif ...
- 51nod 1174 1174 区间中最大的数
题目链接:51nod 1174 1174 区间中最大的数 ST(Sparse Table)算法学习参考博客:http://blog.csdn.net/niushuai666/article/detai ...
- 20169212《Linux内核原理与分析》第七周作业
实验 给MenuOS增加time和time-asm命令的方法: 更新menu代码到最新版 再main()函数中增加MenuConfig 增加对应的Time函数和TimeAsm函数(这里的函数要换成我们 ...