JS学习

最新推荐文章于 2022-08-19 18:55:42 发布

爱追星星的人

最新推荐文章于 2022-08-19 18:55:42 发布

阅读量218

点赞数

分类专栏：网页学习

本文链接：https://blog.csdn.net/qq_41272596/article/details/89218172

版权

网页学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JS学习之路

当然了呀，学这个得有Html基础，不然会挺难受的

知识点来源于菜鸟教程，如有侵权，请联系我删除。

****(重要)
JS代码要写在

<script type="text/javascript" language="javascript">
//代码写这里才有用
</script>

1.JavaScript 显示数据

方法一：使用 document.write() 方法将内容写到 HTML 文档中。

    document.write("<h1>这是一个标题</h1>");      ()括号里面写内容

方法二：使用 innerHTML 写入到 HTML 元素。

    <p id="demo">一个段落。</p>
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
    这个函数可以替代demo标签里面的内容

方法三：使用 console.log() 写入到浏览器的控制台。

    a = 5;
    b = 6;
    c = a + b;
    console.log(c);
    浏览器的控制台会输出11

2.弹出对话框

  alert("22");   弹出一个对话框，内容为22
  window.alert(5 + 6);  一样的，只是表达不同

3.定义函数，可由事件触发

例如：

   <input type="button" value="确定" onclick="a()">
  <script type="text/javascript" language="javascript">
     function a(){
             alert("22");
          }
  </script>
  
  当点击”确定“按钮是，弹出对话框“22”

4.JS变量

JS中的变量都是弱类型的，用var可表示所有类型的变量

  var a = 5;
  var b = 6;
  var d="js";
  c = a + b;
  console.log(c);
  console.log(d);
  当然，如你所看，可以不用声明，这点和python一样，变量不需要声明，可以直接使用
运算的话，和其他语言是一样的。

c=a+b;

c=a*b;

变量类型：

   var length = 16;                                  // Number 通过数字字面量赋值 
   var points = x * 10;                              // Number 通过表达式字面量赋值
   //字符串
   var lastName = "Johnson";                         // String 通过字符串字面量赋值
   var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
   //数组
   var cars=new Array();
   cars[0]="Saab";
   cars[1]="Volvo";
   cars[2]="BMW";
   //对象，相当于结构体吧
   var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值
   var person={
         firstname : "John",
         lastname  : "Doe",
         id        :  5566
       };
   var x;               // x 为 undefined
   var x = 5;           // 现在 x 为数字
   var x = "John";      // 现在 x 为字符串

值的注意的是JS的变量是动态的，即类型可以转换
再讲一下String,他有很多方法具体看 js-String类型

5.JS标识符和注释

就function ：定义函数和 var 定义变量需要了解一下，其他的雷同

    //   单行注释
    /*     (注释部分)   */    多行注释
    <!-- -->这个是HTML的注释，<scrip>标签外的内容用这个注释

6. Html事件

HTML 事件可以是浏览器行为，也可以是用户行为
以下是 HTML 事件的实例：
HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

 实例：
   <button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
   <button onclick="this.innerHTML=Date()">现在的时间是?</button>

常见的HTML事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

事件非常重要，请读者动手试试。

7.实现网页跳转

 <input type="button" onclick="a()" value="跳转">
 <script type="text/javascript" language="javascript">
 function a(){
 alert("22");
 document.write("aaa");
 window.open("button.jsp");              //开另外一个窗口
 window.location.href = "button.jsp";   //网页跳转
 window.location.assign("button.jsp");   //location.assign() 方法加载新的文档。
                                        //history.back() 方法加载历史列表中的前一个 URL。
             }
  </script>
 除此之外可以用 history.go() 这个方法来实现向前，后退的功能。
 function a(){
             history.go(1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面
          }
 function b(){
             history.go(-1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面
          }

8.jQuery基础

这里先给一个实例

    <html>
    <head>
       <meta charset="utf-8"> 
       <title></title> 
       <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
       </script>
       <script>
       $(document).ready(function(){
            $("p").click(function(){
            $(this).hide();
     });
  });
  </script>
  </head>
  <body>
  <p>如果你点我，我就会消失。</p>
  <p>继续点我!</p>
  <p>接着点我!</p>
  </body>
  </html>

如JS代码要写在< script>标签里，JQuery代码不仅要写在< script>内还要写在

     <script>
     $(document).ready(function(){
           //代码
       });
     </script>

要注意的是，Jquery代码都是方法都是方法调用方法

JQuery方法

方法名	功能
jQuery hide()	隐藏标签 $(“p”).hide();
jQuery show()	显示标签 $(“p”).show();

连载中

爱追星星的人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS学习

JS学习之路当然了呀，学这个得有Html基础，不然会挺难受的知识点来源于菜鸟教程，如有侵权，请联系我删除。****(重要)代码要写在<script type="text/javascript" language="javascript">//代码写这里才有用</script>1.JavaScript 显示数据方法一：使用 document.write(...
复制链接

扫一扫