Js入坑（0）

最新推荐文章于 2022-08-27 18:27:48 发布

PHPerJiang

最新推荐文章于 2022-08-27 18:27:48 发布

阅读量148

点赞数

CC 4.0 BY-SA版权

分类专栏： js HTML+CSS+JS 文章标签： js 入门

本文链接：https://blog.youkuaiyun.com/qq_36558538/article/details/86216480

HTML+CSS+JS 同时被 2 个专栏收录

11 篇文章

订阅专栏

5 篇文章

订阅专栏

入坑前言

为啥要入门Js，因为Js牛逼啊，因为我玩的不好啊，我一个干后端写接口的接到了写页面的需求，我有啥办法啊，玩的不溜怎么行呢，不会怎么办，学啊！等什么呢！

入坑第一课

js代码要写在 <script type="text/javascript"> </script>，表示在<script></script>之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言。
引入JS文件 <script src ="url" > </script>
页面初始化的js要放在head里，如果是通过实践调用的function,则对位置没有什么要求
document.wite("xx")；在页面里写入xxx
变量需要先声明，再赋值，并且变量区分大小写，当然变量可以不声明直接使用，但是不规范
变量之间用+链接，如果想要输出空格，可以拼接html语言" "

对话框

警告对话框alert() :

<script type="text/javascript">
   var mynum = 30;
   alert("hello!");
   alert(mynum);
</script>

确认对话框confirm()：

<script type="text/javascript">
    var mymessage=confirm("你喜欢JavaScript吗?");
    if(mymessage==true)
    {   document.write("很好,加油!");   }
    else
    {  document.write("JS功能强大，要学习噢!");   }
</script>

消息对话框（prompt）

//prompt(str1, str2);
//str1: 要显示在消息对话框中的文本，不可修改
//str2：文本框中的内容，可以修改
//点击确定按钮，文本框中的内容将作为函数返回值
//点击取消按钮，将返回null

var myname=prompt("请输入你的姓名:");
if(myname!=null)
  {   alert("你好"+myname); }
else
  {  alert("你好 my friend.");  }

//prompt(str1, str2);
//str1: 要显示在消息对话框中的文本，不可修改
//str2：文本框中的内容，可以修改
//点击确定按钮，文本框中的内容将作为函数返回值
//点击取消按钮，将返回null

打开新窗口window.open([url] ,[窗口名称]，[参数字符串]) :

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

关闭窗口 $.close

入坑第二课：dom

获取元素 document.getElementById(); 获取的结果是null 或者是一个对象

innerHTML用于获取或者更改html元素的内容，Object.innerHTML,其中Obejct是getElementById获取到的对象

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</p>
<script type="text/javascript">
  var mychar=   document.getElementById('con')       ;
  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
  mychar.innerHTML="33333";
  document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>
</html>

改变html样式：
1. Object.style.css_element = xxx;
2. 显示及隐藏 Object.style.display="none"(隐藏)， Object.style.style.display="block"(显示)
更换元素的class: Object.className="class_name";

练习题

<!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="change_color()">  
    <input type="button" value="改变宽高" onclick="change_width()">
    <input type="button" value="隐藏内容" onclick="change_display_none()">
    <input type="button" value="显示内容" onclick="change_display_block()">
  </form>
  <script type="text/javascript">
//定义"改变颜色"的函数
function change_color(){
    var txt = document.getElementById("txt");
    txt.style.color="red";
    txt.style.backgroundColor="blue";
}

//定义"改变宽高"的函数
function change_width(){
    var txt = document.getElementById("txt");
    txt.style.width="200px";
    txt.style.height="600px";
}

//定义"隐藏内容"的函数
function change_display_none(){
    var txt = document.getElementById("txt");
    txt.style.display="none";
}

//定义"显示内容"的函数
function change_display_block(){
    var txt = document.getElementById("txt");
    txt.style.display="block";
}

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