JavaScript知识概要

JavaScript  

 1.简介    

JavaScript简介
        JS是运行在浏览器端的一门脚本语言,一开始主要用来做浏览器验证,但现在功能已经不止于此。
        所谓脚本语言就是指,代码不需要编译,直接运行,并且读入一行运行一行
        
        JavaScript目前应用非常广泛,例如:浏览器端的验证,Ajax,客户端等,甚至也有服务器端的JavaScript--node.js     

2.编写位置      

   (1)网页内部
            <script type="text/javascript">
             alert("这是啥");
             </script>
         (2)外部的.js文件

    JavaScript一般单独写在一个.js文件中,通过以下方法来引用
            <script type="text/javascript"  src="script.js"></script>
        (3)基本语法
             ①注释
             单行注释 //
             多行注释 /**/
             ②变量
             Ⅰ声明:JS是一门弱类型语言,声明变量时不需要指定变量的类型,只需要使用var关键字
                例如:var a;
                    
            Ⅱ赋值:
                JS是一门动态类型的语言,可以给一个变量赋任意类型的值,同时在使用过程中可以任意修改变量
                变量的类型
                a=123;
                a="hello";
            
            Ⅲ声明和赋值同时进行
                var b=123;
                var c="hello";
                var d=true;
            
            ③函数
                在JS中函数也是一个对象,也可以将一个函数的引用赋值给一个变量
                1)声明函数使用function关键字
                第一种方式:
                var sum=function(a,b){
                    return a+b;
                };
                第二种方式:
                function sum2(a,b,c){
                    return a+b+c;
                };
                sum2(2,3,4);
                
                2)函数的调用:
                    -函数的引用+();
                    -sum(123,234)
                    -sum2(123,"abc",true)
                调用函数不会检查参数类型和个数,所以在js中不存在重载这回事

例如:


            
            ④对象
                Ⅰ对象的创建
                    (1)var obj=new Object();
                    (2)var obj ={}
            
                Ⅱ动态的为对象添加属性
                    对象.属性名=属性值
                    例:obj.name="张三";
                        obj.age=16;
                        obj.fun=function(){
                            alert("hello");
                        };
                Ⅲ在创建对象时,直接添加属性
        

  注意:键值对之间使用 “ ”隔开。

 

3.事件

  (1)用户操作网页或者浏览器所发生的交互行为称为事件。比如:点击按钮,最小化窗口,修改文本框内容等。
       (2)JS为我们定义许多浏览器中的事件。比如:单击、双击、移动 等。
       (3)我们可以通过为事件设置一个响应函数来对事件进行响应。可以通过两种方式为元素绑定响应函数:
            1)直接通过标签的属性来设置,这种方式是结构与行为耦合,不推荐使用
                 <button οnclick="alert('hello')">按钮</button>
                 -这种方式叫做结构与行为耦合,不推荐使用这种方式
            2)在<script>标签来设置
                <button id="btn">按钮</button>
                <script>
                    //获取到按钮的对象
                    var btn =document.getElementById("btn");
                    //为btn绑定一个单击响应函数
                    btn.οnclick=function(){
                        alert("hello");
                    }
                </script>
            3)几种鼠标事件
                //鼠标单击事件
                <button id="btn" οnclick="alert('你点我干嘛')">点我</button>
                

      鼠标单击按钮事件触发

    
                //鼠标双击事件
                <button id="btn" οndblclick="alert('你点我干嘛')">点我</button>
                //鼠标移到按钮上事件触发
                <button id="btn" οnmοuseοver="alert('鼠标移动上来了!')">点我</button>
                //鼠标从按钮上移走事件触发
                <button id="btn" οnmοuseοut="alert('鼠标移走!')">点我</button>
            
            
            

