慕课网

精品课程 JavaScript入门篇

JavaScript入门篇

最热最新

慕运维9164912

通过id获取元素：
document.getElementById("id的名字")
可将获得的元素内容赋值给变量

innerHTML属性：用于获取或替换HTML元素的内容
Object.innerHTML
Object：获取的元素对象

<p id="id的名字" class="属性名字">id对应的内容</p>：p元素的建立
变量=document.getElementById("id的名字");
变量.innerHTML:提取变量的内容（即p元素的内容）；可以直接用等号修改内容

改变HTML样式：
Object.style.property=new style;
property的属性：
backgroundColor=设置元素的背景颜色
height=设置元素的高度
width=设置元素的宽度
color=设置文本的颜色
font=在一行设置所有的字体属性
fontFamily=设置元素的字体系列
fontSize=设置元素的字体大小
eg.Object.style.color="red"；将字体改成红色

显示和隐藏（display）
Object.style.display="value";
value=none：此元素不会被显示（即隐藏）
value=block：此元素将显示为块级元素（即显示）

className:属性设置或返回元素的class属性
object.className=classnameame
用于获取元素的class属性；为网页内的某个元素指定一个css样式来更改该元素的外观

指定样式：
<style>
body{ font-size:16px;}
.one{//将这种样式命名为one
border:1px solid #eee;
width:230px;
height:50px;
background:#ccc;
color:red;
}
.two{//将这种样式命名为two
border:1px solid #ccc;
width:230px;
height:50px;
background:#9CF;
color:blue;
}
</style>

查看全部

0 采集收起来源：编程挑战
2018-07-15
慕运维9164912

2-7 编程练习
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk"/>
<script type="text/javascript">
        function openWindow() {
            var mywin=confirm("是否打开新窗口");
            if (mywin==true) { //新窗口打开时弹出确认框，是否打开
                var mynet=prompt("请输入要打开的网址","http://www.imooc.com/");
                if (mynet!=null) {//通过输入对话框，确定打开的网址，默认为http://www.imooc.com/            window.open(mynet,'_blank','width=400,height=500,menubar=no,toolbar=no');//打开窗口要求，宽400像素，高500像素，无菜单栏、无工具栏
                }
            }
         }
</script>
</head>
<body>
    <input type="button" value="新窗口打开网站" onclick="openWindow()" />
</body>
</html>

查看全部

0 采集收起来源：编程练习
2018-07-15
慕运维9164912

关闭窗口：window.close(); 关闭本窗口
<窗口对象>.close()；关闭指定的窗口
可以将打开的窗口对象赋予变量，再关闭
如：var 变量=window.open(); 变量.close（）；

查看全部

0 采集收起来源：编程练习
2018-07-15
慕运维9164912

打开新窗口：
window.open('URL','窗口名称','参数字符串')
URL：网页的网址或路径
窗口名称：被打开窗口的名称，有如下几种类型
    _blank：在新窗口显示目标网页
    _self：在当前窗口显示目标网页
    _top：框架网页中在上部窗口中显示目标网页
窗口参数:用逗号隔开
top=number：窗口顶部离开屏幕顶部的像素数
left=number：窗口左端离开屏幕顶部的像素数
width=number：窗口的宽度
height=number：窗口的高度
menubar=yes/no：窗口有没有菜单
toolbar=yes/no：窗口有没有工具条
scrollbars=yes/no：窗口有没有滚动条
status=yes/no：窗口有没有状态栏

查看全部

0 采集收起来源：JavaScript-打开新窗口（window.open）
2018-07-15
慕运维9164912

