前端 -- JS基础

最新推荐文章于 2020-03-12 18:12:30 发布
最新推荐文章于 2020-03-12 18:12:30 发布
阅读量336 收藏 2
点赞数 1
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41361296/article/details/104133377
版权

文章目录

一、JS的定义

JS（JavaScript）是一种描述语言，基于对象和事件驱动的脚本语言。

二、JS的特点

  • 脚本语言（一种轻量级的编程语言）
  • 一种解释性语言（无需预编译）
  • 被设计为向 HTML 页面添加交互行为
  • 运行于客户端

三、JS的组成

  • ECMAScript（核心）
    ECMAScript 定义了脚本语言的所有属性、方法和对象，包括语法、类型、关键字、保留字、运算符、对象等。除了 JS 外，同时也是 Nombas 的 ScriptEase 和 Flash 脚本 ActionSctipt 的基础。
  • DOM（Document Object Model，文档对象模型）
    HTML 和 XML 的应用程序接口（API），即描述处理网页内容的方法和接口，把整个页面规划为层级式的节点结构。
    在这里插入图片描述
  • BOM（Browser Object Model，浏览器对象模型）
    描述与浏览器进行交互的方法和接口，包括①弹出新的浏览器窗口、②移动、关闭浏览器窗口及调节浏览器窗口大小、③获取用户屏幕分辨率的屏幕对象、④WEB浏览器详细的定位对象。
    对象举例：Windows 对象、Navigator 对象、Screen 对象、History 对象、Location 对象。

三、JS的基本结构

<script type="text/javascript">
	// 此处写JS代码
</script>

四、引用JS

  • HTML标签中引用
  • <script>标签中直接书写
  • 通过<script>标签的 src 属性引入外部 JS 文件

五、JS语法

5.1 常用的输入/输出/确认（JS的三种弹框）

5.1.1 输出：alert()

alert("提示信息");

提示信息框,浏览器处于阻塞状态，代码在alert这个位置停止并等待。

5.1.2 输入：prompt()

prompt("提示信息","输入框的默认信息");
prompt("请输入姓名","张三");	// 默认信息为"张三"
prompt("请输入姓名");

需要在输入框中输入信息。

5.1.3 确认：confirm()

confirm("确定信息？");

确定则返回 true，取消则返回 false。

5.1.4 示例

<head>
    <meta charset="utf-8"/>
    <title>js支持的三种弹框，实现和用户交互</title>
    <script type="text/javascript">
		alert("你好，二阶堂");
		var username = prompt("请输入用户名","刘德华");
		alert(username);
		var flag = confirm("确定吗？");
		alert(flag);
    </script>
</head>
<body>
    <h1>你好，html</h1>
</body>

5.2 注释

注释方法与Java一致，有 // ，/* */ 。

5.3 变量声明与使用

var num1 = 10;
var str1 = "JS";
var num2 = 12, str = "js";	// 一次声明多个
num3 = 100;	// 省略 var语句，相当于 window.num3 = 100; 不推荐
var str2 = str1 + "学习";

JS的变量声明，是通过 var 语句来声明的，无需指定数据类型。
JS变量用于保存值、保存表达式。
变量必须以字母或下划线或美元符$开始，不能使用关键字作为变量名。
变量对大小写敏感。

关于 window 属性：

<head>
   <meta charset="utf-8"/>
    <title>window对象</title>
    <script type="text/javascript">
        console.log(window);

        bb="44"; // 在最外层声明的变量，就是window的属性
        function test(){
            alert(bb);   // 44
            var aa="12";
            bb="24"; // 这种声明方式就是直接window.bb=24;
            alert(bb);   //24
        }
        test();
        // console.log(aa);     // aa is not defined
        console.log(bb);    // 24
    </script>
</head>
<body>

</body>

5.4 数据类型

5.4.1 Undefined

未定义或定义未赋值。

5.4.2 Null

表示尚未存在的对象，与 undefined 值相等。

5.4.3 Number

var num1 = 23;	 // 整数
var num2 = 23.0;	// 浮点数

5.4.4 Boolean

