JS学习笔记2

最新推荐文章于 2024-07-12 09:36:48 发布

嘭啦啦啦啦塵

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量63

点赞数

分类专栏： JS学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_40405370/article/details/117964290

版权

JS学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1 关于注释：单行注释// //，多行注释/* */，同时注释多个单行ctrl+K+C，取消多个单行注释ctrl+K+U

2 关于变量：变量声明 var 变量名;(let/const) 。需先声明再赋值。

变量命名规则：1.变量必须使用字母、下划线(_)或者美元符($)开始。2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。3.不能使用JavaScript关键词与JavaScript保留字。

3 有关函数：function 函数名(){ }

4 输出内容：document.write() 1.直接输出引号内内容document.write("hello"); 2.输出变量所代表的内容 var a=8;document.write(a); 3.输出多项内容用 + 连接 document.write(a+"hello"); 4.输出html的标签document.write("hello"+"<br>");hello加换行符；

5 关于警告：alert(字符串或变量);alert弹出的警告框会包含一个确定按钮，若一个作用域内写了两个alert，则按顺序依次弹出

6 confirm消息对话框：用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮) confirm("yes or no?"); 返回值为Boolean类型，true/false,

7 prompt弹出消息对话框：通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。prompt(str1,str2); 注：str1: 要显示在消息对话框中的文本，不可修改；str2：文本框中的内容，可以修改。1. 点击确定按钮，文本框中的内容将作为函数返回值 2. 点击取消按钮，将返回null。

8 打开新窗口：open() 方法可以查找一个已经存在或者新建的浏览器窗口 window.open([URL], [窗口名称], [参数字符串]) 参数说明：

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。

(1).该名称由字母、数字和下划线字符组成。

(2)."_top"、"_blank"、"_self"具有特殊意义的名称。

_blank：在新窗口显示目标网页

_self：在当前窗口显示目标网页

_top：框架网页中在上部窗口中显示目标网页

(3).相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。

(4).name 不能包含有空格。

参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

参数表

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

<script type="text/javascript">
   window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes');
</script>

9.关闭窗口 window.close(); 关闭本窗口窗口对象.close(); 关闭指定窗口

     var mywin=window.open("http://www.imooc.com");
     mywin.close();

10 通过id获取元素 document.getElementById("id");

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
    <p id="con">JavaScript</p>
    <script type="text/javascript">
      var mychar=document.getElementById("con");
      document.write("结果:"+mychar); //输出获取的P标签。 
    </script>
</body>
</html>

上示代码段输出结果：

11.innerHTML属性用于获取或替换 HTML 元素的内容（要获取或替换的元素对象）object.innerHTML

  var mychar=document.getElementById("con");
  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
  mychar.innerHTML="Hello world";
  document.write("修改后的标题:"+mychar.innerHTML);

12.改变html样式

Object.style.property=new style;

    var mychar= document.getElementById("con");
    mychar.style.color="red";
    mychar.style.backgroundColor="#CCC";
    mychar.style.width="300px";

注：改变宽高时，需=“500px”,注意引号与px.

13.显示与隐藏（display属性）：网页中经常会看到显示和隐藏的效果，可通过display属性来设置。 Object.style.display = value;

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
    <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> 
</head> 
<body>  
    <h1>JavaScript</h1>  
    <p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p> 
    <form>
       <input type="button" onclick="hidetext()" value="隐藏内容" /> 
       <input type="button" onclick="showtext()" value="显示内容" /> 
    </form>
</body> 
</html>

点击隐藏按钮可将“做为...”隐藏，点击显示按钮则显示

14.控制类名（className属性）设置或返回元素的class 属性。object.className = classname;

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className属性</title>
<style>
    body{ font-size:16px;}
    .one{
		border:1px solid #eee;
		width:230px;
		height:50px;
		background:#ccc;
		color:red;
    }
	.two{
		border:1px solid #ccc;
		width:230px;
		height:50px;
		background:#9CF;
		color:blue;
	}
	</style>
</head>
<body>
    <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="添加样式" onclick="add()"/>
	<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="更改外观" onclick="modify()"/>

	<script type="text/javascript">
	   function add(){
	      var p1 = document.getElementById("p1");
	      p1.className="one";
	   }
	   function modify(){
	      var p2 = document.getElementById("p2");
	      p2.className="two";
	   }
	</script>
</body>
</html>