js基础01

最新推荐文章于 2024-03-15 17:18:35 发布

学习总不晚

最新推荐文章于 2024-03-15 17:18:35 发布

阅读量123

点赞数

分类专栏： HTML 文章标签： HTML、JS基础

本文链接：https://blog.csdn.net/u013472738/article/details/100049067

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

基本格式

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.write</title>
  <script type="text/JavaScript">
    var mystr="我是";
    var mychar="JavaScript";
document.write(mystr+"<br>"+mychar);
alert("完美显示！");
 document.write("<br>"+mystr+"&nbsp;&nbsp"+"前面是两个空格");
 document.write("<br>"+mystr+mychar+"的忠实粉丝！");
  </script>
</head>
<body>
</body>
</html>

JS如何输出空格:

在写JS代码的时候，大家可以会发现这样现象:
document.write(" 1 2 3 ");
结果: 1 2 3
这是因为浏览器显示机制，对手动敲入的空格，将连续多个空格显示成1个空格。
解决方法:

使用输出html标签来解决

 document.write("&nbsp;&nbsp;"+"1"+"&nbsp;&nbsp;&nbsp;&nbsp;"+"23");

结果: 1 23

使用CSS样式来解决

 document.write("<span style='white-space:pre;'>"+"  1        2    3    "+"</span>");

结果: 1 2 3
在输出时添加“white-space:pre;”样式属性。这个样式表示"空白会被浏览器保留"

基础知识点：

1：输出内容：document

var strs = "学习内容";
document.write(99);
document.write("换行操作br:"+“<br>”+strs);
document.write(“空格操作：(&nbsp;)”+"&nbsp;&nbsp"+“前面是两个空格操作。”);

2：警告对话框：alert

alert(“警告，警告，入侵警告！”);

3：消息对话框（确认/取消）：confirm

var get_boolean  = confirm("消息体：你坚持在学习吗？");
返回的是：true 或者 false;
if(get_boolean==true){
document.write("Good!越学习越幸运。");
}
else{
document.write("学习能让你更自信，快来学习吧。");
}

4：消息对话框（文本输入内容：确认/取消）：prompt

var getTxt =prompt("这里是消息的说明如：请输入你的名称：","默认的文本中的显示内容如：我的名字就是TJ");

getTxt：
点击“确认”返回用户输入的内容；
点击“取消”返回：null

5:打开窗口：window.open(‘str1’,‘str2’,‘str3’);

str1:打开窗口的URL如：http://www.baidu.com/
str2：说明三个参数：“_top”,"_blank","_self"
"_blank":  在新窗口显示网页
"_sefl" ： 在当前窗口显示目标网页
"_top"  :  框架网页中在上部窗口中显示目标网页
str3:参数说明：
top:Number(数字)：窗口顶部离开屏幕顶部的像素数
left:Number：窗口左端离开屏幕左端的像素数
width:Number:窗口的宽度
height:Number:窗口的高度
menubar:yes/no：窗口有没有菜单
toolbar:yes/no:窗口有没有工具条
scrollbars:yes/no:窗口有没有滚动条
status:yes/no:窗口有没有状态栏

例如：打开：http://www.baidu.com网站；大小为：300px*200px,无菜单，无工具栏，无状态栏，有滚动条窗口

<script type="text/JavaScript">