true 和 false。

5.4.5 String

一组被引号（单引号或双引号）括起来的文本。

5.4.6 tupeof运算符

检测变量的返回值，为字符串类型。
返回值如下：

  • undefined：变量被声明后，未被赋值
  • string：用单引号或双引号来声明的字符串
  • boolean：true 或 false
  • number：整数或浮点数
  • function：函数方法
  • object：对象或数组或 Null 类型

5.4.7 数据类型转换

转换函数：

  • parseInt()：字符串→整数
  • parseFloat()：字符串→浮点数
  • toString()：返回字符串

强制类型转换：

  • Boolean()：转化为逻辑值
  • Number()：对象→数字
  • String()：对象→字符串

5.5 运算符号

在这里插入图片描述
=：赋值
= =：判断值相等
===：判断值和类型都相同

5.6 条件语句、循环语句

与 Java 类似。

5.7 函数

5.7.1 作用

一组可随时随地运行的语句。将脚本编写为函数以避免页面载入时执行该脚本。

5.7.2 分类

5.7.2.1 系统函数

常用的系统函数举例：

  • parseInt()：解析一个字符串并返回一个整数
  • parseFloat()：解析一个字符串并返回一个浮点数
  • isNaN()：检查某个值是否是数字，返回 true 或 false
  • eval()：计算 JS 字符串，并把它作为脚本代码来执行
    如：var n1=1,n2=1,w="+"; 则eval(num1+w+num2)的值为2。
5.7.2.2 自定义函数

5.7.3 具体运用自定义函数

5.7.3.1 定义
function 函数名(参数1,参数2,...){
	// 函数代码块
}
// 或
// 声明一个匿名函数将地址传递给变量
var 函数名=function(参数1,参数2,...){
	// 函数代码块
}
5.7.3.2 调用
function sayHello(name){
	alert(name+"说了句hello");
}

sayHello("Tom");	// 调用
5.7.3.3 返回值
function sayHello(name){
	return (name+"说了句hello");
}

var str = sayHello("Tom");
alert(str);
5.7.3.3 变量的作用域

全局变量：任何地方都可被调用，公共的。应尽量避免使用全局变量，以免与团队开发变量冲突。
局部变量：只能在函数内部调用，私有的。

5.8 事件

5.8.1 页面中常见的事件

在这里插入图片描述
onFocus：获得焦点的时候触发的事件。例如在鼠标点过其它地方后点击文本框时，向 Web 控制台输出一条消息"1"。
onBlur：失去焦点的时候触发的事件。例如再鼠标点击过文本框后点击其它地方时，向 Web 控制台输出一条消息"2"。
onChange：当数据发送改变的时候触发的事件。例如在文本框输入一些文字，点击其他地方时，向 Web 控制台输出一条消息"3"。

事件通常与函数配合使用，当事件发生时去调用函数。

5.8.2 举例

5.8.2.1 举例1
<head>
    <meta charset="utf-8"/>
    <title>事件的介绍</title>
    <script type="text/javascript">
       function aa(item){
            console.log(item.value);
       }
    </script>

    <style  type="text/css">
        #div1{
            width:100px;
            height:100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div id="div1" onmouseover="javascript:alert('bb')"> </div>
    <input type="button" value="按我" onclick="aa(this);" />
</body>

效果：

  1. 当鼠标移到 div 图层时，弹出警告框"bb"。
  2. 当点击按钮时，向 Web 控制台输出一条消息"aa"。
5.8.2.2 举例2
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script type="text/javascript">
       
    </script>
</head>
<body>
    <input type="text" 
    onfocus="javascript:console.log('1')" 
    onblur="javascript:console.log('2')" 
    onchange="javascript:console.log('3')" 
    />
    <br>
    <select onchange="javascript:console.log(this.value)">
        <option value="1">玩具</option>
        <option value="2">文具</option>
        <option value="3">书籍</option>
    </select>
</body>