交互对话框：变量=prompt(显示在对话框中不可修改的文本1，用户自己输入可修改的文本2）=prompt（文本1）;
包含确定、取消按钮和文本输入框，如果输入框有内容且为确定则将输入框的值赋给变量，若无内容且确定则返回null；由于文本2需要用户自己输入，所以默认prompt只有一个内容，就是不可修改的文本1
var myname=prompt("请输入你的姓名：");
if (myname!=null)
{内容1；}
else
{内容2；}

查看全部

0 采集收起来源：JavaScript-打开新窗口（window.open）
2018-07-15
慕运维9164912

<script type="text/javascript"></script>
document.write("内容");
document.write(变量);
document.write(内容1+内容2);
输出空格：1、一个空格=一个 
2、document.write("<span style='white-space:pre;'>"+"含有空格的内容 "+"</span>");
换行符：<br>
var 变量名;
if语句：
if (条件1) {实践内容1;} else {实践内容2;}
弹出窗口：alert();
按钮设置：<input name="button" type="button" onClick="要操作的内容" value="按钮的名字" />
消息确认框（包括确定和取消按钮）: confirm(在消息对话框中要显示的文本);
操作:
var 消息对话框返回的变量=confirm(对话框内容);
if (变量==true)
{条件1;}
else
{条件2;}

查看全部

0 采集收起来源：JavaScript-确认（confirm 消息对话框）
2018-07-15
Keen丶

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
   <meta charset="UTF-8">
<script type="text/javascript">

    function openWindow(){
       var box = confirm("是否创建新的窗口？");
          if (box == true) {
              var box2 = prompt("请输入要打开的网址：","http://www.imooc.com")
              if (box2) {
                  window.open(box2,"_blank","width=400,height=500,menuber=no,toolber=no");
              } else{
                  window.close();
              }
          }
    }

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

查看全部

1 采集收起来源：编程练习
2018-07-15
慕妹1279412

prompt(str1,str2);
str1:要显示在消息对话框中的文本，不可修改
str2：文本框中的内容，可以修改

查看全部

0 采集收起来源：JavaScript-提问（prompt 消息对话框）
2018-07-15
Savior_

<script type="text/javascript">
function rec(){
var score; //score变量，用来存储用户输入的成绩值。
score = prompt("哎哟不错哦！") ;
if(score>=90)
{
document.write("你很棒!");
}
else if(score>=75)
{
document.write("不错吆!");
}
else if(score>=60)
{
document.write("要加油!");
}
else
{
document.write("要努力了!");
}
}
</script>

<input name="button" type="button" onClick="rec()" value="点击我，对成绩做评价!" />

查看全部

0 采集收起来源：JavaScript-提问（prompt 消息对话框）
2018-07-15
Savior_

<script type="text/javascript">
function rec(){
var mymessage=confirm("你的性别是？") ;
if(mymessage==true)
{
document.write("你是男生!");
}
else
{
document.write("你是女生");
}
}

查看全部

0 采集收起来源：JavaScript-确认（confirm 消息对话框）
2018-07-15

棒棒啦

var mymessage=confirm("你喜欢JavaScript吗?");
    if(mymessage==true)
    {   document.write("很好,加油!");   }

查看全部

0 采集收起来源：JavaScript-确认（confirm 消息对话框）

2018-07-15

F_Lancer

//定义“取消设置”的函数
function qx(){
var change=confirm("是否取消以上效果");
if(change==true){
var txt=document.getElementById("txt");
txt.removeAttribute('style');

查看全部

0 采集收起来源：编程挑战
2018-07-15
yhvivian
控制类名（className 属性）
className 属性设置或返回元素的class 属性。
语法：
```
object.className = classname
```
作用:
1.获取元素的class 属性
2. 为网页内的某个元素指定一个css样式来更改该元素的外观
例子：
function modify(){
var p2 = document.getElementById("p2");
p2.className="two";
}
查看全部

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

例子：
<script type="text/javascript">
function hidetext()
{
var mychar = document.getElementById("con");
mychar.style.display="none"
}
function showtext()
{
var mychar = document.getElementById("con");
mychar.style.display="block"
}
</script>
查看全部

0 采集收起来源：显示和隐藏（display属性）
2018-07-14
yhvivian
改变 HTML 样式
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？
语法:
```
Object.style.property=new style;
```
注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
example
```
<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";
</script>
```
查看全部

0 采集收起来源：改变 HTML 样式
2018-07-14

首页上一页 456 457 458 459 460 461 462 下一页尾页

0/150

提交

取消

开始学习

课程须知: 该课程是针对新手的一个简单基础的课程，让您快速了解JS，通过一些简单的代码编写体会JS。如果您已经对JS有所了解，可以跳过本课程，学习JS进阶课程，进一步学习JS相应的基础知识。学习本课程，希望您至少具备HTML/CSS基础知识，认识常用的标签。

老师告诉你能学到什么？: 1. 理解JavaScript基础语法； 2. 掌握常用语句的使用方法； 3. 学会如何获取DOM元素及进行简单操作。

JavaScript入门篇

控制类名（className 属性）

显示和隐藏（display属性）

改变 HTML 样式