慕课网

精品课程 JavaScript入门篇

JavaScript入门篇

最热最新

哈哈哈2018

con.innerHTML

查看全部

0 采集收起来源：innerHTML 属性
2018-06-30

白沚花

JS文件不能直接运行，需嵌入到HTML文件中执行，我们需在HTML中添加如下代码，就可将JS文件嵌入HTML文件中。 <script src="script.js"></script>

查看全部

0 采集收起来源：我也可以独立（引用JS外部文件）

2018-06-29

黑芝麻糊

<!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="resettext()">
</form>
<script type="text/javascript">
var mytxt=document.getElementById("txt");
//定义"改变颜色"的函数
function changecolor(){
mytxt.style.color="red";
mytxt.style.backgroundColor="yellow";
}

//定义"改变宽高"的函数
function changesize(){
mytxt.style.width="500px";
mytxt.style.height="500px";
}

//定义"隐藏内容"的函数
function hidetext(){
mytxt.style.display="none";
}

//定义"显示内容"的函数
function showtext(){
mytxt.style.display="block";
}

//定义"取消设置"的函数
function resettext(){
var set=confirm("请问是否取消设置？");
if(set==true){
mytxt.removeAttribute("style");
}
}

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

查看全部

0 采集收起来源：编程挑战
2018-06-29
哈哈哈2018
<script type="text/javascript">
function Wopen(){
window.open('http://www.imooc.com','_blank','width=600,height=400,menuber=100,toolbar=0');

}
</script>
```
 _blank：在新窗口显示目标网页
       _self：在当前窗口显示目标网页
       _top：框架网页中在上部窗口中显示目标网页
```
打开http://www.imooc.com网页，将在新窗体中打开，宽为600，高为400，距屏顶100像素，屏左0像素。当点击按钮时，打开新窗口
查看全部

0 采集收起来源：JavaScript-打开新窗口（window.open）
2018-06-29
慕尼黑3334876

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

查看全部

0 采集收起来源：新朋友你在哪里（如何插入JS）
2018-06-28
hotpan

alert.（“hello”）；

查看全部

0 采集收起来源：JavaScript-认识语句和符号
2018-06-28
hotpan

javascript语句以“；”结束标准语句 document.（“hello”）；

查看全部

0 采集收起来源：JavaScript-认识语句和符号
2018-06-28
hotpan

而如果是通过事件调用执行的function那么对位置没什么要求的

查看全部

0 采集收起来源：找到你的位置（JS在页面中的位置）
2018-06-28
hotpan

script必须放在head或者body中开头以<head>开始中间编写script以<\head>结束

查看全部

0 采集收起来源：找到你的位置（JS在页面中的位置）
2018-06-28
qq_更多尝试只为撼动一种习惯_03555756

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQueryMobile</title>
<link type="text/css" rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<script type="text/javascript">
var docEl = document.documentElement,
resizeEvt = 'onorientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
//设置根字体大小
docEl.style.fontSize = 16 * (docEl.clientWidth / 320) + 'px';
};
//绑定浏览器缩放与加载时间
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);
</script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<a href="#" data-role="button">首页</a>
<h1>jquery mobile</h1>
<a href="#" data-role="button" class="ui-btn-right">搜索</a>

</div>
<div>
<p>链接过渡模式打开新对话　按钮图标选中效果</p>
<p>列表提示气泡字母分类搜索</p>
<p>表格百分百</p>
<p>表单日期开关滑动块</p>
<p>头部左右两侧图标</p>
<p>底部半透明点击隐藏</p>
<p>手风琴</p>
</div>
<div data-role="content">
<div>
<h1>按钮 button</h1>
<a href="" data-role="button" data-icon="search" data-iconpos="right">按钮图标 icon+位置 iconpos</a>
<a href="" data-role="button" data-corners="false" data-inline="true">直角 corners+行内按钮 inline</a>
<a href="" data-role="button" data-icon="search" data-iconpos="notext" data-inline="true" class="ui-nodisc-icon">只显示图标 iconpos</a>