4.加载方式 

        (1)浏览器加载网页代码时是由上到下依次加载的。
        (2)如果我们在浏览器还尚未加载网页中的元素,那么将无法确定,控制台将会报错。
        解决该问题有两种方式:
            1)将JS代码编写到body标签的下边。但是我们习惯上将JS、CSS等代码都编写在head标签中,
            这种形式不符合使用规则
            2)将js代码编写到window.οnlοad=function(){}中,推荐使用方式
            注意:编写js时,上来就把window.οnlοad=function(){}写上


            程序是一行一行执行的,如果var btn=document.getElementById("btn1");代码之前没有写window.οnlοad=function(){}

那么在执行的时候是找不到body里面的id="btn1",因此window.οnlοad=function(){}作用就是加载完整个页面之后再执行里面的内容。

  但是如果将javascript写在body里面,之前已经加载完了id="btn1",所以var btn=document.getElementById("btn1");再运行就没有问题了。

  注意:<button>标签只能写在body里面。

5.DOM编程 

    DOM全称:Document Object Model    

    DOM编程是JavaScript中非常重要的一部分内容 。  
    DOM主要是通过JavaScript来控制网页中的各种元素,从而达到使网页可以和用户进行动态交互的作用。
    DOM的操作主要分为四部分:增、删、改、查。
    

  (1)document对象:
          document是一个文档节点,代表整个文档,所有节点都是它的后代节点。
          document也是window的对象的属性,可以直接使用。

    (2)节点类型:
               ① 元素节点:HTML文档中的HTML标签
               ②文本节点:元素的属性
               ③ 属性节点:HTML标签中的文本内容

  (3)节点属性

  (4)元素节点的属性:                

    1.获取元素对象.属性名              

     例:element.value
                    element.id
                    element.className
                 2.设置元素对象.属性名=新的值
                例:element.value="hello"
                    element.id="id01"
                    element.className="newClass"


            其它属性:
                innerHTML:元素节点通过该属性获取和设置标签内部的html代码
                nodeValue:文本节点可以通过nodeValue属性获取和设置文本节点的内容


     (5)***DOM查询
         通过document对象查询
             document.getElementById()
            -通过id属性获取一个元素节点对象
            document.getElementsByTagName()
            -通过标签名获取一组元素节点对象
            document.getElementByName()
            -通过name属性获取一组元素节点对象,一般用来获取表单项
    
        通过具体的元素对象查询
            element.getElementsByTagName
            -查找当前元素节点内指定标签名的子节点
      element.childNodes
            -查找当前节点的所有子节点
            element.firstChild
            -查找当前节点的第一个子节点
            element.lastChild
            -查找当前节点的最后一个子节点
            element.parentNode
            -查找当前节点的父节点
            element.previousSibling
            -查找当前节点的前一个兄弟节点
            element.nextSibling
            -查找当前节点的后一个兄弟节点
      例:     

注意:1.function myQuery(idStr,func){
          var btn=document.getElementById(idStr);
          btn.οnclick=func;
        }

这段代码为4个查询中共有的内容,所以封装成一个方法,下面直接调用就可以了,避免写重复代码,起到了简化代码的作用。

  2.在查询  “#city的所有子节点” 的时候,其实只有四个--北京,上海,东京,首尔;但是在用火狐浏览器和谷歌浏览器运行时会把

节点与节点之间的空格也当作了一个节点,所有此时应该根据元素节点的属性,用if语句判断一下if(liEle5[i].nodeType==1){} ,当nodeType==1时才是元素节点。


  
   (6)***DOM增删改
               ①创建元素节点
                document.createElement(标签名)
             ②添加子节点
                父节点.appendChild(子节点)
             ③插入节点
                父节点.insertBefore(新节点,旧节点)
             ④替换节点
                父节点.replaceChild(新节点,旧节点)
             ⑤删除节点
                父节点.removeChild(子节点)
                子节点.parentNode.removeChild(子节点) *****
             ⑥读写元素内部HTML代码
                读取
                    元素.innerHTML
                设置
                    元素.innerHTML = 新值

需要注意点:在设置元素节点时有以下两种方式:

    1.document.getElementById("bj").innerHTML = "天津";
              2.document.getElementById("bj").firstChild.nodeValue="天津";

  请参照以上(4)元素节点的属性中其他属性部分。