效果：

  1. 在鼠标点过其它地方后点击文本框时，向 Web 控制台输出一条消息"1"。
  2. 在鼠标点击过文本框后点击其它地方时，向 Web 控制台输出一条消息"2"。
  3. 改变文本框内容并点击其它地方时，向 Web 控制台输出一条消息"3"。
  4. 在下拉框换选项时，向 Web 控制台输出该选项的 value 值。
5.8.2.3 举例3
<head>
    <meta charset="utf-8"/>
    <title></title>
    
</head>
<body>
    <h1>新浪</h1><input type="button" value="改变层内容" id="btn1" />
    <br />

    <input type="text" name="session" />
    <input type="text" name="session" />
    <input type="text" name="session" />
    <input type="text" name="session" />

    <br />
    <input type="button" value="显示所有input元素的内容" id="btn2" />
    <input type="button" value="显示所有session内容" id="btn3" />

    <hr />
    <p id="pshow"></p>

    <script type="text/javascript">
       var inputs=document.getElementsByTagName("input");
       var sessions=document.getElementsByName("session");
       var hs=document.getElementsByTagName("h1");

       btn1.onclick=function(){
           hs[0].innerHTML="搜狐";
       }
       btn2.onclick=function(){
            pshow.innerHTML="";
            for(var i=0;i<inputs.length;i++){
               pshow.innerHTML=pshow.innerHTML+" "+inputs[i].value;
            }
       }
       btn3.onclick=function(){
            pshow.innerHTML="";
            for(var i=0;i<sessions.length;i++){
               pshow.innerHTML=pshow.innerHTML+" "+sessions[i].value;
            }
       }
    </script>
</body>

效果：
在这里插入图片描述
点击"改变层内容"时，改变大标题内容为"搜狐"：
在这里插入图片描述
在四个文本框中输入内容，点击"显示所有input元素内容"时：
在这里插入图片描述
点击"显示所有session元素内容"时：
在这里插入图片描述

5.8.2.4 举例4
<head>
    <meta charset="utf-8"/>
    <title></title>
    
</head>
<body>
    <h2>选择你的爱好：</h2>
    <ul>
        <li><input type="checkbox" name="all" id="all" value="全选" />全选<br /></li>
        <li><input type="checkbox" name="select" value="音乐" />音乐<br /></li>
        <li><input type="checkbox" name="select" value="阅读" />阅读<br /></li>
        <li><input type="checkbox" name="select" value="打球" />打球<br /></li>
        <li><input type="checkbox" name="select" value="游泳" />游泳<br /></li>
        <li><input type="checkbox" name="select" value="其他" />其他<br /></li>
    </ul>
    <hr />
    <input type="button" value="查看我选择的爱好" id="btn" />
    <p id="show"></p>

    <script type="text/javascript">
       var sl=document.getElementsByName("select");
       var sh=document.getElementById("show");

       all.onclick=function(){
           if(this.checked){
               for(var i=0; i<sl.length; i++){
                   sl[i].checked=true;
               }
           }else{
               for(var i=0; i<sl.length; i++){
                   sl[i].checked=false;
               }
           }
       }
       btn.onclick=function(){
           sh.innerHTML="";
           for(var i=0; i<sl.length; i++){
               if(sl[i].checked){
                   sh.innerHTML+=" "+sl[i].value;
               }
           }
       }
    </script>
</body>

效果：
在这里插入图片描述
选择爱好并点击"查看我选择的爱好"时：
在这里插入图片描述

5.9 程序调试

5.9.1 分类

  • 语法错误
  • 逻辑错误

5.9.2 异常处理

try{
	// 在此运行代码
}catch(err){
	// 在此处理错误
	// err.message, message包含错误信息
}

5.9.3 调试方法

  • 注释调试法
  • 输出调试法
    alert() 调试法
    document.write() 调试法
    console 对象调试法
  • 调试工具
    Firebug、浏览器自带开发窗口

六、Window对象

6.1 定义

BOM（浏览器对象模型）使得 JS 能与浏览器进行对话，主要是有 Window 对象的操作。

Window 对象表示浏览器中打开的窗口。

通常把 JS 程序写在 window.onload 函数体中，目的是在窗
口加载完成时再执行 JS 代码，如：

