为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
JavaScript入门篇 _学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

JavaScript入门篇

慕课官方号 页面重构设计
难度入门
时长 1小时35分
  • <script type="text/javascript"> </script>
    查看全部
  • 选择器的优先权解释: 1. 内联样式表的权值最高 1000; 2. ID 选择器的权值为 100 3. Class 类选择器的权值为 10 4. HTML 标签选择器的权值为 1 利用选择器的权值进行计算比较,示例如下: <!DOCTYPE HTML> <html> <html> <head> <style type="text/css"> #redP p { /* 权值 = 100+1=101 */ color:#F00; /* 红色 */ } #redP .red em { /* 权值 = 100+10+1=111 */ color:#00F; /* 蓝色 */ } #redP p span em { /* 权值 = 100+1+1+1=103 */ color:#FF0;/*黄色*/ } </style> </head> <body> <div id="redP"> <p class="red">red<span><em>em red</em></span> </p> <p>red</p> </div> </body> </html> 结果:em为蓝色。
    查看全部
  • CSS优先级 多重样式(Multiple Styles):如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。 一般情况下,优先级如下: (外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style 有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。 <head> <style type="text/css"> /* 内部样式 */ h3{color:green;} </style> <!-- 外部样式 style.css --> <link rel="stylesheet" type="text/css" href="style.css"/> <!-- 设置:h3{color:blue;} --> </head> <body> <h3>测试!</h3> </body> 结果为: 蓝色
    查看全部
  • 在写JS代码的时候,大家可以会发现这样现象: document.write(" 1 2 3 "); 结果: 1 2 3 无论在输出的内容中什么位置有多少个空格,显示的结果好像只有一个空格。 这是因为浏览器显示机制,对手动敲入的空格,将连续多个空格显示成1个空格。 解决方法: 1. 使用输出html标签&nbsp;来解决 document.write("&nbsp;&nbsp;"+"1"+"&nbsp;&nbsp;&nbsp;&nbsp;"+"23"); 结果: 1 23 2. 使用CSS样式来解决 document.write("<span style='white-space:pre;'>"+" 1 2 3 "+"</span>"); 结果: 1 2 3 在输出时添加“white-space:pre;”样式属性。这个样式表示"空白会被浏览器保留"
    查看全部
  • alert(字符串或变量); <script type="text/javascript"> var mynum = 30; alert("hello!"); alert(mynum); </script> 结果:按顺序弹出消息框 先弹出hello对话框再弹出30
    查看全部
  • 二、JavaScript应放在哪 页面中的JavaScript会在浏览器加载页面的时候被立即执行,有时候我们想让一段脚本在页面加载的时候执行,而有时候我们想在用户触发一个事件的时候执行脚本。 1)head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时,可以保证脚本在任何调用之前被加载。 <html> <head> <script type=”text/javascript”> … </script> </head> 2)body 部分中的脚本: 当页面被加载时执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。 <html> <head> </head> <body> <script type=”text/javascript”> … </script> </body> 3)body 和 head 部分可同时有脚本:文件中可以在body和head部分同时存在脚本。 <html> <head> <script type=”text/javascript”> … </script> </head> <body> <script type=”text/javascript”> … </script> </body> 4)外部脚本的使用 有时候你可能想在几个页面中运行同样的脚本程序, 而不需在各个页面中重复的写这些代码。这时你就要用到外部脚本。你可以把脚本写在一个外部文件中,保存在扩展名为 .js的文件中。 注意:外部脚本文件中不要包含标记符<script> 使用外部脚本时将标记符<script> 的“src”属性值指向相应的.js文件就可以了: <html> <head> <script src=”xxx.js”></script> </head> <body> </body> </html>
    查看全部
  • Js放在head和body中的区别 在HTML body部分中的JavaScripts会在页面加载的时候被执行。 在HTML head部分中的JavaScripts会在被调用的时候才执行。 一、区别 浏览器解析html是从上到下的。 如果把javascript放在head里的话,则先被解析,但这时候body还没有解析,所以会返回空值。一般都会绑定一个监听,当全部的html文档解析完之后,再执行代码: windows.onload=function(){ //这里放入执行代码 } 说明: 放在head中的JS代码会在页面加载完成之前就读取,而放在body中的JS代码,会在整个页面加载完成之后读取。 这就说明了,如果我们想定义一个全局对象,而这个对象是页面中的某个按钮时,我们必须将其放入body中,道理很明显:如果放入head,那当你定义的时候,那个按钮都没有被加载,可能获得的是一个undefind。
    查看全部
  • document.getElementById("p1").style.color="blue"; 这句话的意思是获取id为p1的元素然后获取该元素样式并获取元素样式中的颜色属性并设置为蓝色 二、JavaScript应放在哪 页面中的JavaScript会在浏览器加载页面的时候被立即执行,有时候我们想让一段脚本在页面加载的时候执行,而有时候我们想在用户触发一个事件的时候执行脚本。 以上是javascript 1)head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时,可以保证脚本在任何调用之前被加载。 2)body 部分中的脚本: 当页面被加载时执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。
    查看全部
  • 定义函数: function 函数名(){ 函数体 } 函数调用: 函数定义好后,是不能自动执行的,所以需调用它,只需直接在需要的位置写
    查看全部
  • obj.removeAttribute("style");//清除属性
    查看全部
    0 采集 收起 来源:编程挑战

    2018-03-22

  • if(条件) { 条件成立时执行的代码 } else { 条件不成立时执行的代码 }
    查看全部
  • 定义变量: var 变量名 变量先声明再赋值
    查看全部
  • 注释的作用是提高代码的可读性,帮助自己和别人阅读和理解你所编写的JavaScript代码,注释的内容不会在网页中显示。
    查看全部
  • 控制类名(className 属性) className 属性设置或返回元素的class 属性。 语法: object.className = classname 作用: 1.获取元素的class 属性 2.为网页内的某个元素指定一个css样式来更改该元素的外观
    查看全部
  • 1. “;”分号要在英文状态下输入,同样,JS中的代码和符号都要在英文状态下输入。 2. 虽然分号“;”也可以不写,但我们要养成编程的好习惯,记得在语句末尾写上分号。
    查看全部

举报

0/150
提交
取消
课程须知
该课程是针对新手的一个简单基础的课程,让您快速了解JS,通过一些简单的代码编写体会JS。如果您已经对JS有所了解,可以跳过本课程,学习JS进阶课程,进一步学习JS相应的基础知识。学习本课程,希望您至少具备HTML/CSS基础知识,认识常用的标签。
老师告诉你能学到什么?
1. 理解JavaScript基础语法; 2. 掌握常用语句的使用方法; 3. 学会如何获取DOM元素及进行简单操作。
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!