window.open('http://www.baidu.com/','_blank',
'width=300,height=200,menubar=no,
toolbar=no,status=no,scroollbars=yes');

 </script>

完整代码：

--------------

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window.open</title>
<script type="text/javascript">
 function Wopen(){
   window.open('http://www.baidu.com/','_blank','width=300,height=200,menubar=no,toolbar=no,status=no,scroollbars=no');

 } 
</script>
</head>
<body>
   <input name="button" type="button" onClick="Wopen()" value="点击我，打开新窗口" />
</body>
</html>

--------------

6:关闭窗口：window.close();

window.close();

7：通过ID获取元素

语法：
document.getElementById("id");

8:innerHTML属性
innerHTML属性用于获取或者替换HTML元素的内容。
例如：

<h2 id="con" class="conName"> 用来测试的案例</H2>
那么：通过元素获取ID:
var getID = document.getElementById("con");
通过innerHTML获取元素ID对应的内容：输出：
document.write(getID.innerHTML);
输出结果：
用来测试的案例
通过innerHTML改变对应ID:con的内容：
getID.innerHTML = "改变了啊" ;
输出：
document.write(getID.innerHTML);
输出结果：
改变了啊

9：改变HTML样式
例如：

  <h2 id="con" class="ClassName">I love JavaScript</H2>
语法：Object.style.property = new style;
基本属性表：
属性：       描述：
backgroundColor :  设置元素的背景颜色
height:            设置元素的高度
width:              设置元素的宽度
color:              设置文本颜色
font:                在一行设置所有的字体属性
fontFamily:         设置元素的字体系列
fontSize:           设置元素的字体大小
等等；
注意：该表只是一小部分CSS样式属性；其他样式可以通过该方法设置和修改。
例如：设置 文本颜色（red）、字体大小、背景颜色（#CCC）、元素宽度
var  mychar = document.getElementById("con");
 mychar.style.color = "red"; 
 mychar.style.fontSize = "3"; 
 mychar.style.backgroundColor = "#CCC";
 mychar.style.width="300px";

10：显示和隐藏：display

var  mychar = document.getElementById("con");
显示：
mychar.style.display = "block" ;
隐藏：
mychar.style.display = "none" ;

11:控制类名（className 属性）

className 属性设置和返回元素的class属性
语法：
object.className = classname 
作用：
a:获取元素的class属性
b:为网页的某个元素指定一个css样式来更改该元素的外观
例：添加两个样式：style1 和 style2
<style>
    body{ font-size:16px;}
    .style1{
		border:1px solid #eee;
		width:230px;
		height:50px;
		background:#ccc;
		color:red;
    }
	.style2{
		border:1px solid #ccc;
		width:230px;
		height:50px;
		background:#9CF;
		color:blue;
	}
	</style>
	
添加一个p标签：
	<p id="p2" class="style1">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
	
	
var  pp2 = document.getElementById("p2");
document.write(“输出对应元素的class的属性样式是：”+pp2.className);
输出的结果是：
输出对应元素的class的属性样式是：style1
通过className 改变对应元素的样式:样式改为：style2
pp2.className= style2;
 
document.write(“输出对应元素的class的属性样式是：”+pp2.className);
输出的结果是：
输出对应元素的class的属性样式是：style2

完整代码练习：

<!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;}
		.two{
		border:1px solid #ccc;
		width:230px;
		height:50px;
		background:#9CF;
		color:blue;
	}
</style>
</head>
<body>
  <h2 id="con" class="rs">JavaScript课程</H2>
  <div id="txt"> 
     <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
        <p id="p1" class="aa">1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
        <p id="p2">2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
        <p id="p3">3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
  </div>
  <form>
  <!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
    <input type="button" value="改变颜色" onclick= "changeColor()" >  
    <input type="button" value="改变宽高" onclick="changeWidth()">
    <input type="button" value="隐藏内容"  onclick="display_none()">
    <input type="button" value="显示内容" onclick="display_block()">
    <input type="button" value="取消设置" onclick="cancle()">
  </form>
  <script type="text/javascript">
   var  conTest = document.getElementById("con");
   var conTest2 = document.getElementById("p2");
     conTest.style.color = "red";
// 定义"改变颜色"的函数
function changeColor(){
    conTest.style.color = "red";
    conTest.style.backgroundColor = "#CCC" ;
    conTest2.style.color = "red";
    
}

//定义"改变宽高"的函数
function changeWidth(){
    conTest.style.width="300px" ;
    conTest.style.height = "30px" ;
      conTest2.style.height = "30px" ;
   
}

//定义"隐藏内容"的函数
function display_none(){
conTest.style.display = "none" ;
conTest2.style.display = "none" ;
}
//定义"显示内容"的函数
function display_block(){
conTest.style.display = "block";
conTest2.style.display = "block" ;
}
//定义"取消设置"的函数
function cancle(){
  var ges = confirm("确定取消吗？" );
//document.write(ges+"取消了----");
if(ges==true){
    var ggs = document.getElementById("p2").style="" ;//取消设置
     // var ggs = document.getElementById("p2")  ;
   // ggs.className = "two";//通过className 修改元素样式
  //  ggs.backgroundColor = "#CCC" ;
    //  document.write("取消了----");
     alert("取消"+ggs.className ); 
}
else{
    alert("不取消");  
}
}
  </script>
</body>
</html>

学习总不晚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础01

基本格式<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>document.write</title> <script type="text/JavaS...
复制链接

扫一扫