<a href="" data-role="button" data-mini="true" data-shadow="false">小型按钮 mini+无阴影 shadow</a>
<div data-role="controlgroup" data-type="horizontal" data-mini="mini">
<a href="" data-role="button" class="ui-btn-active ui-state-persist">横向 horizontal</a>

<a href="" data-role="button" >小型 mini</a>
</div>
</div>
<div>
<h1>链接属性 transition</h1>
<br/>
<a href="#" data-rel="back">回上一页 back</a>
<a href="#pagetwo" data-rel="dislog">打开新会话 dislog</a>
<a href="#pagetwo" data-transition="fade">事件</a>
<a href="#pagetwo" data-transition="flip">过渡模式 flip</a>
<a href="#pagetwo" data-transition="flow">过渡模式 flow</a>
<a href="#pagetwo" data-transition="pop">过渡模式 pop</a>
<a href="#pagethr">对话框 </a>
</div>
<h1>折叠元素 collapsible</h1><br/>
<div data-role="collapsible" data-collapsed="false" data-collapsed-icon="arrow-l" data-expanded-icon="arrow-r" data-iconpos="right" data-inset="false" data-mini="true">
<h1>默认展开 collapsed</h1>
<p>图标 collapsed-icon</p>
<p>图标 expanded-icon</p>
<p>图标位置 iconpos</p>
<p>圆角 inset</p>
<p>小型 mini</p>
</div>
<br/>
<h1>手风琴 collapsible-set</h1>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>内容同折叠元素</p>
</div>
<div data-role="collapsible">
<h1>点击我 - 我可以折叠！</h1>
<p>内容同折叠元素</p>
</div>
</div>
<div>
<h1>列表 listview 圆角 inset</h1>
<br/>
<ul data-role="listview" data-autodividers="true" data-filter="true" data-filter-placeholder="搜索 filter" data-icon="search" data-inset="true">
<li data-role="list-divider">列表分割 list-divider</li>
<li data-icon="arrow-l"><a href="">autodividers</a></li>
<li><a href=""><span class="ui-li-count">123</span>autodividers</a></li>

<li><a href="">拆分列表</a><a href="">cfda</a></li>
<li><a href="" class="ui-hidden-accessible">cfda</a></li>

</ul>
</div>
<div>
<h1>表格布局 ui-grid-d</h1>
<div class="ui-grid-d">
<div class="ui-block-a">
<a href="#" class="ui-btn ui-corner-all ui-shadow">第一列</a><br>
<span>第一列: 这是一些文本。 </span>
</div>
<div class="ui-block-b">
<a href="#" class="ui-btn ui-corner-all ui-shadow">第二列</a><br>
<span>第二列: 这是一些文本。</span>
</div>
<div class="ui-block-c">
<a href="#" class="ui-btn ui-corner-all ui-shadow">第三列</a><br>
<span>第三列: 这是一些文本。 </span>
</div>
<div class="ui-block-d">
<a href="#" class="ui-btn ui-corner-all ui-shadow">第四列</a><br>
<span>第四列: 这是一些文本。</span>
</div>
<div class="ui-block-e">
<a href="#" class="ui-btn ui-corner-all ui-shadow">第五列</a><br>
<span>第五列: 这是一些文本。</span>
</div>
</div>
</div>
<div>
<form data-mini="true">
<h1>配对 label+input</h1>
<div data-role="fieldcontain">
<label for="text">点击</label>
<input type="text" id="text">
<label for="text1">点击</label>
<input type="text" id="text1">
</div>

<h1>时间 data 邮箱 email</h1>
<input type="date"/>
<input type="email" placeholder="你的电子邮箱.."/>

<h1>按钮选择 slider</h1>
<select data-role="slider" data-mini="true">
<option>小型</option>
<option>mini</option>
</select>

<h1>滑动块 range</h1>
<input type="range" data-highlight="true" data-mini="true" value="50" min="0" max="100"/>

<h1>单选按钮 radio</h1>
<label for="rad1">单选按钮</label>
<input type="radio" id="rad1" value="小型" name="rad"/>
<label for="rad2">单选按钮</label>
<input type="radio" id="rad2" value="mini" name="rad"/>