window.onload = function(){
	// 代码
}

6.2 特点

  • Window 对象是全局对象，可直接调用其方法和属性
  • Window 对象的一些方法和属性可省略不写
    如 window.document 等同于 document
    window.alert() 等同于 alert()

6.3 Window对象常用属性

在这里插入图片描述
在这里插入图片描述

6.4 history属性

history 属性就是 History 对象的引用。

方法：

  • back()：加载上一个浏览的文档
  • forward()：加载下一个浏览过的文档
  • go(n)：n为整数，跳转第n个浏览过的文档
    n==0 则刷新当前页面
    n>0 则向前跳转到第n个文档
    n<0 则向后跳转到第n个文档

6.5 location属性

location 属性就是 Location 对象的引用。

属性：

  • host：设置或返回主机名和当前 URL 的端口号
  • hostname：设置或返回当前的 URL 的主机名
  • href：设置或返回完整的 url，可用于设置跳转
  • hash：设置或返回从井号(#)开始的 URL（锚)
  • search：设置或返回从问号(?)开始的 URL（查询部分）

方法：

  • reload()：重新加载当前的文档，刷新页面
  • replace()：新的文档替换当前文档

示例：

<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <input type="text" id="address" />
    <input type="button" value="跳转" id="btn" />

    <script type="text/javascript">
       // console.log(location);
       // 1、获取元素
       var add=document.getElementById("address");
       var btn1=document.getElementById("btn");
       // 2、操作元素
       btn1.onclick=function(){
           // 2.1 获取文本框的内容
           var a=add.value;
           // 2.2 文本框中的内容作为浏览器中的地址
           location.href="https://"+a;
       }
    </script>
</body>

效果：
在这里插入图片描述
在文本框中输入网址，点击跳转按钮，即可跳转至输入的网址。

6.6 document属性

每个载入浏览器的 HTML 文档都会成为 Document 对象,利用它可对 HTML 页面中的所有元素进行访问。

常用属性：

  • title：返回或设置当前文档的标题

常用方法：

  • write()：向文档写 HTML 表达式或 JS 代码
  • getElementById()：返回对拥有指定 id 属性的第一个对象的引用
  • getElementsByTagName()：返回带有指定标签名称的对象集合
  • getElementsByName()：返回带有指定 name 属性的对象集合

6.7 Window对象常用方法

在这里插入图片描述

6.8 open() 方法

open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

// 语法
newWIn = window.open("弹出窗口的url", "窗口名称", "窗口特征")

// 示例
var newWin = window.open(
	"https://www.baidu.com",
	"百度",
	"height=380, width=320, toolbar=0, scrollbars=0, location=0, status=0,menubar=0, resizable=0"
);

弹出固定大小窗口，并且无菜单栏等，注意第三个参数的书写格式。

窗口特征：
在这里插入图片描述

6.9 close() 方法

用于关闭浏览器窗口。

//新开一个窗口
myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'");

//关闭窗口
myWindow.close();

某个窗口可以通过调用self.close() 或只调用close() 来关闭其自身。
只有通过JavaScript 代码打开的窗口才能够由JavaScript 代码关闭。

6.10 定时函数

6.10.1 setInterval (fn，millisec) 方法

可按照指定的周期（以毫秒计）来调用函数或计算表达式，循环执行多次。

6.10.2 setTimeout (fn，millisec) 方法

用于在指定的毫秒数后调用函数或计算表达式，只执行一次。

6.10.3 clearInterval (timer) 方法

可取消由 setInterval() 设置的 timeout。

6.10.4 clearTimeout (timer) 方法

可取消由 setTimeout() 方法设置的 timeout。

6.10.5 定时函数的不同写法

//函数
var n = 0;
function fn( ) { document.title = n++; }
//方法1：
var timer = window.setInterval( "fn()" , 1000);
//方法2：
var timer = window.setInterval( fn , 1000 );
//方法3：
var timer = window.setInterval( function(){	  // 以匿名函数作为参数
	fn()
}, 1000);

6.10.6 示例1（倒计时）

<head>
    <meta charset="utf-8"/>
    <title></title>
    
</head>
<body>
    <h1>10</h1>
    <input type="button" value="开始" onclick="start()" />
    <input type="button" value="停止" onclick="stop()" />

    <script type="text/javascript">
        var h=document.getElementsByTagName("h1")[0];
        var timer=null;

        function start(){
            if(timer==null){
                timer=setInterval(function(){
                    var t=h.innerHTML;
                    if(t==0){
                        stop();
                        alert("时间到！");
                    }
                    else{
                        t--;
                        h.innerHTML=t;
                    }
                },1000);
            }
           
       }

       function stop(){
           if(timer!=null){
                h.innerHTML=10;
                clearInterval(timer);
                timer=null;
           }
       }
    </script>
</body>

效果：
在这里插入图片描述
与常见计时器功能一致。

6.10.6 示例2（秒表）

<head>
    <meta charset="utf-8"/>
    <title></title>
    
</head>
<body>
    <h1>0</h1>
    <input type="button" value="开始" onclick="start()" />
    <input type="button" value="暂停" onclick="pause()" />
    <input type="button" value="停止" onclick="stop()" />

    <script type="text/javascript">
       var h=document.getElementsByTagName("h1")[0];
       var timer=null;

       function start(){
            if(timer==null){
                timer=setInterval(function(){
                    var t=h.innerHTML;
                    t++;
                    h.innerHTML=t;
                },1000);
            }
       }

       function pause(){
            if(timer!=null){
                clearInterval(timer);
                timer=null;
            }
       }

       function stop(){
            pause();
            h.innerHTML=0;
       }
    </script>
</body>

效果：
在这里插入图片描述
与常见计时器功能一致。

七、DOM（文档对象模型）

7.1 定义

DOM（文档对象模型）提供了添加、移动、改变或移除结构文档的方法和属性。

7.2 分类

  • Core DOM：一套标准的针对任何结构化文档的对象。
  • XML DOM：一套标准的针对XML 文档的对象。
  • HTML DOM：一套标准的针对HTML 文档的对象。

7.3 节点

HTML 文档中的每个成分都是一个节点（Node）。

DOM 是这样规定的：

  • 整个文档是一个文档节点
  • 每个HTML 标签是一个元素节点
  • 包含在HTML 元素中的文本是文本节点
  • 每一个HTML 属性是一个属性节点
  • 注释属于注释节点

7.4 节点间的关系

节点彼此都有等级关系，如父节点、子节点、兄弟节点（同级节点）。
在这里插入图片描述

八、JS对象

8.1 概念

  • 一种特殊的数据类型（Object类型）
  • 拥有一系列的属性和方法
  • 分为内置对象和自定义对象

8.2 常用内置对象

8.2.1 String

用于支持对字符串的处理。

属性：
length：字符串对象长度

var str = "JavaScript";
var strLength = str.length; //长度是10
var str = "this is JavaScript";
var strLength = str.length; //长度是18

方法：

字符串对象.方法名();

在这里插入图片描述

8.2.1 Date

用于操作日期和时间。

var myDate = new Date( [ 参数] )

var today = new Date();   //返回当前日期和时间
var tdate = new Date("september 1,2013,14:58:12");	//设置当前日期和时间

常用方法：
在这里插入图片描述
使用 Date 对象的方法显示当前时间的小时、分钟和秒：

//关键代码
var today = new Date(); //获得当前时间
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
// 配合定时器函数即使用setInterval()函数可不断更新显示当前时间

8.2.1 Array

用于在单独的变量名中存储一系列的值。

8.2.1 Math

用于执行常用的数学任务，它包含了若干个数字常量和函数。

常用方法：
在这里插入图片描述

九、实用示例

表单验证

<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <!-- 当我的表单中的用户名和密码是空的时候，不让提交 -->
    <form action="#" mothod="get" onsubmit="return check()" >
        用户名：<input type="text" name="userName" /><br />
        密码：<input type="password" name="userPassword" /><br />
        <input type="submit" value="登录" />
    </form>

    <script type="text/javascript">
        var inputs=document.getElementsByTagName("input");

        function check(){
           // 开始检查你要的元素中内容，如果不符合就return false
           for(var i=0; i<inputs.length; i++){
               if(inputs[i].value==null || inputs[i].value==""){
                   alert("用户名或密码不能为空！");
                   return false;
               }
           }
           // 当代码执行到return后，后面的代码不会被执行
           return true;
       }
    </script>
</body>

效果：
在这里插入图片描述
若有文本框输入为空，点击登录按钮则有"用户名或密码不能为空！"提示框弹出。

图片轮播

<head>
    <meta charset="utf-8"/>
    <title>图片轮播</title>
    <style>
        *{
            margin:0 auto;
            padding:0;
        }
        div{
            width:320px;
            height:180px;
            position:relative;
            overflow:hidden;
        }
        ul{
            width:1280px;
            height:180px;
            position:absolute;
            top:0;
            left:0;
        }
        li{
            list-style-type:none;
            float:left;
            width:320px;
            height:180px;
        }
    </style>
</head>
<body>
    <!-- div 320*180 -->
    <!-- ul 1280*180 -->
    <div>
        <ul>
            <li><img src="img/1.jpg" width="320" height="180" /></li>
            <li><img src="img/2.jpg" width="320" height="180" /></li>
            <li><img src="img/3.jpg" width="320" height="180" /></li>
            <li><img src="img/1.jpg" width="320" height="180" /></li>
        </ul>
    </div>

    <script type="text/javascript">
        var u=document.getElementsByTagName("ul")[0];
        var ps=[0,-320,-640,-960];
        var index=0;
        u.style.left='0px';

        setInterval(function(){
            var i=parseInt(u.style.left);
            i=i-2;
            if(i<-960){
                i=0;
            }
            u.style.left=i+"px";
        }, 10);
    </script>
</body>

效果：
在这里插入图片描述

太白的梳妆镜
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端——JS基础
xzy990727的博客
08-10 978
JavaScript JS：轻量级的客户端脚本编程语言 编程语言 html和css是标记语言 编程语言是具备一定的逻辑的，拥有自己的编程思想（面向对象编程【OOP】，面向过程编程） ——面向对象：C++，Java，PHP，C#，JS ——面向过程：C 目前JS不仅仅是客户端语言，基于NODE可以做服务器端程序，所以JS是全栈编程语言 学习JS，学习它的及部分组成 JS的组成以及ES 1.JS组...
前端面试(原生js篇) - 精确运算
weixin_34380781的博客
11-14 92
一、面试题 问：开发的时候有用到过 Math 吗？ 答：很多啊。比如生成 GUID 的时候，就会用到Math.random()来生成随机数。 问：别的呢？比如向下取整、向上取整？ 答：向下取整是floor()，向上取整是ceil()。另外还可以用round()方法进行四舍五入的取整。 问：如果我需要四舍五入并保留两位小数，应该怎么处理呢？ 答：可以直接用toFixed()...
web前端-JavaScript下篇之基础应用
weixin_43694216的博客
03-12 126
前言 这一篇主要涉及到JavaScript的一些基础应用，主要是各种对象，方法，属性的学习 javascript Browser BOM Window 对象： 所有浏览器都支持 window 对象。它代表浏览器的窗口。所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。全局变量是 window 对象的属性，全局函数是 window 对象的方法。甚至（HTML DOM...
前端记录并保持用户输入
zy_whynot的博客
01-16 1555
最近接到这样的一个需求： 在A页面用户可以在输入框修改内容，在用户还没店家保存按钮时离开A页面跑到B页面，当用户再次返回到A页面时，直接显示用户刚才输入还未保存的内容，几用户不需要再次输入。 前端缓存数据的几种方式： cookie、localStorage、sessionStorage cookie：可以记录前端数据，传到后端，可用于前后端保持会话 localStorage和sessionStor...
前端-javascript-基础知识-总结笔记
02-25
个人学习javascript的笔记总结
javaWeb-前端js基础
最新发布
03-09
javaWeb-前端js基础
前端-HTML-CSS-JS-个人网页制作实例
06-16
在本项目中，“前端-HTML-CSS-JS-个人网页制作实例”是一个涵盖了网页开发基础知识的实践案例。这个实例以“天气之子”这一主题为风格，展现了如何结合HTML、CSS和JavaScript技术来创建一个富有创意和个人特色的网页...
前端利用bpmn-js实现工作流
01-25
总结起来，"前端利用BPMN-js实现工作流"涉及的关键技术点包括：理解BPMN标准，掌握HTML和JavaScript基础，使用BPMN-js库解析和渲染流程图，监听和响应用户交互，以及可能的框架集成与自定义扩展。通过实践和学习，...
WEB前端-案例汇总
11-08
6. 模块化与框架：现代前端开发中，Vue.js、React.js和Angular.js等框架广泛使用。案例可能涵盖这些框架的基本用法，如组件化开发、状态管理、路由等，帮助学习者掌握前沿技术。 7. AJAX与API交互：通过AJAX，前端...
订单保存不可以更改供应商
weixin_34279184的博客
07-10 148
应用 Oracle Purchasing 层 Level Function 函数名 Funcgtion Name CUXPOXPOEPO 表单名 Form Name POXPOEPO 说明 Description 订单保存不可以更改供应商 条件 ...
javascript仿照google搜索框自动补全(可以输入一个“管”字查看效果。)
u010249858的博客
02-06 250
ul,li{margin: 0; padding: 0;width:100%;} function checkword() { var wordvalue=document.getElementById("word").value.toLowerCase(); var alltxt="管理员|apple苹果|all全|big大|bad坏|cut剪切|car车...
用友U8老版本升级 单据表头栏目显示名称空白,例如:发货单的表头客户名称.这几个如果是必须项目就是空白.
jh113用友运维
07-25 3210
客户原来是U8普及版的,最近升级到U8 13.0有两个帐套其中一个帐套的单据显示正常的.另外一个就是不对. 现象是:单据表头栏目显示名称为空白,例如:发货单,表头客户名称.单据号,单据日期等必输字段 这几个项目描述就是空白.入下图显示 刚开始以为是电脑系统问题发现都这样.才怀疑是数据库表的问题,开始以为小问题以为是单据模板问题,从正常的帐套输出单据模板,然后在引入非正常帐套.结果发现还是不...
在输入框输入数据时，自动提示与输入相关的数据
宋发元
01-29 3143
以下是在输入框输入数据时，自动提示与输入相关的数据，数据从数据库中查询的：   【HTML部分】 &lt;div class="itempanel"&gt; &lt;div class="floatleft title"&gt;退货配送人：&lt;/div&gt; &lt;div class="floatleft editor"&gt;&lt;input
JavaScript用户输入自己的名字，输出写给用户的信件
wfh_fighting的博客
10-26 3393
html> html lang="en"> head> meta charset="UTF-8"> title>写信title> style> *{ margin: 0 auto; font-size: 14px; background: pink; color:
JvaScript--使用js添加数据，点击按钮，将内容放入表格中
博客
08-16 4073
 题目要求： 创建一个Student类，有name、age属性和方法showInfo()， 在页面上显示： 姓名  |  年龄   然后再div中使用js添加数据，每点击一下按钮就显示一条数据，（必须通过p元素去找div） *其中要写一个函数show()用来调用Student类里面的showInfo()函数 function
javascript 创建 div
weixin_33819479的博客
11-21 285
纯JAVASCRIPPT创建 (1):document.getElementById("要创建DIV位置的ID").innerHTML='<div>div里面的内容</div>'; (2): var createDiv=document.createElement("div"); createDiv.title="div title.";...
输入框输入文字后自动搜索实现
qq_34024778的博客
08-08 5698
可在onresume方法中实现，内容的获取 需求：输入框输入搜索文字，自动搜索，获取结果后，点击任何一个条目，获取条目详情 1.etSearch.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence s, int start, int coun...
javascript 根据输入的关键词自动提示
weixin_30840253的博客
09-29 430
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值