转载于:https://www.cnblogs.com/double-s/p/7801886.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/454414.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue项目cordova打包的android应用

准备工作nodejs、cordova、AndroidStudio这些在上一篇文章中已经说过了&#xff0c;这里就不重复说明。以此文记录vue项目用cordova打包移动app的方法。 1.创建一个cordova项目&#xff0c;如创建一个名为testapp的工程&#xff1a;cordova create testapp 2.添加安卓平台 cord…

Django REST framework 源码解析

先放图&#xff0c;放图说话&#xff0c;可能有点长 主流程 这个颜色 从setting导入默认数据流程是 这个颜色 主流程大概流程写一下&#xff1a;as_view 实际返回view&#xff0c;并把参数{"get":"list","post":"create"}传递给view…

-9 逆序输出一个整数的各位数字_leetcode两数相加(大整数相加)

题目来源于leetcode第二题两数相加。题目描述给出两个非空的链表用来表示两个非负的整数。其中&#xff0c;它们各自的位数是按照逆序的方式存储的&#xff0c;并且它们的每个节点只能存储一位数字。如果&#xff0c;我们将这两个数相加起来&#xff0c;则会返回一个新的链表来…

计算机如何添加管理员权限,电脑使用代码如何添加管理员权限

我们在使用电脑运行某些软件的时候&#xff0c;可能需要用到管理员权限才能运行&#xff0c;通常来说直接点击右键就会有管理员权限&#xff0c;但最近有用户向小编反馈&#xff0c;在需要管理员权限的软件上点击右键没有看到管理员取得所有权&#xff0c;那么究竟该如何才能获…

sql注入问题

${}拼接sql&#xff0c;会引起sql注入&#xff0c;sql注入例如&#xff1a; select * from user where name like ‘%’ or 11 or ‘%’&#xff1b; 这种情况下&#xff0c;论name为什么都可以执行 转载于:https://www.cnblogs.com/mengyinianhua/p/7649325.html

teechart绘制实时曲线_快速学会CAD绘制传输线路图纸

一工具CAD工程设计软件二方法和步骤万事开头难&#xff0c;遇到不懂的知识刚开始都有畏难的情绪&#xff0c;只要有决心学习&#xff0c;诚心想学会一项技能&#xff0c;那学会学好它就只是时间问题了。我们常常面临时间紧、需要快速入门甚至熟练地解决工作中实际情况的问题&am…

使用ajax获取用户所在地的天气

1.要获取用户归属地的天气&#xff0c;首先得获取用户所在的市区&#xff0c; 这里先获取用户的IP&#xff0c;通过IP获取IP的归属地&#xff0c;从而得到用户 地址。 获取客户端ip: js: <scripttype"text/javascript" src"http://pv.sohu.com/cityjson?ieu…

Python 之协程

之前我们学习了线程、进程的概念&#xff0c;了解了在操作系统中进程是资源分配的最小单位,线程是CPU调度的最小单位。按道理来说我们已经算是把cpu的利用率提高很多了。但是我们知道无论是创建多进程还是创建多线程来解决问题&#xff0c;都要消耗一定的时间来创建进程、创建线…

ip变换器苹果系统_加密锁能为高铁做什么?铁路电力变换器系统告诉您

代表国之重器的高铁&#xff0c;是怎样保护他们在软件上投资的专有技术不被仿冒、逆向工程和篡改呢&#xff1f;与一般的软件保护加密不同&#xff0c;高铁运行中的实时控制器对物理环境有着严苛的要求&#xff0c;如铁路电力变换器系统&#xff0c;须满足典型工业应用的扩展温…

zxing .net 多种条码格式的生成

下载地址&#xff1a;http://zxingnet.codeplex.com/ zxing.net是.net平台下编解条形码和二维码的工具&#xff0c;使用非常方便。 本文主要说明一下多种类型条码的生成。 适用的场景&#xff0c;标签可视化设计时&#xff0c;自定义条码类型&#xff0c;预览。 遍历zxing支持的…

