码迷,mamicode.com
首页 > 编程语言 > 详细

javascript介绍及如何在html中使用js与jQuery

时间:2019-01-11 21:17:55      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:完全   使用   功能   识别   实验   它的   修改   方式   net   

js是世界上最流行的编程语言,这一点毋庸置疑;它是一种弱类型,动态脚本编程语言,被广泛用于HTML,web技术中。

啰嗦:一直在学后端技术,现在发现js基本上不会用,因为现在不使用jsp做前端页面,所以到处都是js对静态页面的封装,然后实现前后端交互。现在发现js功能真强大啊,可以对页面各种修改,真是前端一个js技术就够了。

其实当我看到一大堆js的页面时,脑子是懵的,完全不知道它该怎么执行,但是他跟其他编程语言也是类似的,有函数,变量等等。好了不废话了。

一、js在HTML中的使用:

1、js可以定义在html的head和body内部,在通过<script>标签来引入,通过script标签可以引入js文件,也可以直接在标签内部写js代码

2、js是按页面定义的位置从上到下识别的。识别的含义并不是执行,而是对定义的函数进行编译。那么它要如何执行呢?

2.1、最简单的方式就是直接写到HTML的标签中:

<html> <body onload="func1();func2();func3();"></body> </html>

2.2、在通过window对象调用:

    <script>
        function func1(){
            alert("this window.onload");

        window.onload = func1;//不要括号 多个调用的方式为 window.onload = function(){func1();func2()}
    </script>

2.3 立即执行函数:

    方式一
    (function(){alert(1);}());
    方式二
    (function(){alert(1);})();
    方式三 在前面加运算符,最常见的是!与void
    !function(){alert(1);}();
    void function(){alert(2);}();

2.4 由于js的window.load方法需要等到DOM全部加载完成以后才执行,它是一种最严谨的页面加载完在执行方法的方法,jQuery是对js的封装和修改,在jQuery中可以通过这方式执行:

//这种方法仅需要加在所有的DOM结构就执行此方法

    $(document).ready(function(){
     alert(1);

});

//它的简写形式是

$(function(){

 alert(1);

});    

3、js中的函数执行顺序和回调函数

这个我看到网上说的还是很乱,亲自实验了一下如下:

首先函数定义大体上分了一下两种,一种是定义式函数,一种是赋值式函数

    //“定义式”函数定义
    function Fn1(){
    alert("Hello World!");
    }
    //“赋值式”函数定义
    var Fn2 = function(){
    alert("Hello wild!");
    }

页面在加载过程中,会对页面上或载入的js文件进行扫描,如果遇到定义式函数,则进行预处理,处理完成后再开始由上之下执行;遇到赋值函数,则只是将函数赋值给一个变量,不进行预处理,待到调用的时候进行处理。如下代码

    //“定义式”函数定义
    Fn1();
    function Fn1(){
    alert("Hello World!");
    } //不会出错
    //“赋值式”函数定义
    Fn2();
    var Fn2 = function(){
    alert("Hello wild!");
    } //会报找不到这个函数的错误

第二就是内部函数的执行顺序(内部顺序执行)要早于onload的调用

    <!DOCTYPE html>
    <html>
    <body onload="func1();">
    <p >
    在onload之前显示
    </p>
    <script>
    function func1(){
       alert("this window.onload1");
    }
    function func2(){
       alert("this window.onload2");
    }
    func2();
    </script>
    </body>
    </html>    

最后一个问题就是自执行函数:

特殊情况1、当自执行函数前有赋值式函数,且前面没有函数执行,那么会先执行自执行函数,然后执行前面定义的最后一个赋值式函数,且其它赋值函数都无法调用。

4、js中的对象和属性

js中的对象,全局变量,和方法都会自动变为window的对象,这个大家参考w3c上的学习一下,内容太多,不会就查。http://www.w3school.com.cn/jsref/index.asp

二、jQuery的使用:

我们都知道js功能强大但是实现起来复杂,程序员都是比较懒的,我们都想拿过来直接用的方法,因此便有了封装了js的一些框架,jQuery便是比较流行的用java都用jQuery。(当然在jQuery中所有js方法都可以使用)

1、我们通过在HTML前面引入一个jquery.min.js的文件就可以在下面的js中写jquery代码了;

2、jQuery封装的方法如选择器的使用,等等操作请参考http://www.jb51.net/shouce/jquery1.82/

3、js中如何创建自定对象在这说一下吧,做个结尾

首先说一下局部变量和全局变量:

    var 不一定是用来定义局部变量的
    jscript的全局变量和局部变量的分界是这样的:

过程体(包括方法function,对象Object o ={})外的所有变量不管你有没有加var保留字,他都是全局变量          

而在过程体内(包括方法function(){},对象Object o={})内的对象加var保留字则为局部变量,而不加var保留字即为全局变量

这解释很清晰吧。

我们可以通过下面三种方式创建对象:

    自变量声明:
    var obj = {
      k1:value1,//属性;
      k2:value,
      func: function(){};//方法
     }
    对象中的键,可以使任何数据类型,但一般用作普通变量名(不需要"")即可。
    对象中的值,可以使任何数据类型,但,字符串的话必须用""包裹
    多组建值对之间用英文逗号分隔,键值对的键与值之间用英文冒号分隔;

new关键字

    var list = new Object();
    lisi.name = "李四";
    lisi.say = function(){
    console.log("我是"+this.name);
     }

    function person(firstname,lastname,age,eyecolor)
    {
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
    }

直接通过函数构造,也算是new的一种

var student = new person("张三","小明","18","block");

最后我们如何读取对象中属性和方法呢?

1、运算符:如果在对象内部: this.属性名。this.方法名();

               在对象外部: 对象名.属性名。 对象名.方法名();

2、通过  ["key"] 调用,对象名["属性名"]     对象名["方法名"]();

提示:如果key中包含特殊字符,则无法使用第一种方式,必须使用第二种;

  对象内部写变量名默认为全局变量,所以要调用自身对象的属性必须用this关键字

最后、删除对象中的属性或方法:

delete 对象名.属性名; delete 对象名.方法名();
---------------------
作者:CJNusun
来源:CSDN
原文:https://blog.csdn.net/loverycjj/article/details/78301517
版权声明:本文为博主原创文章,转载请附上博文链接!

javascript介绍及如何在html中使用js与jQuery

标签:完全   使用   功能   识别   实验   它的   修改   方式   net   

原文地址:https://www.cnblogs.com/wjr2018/p/10257127.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!