js_jsp - CSDN
js 订阅
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。 [1]  JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [2]  JavaScript的标准是ECMAScript 。截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为ECMAScript 6 或者ES6。 [1] 展开全文
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。 [1]  JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [2]  JavaScript的标准是ECMAScript 。截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为ECMAScript 6 或者ES6。 [1]
信息
原    名
Livescript
软件语言
JavaScript
开发商
Netscape、Mozilla基金会
软件名称
JavaScript
更新时间
2016年4月 [1]
软件版本
ECMAScript 6 [1]
实现功能
人机交互
软件平台
Chrome、IE、Safari、Firefox等 [3]
语言类型
脚本语言
javascript组成部分
ECMAScript,描述了该语 言的语法和基本对象。 [4]  文档对象模型(DOM),描述处理网页内容的方法和接口。 [4]  浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。 [4] 
收起全文
精华内容
参与话题
  • 学透JavaScript

    千人学习 2020-03-30 10:50:56
    JavaScript是前端程序员的必修课,也是目前流行的各前端框架的基础知识。本课程将全面剖析JavaScript的运行机制,掌握最核心的语法和编程思维、使用丰富的实例来帮助学员的理解JavaScript、jQurey和AJAX技术。介绍...
  • javaScript学习笔记(一)js基础

    万次阅读 多人点赞 2020-07-15 21:28:52
    JavaScript是目前web开发中不可缺少的脚本语言,js不需要编译即可运行,运行在客户端,需要通过浏览器来解析执行JavaScript代码。 诞生于1995年,当时的主要目的是验证表单的数据是否合法。 Java...

     

                                          公众号  关注一波  不定期分享视频资料

     

                                                                   

    一、简介

    1、概述:

    JavaScript是目前web开发中不可缺少的脚本语言,js不需要编译即可运行,运行在客户端,需要通过浏览器来解析执行JavaScript代码。

    诞生于1995年,当时的主要目的是验证表单的数据是否合法

    JavaScript本来应该叫Livescript,但是在发布前夕,想搭上当时超热的java顺风车,临时把名字改为了JavaScript。(也就是说js跟java没有关系,当时只是想借助java的名气)。

    js组成部分:

    (1)核心(ECMAScript):这一部分主要是js的基本语法。

    (2)BOM:Brower Object Model(浏览器对象模型),主要是获取浏览器信息或操作浏览器的,例如:浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等。

    (3)DOM:Document Object Model(文档对象模型),此处的文档暂且理解为html,html加载到浏览器的内存中,可以使用js的DOM技术对内存中的html节点进行修改,用户从浏览器看到的是js动态修改后的页面。(增删改查)

    2、特点:

    1. 交互性(它可以做的就是信息的动态交互)
    2. 安全性(不允许直接访问本地硬盘)
    3. 跨平台性(只要是可以解析js的浏览器都可以执行,和平台无关)

    3、和Java区别:

    4、作用

    avaScript 被用来改进设计、验证表单、检测浏览器、创建cookies,等等。JavaScript 是因特网上最流行的脚本语言,并且可在所有主要的浏览器中运行,比如: Internet Explorer、 Maxthon、Mozilla、Firefox、Netscape、Chrome和 Opera等。

    在目前学习阶段只要记住最常用的二个:(1)运态修改html及css代码 (2)验证表单

    5、书写位置

    5.1、内嵌式:

    理论上js可以书写在页面的任意位置。

    <script>

    alert("内嵌式")

    </script>

    5.2、外链式:

    首先新建一个文件类型为.js的文件,然后在该文件中写js语句,通过script标签对引入到html页面中。

    <script src="js文件路径地址">这里不能写js语句</script>

    5.3、行内式:

    直接书写在标签身上,是一个简写的事件,所以又称之为事件属性。     onclick单击事件

    <input type="button" value="点我呀!" onclick="alert('点我干啥!^6^');">
    <button onclick="alert('恭喜你,中 500 万.');">点我呀!</button>
    

    6、注释:

    单行注释:		//	注释语句		快捷键ctrl+/
    多行注释:		/* 注释语句 */    快捷键ctrl+shift+/   
    注意:多行注释相互不能嵌套使用,只能在多行注释里面使用单行注释!
    

    7、数据类型:

    Js中的数据类型:
     

    数值型:number(凡是数字都是数值型,不区分整数和小数)
    字符串:string(凡是引号包裹起来的内容全部都是字符串)
    布尔:boolean(true、false)
    对象类型:object(特殊取值null)
    未定义型:undefined
    

    对比java中的数据类型:

    整数:byte short int long
    小数:float double
    字符:char 
    布尔:boolean
    字符串:String

    8、变量:

    8.1、定义:就是存放数据的、内疗可以存储任意数据

    8.2、声明变量:
     

    var 变量名称 = 存储的数据;   	(variable 变量)

    8.3、变量命名规范:

    1.	只能由字母、数字、_(下划线)、$(美元符号)组成。
    2.	不能以数字开头。
    3.	命名中不能出现-(js会理解成减号进行减法的操作),不能和关键字冲突。
    

    js是弱类型语言,不重视类型的定义,但js会根据为变量赋值的情况自定判断该变量是何种类型:

    数值型:var i = 1;	var d = 2.35;
    字符串:var str = "用心学习";
    布尔型:var b = true;
    

    对比Java:java是强类型的语言,注重类型的定义,Java定义类型如下:

    整型:int i = 1;
    浮点型:double d = 2.35;
    字符串:String str = “用心学习”;
    布尔型:boolean b = true;
    

    总结:js中变量的定义。只要加一个var就行。java则使用什么类型的变量就要定义什么类型的。

    9、检测数据类型:

    typeof(value); 或者typeof value;     返回这个变量的类型. 
    说明 : 同一个变量, 可以进行不同类型的数据赋值.
    
    <script type="text/javascript">
        
        var a;
        alert(typeof a);  // undefined
    
        a = 998;
        alert(typeof a); // number
    
        a = "用心学习";
        alert(typeof a); // string
    
        a = true;
        alert(typeof a); // boolean
        
    </script>
    

    10、算术运算符

    +	-	*	/	%	++	--

    注意:

    1.	由于js中的小数和整数都是number类型,不存在类似整数除以整数还是整数的结论。
    2.	字符串和其他的数据使用+号运算,会连接成一个新的字符串。
    3.	字符串使用除了+以外的运算符:如果字符串本身是一个数字,那么会自动转成number进行运算
    ,否则就会返回一个NaN的结果,表示这不是一个数字。NaN:not a number
    
    <script>
    
        alert(1234 / 1000 * 1000); // 1234
      
        var s = "12";
         s -= 10;
        alert(s);  // 2
     
        var s = "aa";
        s -= 10;
        alert(s);  // NaN       Not a Number 不是一个数字
    
        var s = "12";
        s += 10;
        alert(s);       // 1210 
    
    </script>
    

    11、关系(比较)运算符

    >		>=		<		<=  	!=		
    ==	等于(只比较内容)	===	恒等于(比较内容的同时还要比较数据类型)
    注意:关系运算符返回的结果只有两个:true / false
    
    <script>
    
        // 请问1 : 3 > 5, 结果为 ?
        alert(3 > 5);   // false
    
        // 请问2 : “22” == 22  结果为 ?
        alert("22" == 22); // true  (仅仅判断数值)
    
        // 请问3 : “22” === 22  结果为 ?
        alert("22" === 22);  // false  (恒等于, 数值和类型都要相等)
        
    </script>
    

    12、逻辑运算符

    &&	 	与		true&&false		====>false
    || 		或		true||false			====>true
    ! 		非		!true				====>false
    false(理解):false,  0,  null,  undefined 
    true(理解):true, 非0,  非null,  非undefined
    
    针对 && 顺口溜: 找第一个出现的假值. (一假即假)
    针对 || 顺口溜: 找第一个出现的真值. (一真即真)

    演示一:

    <script>
    
        // 短路与 (一假即假)
        // 口诀 : 找第一个为假的值.
    
        // 请问1 :  8 < 7 && 3 < 4, 结果为 ?
        alert(8 < 7 && 3 < 4);  // false
    
        // 请问2 :  -2 && 6 + 6 && null 结果为 ?
        alert(-2 && 6 + 6 && null); // null
    
        // 请问3 :  1 + 1 && 0 && 5  结果为 ?
        alert(1 + 1 && 0 && 5); // 0
    
    </script>
    

    演示二:

    <script>
    
        // 短路或 : 一真即真.
        // 口诀 : 找第一个为真的值.
    
        // 请问1 :  0 || 23 结果为 ?
        alert(0 || 23); // 23
    
        // 请问2 :  0 || false || true  结果为 ?
        alert(0 || false || true); // true
    
        // 请问3 :  null || 10 < 8 || 10 + 10结果为 ?
        alert(null || 10 < 8 || 10 + 10);  // 20
    
        // 请问4 :  null || 10 < 8 || false结果为 ?
        alert(null || 10 < 8 || false); // false
        
    </script>
    

    13、三元运算符:

    条件?表达式1:表达式2
    如果条件为true,返回表达式1的结果
    如果条件为false,返回表达式2的结果
    

    演示:

    <script>
    
        // 请问1 :  3 ? “aaa” : “bbb” 结果为 ?
        alert(3 ? "aaa" : "bbb");       // aaa
    
        // 请问2 :  0 ? “ccc” : “ddd”  结果为 ?
        alert(0 ? "ccc" : "ddd");       // ddd
        
    </script>
    

    14、if条件语句

    这个和Java中if语句一样。

    演示:

    <script>
    
          var score = 59;
    
          if (score >= 90) {
              alert("优秀");
          } else if (score >= 80) {
              alert("良好");
          } else if (score >= 60) {
              alert("及格");
          } else {
              alert("不及格");
          }
    
      </script>
    

    15、switch分支结构

    这个和java中switch结构一样。只是Java中表达式为:常量 整型(去long)、字符、字符串

    演示:

    <script>
    
          var score = 59;
    
          // 需求 : 将需要一个整型数值, 不想要小数点.
          // window 对象的 parseInt 方法.
          score = window.parseInt(score / 10 + "");
          // alert(score);
    
          switch (score) {
              case 10:
              case 9:
                  alert("优秀!");
                  break;
              case 8:
                  alert("良好!");
                  break;
              case 7:
              case 6:
                  alert("及格!");
                  break;
              default:
                  alert("不及格!");
                  break;
          }
    
      </script>
    

    16、循环结构 while、do-while. for;

    while(循环条件){循环体;}
    do{循环体;}while(循环条件);
    for(循环变量赋初值;循环条件;循环变量增值){循环语句;}
    console.log(...); 以日志的形式在控制台输出结果!
    

    演示:

    <script>
    
        // 需求 : 统计 1~100 之间能够被3和7整除的数字个数
    
        var count = 0;
    
        // 1. 遍历 1~100 之间的所有整型数值
        for (var i = 1; i <= 100; i++) {
    
            // 2. 判断
            if (i % 3 == 0 && i % 7 == 0) {
                // alert(i);
                console.log(i);
                // 3. 累加个数
                count++;
            }
        }
    
        // 4. 查看结果
        // alert(count);
        console.log(count);
    
    

    console.log显示如下:

    17、循环嵌套

    演示案例9*9乘法表

     <style>
            table {
                /* 将 table 表格的线变成了细线 */
                border-collapse: collapse;
                /*color: red;*/
                border-color: red;
            }
        </style>
    
        <script>
    
            // 需求 : 九九乘法口诀表
            document.write("<table border='1px solid red' cellspacing='0' cellpadding='8px'>");
            document.write("<caption>九九乘法口诀表</caption>");
            for (var i = 1; i <= 9; i++) {
                document.write("<tr>");
                for (var j = 1; j <= i; j++) {
                    document.write("<td>");
                    document.write(j + "*" + i + "=" + (j*i) + "&nbsp;&nbsp;&nbsp;&nbsp;");
                    document.write("</td>");
                }
                document.write("</tr>");
            }
            document.write("</table>");
    
        </script>
    
    

    18、自定义函数

    函数是命名的独立的语句段,这个语句段可以被当作一个整体来引用和执行:

    格式:

    function 函数名(形式参数){函数体}
    调用函数:函数名(实际参数);
    

    18.1、函数只有被调用后才会执行

    18.2、如果函数需要返回值、直接使用return 返回、不会像java一样要考虑返回值的类型

    <script type="text/javascript">
    
        // 定义一个函数 : function
        function demo2() {
            return 666;
        }
    
        // 调用函数 :
        alert(demo2());
    
    </script>
    

    18.3、如果函数需要传递参数、不需要指定参数的类型、直接使用变量即可

    <script type="text/javascript">
    
        // 定义一个函数 : function
        function demo3(a, b) {
            return a + b;
        }
    
        // 调用函数 :
        alert(demo3(10, 20));//显示30
    
    </script>
    

    18.4、js中出现二个重名的函数名、后者会把前面的覆盖掉

    对比java、java有重载(同名不同参)、重写(同名同参同返回值类型、方法体不一样)

    演示:

    <script type="text/javascript">
    
        // 定义一个函数 : function
        function demo4(a, b) {
            alert("调用1...");
        }
    
       function demo4() {
           alert("调用2...");
       }
    
        demo4(10, 20);
        demo4();
    
    </script>
    

    会显示二次下面的图片:

    19、匿名函数

    匿名函数是没有名字的函数

    function(形式参数){函数体}
    调用方式:将匿名函数赋值给一个变量,通过变量名调用函数
    定义函数并赋值给变量:var fn = function(形式参数){函数体}
    调用函数:fn(实际参数);
    

    演示:

    <script type="text/javascript">
    
        // 匿名函数 : 没有名称的函数
        var func = function(i, u) {
            alert(i + " love " + u);
        }
    
        // 调用函数 :
       func("柳岩", "小白");//显示柳岩love小白
    
    </script>
    

    20、案例-轮播图

    说明1 : script 标签需要放在 body 标签之后.
    
    说明2 : window.setInterval(“字符串函数名称()”, 时间毫秒数);
    
    说明3 : window.setInterval(函数名称, 时间毫秒数);
    
    说明4 : window.setInterval(匿名函数, 时间毫秒数);            推荐使用
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
    
        <style>
    
            div {
                width: 80%;
                margin: 50px auto;
            }
    
            img {
                width: 100%;
            }
    
        </style>
    
    </head>
    <body>
        <div class="container">
            <img src="../img/01.jpg" alt="图片">
        </div>
    </body>
    

    实现一:

    <script>
    
        // 需求 : 动态获取页面中的 img 标签, 然后修改 img 标签的 src 属性.
        // 1. 获取 img 标签
        var img = document.getElementById("img");
        // alert(img);
    
        // 定义一个变量
        var count = 1;
    
        // 1.2 定义一个函数
        function changeImageSrc() {
            count++;
            img.src = "../img/0"+count+".jpg";
    
            // 判断
            if (count == 8) {
                count = 0;
            }
        }
    
        // 2. 循环切换图片
        // window.setInterval(函数, 时间毫秒); 在指定的时间毫秒间隔, 不断调用第一个参数传入的函数.
        // 调用方式一 :
        // window.setInterval("changeImageSrc()", 1000);
        // 调用方式二 :
        window.setInterval(changeImageSrc, 1000);
    
    </script>
    

    实现二:

    <script>
    
        // 需求 : 动态获取页面中的 img 标签, 然后修改 img 标签的 src 属性.
        // 1. 获取 img 标签
        var img = document.getElementById("img");
        // alert(img);
    
        // 定义一个变量
        var count = 1;
    
        // 2. 循环切换图片
        // window.setInterval(匿名函数, 时间毫秒); 在指定的时间毫秒间隔, 不断调用第一个参数传入的匿名函数.
        window.setInterval(function() {
            count++;
            img.src = "../img/0"+count+".jpg";
    
            // 判断
            if (count == 8) {
                count = 0;
            }
        }, 1000);
    
    </script>
    

    21、js事件

    21.1、事件概述:

    事件三要素:
    1.	事件源:被监听的html元素(就是这个事件加给谁),就是某个(某些)html标签
    2.	事件类型:某类动作,例如点击事件,移入移除事件,敲击键盘事件等
    3.	执行指令:事件触发后需要执行的代码,一般使用函数进行封装
    语法格式:事件源.事件类型=执行指令
    

    21.2、常用的事件:

    案例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件</title>
    
        <script>
            // 窗口 : window 对象提供了一个事件类型  onload 页面加载完成事件.
            // 事件源 : window    事件类型 : 页面加载完成事件 (onload)  执行指令: 就是赋值的 function 函数.
            window.onload = function () {
    
                // 获取页面的 btn 按钮
                var btn = document.getElementById("btn");
                // alert(btn);
    
                // 给 btn 按钮绑定一个事件 (单击事件 onclick)
                // 事件源 : btn按钮    事件类型 : 单击事件 (onclick)  执行指令: 就是赋值的 function 函数.
                btn.onclick = function () {
                    alert("恭喜你, 中了 500 万!");
                }
            }
    
        </script>
    
    </head>
    <body>
        <button id="btn">按钮</button>
    </body>
    </html>
    

    到此基础结束。

     

    ==============《轮播图图片路径问题》================

     

                                                           =================================

                        公众号  关注一波  (一叶知秋博客)不定期分享视频资料

                                                           

     

     

    展开全文
  • 玩转js属性操作和流程控制   实战必备技能之console/alert调试   深入了解变量、函数作用域和闭包   全方位讲解数据类型及类型的转换   定时器管理之定时器的使用与...
  • JavaScript jQuery 项目实战系列教程 能掌握JS和Jquery的基本技能,能完成基本的网页特效!
  • js中[]、{}、()区别

    万次阅读 2018-10-22 08:48:09
    一、{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数体 {}表示对象、[]表示对象的属性、方法,()如果用在方法名后面,代表调用 如:var LangShen = {"Name"...

    一、{ } 大括号,表示定义一个对象,大部分情况下要有成对的属性和值,或是函数体

    {}表示对象、[]表示对象的属性、方法,()如果用在方法名后面,代表调用
    如:var LangShen = {"Name":"Langshen","AGE":”28”}; 
    上面声明了一个名为“LangShen”的对象,多个属性或函数用,(逗号)隔开,因为是对象的属性, 
    所以访问时,应该用.(点)来层层访问:LangShen.Name、LangShen.AGE,
    当然我们也可以用数组的方式来访问,如:LangShen["Name"]、LangShen["AGE"],结果是一样的。
    var LangShen = { 
        Name : function(){ 
            return "LangShen"; 
        }, 
        Age : function(){ 
            return "28"; 
        } 
    } 
    调用 LangShen.Name()

    二、[ ]中括号,表示一个数组,也可以理解为一个数组对象

    如:var LangShen = [ "Name","LangShen","AGE","28" ]; 
    很明显,每个值或函数,都是独立的,多个值之间只用,(逗号)隔开,因为是数组对象,所以它等于: 
    var LangShen = Array( "Name","LangShen","AGE","28" ); 
    访问时,也是和数组一样,alert( LangShen[0] )

    三、{ } 和[ ] 一起使用,我们前面说到,{ } 是一个对象,[ ] 是一个数组,我们可以组成一个对象数组

    var LangShen = { 
        "Name":"Langshen", 
        "MyWife":[ "LuLu","26" ], 
        "MySon":[{"Name":"Son1"},{"Name":"Son2"},{"Name":"Son3"}] 
    } 
    从上面的结构来看,是一个对象里面的第一项是个属性,第二项是一个数组,第三个是包含有多个对象的数组。
    调用起来,也是一层一层访问,对象的属性用.(点)叠加,数组用 [下标] 来访问。 
    如:alert( LangShen.MySon[1].Name ) ;
    var LangShen=[
        {“name”:“wangwu”},
        {“name”:“lieu”}
    ];
    这是一个对象数组

    四、()多表示参数、{}表示函数体

    function show(name){
        Alert(name);
    }
    es6中,
    let show=(name)=>{
        alert(name);
    }
    在es6中如果参数只有一个,或者函数体只有一个话,可以省略()、{},如
    let show=name=>alert(name);

     

    展开全文
  • js实现拖拽编辑控件

    2020-07-29 14:19:41
    依赖第三方控件实现js拖动编辑效果 伪input实现多行输入效果 sortable.js 原生js实现demo 纯第三方控件demo  实现思路: (1)点击基本设置拖动后如何改变拖动的内容 (2)如何关联拖动后的内容 与 选项设置关联 ...
  • 拖放是很常见的一种交互效果,很多时候我们都会借助于第三方的控件来实现,其实用原生js实现起来也非常的方便。接下来我们就用原生js和css快速实现这样的拖放效果: HTML HTML的内容很简单,就是五个空的容器和一个...

    拖放是很常见的一种交互效果,很多时候我们都会借助于第三方的控件来实现,其实用原生js实现起来也非常的方便。接下来我们就用原生js和css快速实现这样的拖放效果:

    HTML

    HTML的内容很简单,就是五个空的容器和一个可以被拖拽的元素:

    html:

    <body>
      <div class="droppable">
        <div class="draggable" draggable="true"></div>
      </div>
      <div class="droppable"></div>
      <div class="droppable"></div>
      <div class="droppable"></div>
      <div class="droppable"></div>
    </body>
    web前端开发学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
    (详细的前端项目实战教学视频,PDF)
    

    注意点:1. 容器的的classdroppable,用于接收被拖拽的元素,可被拖拽的元素classdraggable,同时设置draggable属性为true,表示该元素可以被拖拽。2. 默认情况下,只有图片、链接还有被选中的文字能被拖拽,其他元素需要设置draggabletrue才能被拖拽。所以为了凸显draggable的用法,这里使用<div>而不是<image>来作为被拖拽的元素。

    CSS

    在实现样式的时候,除了实现静态的样式,一些过渡状态也需要增加样式以提升视觉体验:1. 元素被拖动的过程中增加边框等效果;2. 当元素被拖动到容器上方时,容器也应增加样式表明容器可以接收一个被拖拽的元素。

    css:

    body {
      background-color: darksalmon;
    }
    
    .draggable {
      background-image: url('http://source.unsplash.com/random/150x150');
      position: relative;
      height: 150px;
      width: 150px;
      top: 5px;
      left: 5px;
      cursor: pointer;
    }
    
    .droppable {
      display: inline-block;
      height: 160px;
      width: 160px;
      margin: 10px;
      border: 3px salmon solid;
      background-color: white;
    }
    
    .dragging {
      border: 4px yellow solid;
    }
    
    .drag-over {
      background-color: #f4f4f4;
      border-style: dashed;
    }
    
    .invisible {
      display: none;
    }
    

    注意点:1. 图片来源于https://source.unsplash.com/的随机图片;2. .dragging为draggable元素正在被拖动的状态,增加黄色border;3. .drag-over为draggable元素被拖动到容器上方时容器的状态,增加灰色虚线border。

    JS

    最后,我们需要通过js监听draggabledroppable的相关的事件。

    js:

    // 查询draggable和droppable
    const draggable = document.querySelector('.draggable');
    const droppables = document.querySelectorAll('.droppable');
    
    // 监听draggable的相关事件
    draggable.addEventListener('dragstart', dragStart);
    draggable.addEventListener('dragend', dragEnd);
    
    function dragStart() {
      this.className += ' dragging';
      setTimeout(() => {
        this.className = 'invisible';
      }, 0);
    }
    
    function dragEnd() {
      this.className = 'draggable';
    }
    
    // 监听droppable的相关事件
    for (const droppable of droppables) {
      droppable.addEventListener('dragover', dragOver);
      droppable.addEventListener('dragleave', dragLeave);
      droppable.addEventListener('dragenter', dragEnter);
      droppable.addEventListener('drop', dragDrop);
    }
    
    function dragOver(e) {
      e.preventDefault();
    }
    
    function dragEnter(e) {
      e.preventDefault();
      this.className += ' drag-over';
    }
    
    function dragLeave(e) {
      this.className = 'droppable';
    }
    
    function dragDrop(e) {
      this.className = 'droppable';
      this.append(draggable);
    }
    web前端开发学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
    (详细的前端项目实战教学视频,PDF)
    

    注意点:1. 当draggable元素被拖动时,原来容器中的draggable元素并不会消失,需要我们手动将其隐藏(class设置为invisible),如果同步操作会立马触发dragend事件导致拖动效果消失,所以在setTimeout的回调中异步设置可确保拖动操作开始后再隐藏draggable元素;2.dragEnterdragOver方法中我们需要通过preventDefault来取消事件以表明容器是一个合法的droppable元素,不然容器的drop事件将无法触发,接下来的操作也将无法进行,详细解释请参考 MDN DropTarget;**3.**在dragDrop方法中直接使用append方法将draggable元素移动至当前容器下面。

    好了,demo比较简单,但是细节还是有一些的,自己实践一下才能更深刻的领悟。

    展开全文
  • js原生拖拽的两种方法

    万次阅读 多人点赞 2018-08-30 11:30:19
    一.mousedown、mousemove和mouseup 拖着目标元素在页面任意位置 如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒。 1.onmousedown:鼠标按下事件 2.onmousemove:鼠标移动事件 ...

    一.mousedown、mousemove和mouseup  拖着目标元素在页面任意位置

    如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒。

    1.onmousedown:鼠标按下事件
    2.onmousemove:鼠标移动事件
    3.onmouseup:鼠标抬起事件

    重点:

    1、一定要绝对定位,脱离文档流才可以移动。

    2、绑定拖拽的元素,移动和鼠标松开后是对document的绑定,因为移动的是整个div。

    3、点击:a= 获取当前鼠标坐标、b =div距浏览器距离、c = 鼠标在div内部距离=a-b。

        移动:通过  a - c 建立鼠标与div的关系,防止鼠标超出div。

    基本思路:

    拖拽状态 = 0鼠标在元素上按下的时候{  

      拖拽状态 = 1  

      记录下鼠标的x和y坐标  

      记录下元素的x和y坐标  

      

     鼠标在元素上移动的时候{  

      如果拖拽状态是0就什么也不做。  

      如果拖拽状态是1,那么  

      元素y = 现在鼠标y - 原来鼠标y + 原来元素y  

      元素x = 现在鼠标x - 原来鼠标x + 原来元素x  

      }   

     鼠标在任何时候放开的时候{  

      拖拽状态 = 0  

    }

    贴上代码:

        <div class="box" id="drag"></div>
            .box{
                position: absolute;
                width: 100px;
                height: 100px;
                background: red;
                cursor: move;
            }

     

            window.onload = function(){
                var drag = document.getElementById('drag');
                // //点击某物体时,用drag对象即可,move和up是全局区域,
                // 也就是整个文档通用,应该使用document对象而不是drag对象(否则,采用drag对象时物体只能往右方或下方移动)  
                drag.onmousedown = function(event){
                   var event = event || window.event;  //兼容IE浏览器
                //    鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
                   var diffX = event.clientX - drag.offsetLeft;
                   var diffY = event.clientY - drag.offsetTop;
                   if(typeof drag.setCapture !== 'undefined'){
                          drag.setCapture(); 
                   }
                document.onmousemove = function(event){
                    var event = event || window.event;
                    var moveX = event.clientX - diffX;
                    var moveY = event.clientY - diffY;
                    if(moveX < 0){
                        moveX = 0
                    }else if(moveX > window.innerWidth - drag.offsetWidth){
                        moveX = window.innerWidth - drag.offsetWidth
                    }
                    if(moveY < 0){
                        moveY = 0
                    }else if(moveY > window.innerHeight - drag.offsetHeight){
                        moveY =  window.innerHeight - drag.offsetHeight
                    }
                    drag.style.left = moveX + 'px';
                    drag.style.top = moveY + 'px'
                }
                document.onmouseup = function(event){
                    this.onmousemove = null;
                    this.onmouseup = null;
                     //修复低版本ie bug  
                    if(typeof drag.releaseCapture!='undefined'){  
                       drag.releaseCapture();  
                    }  
                }
            }
        }

     二.HTML5元素拖拽drag与拖放drop

     元素拖拽

    浏览器默认允许我们拖拽图像、文本以及链接 
    让其它元素被拖动也是可以实现的 
    只需要在元素标签上添加一个属性

       <div class="box1" draggable="true" id="source"></div>

    拖拽事件

    拖拽事件应该分为两类 
    一类是被拖拽元素触发的事件 
    另一类是拖放目标元素触发的事件

        <div class="box1" draggable="true" id="source"></div>
        <br>
        <div class="box2" id="target"></div>

    拖拽元素

    拖拽元素的时候,被拖拽元素会触发以下事件

    • dragstart
    • drag
    • dragend

    当鼠标点中元素并且开始移动时,就会触发dragstart事件(类比mousedown) 
    拖拽过程中会持续不断地触发drag事件(类比mousemove) 
    松开鼠标取消拖拽时就会触发dragend事件(类比mouseup)

               source.ondragstart = function(event){
                    var e = event || window.event
                    console.log('开始拖拽');
                }
                source.ondrag = function(){
                    console.log('拖拽中');
                }
                source.ondragend = function(){
                    console.log('拖拽结束')
                }

    目标元素

    当拖拽的元素拖到一个目标元素上时,目标元素会触发以下事件

    • dragenter
    • dragover
    • dragleave
    • drop

    拖拽元素到目标上,就会触发dragenter事件(类比mouseover) 
    当拖动元素在目标元素中,就会持续触发dragover事件 
    离开目标元素,触发dragleave事件(类比mouseout) 
    若拖放元素到了目标元素中(在目标元素中松开鼠标),就会触发drop事件而不会触发dragleave事件

                target.ondragenter = function(){
                    console.log('进入目标元素')
                }
                target.ondragover = function(event){
                    var event = event || window.event;
                    console.log('在目标元素中拖拽');
                    event.preventDefault()
                }
                target.ondragleave = function(){
                    console.log('拖放离开目标元素')
                }
                target.ondrop = function(event){
                    console.log('拖放');
                    var e = event || window.event;
    
                }

       

    注意:元素默认是不能够拖放 只要我们在目标元素的dragover事件中取消默认事件就可以解决问题

    数据交换

    数据交换的对象就是事件对象的属性dataTransfer 
    dataTransfer的两个核心方法是setData()和getData() 
    setData()用于设置数据,getData()用语接收数据

    举个拖放的例子:

        <div class="box1" draggable="true" id="source"></div>
        <br>
        <div class="box2" id="target"></div>
    
       
      .box1{
             width: 100px;
             height: 100px;
             background: salmon
         }
         .box2{
             width: 300px;
             height: 300px;
             border: 1px solid black
         }
            window.onload = function(){
                var source = document.getElementById('source');
                var target = document.getElementById('target');
                source.ondragstart = function(event){
                    var e = event || window.event
                    console.log('开始拖拽');
                    e.dataTransfer.setData('text',e.target.id);
                }
                    target.ondragenter = function(){
                        console.log('进入目标元素')
                    }
                    target.ondragover = function(event){
                        var event = event || window.event;
                        console.log('在目标元素中拖拽');
                        event.preventDefault()
                    }
                    target.ondragleave = function(){
                        console.log('拖放离开目标元素')
                    }
                    target.ondrop = function(event){
                        console.log('拖放');
                        var e = event || window.event
                        var data = e.dataTransfer.getData('text');
                        e.target.appendChild(document.getElementById(data));
    
                    }
            }

           

    拖拽设置

    在dataTransfer中还有两个重要的属性 
    dropEffecteffectAllowed

    dropEffect

    dropEffect属性值为字符串,表示被拖动元素可以执行哪一种放置行为 
    要使用这个属性,必须在dragenter事件处理函数中设置

    • none 不能把元素拖放至此(除文本框外全部元素的默认值)
    • move 移动到目标
    • copy 复制到目标
    • link 目标打开拖动元素(拖动元素必须是链接并有URL)

    effectAllowed

    effectAllowed属性值也是字符串,表示允许拖动元素哪种dropEffect 
    要使用这个属性,必须在dragst事件处理函数中设置

    • uninitialized 没有设置任何拖放行为
    • none 不能由任何行为
    • copy 仅允许dropEffect值为copy
    • link 仅允许dropEffect值为link
    • move 仅允许dropEffect值为move
    • copyLink 允许dropEffect值为copy和link
    • copyMove 允许dropEffect值为copy和move
    • linkMove 允许dropEffect值为link和move
    • all 允许任意dropEffect

     

    参考文章:

       https://blog.csdn.net/gongzhuxiaoxin/article/details/52894784

       https://blog.csdn.net/gongzhuxiaoxin/article/details/52894784

    展开全文
  • 直接上代码,这个是用原生的jquery实现的鼠标拖拽。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>... width:1...
  • React.js实现原生js拖拽效果及思考

    千次阅读 2016-08-16 18:00:57
    一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨。所以就用react来实现这个拖拽效果。 首先,其实拖拽效果的思路是很简单的。主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽...
  • js或vue中如何处理字符串中带有↵字符 split('\n') 使用split('\n')将字符串分割成数组就行 如果我们在vue中,只需要在页面中绑定变量时操作split('\n')就可以了: <p v-for="_item in item....
  • js ↵ 换行 转换 br /n

    2020-05-27 10:49:38
    前端 JS ↵转换成 /n 转换成 从json数组里面拿到的数据是 1.我好开心啊囖囖咯↵哦哦啦啦啦↵ 放在浏览器console.log打印出来自己就换行了 但是 在页面显示是个空格 所以遇见这个问题 我们得先把它转成字符串 // ...
  • 关于JS的数组操作,有很多熟知的方法,比如,forEach, map, filter 等等。但是对于“查找对象数组中某个元素下标”这个需求,今天get了一个新的写法。 下面举两个例子: var array = [1,2,3,'4']; var indexOf4 ...
  • 导致这个报错的原因是bootstrap加载的顺序有问题,必须先引用jquery.min.js文件,然后再引用botstrap的js。 如下 src="../js/jquery.min.js"> src="../js/ajax.js"> src="../js/bootstrap.min.js"> src="../js/...
  • 浅谈JavaScript的两种运行环境

    万次阅读 2017-03-04 20:56:11
    目前JavaScript脚本的运行环境有浏览器和node.js环境两种。 1、JavaScript被定义为一种浏览器的脚本语言,一直以来其运行环境都是客户端浏览器,因为JavaScript设计的初衷就是做一些浏览器与用户的交互和一些网页的...
  • javascript输出换行

    万次阅读 2018-07-21 18:17:23
    document.write("内容"+"&lt;br&gt;") 使用“&lt;br&gt;”来实现换行
  • 很不错的JavaScript练习项目——适用小白新手

    万次阅读 多人点赞 2018-08-08 12:26:49
    分享一些我在学习前端过程中找到的一个很不错的JS练习小Demo,可以帮助小白更好的接受JS相关知识,个人感觉挺不错的。   http://www.fgm.cc/learn/   转载网站:https://www.jianshu.com/p/2961d9c317a3...
  • javaScript-如何引入js代码

    千次阅读 热门讨论 2019-08-20 20:37:52
    javaScript-如何引入js代码 直接po代码和截图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js01-如何引入js代码</title> <script type="text/...
  • 在kettle里编写javascript代码操作数据

    万次阅读 2015-01-27 16:23:42
    在kettle里面编写javascript可以简化我们的操作,kettle使用的是Mozilla的rhino,javascript的返回必须在下方定义,点击获取变量即可定义,也可以手动编辑定义变量。
  • JavaScript外部链接式

    千次阅读 2018-04-12 21:44:36
    JavaScript声明函数的位置有两种方式:内嵌式和外嵌式。主要说明一下外嵌式的路径问题,分为两种情况:1.若在同一文件夹下,则直接使用src="js文件名.js";2.若在不同文件夹下,则路径为src="./js...
1 2 3 4 5 ... 20
收藏数 3,595,751
精华内容 1,438,300
关键字:

js