<h1>复选框 checkbox</h1>
<label for="checkbox">小型复选框 mini</label>
<input type="checkbox" id="checkbox" data-mini="true"/>
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
<label for="checkbox1">横向 horizontal</label>
<input type="checkbox" id="checkbox1" data-mini="true" checked/>
<label for="checkbox2">小型 mini</label>
<input type="checkbox" id="checkbox2" data-mini="true"/>
</div>

<h1>选择 select</h1>
<div data-role="controlgroup" data-type="horizontal">
<select data-icon="search" data-inline="true" data-mini="true">
<option>组合 controlgroup</option>
<option>横排 horizontal</option>
</select>
<select data-icon="search" data-inline="true" data-mini="true" data-iconpos="left">
<option>内联 inline</option>
<option>图标 icon 位置 iconpos</option>
</select>
</div>
</form>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div data-role="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="true" class="ui-btn">

<h1>固定 fixed 半透明 fullscreen 点击消失 tap-toggle</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="content">
<a href="#pageone" data-transition="slidedown">过渡模式 slidedown</a>
<a href="#pageone" data-transition="slidefade">过渡模式 slidefade</a>
<a href="#pageone" data-transition="slideup">过渡模式 slideup</a>
<a href="#pageone" data-transition="turn">过渡模式 turn</a>
<a href="#pagethr" data-rel="popup">弹窗 popup</a>
<div>
<h1>事件</h1>
<p>点击</p>
<span>长按</span>
<h2>向左滑动</h2>
<h3>向右滑动</h3>
</div>
</div>
</div>
<div data-role="page" data-dialog="true" id="pagethr">
<div data-role="header">
<h1>我是对话框</h1>
</div>
<div data-role="content">
<a href="#pageone" data-transition="slidedown">过渡模式 slidedown</a>
</div>
<div data-role="footer">
<h1>对话框底部文本</h1>
</div>
</div>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pagecreate","#pagetwo",function(){
$("p").on("tap",function(){
$(this).hide();
});
$("span").on("taphold",function(){
$(this).hide();
});
$("h2").on("swipeleft",function(){
$(this).hide();
});
$("h3").on("swiperight",function(){
$(this).hide();
});
$(document).on("scrollstart",function(){
alert("开始滚动!");
});
$(document).on("scrollstop",function(){
alert("停止滚动!");
});
});
</script>
</body>
</html>

查看全部

0 采集收起来源：编程挑战
2018-06-28
云萼

此时，若当前浏览器窗口是全屏模式，则不会弹开新的窗口，而是打开一个新的标签页。而不是全屏时，则弹开一个新的浏览器窗口，宽高顶边设置有效

查看全部

0 采集收起来源：JavaScript-打开新窗口（window.open）
2018-06-28
奇葩大叔

在页面输出多个内容，使用“+”连接；变量名之间直接使用+，如果还有其他内容输出，使用双引号加号连接“某某某”

查看全部

0 采集收起来源：JavaScript-输出内容（document.write）
2018-06-27
奇葩大叔

onclick 鼠标点击事件
定义一个函数：function contxt（）{alert（“调用函数”）}
使用input点击按钮执行
<input type="button" value="点击我" onclick="contxt()">

查看全部

0 采集收起来源：JavaScript-什么是函数
2018-06-27
奇葩大叔

单行注释，在注释内容前加符号“//”；
多行注释以“/*”开始，以“*/”结束

查看全部

0 采集收起来源：JavaScript-注释很重要
2018-06-27
奇葩大叔

一行的结束就被认定为语句的结束，通常在结尾加上一个分号";"来表示语句的结束。
注意:
1. “;”分号要在英文状态下输入，同样，JS中的代码和符号都要在英文状态下输入。
2. 虽然分号“;”也可以不写，但我们要养成编程的好习惯，记得在语句末尾写上分号。

查看全部

0 采集收起来源：JavaScript-认识语句和符号
2018-06-27

首页上一页 467 468 469 470 471 472 473 下一页尾页

0/150

提交

取消

开始学习

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

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