k8s dashboard_windows10 部署 docker+k8s 集群

下面是经过踩坑之后的 windows10 单机部署 docker k8s 步骤&#xff0c;其中有几处比较关键的地方需要注意&#xff0c;后面加粗标注&#xff0c;下面就开始吧&#xff01;0、下载cmder在 windows 上有一个趁手的命令行工具非常有必要&#xff0c;推荐 Cmder&#xff0c;下面是…

Python 之网络编程基础

套接字&#xff08;socket&#xff09;初使用 基于TCP协议的socket tcp是基于链接的&#xff0c;必须先启动服务端&#xff0c;然后再启动客户端去链接服务端 server端 import socket sk socket.socket() sk.bind((127.0.0.1,8898)) # 把地址绑定到套接字 sk.listen() …

面试之网络编程和并发

1、简述 OSI 七层协议。 物理层&#xff1a;主要基于电器特性发送高低电压(1、0)&#xff0c;设备有集线器、中继器、双绞线等&#xff0c;单位&#xff1a;bit 数据链路层&#xff1a;定义了电信号的分组方式&#xff0c;设备&#xff1a;交换机、网卡、网桥&#xff0c;单位&…

redis 远程主机强迫关闭了一个现有的连接_记一次Redis+Getshell经验分享

你是我患得患失的梦&#xff0c;我是你可有可无的人&#xff0c;毕竟这穿越山河的箭&#xff0c;刺的都是用情之疾的人。前言&#xff1a;当我们接到一个授权渗透测试的时候&#xff0c;常规漏洞如注入、文件上传等尝试无果后&#xff0c;扫描端口可能会发现意外收获。知己知彼…

无线连接 服务器,服务器无线远程连接

服务器无线远程连接 内容精选换一换华为云帮助中心&#xff0c;为用户提供产品简介、价格说明、购买指南、用户指南、API参考、最佳实践、常见问题、视频帮助等技术文档&#xff0c;帮助您快速上手使用华为云服务。使用Mac版Microsoft Remote Desktop工具&#xff0c;远程连接W…

IO模型

IO模型介绍 传统的网络IO模型包括五种&#xff1a; blocking IO 阻塞IOnonblocking IO 非阻塞IOIO multiplexing IO多路复用signal driven IO 信号驱动IOasynchronous IO 异步IO 由于signal driven IO&#xff08;信号驱动IO&#xff09;在实际中…

重温数据结构:树 及 Java 实现(转)

转自&#xff1a;http://blog.csdn.net/u011240877/article/details/53193877 读完本文你将了解到&#xff1a; 什么是树树的相关术语 根节点父亲节点孩子节点叶子节点如上所述节点的度树的度节点的层次树的高度树的深度树的两种实现 数组表示链表表示的节点树的几种常见分类及…

Powershell检测AD账户密码过期时间并邮件通知

脚本主要实现了两个功能 &#xff1a; 一能判断账户密码的过期时间并通过邮件通知到账户&#xff1b; 二是将这些即将过期的账户信息累计通知到管理员。 脚本如下&#xff1a; 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051…

js list删除指定元素_vue.js

vue.js 中M V MV代表哪一部分 <插值表达式&#xff08;v-cloak v-text v-html v-bind&#xff08;缩写是:&#xff09; v-on&#xff08;缩写是&#xff09; v-model v-for v-if v-show &#xff09;<body><div id"app"><!-- 使用 v-cloak 能够解决…

我们的系统检测到您的计算机网络中存在异常流量_如何建立我们的网络防线?入侵检测,确保我们的网络安全...

目前我们的网络安全趋势日益严峻&#xff0c;那么如何利用入侵检测系统确保我的网络安全呢&#xff1f;入侵检测又是什么呢&#xff1f;网络安全入侵检测技术是为保证计算机系统的安全&#xff0c;而设计与配置的一种能够及时发现并报告系统中未授权或异常现象的技术&#xff0…