慕课网

精品课程 JavaScript入门篇

JavaScript入门篇

最热最新

oldbang

<script type="text/javascript">表示在<script></script>之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言。

查看全部

0 采集收起来源：新朋友你在哪里（如何插入JS）
2018-06-18
宝慕林5569894

JS中如何输出空格
在写JS代码的时候，大家可以会发现这样现象:
document.write(" 1 2 3 ");
结果: 1 2 3
无论在输出的内容中什么位置有多少个空格，显示的结果好像只有一个空格。
这是因为浏览器显示机制，对手动敲入的空格，将连续多个空格显示成1个空格。
解决方法:
1. 使用输出html标签 来解决
document.write("  "+"1"+"    "+"23");
结果: 1 23
2. 使用CSS样式来解决
document.write("<span style='white-space:pre;'>"+" 1 2 3 "+"</span>");
结果: 1 2 3
在输出时添加“white-space:pre;”样式属性。这个样式表示"空白会被浏览器保留"

查看全部

0 采集收起来源：JavaScript-输出内容（document.write）
2018-06-18
陈大隐
控制类名（className 属性）：

className属性设置或返回元素的class属性。
语法：
object.className = classname
作用：
1. 获取元素的class属性
2. 为网页的某个元素指定一个CSS样式来更改元素的外观
查看全部

0 采集收起来源：控制类名（className 属性）
2018-06-18
陈大隐

显示和隐藏（display属性）：
网页中经常会看到显示和隐藏效果，可以通过display属性来设置

语法： Object.style.display =value;
value取值：

查看全部

0 采集收起来源：显示和隐藏（display属性）
2018-06-18
陈大隐

改变HTML样式：
HTML DOM允许JavaScript改变HTML元素的样式。
语法:
Object.style.property = new style;

基本属性表：

查看全部

0 采集收起来源：改变 HTML 样式
2018-06-18
陈大隐

inner HTML属性：

inner HTML属性用于获取或替换HTML元素的内容。
语法：
Object.innerHTML
注意： object是获取的元素对象，如通过document.getElementById("id名称")获取的元素。

可以通过Id = "con"获取<p>元素，并将元素的内容输出和改变元素的内容，代码如下：

查看全部

0 采集收起来源：innerHTML 属性
2018-06-18
陈大隐

通过ID获取元素：
a
标签的id属性是唯一的，可以通过语法：
document.getElementById("id名称")方式获得ID元素
注意获取到的元素是一个对象，想要对元素进行操作，我们要通过它的属性和方法。

查看全部

0 采集收起来源：通过ID获取元素
2018-06-18
陈大隐
JavaScript 认识DOM：
文档对象模型（DOM），定义访问和处理HTML文档的标准方法，DOM将HTML文档呈现为带有元素，属性和文本的树结构。

HTML文档可以说是由节点构成的集合，三种常见的DOM节点：
1. 元素节点：下图重<html>、<body>、<p>等都是元素节点即标签。
2. 文本节点：向用户展示的内容，如<li></li>中的JavaScript、DOM、CSS等文本。
3. 属性节点：元素属性，如<a>标签的链接属性href="...."。
查看全部

0 采集收起来源：认识DOM
2018-06-18
Yunxiso

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
function openWindow(){
write=prompt("确认打开网页？",'http：//www.imooc.com/');
// 新窗口打开时弹出确认框，是否打开

// 通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com/
if(write!=null){
window.open(write,'_Blank','width=400','height=500','menubar=0','toolbar=0');
}
//打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。
}

</script>
</head>
<body>
<input type="button" value="新窗口打开网站" onclick="openWindow()" />
</body>
</html>

prompt 取消返回值为null，确定返回值为文本框内容，不知道为什么没看到别人用prompt，全是confirm

查看全部

0 采集收起来源：编程练习
2018-06-17
慕设计8491148

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body{font-size:12px;}
#txt{
height:400px;
width:600px;
border:#333 solid 1px;
padding:5px;}
p{
line-height:18px;
text-indent:2em;}
</style>
</head>
<body>
<h2 id="con">JavaScript课程</H2>
<div id="txt">
<h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
<p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
<p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
<p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
</div>
<form>

<input type="button" value="改变颜色" onclick="changeColor()">
<input type="button" value="改变宽高" onclick="changeSize()">
<input type="button" value="隐藏内容" onclick="hideText()">
<input type="button" value="显示内容" onclick="showText()">
<input type="button" value="取消设置" onclick="rec()" >
</form>
<script type="text/javascript">
var text= document.getElementById("txt");
var title=document.getElementById("con");
//定义"改变颜色"的函数
function changeColor(){
title.style.color="red";
title.style.backgroundColor="blue";
}
//定义"改变宽高"的函数
function changeSize(){
text.style.width="300px";
text.style.height="300px";
}
//定义"隐藏内容"的函数
function hideText(){
text.style.display="none";
}
//定义"显示内容"的函数
function showText(){
text.style.display="block";
}
//定义"取消设置"的函数
function rec(){
var message=confirm("请确认是否取消设置");
if(message==true){
text.removeAttribute("style");
title.removeAttribute("style");
}else{

}
}
</script>
</body>
</html>

查看全部

0 采集收起来源：编程挑战
2018-06-16
syni

object.removeAttribute('style') 重置CSS

查看全部

0 采集收起来源：编程挑战
2018-06-15
johanjingjing
控制类名（className 属性）
className 属性设置或返回元素的class 属性。
语法：
```
object.className = classname
```
作用:
1.获取元素的class 属性
2. 为网页内的某个元素指定一个css样式来更改该元素的外观
查看全部

0 采集收起来源：控制类名（className 属性）
2018-06-15
johanjingjing
显示和隐藏（display属性）
网页中经常会看到显示和隐藏的效果，可通过display属性来设置。
语法：
```
Object.style.display = value
```
注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
value取值:
查看全部

0 采集收起来源：显示和隐藏（display属性）
2018-06-15
johanjingjing
改变 HTML 样式
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？
语法:
```
Object.style.property=new style;
```
注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
基本属性表（property）:
注意:该表只是一小部分CSS样式属性，其它样式也可以通过该方法设置和修改。
查看全部

0 采集收起来源：改变 HTML 样式
2018-06-15
523862678

function openWindow(){
var inquire=confirm("是否打开")
if(inquire==true)
{
window.open('http://www.imooc.com','-blank','width=400px,height=500px,menubar=no,toolbar=no');
}
else
{}
}

查看全部

0 采集收起来源：编程练习
2018-06-15