• 关于

    js中的this与html

    的搜索结果

问题

【分享】WeX5的正确打开方式(3)——绑定机制

小太阳1号 2019-12-01 21:23:54 5393 浏览量 回答数 3

问题

【分享】html5 开发工具——WeX5中的各种绑定方式

小太阳1号 2019-12-01 21:25:48 4942 浏览量 回答数 3

问题

【精品问答】前端开发必懂之JS技术二百问

茶什i 2019-12-01 22:05:04 146 浏览量 回答数 0

阿里云高校特惠,助力学生创业梦!0元体验,快速入门云计算!

学生动手场景应用,快速了解并掌握云服务器的各种新奇玩法!

问题

【分享】WeX5的正确打开方式(1)

小太阳1号 2019-12-01 21:15:23 6117 浏览量 回答数 0

回答

JavaScript (ECMAScript) :JavaScript 是脚本语言。JavaScript和ECMAScript通常被人用来表达相同的含义,但是JavaScript并不是这么一点含义,它是由ECMAScript 核心. DOM 文档对象模型. BOM 浏览器对象模型 这三部分组成。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。 组成部分包括语法,类型,语句,关键字,保留字,操作符,对象。 其中,文档对象模型(DOM , Document Object Model)是针对XML但是经过拓展用于HTML的应用程序编程接口。DOM把整个页面映射为一个多层节点结构,开发人员借助DOM Api对节点进行操作。可以通过浏览器F12进入开发者模式,查看层级关系。当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树。通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。 功能大致上: · JavaScript 能够改变页面中的所有 HTML 元素 · JavaScript 能够改变页面中的所有 HTML 属性 · JavaScript 能够改变页面中的所有 CSS 样式 · JavaScript 能够对页面中的所有事件做出反应 同时,浏览器对象模型(Browser Object Model)使用BOM控制浏览器显示页面意外的部分。 javaScript脚本加载方式 1 通过在网页中加入标记JavaScript的开始和结束,将JavaScript代码放到之间 2 也可以引入一个外部的JavaScript文件,这个JavaScript文件一般以.js作为扩展名 3 原则上,放在之间。但视情况可以放在网页的任何部分 4 一个页面可以有几个,不同部分的方法和变量,可以共享。 javaScript语句开发 (1)对大小写敏感 (2)自动忽略多余的空格 (3)在文本字符串中使用反斜杠对代码行进行换行 (4)单行注释(//)多行注释(/* */) JavaScript 是一个程序语言。语法规则定义了语言结构。 JavaScript 字面量 在编程语言中,一般固定值称为字面量,如 3.14。 数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e)。 字符串(String)字面量 可以使用单引号或双引号: 数组(Array)字面量 定义一个数组: [40, 100, 1, 5, 25, 10] 对象(Object)字面量 定义一个对象: {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"} 函数(Function)字面量 定义一个函数: function myFunction(a, b) { return a * b;} **JavaScript 变量 ** 在编程语言中,变量用于存储数据值。 JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值: var x, length x = 5 length = 6 JavaScript 操作符 JavaScript使用 算术运算符 来计算值: (5 + 6) * 10 JavaScript使用赋值运算符给变量赋值: x = 5 y = 6 z = (x + y) * 10 JavaScript语言有多种类型的运算符: JavaScript 语句 在 HTML 中,JavaScript 语句向浏览器发出的命令。 语句是用分号分隔: x = 5 + 6; y = x * 10; JavaScript 关键字 JavaScript 关键字用于标识要执行的操作。 和其他任何编程语言一样,JavaScript 保留了一些关键字为自己所用。 var 关键字告诉浏览器创建一个新的变量: var x = 5 + 6; var y = x * 10; JavaScript 同样保留了一些关键字,这些关键字在当前的语言版本中并没有使用,但在以后 JavaScript 扩展中会用到。 以下是 JavaScript 中最重要的保留字(按字母顺序): JavaScript 注释 不是所有的 JavaScript 语句都是"命令"。双斜杠 // 后的内容将会被浏览器忽略: // 我不会执行 JavaScript 数据类型 JavaScript 有多种数据类型:数字,字符串,数组,对象等等: var length = 16; // Number 通过数字字面量赋值 var points = x * 10; // Number 通过表达式字面量赋值 var lastName = "Johnson"; // String 通过字符串字面量赋值 var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值 var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值 数据类型的概念 编程语言中,数据类型是一个非常重要的内容。 为了可以操作变量,了解数据类型的概念非常重要。 如果没有使用数据类型,以下实例将无法执行: 16 + "Volvo" 16 加上 "Volvo" 是如何计算呢? 以上会产生一个错误还是输出以下结果呢? "16Volvo" 你可以在浏览器尝试执行以上代码查看效果。 在接下来的章节中你将学到更多关于数据类型的知识。 JavaScript 函数 JavaScript 语句可以写在函数内,函数可以重复引用: 引用一个函数 = 调用函数(执行函数内的语句)。 function myFunction(a, b) { return a * b; // 返回 a 乘以 b 的结果 } JavaScript 字母大小写 JavaScript 对大小写是敏感的。 当编写 JavaScript 语句时,请留意是否关闭大小写切换键。 函数 getElementById 与 getElementbyID 是不同的。 同样,变量 myVariable 与 MyVariable 也是不同的。 JavaScript 字符集 JavaScript 使用 Unicode 字符集。 Unicode 覆盖了所有的字符,包含标点等字符。 三 推荐学习网站 JS具体的语法内容还有很多,可以参考官方API或者学习网站完成掌握,简单易学,推荐网站 菜鸟教程:https://www.runoob.com/js/js-tutorial.html w3cschool:https://www.w3school.com.cn/js/index.asp 四 推荐学习书籍 引用自 https://www.cnblogs.com/xhqq/p/7561384.html 个人觉得不错的,没事可以翻翻的。书籍如下: 《javascript设计模式》,张容铭写的,可能不太适合零基础的,是非常不错的进阶书籍。 《javascript面向对象编程指南》,风格轻松易懂,比较适合初学者,原型那块儿讲得透彻,12种继承方式呢。 《js权威指南》、《js高级程序设计》,这两本书经典是经典,但是太厚,适合把其中任意一章都当成一本书来读。洋洋洒洒,很难一口气看完。比较适合当做参考书。 《你不知道的javascript》狙击js核心细节,闭包、原型、this讲得都还清楚。 《js设计模式与开发实践》js设计模式也是要学的,此书把js的设计模式讲得非常清晰,一点不晦涩,看起来没多少难度。 《正则指引》,分析源码时,如果正则表达式不懂,没法进行下去的。此书相对来说讲得比较清晰。 《基于MVC的JavaScript Web富应用开发》,看完后,基本能写出自己的mvc框架了。是本好书。 《javascript函数式编程》,js是一门函数式语言,此书是函数式编程一个入门,函数是一等公民那是非常重要的。 《js忍者秘籍》,jq作者写的,没有传说中的那么难读,话说就算你看完并理解所有知识点,也不会达到世界高手级别的。因为你还没有做到随心所欲。 《javascript框架设计》,如果初看此书,会觉得此书有罗列代码之嫌。在我看来,此书讲究的是框架的全局观。以上书籍是我认为是成就高手之路上必须看的,也需要反复看。 css相关的书籍,说实话我看得比较少,总共有六七本吧。有两本必须推荐一下: 《css权威指南》,css基础知识点那是讲得非常清楚的。什么层叠优先级、line-height啥的。不是随便一本书都敢叫“权威指南”的。 《css揭秘》,此书我也是不断的看,此书才不屑于全面讲css3各属性呢。css规范文档能讲的,它只会讲你最不在意的。此书解决的47问题,解决思路和解决方案同等重要,很有启发性。以上各书你都可以不买,至少买本此书吧

问问小秘 2020-03-03 09:32:57 0 浏览量 回答数 0

回答

1 jQuery(selector,context) 简要的说是:接收一个css选择器表达式(selector)和可选的选择器上下文(context),返回一个包含了匹配的DOM元素的jQuery对象。 默认情况下,对匹配元素的查找都是从根元素ducument对象开始,也就是说查找范围是整棵文档树。但是如果给定了上下文context,则在指定上下文中查找 html <span>body span</span> <span>body span</span> <span>body span</span> <div class="wrap"> <span>wrap span</span> <span>wrap span</span> <span>wrap span</span> </div> js $('span').css('background-color','red');//所有的span都会变红 $('span','.wrap').css('background-color','red');//只有.wrap中的span会变红 2 jQuery(html,ownerDocument) 、jQuery(html,props) 用所提供的html代码创建DOM元素 对于jQuery(html,ownerDocument),参数html可以是单标签或者是多层标签之间的嵌套。第二个参数用于创建新DOM元素的文档对象,如果不传入则默认为当前的文档对象。 //单标签 两种方式都可以往body中插入div /* * 1 $('<div>').appendTo('body'); * 2 $('<div></div>').appendTo('body'); */ // 多标签嵌套 $('<div><span>dfsg</span></div>').appendTo('body'); 另外:对于单标签,jQuery(html,props),props是一个包含属性和事件的普通的对象,用法如下。(该用法有待考证,请知道这一用法的童鞋告知一下,感激不尽) $('<div>我是div</div>',{ title:'我是新的div', click:function(){ $(this).css('color','red'); console.log(this); } }).appendTo('body'); 3 jQuery(element or elementsArray) 如果传入一个DOM元素或者是DOM元素的数组,则把DOM元素封装到jQuery对象中并返回。 html <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> js // 传入DOM元素 $('li').each(function(index,ele){ $(ele).on('click',function(){ $(this).css('background','red');//这里的DOM元素就是this }) }) //传入DOM数组 var aLi=document.getElementsByTagName('li'); aLi=[].slice.call(aLi);//集合转数组 var $aLi=$(aLi); $aLi.html('我是jQuery对象');//所有的li的内容都变成'我是jQuery对象' 4 jQuery(object) 如果传入的是一个object对象,则把该对象封装到jQuery对象中并返回。 var obj={name:'谦龙'}; var $obj=$(obj);//封装成jQuery对象 //绑定自定义事件 $obj.on('say',function(){ console.log(this.name)//输出谦龙 }); $obj.trigger('say'); 5 jQuery(callback) 当传进去的参数是函数的时候,则在document对象上绑定一个ready事件监听函数,当DOM结构加载完成的时候执行 $(function(){ }) //以上代码和下面的效果是一样的 $(document).ready(function(){ ...//代码 }) 6 jQuery(jQuery object) 当传进去的参数是一个jQuery对象的时候,则创建该jQuery对象的一个副本并返回。副本与传入的jQuery对象引用完全相同的元素 var aLi=$('li'); var copyLi=$(aLi);//创建一个aLi的副本 console.log(aLi); console.log(copyLi); console.log(copyLi===aLi); 图片描述 7 jQuery() 如果不传入任何的参数,则返回一个空的jQuery对象,属性length为0 注意这个功能可以用来复用jQuery对象,例如可以创建一个空的jQuery对象,然后在需要的时候先手动修改其中的元素,然后在调用jQuery方法。从而避免重复创建jQuery对象。

问问小秘 2020-04-29 16:39:03 0 浏览量 回答数 0

问题

CKEditor配置及插件(Plugin)编写示例:报错

kun坤 2020-06-07 09:58:38 0 浏览量 回答数 1

问题

CKEditor配置及插件(Plugin)编写示例 - CKEditor报错

montos 2020-05-31 16:54:03 0 浏览量 回答数 1

回答

创建一个包含模板间共享布局的模板,通常这样的模板包含: 页面头部、导航栏、脚部、内容展示区域。 Layout.html <!DOCTYPE html> <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <title>Layout page</title> <script src="common-script.js"></script> </head> <body> <header> <h1>My website</h1> </header> <section layout:fragment="content"> <p>Page content goes here</p> </section> <footer> <p>My footer</p> <p layout:fragment="custom-footer">Custom footer here</p> </footer> </body> </html> 注意事项: 1. html标签上附上命名空间 2. section与脚部p标签上使用layout:fragment属性 这些是布局中的插入候选槽点,通过匹配内容模板中片段进行替换。 创建一些内容模板: Content1.html <!DOCTYPE html> <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{Layout}"> <head> <title>Content page 1</title> <script src="content-script.js"></script> </head> <body> <section layout:fragment="content"> <p>This is a paragraph from content page 1</p> </section> <footer> <p layout:fragment="custom-footer">This is some footer content from content page 1</p> </footer> </body> </html> html标签中的layout:decorate说明哪一个布局模板使用这个内容模板进行装饰。内容模板定义自身标题与脚本、content与custom-footer片段。custom-footer片段处于footer元素内部,这其实是不必要的,但是可能会是很方便的,如果想要做内容模板的静态模板,这是一开始使用Thymeleaf的原因之一。 在一个模板内片段名称必须唯一,否则可能会出现片段不匹配,各种各样的可笑事情会接踵而至。 不管如何,一旦告知Thymeleaf处理Content1.html,最终的页面会是这样子: <!DOCTYPE html> <html> <head> <title>Content page 1</title> <script src="common-script.js"></script> <script src="content-script.js"></script> </head> <body> <header> <h1>My website</h1> </header> <section> <p>This is a paragraph from content page 1</p> </section> <footer> <p>My footer</p> <p>This is some footer content from content page 1</p> </footer> </body> </html> 内容模板装饰Layout.html,结果是布局的组合,加上内容模板的片段(两个模板的<head>元素,来自内容模板的<title>元素替换布局文件内的,所有的元素来自布局文件,但是由所有指定的内容模板进行替换) 想了解更多可以如何控制<head>元素合并,参看<head>元素合并一小节。 装饰进程重定向处理从内容模板至布局,将layout:fragment部分从内容模板中挑选出来,因为布局需要它们。正因如此,任何在layout:fragment之外的东西实际从未得到执行,这说明在内容模板中不能这样做: <div th:if="${user.admin}"> <div layout:fragment="content"> ... </div> </div> 如果布局模板想要’内容’片段,那么会得到那个片段,不顾任何所在条件,因为那些条件不会执行。 如果说只想用绝对最小HTML代码量替换装饰器脚部: Content2.html <p layout:decorate="~{Layout}" layout:fragment="custom-footer"> This is some footer text from content page 2. </p> 这就是全部所需的东西!<p>标签同时用作根元素与片段定义,生成一个像这样的页面: <!DOCTYPE html> <html> <head> <title>Layout page</title> <script src="common-script.js"></script> </head> <body> <header> <h1>My website</h1> </header> <section> <p>Page content goes here</p> </section> <footer> <p>My footer</p> <p> This is some footer text from content page 2. </p> </footer> </body> </html> 可以把布局看作母版,会得以填充或者被内容(子模板)覆盖,仅当内容会填充/覆盖父类。以这种方式,布局充当某种’默认’,内容充当这种默认之上的实现。 给布局传送数据 子模板向上给母版布局传送数据,在涉及到布局/装饰过程的任意元素上使用th:with/ data-th-with属性处理器,可以在任何地方layout:decorate/ data-layout-decorate 或者可以发现 layout:fragment/data-layout-fragment, 例如: 孩子/内容模板: <html layout:decorate="your-layout.html" th:with="greeting='Hello!'"> 1 父类/布局模板: <html> ... <p th:text="${greeting}"></p> <!-- You'll end up with "Hello!" in here --> 将来,或许会增加支持使用分片局部变量,很像Thymeleaf用于创建片段签名。 配置标题 鉴于布局方言自动用内容模板中所发现的重载布局<title>,可能会发现自己重复布局中发现的标题部分,尤其是想要创建面包屑或者在页面标题中保留页面名称。layout:title-pattern处理器可以免除重复布局标题的问题,通过使用一些特殊标记以想要标题如何出现的模式。 这是一个例子: Layout.html <!DOCTYPE html> <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <head> <title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">My website</title> </head> ... </html> layout:title-pattern处理器采取简单字符串,识别两种特殊标记:$LAYOUT_TITLE与$CONTENT_TITLE。每种标记在结果页中会被各自相应的标题替换。所以,如果有下面的内容模板: Content.html <!DOCTYPE html> <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="Layout"> <head> <title>My blog</title> </head> ... </html> 结果页会是这样: <!DOCTYPE html> <html> <head> <title>My website - My blog</title> </head> ... </html> 这对<title>元素内的静态/内联文本或者<title>元素上发现使用th:text的动态文本均有效。 上述例子中的模式在布局中指定,所以对所有使用布局的内容模板均适用。如果在内容模板中指定另一种标题模式,那么会覆盖布局中发现的那个,允许细粒度的控制标题的展现形式。 可重用模板 假如发现有一些HTML或者结构经常性地重复,想要做成自己的模板从不同地方插入以便减少代码重复。(模块化Thymeleaf?)这个的例子可能会是一个模态面板,由几个HTML元素与CSS类构成,在网页应用中产生一个新窗口的效果: Modal.html <!DOCTYPE html> <html> <body> <div id="modal-container" class="modal-container" style="display:none;"> <section id="modal" class="modal"> <header> <h1>My Modal</h1> <div id="close-modal" class="modal-close"> <a href="#close">Close</a> </div> </header> <div id="modal-content" class="modal-content"> <p>My modal content</p> </div> </section> </div> </body> </html> 会发现可以将一些东西转换成像头部、ID的变量,以便包含Modal.html的页面可以设定它们自己的名称/ID。继续尽可能泛型化编写模态代码,然而会遇到填充自己的模态框内容的问题,那是开始接触一些限制的地方。 一些页面使用单一消息的模态框,其他想要使用模态框容纳一些更复杂的东西比如接受用户输入的表单。模态框可能性变得无休无止,但是未支持想象,发现自己得不得将这段模态框代码拷贝到每一个模板中,每一次使用场合变化相应内容,重复同样的HTML代码维持同样的外观感受,打破了过程中的DRY原则。 主要妨碍适当重用的事情是无法将HTML元素传递至插入模板中。这正是layout:insert有用的地方。它运作起来完全像th:insert,但是通过指定与实现片段很像内容/布局实例,可以创建一个公共的结构,对插入它的模板使用场合作出响应。 这是一个更新的模态框模板,使用Thymeleaf与layout:fragment属性定义一个可替换的模态框内容部分以变得更加泛型化: Modal2.html Modal2.html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> <body layout:fragment="modal(modalId, modalHeader)"> <div th:id="${modalId} + '-container'" class="modal-container" style="display:none;"> <section th:id="${modalId}" class="modal"> <header> <h1 th:text="${modalHeader}">My Modal</h1> <div th:id="'close-' + ${modalId}" class="modal-close"> <a href="#close">Close</a> </div> </header> <div th:id="${modalId} + '-content'" class="modal-content"> <div layout:fragment="modal-content"> <p>My modal content</p> </div> </div> </section> </div> </body> </html> 现在可以插入这个模板,使用layout:insert处理器与无论怎样需要实现modal-content片段,通过在调用模板插入元素内创建同样名称的片段: Content.html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> ... <div layout:insert="Modal2 :: modal(modalId='message', modalHeader='Message')" th:remove="tag"> <p layout:fragment="modal-content">Message goes here!</p> </div> ... </html> 就像内容/布局实例,插入模板layout:fragment会被匹配片段名称的元素替换掉。在这种场合下,Modal2.html的整个modal-content部分会被上述自定义段落替换掉。这是结果: <!DOCTYPE html> <html> ... <div id="message-container" class="modal-container" style="display:none;"> <section id="message" class="modal"> <header> <h1>Message</h1> <div id="close-message" class="modal-close"> <a href="#close">Close</a> </div> </header> <div id="message-content" class="modal-content"> <p>Message goes here!</p> </div> </section> </div> ... </html> 定义在模板内包含Modal2.html的自定义消息作为模态框内容的一部分。在插入模板上下文环境中的片段与用于内容/布局过程中的片段一样工作:如果片段未在模板中定义,那么它不会覆盖插入模板中的内容,使得在可重用版本中创建默认。

景凌凯 2020-04-29 21:11:25 0 浏览量 回答数 0

问题

使用Yeoman和Polymer创建Web应用:报错

kun坤 2020-06-08 11:03:09 3 浏览量 回答数 1

回答

前言 前两天在 echarts 上寻找灵感的时候,看到了很多有关地图类似的例子,地图定位等等,但是好像就是没有地铁线路图,就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo,地铁线路上的点是在网上随便下载了一个,这篇文章记录自己的一些收获(毕竟我还是个菜鸟)以及代码的实现,希望能够帮到一些朋友。当然,如果有什么意见的可以直接跟我说,大家一起交流才会进步。 效果图 地图稍微内容有点多,要全部展示,字显得有点小了,但是没关系,可以按照需求放大缩小,字体和绘制的内容并不会失真,毕竟都是用矢量绘制的~ 界面生成 底层的 div 是通过 ht.graph.GraphView 组件生成的,然后就可以利用 HT for Web 提供好的方法,调用 canvas 画笔随便绘制就好,先来看看怎么生成底层 div: var dm = new ht.DataModel();//数据容器 var gv = new ht.graph.GraphView(dm);//拓扑组件 gv.addToDOM();//将拓扑图组件添加进body中 addToDOM 函数声明如下: addToDOM = function(){ var self = this, view = self.getView(), style = view.style; document.body.appendChild(view); //将组件底层div添加到body中 style.left = '0';//默认组件是绝对定位,所以要设置位置 style.right = '0'; style.top = '0'; style.bottom = '0'; window.addEventListener('resize', function () { self.iv(); }, false); //窗口变化事件 } 现在我就可以在这个 div 上乱涂乱画了~首先我获取下载好的地铁线路图上的点,我将它们放在 subway.js 中,这个 js 文件全部都是下载的内容,我没有做其他的改动,主要是将这些点根据线路来分分配添加到数组中,比如: mark_Point13 = [];//线路 数组内包含线路的起点和终点坐标以及这条线路的名称 t_Point13 = [];//换成站点 数组内包含线路中的换乘站点坐标以及换成站点名称 n_Point13 = [];//小站点 数组内包含线路中的小站点坐标以及小站点名称 mark_Point13.push({ name: '十三号线', value: [113.4973,23.1095]}); mark_Point13.push({ name: '十三号线', value: [113.4155,23.1080]}); t_Point13.push({ name: '鱼珠', value: [113.41548,23.10547]}); n_Point13.push({ name: '裕丰围', value: [113.41548,23.10004]}); 接下来来描绘地铁线路,我声明了一个数组 lineNum,用来装 js 中所有的地铁线路的编号,以及一个 color 数组,用来装所有的地铁线的颜色,这些颜色的 index 与 lineNum 中地铁线编号的 index 是一一对应的: var lineNum = ['1', '2', '3', '30', '4', '5', '6', '7', '8', '9', '13', '14', '32', '18', '21', '22', '60', '68']; var color = ['#f1cd44', '#0060a1', '#ed9b4f', '#ed9b4f', '#007e3a', '#cb0447', '#7a1a57', '#18472c', '#008193', '#83c39e', '#8a8c29', '#82352b', '#82352b', '#09a1e0', '#8a8c29', '#82352b', '#b6d300', '#09a1e0']; 接着遍历 lineNum,将 lineNum 中的元素和颜色传到 createLine 函数中,根据这两个参数来绘制地铁线路以及配色,毕竟 js 文件中的命名方式也是有规律的,哪一条线路,则命名后面一定会加上对应的数字,所以我们只需要将字符串与这个编号结合即可获得 js 中对应的数组了: let lineName = 'Line' + num; let line = window[lineName]; createLine 的定义也非常简单,我的代码设置了不少的样式,所以看起来有点多。创建一个 ht.Polyline 管线,我们可以通过 polyline.addPoint() 函数向这个变量中添加具体的点,通过 setSegments 可以设置点的连接方式。 function createLine(num, color) {//绘制地图线 var polyline = new ht.Polyline();//多边形 管线 polyline.setTag(num);//设置节点tag标签,作为唯一标示 if(num === '68') polyline.setToolTip('A P M');//设置提示信息 else if(num === '60') polyline.setToolTip('G F'); else polyline.setToolTip('Line' + num); if(color) { polyline.s({//s 为 setStyle 的简写,设置样式 'shape.border.width': 0.4,//设置多边形的边框宽度 'shape.border.color': color,//设置多边形的边框颜色 'select.width': 0.2,//设置选中节点的边框宽度 'select.color': color//设置选中节点的边框颜色 }); } let lineName = 'Line' + num; let line = window[lineName]; for(let i = 0; i < line.length; i++) { for(let j = 0; j < line[i].coords.length; j++) { polyline.addPoint({x: line[i].coords[j][0]*300, y: -line[i].coords[j][1]*300}); if(num === '68'){//APM线(有两条,但是点是在同一个数组中的) if(i === 0 && j === 0) { polyline.setSegments([1]); } else if(i === 1 && j === 0) { polyline.getSegments().push(1); } else { polyline.getSegments().push(2); } } } } polyline.setLayer('0');//将线设置在下层,点设置在上层“top” dm.add(polyline);//将管线添加进数据容器中储存,不然这个管线属于“游离”状态,是不会显示在拓扑图上的 return polyline; } 上面代码中添加地铁线上的点有分为几种情况,是因为 js 中设置线的时候 Line68 有一个“跳跃”点的现象,所以我们必须“跳跃”过去,篇幅有限 Line68 数组具体的声明自行看 subway.js。 这里说明一点,如果用的是 addPoint 函数,不设置 segments 时,默认将添加进的点用直线连接,segments 的定义如下: 1: moveTo,占用 1 个点信息,代表一个新路径的起点 2: lineTo,占用 1 个点信息,代表从上次最后点连接到该点 3: quadraticCurveTo,占用 2 个点信息,第一个点作为曲线控制点,第二个点作为曲线结束点 4: bezierCurveTo,占用 3 个点信息,第一和第二个点作为曲线控制点,第三个点作为曲线结束点 5: closePath,不占用点信息,代表本次路径绘制结束,并闭合到路径的起始点 所以我们要做“跳跃”的行为设置 segments 为 1 即可。 最后绘制这些地铁线上的点,这个部分 subway.js 中也分离出来了,命名以“mark_Point”、“t_Point”以及“n_Point”开头,我在前面 js 的展示部分有对这些数组进行解释,大家动动中指划上去看看。 我们在这些点的位置添加 ht.Node 节点,当节点一添加进 dm 数据容器中时,就会在拓扑图上显示,当然,前提是这个拓扑图组件 gv 设置的数据容器是这个 dm。篇幅有限,添加地铁线上的点的代码部分我只展示添加“换乘站点”的点: var tName = 't_Point' + num; var tP = window[tName];//大站点 if(tP) {//有些线路没有“换乘站点” for(let i = 0; i < tP.length; i++) { let node = createNode(tP[i].name, tP[i].value, color[index]);//在获取的线路上的点的坐标位置添加节点 node.s({//设置节点的样式style 'label.scale': 0.05,//文本缩放,可以避免浏览器限制的最小字号问题 'label.font': 'bold 12px arial, sans-serif'//设置文本的font }); node.setSize(0.6, 0.6);//设置节点大小。由于js中每个点之间的偏移量太小,所以我不得不把节点设置小一些 node.setImage('images/旋转箭头.json');//设置节点的图片 node.a('alarmColor1', 'rgb(150, 150, 150)');//attr属性,可以在这里面设置任何的东西,alarmColor1是在上面设置的image的json中绑定的属性,具体参看 HT for Web 矢量手册(http://www.hightopo.com/guide/guide/core/vector/ht-vector-guide.html#ref_binding) node.a('alarmColor2', 'rgb(150, 150, 150)');//同上 node.a('tpNode', true);//这个属性设置只是为了用来区分“换乘站点”和“小站点”的,后面会用上 } }

问问小秘 2020-01-07 11:16:33 0 浏览量 回答数 0

回答

引用来自“milin”的评论直接用jquery好了,写的那么麻烦 以下代码取自: JS, JQUERY实现全选,反选。 其中,我将 <script src="js/jquery-1.8.3.min.js"></script> 改成: <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> 测试一下,似乎正是你所要的效果。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="checkbox" value="全选" id="ckAll"/>水果</br> <div class="box"> <input type="checkbox" value="苹果" id="apple"/>苹果 <input type="checkbox" value="香蕉" id="bann"/>香蕉 <input type="checkbox" value="橘子" id="origin"/>橘子 </div> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript">        //给所有 .box input 元素添加 checked = ckAll 当前的状态;        //prop('checked',value) ,第一个值获取属性,第二个值:设置属性值。prop只有一个参数时,表示获取元素属性。         $('#ckAll').click(function(){            $('.box input').prop('checked',$(this).prop('checked')); }); $('.box input').click(function(){ //each 便利每一个元素,让其执行该函数 $('.box input').each(function(){ if(!$(this).prop('checked')){ $('#ckAll').prop('checked',false); //有一个不满足就 跳出该循环,避免执行下面 return false; }else{ $('#ckAll').prop('checked',true); } }) })</script> </body> </html>  ######嗯嗯,是这样的,感谢分享!######一个不选中的场景,是否应当写成:if(!select1Input[i].checked){...}? 你少写了属性:checked。######if(!select1Input[i].checked){...}还是不管用###### 提问: 识别号为"selectAll"的html元素是什么类型?(type="?") 鉴于代表它的变量all 有个属性onclick (all.onclick), 我猜是 type="button"。可是它同时又有一个属性 checked, 我想它可能是 type="checkbox"。因此,我觉得,这个应当设立两个元素:一个 type="button", 一个 type="checkbox"。 请告诉我 元素 "selectAll" 是什么类型(type="?")。我不太明白这句话:"一个不选中,全选框也取消的效果"。全选框是否指的是 id="selectAll" 这个元素? "也取消" 是否是指 这个全选框消失?或它的checked 由 true 变为 false?  建议: 1.    定义 方法 selectReverse 的代码是否可以改成: var selectReverse = reverse.onclick = function(){     for (var i=0; i<select1Input.length; i++) {     select1Input[i].checked= !select1Input[i].checked;     } } 2.   将变量名称 reverse 换成 toggle。Toggle(切换),即使用自定义效果来显示或隐藏匹配的元素。这里,指的是 在  选中/未选中 (checked:true/false) 之间切换。鉴于 reverse 已经被 js 用于颠倒数组中元素的顺序的方法名: reverse(), 这里就不宜再用做其它的意思了。又发现,jQuery 中 toggle() 方法 是用来切换元素的可见状态的。如果是要"全选框也取消",即 全选框也消失, 那么 toggle 就最合适不过了。######回复 @良辰2250 : 我刚发一贴回答。可能正合你意。######回复 @tcxu : 点全选复选框可以全部选中,如果取消其中一个选项,全选复选框就不会选中。我是想让全选复选框与它的选项们之间有一个这样联动的效果呢######回复 @良辰2250 : 谢谢答复。你说:"一个不选中,全选框也取消的效果"。这是什么效果? 看来,全选框指的是 id="selectAll" 这个元素。 "也取消" 指是什么情况?是指 这个全选框消失, 还是指,一旦全选框的 checked 为 false, 其它所有的checkbox 的 checked 都会 是 false?######select1Input[i].checked= !select1Input[i].checked; 嗯,这样会更好######都是复选框:全选、反选、各选项: <label><input id="selectAll" type="checkbox" />全选/取消全选</label> <label><input id="selectReverse" type="checkbox" />反选</label><label><input type="checkbox" name="ability" />js</labe>######var selectAll=function (flag){ for(var i=0;i<select1Input.length;i++){ select1Input[i].checked=flag; } all.checked=flag; } 难道是这个意思?######和上面的效果也一样######直接用jquery好了,写的那么麻烦######借助于 网上的代码,如: <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> 有一个弊端:万一那个代码网页找不到(当然,不希望如此),你自己的代码也就无法运行了。我明白了你的用意之后,就尝试修改你的代码。结果发现,不用 JQuery 也会奏效。请测试。 var all = document.getElementById('selectAll'); var reverse = document.getElementById('selectReverse'); var select1Input = document.getElementsByName('ability'); var selectAll = function(flag){ for (var i=0; i<select1Input.length; i++){ select1Input[i].checked = flag; } } for (var i=0;i<select1Input.length;i++) select1Input[i].onclick = function(){ all.checked = false; } var selectReverse = reverse.onclick = function(){ for (var i=0; i<select1Input.length; i++) { select1Input[i].checked= !select1Input[i].checked; } } all.onclick = function(){ if (all.checked) { selectAll(true); } if (!all.checked){ selectAll(false); } }  ######谢谢啦我参考了http://www.cnblogs.com/lk4525/p/6513924.html 里面一个计数器,补充了一点######/* 全选、不选、反选 */ var all = document.getElementById('selectAll'); var reverse = document.getElementById('selectReverse'); var select1Input = document.getElementsByName('ability'); var selectAll = function selectAll(flag) { for(var i=0; i<select1Input.length; i++) { select1Input[i].checked = flag; } } for(var i=0; i<select1Input.length; i++) { select1Input[i].onclick = function() { //引入计数器 var sum = 0; for(var j=0; j<select1Input.length; j++) { if(select1Input[j].checked) { sum += 1; if(sum == select1Input.length) { all.checked = true; } else { all.checked = false; } } } } } var selectReverse = reverse.onclick = function(){ for (var i=0; i<select1Input.length; i++) { select1Input[i].checked= !select1Input[i].checked; } } all.onclick = function() { if(all.checked) { selectAll(true); } if(!all.checked) { selectAll(false); } }  ######$(document).on("click", ".checkAll", function (ev) { $(this).parents("table").find(".option .checkSingle").prop("checked", $(this).prop("checked")); }); $(document).on("click", ".checkSingle", function (ev) { var checked = $(this).parents("table").find(".option .checkSingle:not(:checked)").length == 0; $(this).parents("table").find(".checkAll").prop("checked", checked); });######回复 @Tis : 嗯嗯,方法有很多######判断全选框是否应该选中,只要判断 单选框的选中数量 和 总数量是否相等。######为什么写到循环里,直接all.checked=flag不可以?并且你click的时候已经改变all了,为什么还要在selectall里面改变下。还有,全选click里面的if意义在哪?直接selectAll(this.checked)不就好了######测试:点全选,再取消一个选项,再选中,会发现全选框居然不选中了。selectAll(flag)在all.onclick的里面是可以全选,但会存在一个如上的问题。所以引入一个计时器(选中的要和全部数一样),这时所有复选框都选中了,全选框才会是选中的状态

kun坤 2020-06-09 13:59:32 0 浏览量 回答数 0

回答

简介 如果您听说过 Node,或者阅读过一些文章,宣称 Node 是多么多么的棒,那么您可能会想:“Node 究竟是什么东西?”尽管不是针对所有人的,但 Node 可能是某些人的正确选择。 为试图解释什么是 Node.js,本文探究了它能解决的问题,它如何工作,如何运行一个简单应用程序,最后,Node 何时是和何时不是一个好的解决方案。本文不涉及如何编写一个复杂的 Node 应用程序,也不是一份全面的 Node 教程。阅读本文应该有助于您决定是否应该学习 Node,以便将其用于您的业务。 Node 旨在解决什么问题? Node 公开宣称的目标是 “旨在提供一种简单的构建可伸缩网络程序的方法”。当前的服务器程序有什么问题?我们来做个数学题。在 Java™ 和 PHP 这类语言中,每个连接都会生成一个新线程,每个新线程可能需要 2 MB 配套内存。在一个拥有 8 GB RAM 的系统上,理论上最大的并发连接数量是 4,000 个用户。随着您的客户端基础的增长,您希望您的 web 应用程序支持更多用户,这样,您必须添加更多服务器。当然,这会增加业务成本,尤其是服务器成本、运输成本和人工成本。除这些成本上升外,还有一个技术问题:用户可能针对每个请求使用不同的服务器,因此,任何共享资源都必须在所有服务器之间共享。例如,在 Java 中,静态变量和缓存需要在每个服务器上的 JVMs 之间共享。这就是整个 web 应用程序架构中的瓶颈:一个服务器能够处理的并发连接的最大数量。 Node 解决这个问题的方法是:更改连接连接到服务器的方式。每个连接都创建一个进程,该进程不需要配套内存块,而不是为每个连接生成一个新的 OS 线程(并向其分配一些配套内存)。Node 声称它绝不会死锁,因为它根本不允许使用锁,它不会直接阻塞 I/O 调用。Node 还宣称,运行它的服务器能支持数万个并发连接。事实上,Node 通过将整个系统中的瓶颈从最大连接数量更改到单个系统的流量来改变服务器面貌。 现在您有了一个能处理数万条并发连接的程序,那么您能通过 Node 实际构建什么呢?如果您有一个 web 应用程序需要处理这么多连接,那将是一件很 “恐怖” 的事!那是一种 “如果您有这个问题,那么它根本不是问题” 的问题。在回答上面的问题之前,我们先看看 Node 如何工作以及它被设计的如何运行。 Node 肯定不是什么 没错,Node 是一个服务器程序。但是,它肯定不 像 Apache 或 Tomcat。那些服务器是独立服务器产品,可以立即安装并部署应用程序。通过这些产品,您可以在一分钟内启动并运行一个服务器。Node 肯定不是这种产品。Apache 能添加一个 PHP 模块来允许开发人员创建动态 web 页,使用 Tomcat 的程序员能部署 JSPs 来创建动态 web 页。Node 肯定不是这种类型。 在 Node 的早期阶段(当前是 version 0.4.6),它还不是一个 “运行就绪” 的服务器程序,您还不能安装它,向其中放置文件,拥有一个功能齐全的 web 服务器。即使是要实现 web 服务器在安装完成后启动并运行这个基本功能,也还需要做大量工作。 Node 如何工作 Node 本身运行 V8 JavaScript。等等,服务器上的 JavaScript?没错,您没有看错。服务器端 JavaScript 是一个相对较新的概念,这个概念是大约两年前在 developerWorks 上讨论 Aptana Jaxer 产品时提到的(参见 参考资料)。尽管 Jaxer 一直没有真正流行,但这个理念本身并不是遥不可及的 — 为何不能在服务器上使用客户机上使用的编程语言? 什么使 V8?V8 JavaScript 引擎是 Google 用于他们的 Chrome 浏览器的底层 JavaScript 引擎。很少有人考虑 JavaScript 在客户机上实际做了些什么?实际上,JavaScript 引擎负责解释并执行代码。使用 V8,Google 创建了一个以 C++ 编写的超快解释器,该解释器拥有另一个独特特征;您可以下载该引擎并将其嵌入任何 应用程序。它不仅限于在一个浏览器中运行。因此,Node 实际上使用 Google 编写的 V8 JavaScript 引擎并将其重建为在服务器上使用。太完美了!既然已经有一个不错的解决方案可用,为何还要创建一种新语言呢? 事件驱动编程 许多程序员接受的教育使他们认为,面向对象编程是完美的编程设计,而对其他编程方法不屑一顾。Node 使用一个所谓的事件驱动编程模型。 清单 1. 客户端上使用 jQuery 的事件驱动编程 复制代码 代码如下: // jQuery code on the client-side showing how Event-Driven programming works // When a button is pressed, an Event occurs - deal with it // directly right here in an anonymous function, where all the // necessary variables are present and can be referenced directly $("#myButton").click(function(){ if ($("#myTextField").val() != $(this).val()) alert("Field must match button text"); }); 实际上,服务器端和客户端没有任何区别。没错,这没有按钮点击操作,也没有向文本字段键入的操作,但在一个更高的层面上,事件正在 发生。一个连接被建立 — 事件!数据通过连接接收 — 事件!数据通过连接停止 — 事件! 为什么这种设置类型对 Node 很理想?JavaScript 是一种很棒的事件驱动编程语言,因为它允许匿名函数和闭包,更重要的是,任何写过代码的人都熟悉它的语法。事件发生时调用的回调函数可以在捕获事件处编写。这样,代码容易编写和维护,没有复杂的面向对象框架,没有接口,没有在上面架构任何内容的潜能。只需监听事件,编写一个回调函数,然后,事件驱动编程将照管好一切! 示例 Node 应用程序 最后,我们来看一些代码!让我们将讨论过的所有内容综合起来,创建我们的第一个 Node 应用程序。由于我们已经知道,Node 对于处理高流量应用程序很理想,我们就来创建一个非常简单的 web 应用程序 — 一个为实现最大速度而构建的应用程序。下面是 “老板” 交代的关于我们的样例应用程序的具体要求:创建一个随机数字生成器 RESTful API。这个应用程序应该接受一个输入:一个名为 “number” 的参数。然后,应用程序返回一个介于 0 和该参数之间的随机数字,并将生成的数字返回调用者。由于 “老板” 希望它成为一个广泛流行的应用程序,因此它应该能处理 50,000 个并发用户。我们来看看代码: 清单 2. Node 随机数字生成器 复制代码 代码如下: // these modules need to be imported in order to use them. // Node has several modules. They are like any #include // or import statement in other languages var http = require("http"); var url = require("url"); // The most important line in any Node file. This function // does the actual process of creating the server. Technically, // Node tells the underlying operating system that whenever a // connection is made, this particular callback function should be // executed. Since we're creating a web service with REST API, // we want an HTTP server, which requires the http variable // we created in the lines above. // Finally, you can see that the callback method receives a 'request' // and 'response' object automatically. This should be familiar // to any PHP or Java programmer. http.createServer(function(request, response) { // The response needs to handle all the headers, and the return codes // These types of things are handled automatically in server programs // like Apache and Tomcat, but Node requires everything to be done yourself response.writeHead(200, {"Content-Type": "text/plain"}); // Here is some unique-looking code. This is how Node retrives // parameters passed in from client requests. The url module // handles all these functions. The parse function // deconstructs the URL, and places the query key-values in the // query object. We can find the value for the "number" key // by referencing it directly - the beauty of JavaScript. var params = url.parse(request.url, true).query; var input = params.number; // These are the generic JavaScript methods that will create // our random number that gets passed back to the caller var numInput = new Number(input); var numOutput = new Number(Math.random() * numInput).toFixed(0); // Write the random number to response response.write(numOutput); // Node requires us to explicitly end this connection. This is because // Node allows you to keep a connection open and pass data back and forth, // though that advanced topic isn't discussed in this article. response.end(); // When we create the server, we have to explicitly connect the HTTP server to // a port. Standard HTTP port is 80, so we'll connect it to that one. }).listen(80); // Output a String to the console once the server starts up, letting us know everything // starts up correctly console.log("Random Number Generator Running..."); 将上面的代码放到一个名为 “random.js” 的文件中。现在,要启动这个应用程序并运行它(进而创建 HTTP 服务器并监听端口 80 上的连接),只需在您的命令提示中输入以下命令:% node random.js。下面是服务器已经启动并运行时它看起来的样子: 复制代码 代码如下: root@ubuntu:/home/moila/ws/mike# node random.js Random Number Generator Running... 访问应用程序 应用程序已经启动并运行。Node 正在监听任何连接,我们来测试一下。由于我们创建了一个简单的 RESTful API,我们可以使用我们的 web 浏览器来访问这个应用程序。键入以下地址(确保您完成了上面的步骤):localhost/?number=27。 您的浏览器窗口将更改到一个介于 0 到 27 之间的随机数字。单击浏览器上的 “重新载入” 按钮,将得到另一个随机数字。就是这样,这就是您的第一个 Node 应用程序! Node 对什么有好处? 到此为止,应该能够回答 “Node 是什么” 这个问题了,但您可能还不清楚什么时候应该使用它。这是一个需要提出的重要问题,因为 Node 对有一些东西有好处,但相反,对另一些东西而言,目前 Node 可能不是一个好的解决方案。您需要小心决定何时使用 Node,因为在错误的情况下使用它可能会导致一个多余编码的 LOT。 它对什么有好处? 正如您此前所看到的,Node 非常适合以下情况:您预计可能有很高的流量,而在响应客户端之前服务器端逻辑和处理所需不一定是巨大的。Node 表现出众的典型示例包括: 1.RESTful API 提供 RESTful API 的 web 服务接收几个参数,解析它们,组合一个响应,并返回一个响应(通常是较少的文本)给用户。这是适合 Node 的理想情况,因为您可以构建它来处理数万条连接。它还不需要大量逻辑;它只是从一个数据库查找一些值并组合一个响应。由于响应是少量文本,入站请求时少量文本,因此流量不高,一台机器甚至也可以处理最繁忙的公司的 API 需求。 2.Twitter 队列 想像一下像 Twitter 这样的公司,它必须接收 tweets 并将其写入一个数据库。实际上,每秒几乎有数千条 tweets 达到,数据库不可能及时处理高峰时段需要的写入数量。Node 成为这个问题的解决方案的重要一环。如您所见,Node 能处理数万条入站 tweets。它能迅速轻松地将它们写入一个内存排队机制(例如 memcached),另一个单独进程可以从那里将它们写入数据库。Node 在这里的角色是迅速收集 tweet 并将这个信息传递给另一个负责写入的进程。想象一下另一种设计 — 一个常规 PHP 服务器自己试图处理对数据库的写入 — 每个 tweet 将在写入数据库时导致一个短暂的延迟,这是因为数据库调用正在阻塞通道。由于数据库延迟,一台这样设计的机器每秒可能只能处理 2000 条入站 tweets。每秒 100 万条 tweets 需要 500 个服务器。相反,Node 能处理每个连接而不会阻塞通道,从而能捕获尽可能多的 tweets。一个能处理 50,000 条 tweets 的 Node 机器只需要 20 个服务器。 3.映像文件服务器 一个拥有大型分布式网站的公司(比如 Facebook 或 Flickr)可能会决定将所有机器只用于服务映像。Node 将是这个问题的一个不错的解决方案,因为该公司能使用它编写一个简单的文件检索器,然后处理数万条连接。Node 将查找映像文件,返回文件或一个 404 错误,然后什么也不用做。这种设置将允许这类分布式网站减少它们服务映像、.js 和 .css 文件等静态文件所需的服务器数量。 它对什么有坏处? 当然,在某些情况下,Node 并非理想选择。下面是 Node 不擅长的领域: 1.动态创建的页 目前,Node 没有提供一种默认方法来创建动态页。例如,使用 JavaServer Pages (JSP) 技术时,可以创建一个在这样的 JSP 代码段中包含循环的 index.jsp 页。Node 不支持这类动态的、HTML 驱动的页面。同样,Node 不太适合作为 Apache 和 Tomcat 这样的网页服务器。因此,如果您想在 Node 中提供这样一个服务器端解决方案,必须自己编写整个解决方案。PHP 程序员不想在每次部署 web 应用程序时都编写一个针对 Apache 的 PHP 转换器,当目前为止,这正是 Node 要求您做的。 2. 关系数据库重型应用程序 Node 的目的是快速、异步和非阻塞。数据库并不一定分享这些目标。它们是同步和阻塞的,因为读写时对数据库的调用在结果生成之前将一直阻塞通道。因此,一个每个请求都需要大量数据库调用、大量读取、大量写入的 web 应用程序非常不适合 Node,这是因为关系数据库本身就能抵销 Node 的众多优势。(新的 NoSQL 数据库更适合 Node,不过那完全是另一个主题了。) 结束语 问题是 “什么是 Node.js?” 应该已经得到解答。阅读本文之后,您应该能通过几个清晰简洁的句子回答这个问题。如果这样,那么您已经走到了许多编码员和程序员的前面。我和许多人都谈论过 Node,但它们对 Node 究竟是什么一直很迷惑。可以理解,他们具有的是 Apache 的思维方式 — 服务器是一个应用程序,将 HTML 文件放入其中,一切就会正常运转。而 Node 是目的驱动的。它是一个软件程序,使用 JavaScript 来允许程序员轻松快速地创建快速、可伸缩的 web 服务器。Apache 是运行就绪的,而 Node 是编码就绪的。 Node 完成了它提供高度可伸缩服务器的目标。它并不分配一个 “每个连接一个线程” 模型,而是使用一个 “每个连接一个流程” 模型,只创建每个连接需要的内存。它使用 Google 的一个非常快速的 JavaScript 引擎:V8 引擎。它使用一个事件驱动设计来保持代码最小且易于阅读。所有这些因素促成了 Node 的理想目标 — 编写一个高度可伸缩的解决方案变得比较容易。 与理解 Node 是 什么同样重要的是,理解它不是 什么。Node 并不是 Apache 的一个替代品,后者旨在使 PHP web 应用程序更容易伸缩。事实确实如此。在 Node 的这个初始阶段,大量程序员使用它的可能性不大,但在它能发挥作用的场景中,它的表现非常好。 将来应该期望从 Node 得到什么呢?这也许是本文引出的最重要的问题。既然您知道了它现在的作用,您应该会想知道它下一步将做什么。在接下来的一年中,我期待着 Node 提供与现有的第三方支持库更好地集成。现在,许多第三方程序员已经研发了用于 Node 的插件,包括添加文件服务器支持和 MySQL 支持。希望 Node 开始将它们集成到其核心功能中。最后,我还希望 Node 支持某种动态页面模块,这样,您就可以在 HTML 文件中执行在 PHP 和 JSP(也许是一个 NSP,一个 Node 服务器页)中所做的操作。最后,希望有一天会出现一个 “部署就绪” 的 Node 服务器,可以下载和安装,只需将您的 HTML 文件放到其中,就像使用 Apache 或 Tomcat 那样。Node 现在还处于初始阶段,但它发展得很快,可能不久就会出现在您的视野中。 答案来源于网络

养狐狸的猫 2019-12-02 02:17:03 0 浏览量 回答数 0

回答

HTML + CSS 前端的入门门槛极低,体现在HTML和CSS上。运行环境就是浏览器,推荐Chrome。你需要的只是一个文本编辑器,推荐Sublime Text 3,有不少好插件比如Emmet,谷歌搜一下很容易了解到的。当然你非要用记事本的话,也不是不行的。刚入门查阅资料可以用 w3school 或者 MDN 。 HTML和CSS不是编程语言,前者只是结构标签,后者则是样式配置,入门是非常简单的。网上资料也有很多,推荐慕课网 HTML+CSS基础课程。 我当时是看了一本书 Head First HTML and CSS,讲得浅显易懂,不过价格比较感人,也是只翻一遍的书,没有必要买了。 迅速刷一遍慕课网,对HTML和CSS有个大致印象就好。想巩固HTML标签可以去看看16年的task1-1。 HTML5的API可以先放一放,回头再看。 接下来就是深入学习CSS了。推荐: 《CSS权威指南(第3版)》。很枯燥的一本书,但我确实不知道哪本书更适合了。花两三天硬啃下来就好了。属性细节不必记忆,以后用到肯定要再查的。着重点放在大局上,比如盒模型,浮动和定位这些,抓住重点快速过一遍。 《CSS3 专业网页开发指南》。CSS3也是需要掌握的内容。但这里还是以了解为主,知道CSS3有什么内容就好,记忆属性是枯燥且毫无意义的。 以上内容用时5天左右,下面是实践。 学了几天HTML和CSS了,应该也有点成果了。打开IFE2015 task1,写个静态页面吧。 我X,完全写不出来。 这是正常的。去看下别人的代码吧,看一小部分就开窍了。忘掉的属性就查书或者w3c,多尝试,不断踩坑才有进步。 画完第一张图后,别着急往下写。你的代码肯定会有如下问题 胡乱的代码缩进毫无章法的属性顺序 满页的div 不停地写id和class重写吧,是的。重写之前先看一份代码规范 GitHub - ecomfe/spec: This repository contains the specifications.。当然代码规范不是唯一的,我最早看的是这一份,所以代码风格也一直维持到现在。 再去看一下别人提交的代码,多看几份。当然自己也要判断,不能听风就是雨啊,人家写得不好你再去重写一次,等于你也有责任对不对。 开始重写了,会发现功力大增,写代码速度也快了很多的。 写到第三张页面的时候,应该比较熟练了。如果看到布局就大概知道应该怎么写了,那就可以进入JavaScript的学习了。 以上内容用时10天左右。 进阶部分可以回头再看: 掌握预处理工具Sass,自动化工具Gulp。 阅读Bootstrap源码。 《CSS揭秘》,极其惊艳的一本书,涵盖了CSS3的很多奇技淫巧,虽说有些地方不太实用,但让人眼前一亮,很值得看。JavaScript 这是至关重要的阶段。 强烈推荐《JavaScript高级程序设计(第3版)》,俗称红宝书。前七章是重中之重,必须反复阅读,直至完全理解,期间可配合其他书一起读。DOM,事件流,表单,JSON,Ajax与最后几章也相当重要。其余章节可以略读或跳过(比如浏览器嗅探,XML以及那些列举大量API的章节,完全可以用到再查) 推荐《JavaScript语言精粹》,俗称蝴蝶书。超薄的一本,半天就可以看完。JavaScript是一门有很多坑的语言,我个人是喜欢把这些坑点全部搞清楚的,但这本书却避而不谈了,剩下的也就是所谓的“精粹”了。但清晰地过一遍知识点总是好的。 强烈推荐《你不知道的JS》。精彩至极的一本书,将JavaScript的坑一网打尽。之前搞不懂的问题,比如闭包,this之类的都可以在这里找到答案。 ES6也是必学的内容,推荐阮一峰老师的《ES6 标准入门》。但这本书以API居多,所以还是留个大概印象,以后写到类似的地方,查一查有没有ES6更简洁的写法就好,不必死记硬背。以及需要学会Webpack的使用,Babel和模块化就靠Webpack了。 不太推荐《JavaScript权威指南》,也就是犀牛书。那就是一本字典…… 进阶: 《JavaScript设计模式与开发实践》,设计模式是必须了解的内容,这本是写得不错的。 《高性能JavaScript》,红宝书作者的另一力作,讲了一些优化技巧与性能瓶颈问题,值得一读。 以上内容用时1个月左右,中途可穿插IFE2015 task2的题,比2016年的要简单。 这些书全部刷完的话,应该可以跟人谈笑风生了。 开始实践,IFE2016阶段二的题,想怎么刷就怎么刷吧。如果有编程经验的话,应该没什么压力了。JavaScript框架 这部分就比较自由了,每个人点的技能树都不一样的。前端的发展是爆炸式的,换工具比翻书还快,所以还是以看文档为主了。 目前主流框架经常被提及的是React,Angular,Vue。知乎搜一搜就有相当多的优秀答案了。不过这个答案也有时效性,说不定过两年这些框架全都被淘汰了呢【逃 学习至少一种框架,把IFE2016刷通关吧。耗时1个半月左右。 进阶:看各种源代码。这也是我最近打算做的事情,但是好像期末考要到了TAT 最后补充一下,计算机基础知识是很重要的。由于本人有OI的经验所以稍微占点优势。再推荐几本书,抽空还是要看看的: 《深入理解计算机系统》,CSAPP,也是我们专业这学期的课程(但是我的专业明明是EE啊)。 《计算机网络 自顶向下方法》,看名字就知道必读了吧。 操作系统好书挺多的,推荐一本 Operating Systems: Three Easy Pieces ,英文不够好就《现代操作系统》吧。 算法和数据结构,推荐两本:《算法导论》《数据结构与算法分析》。似乎算法和数据结构与前端关系不大,但作为一个码农,不要求你写红黑树,至少快速排序和二分查找这种要会写的吧。

1359302247831492 2019-12-02 00:16:32 0 浏览量 回答数 0

问题

前端小白入门JQuery基础 【新手百问合集】

马铭芳 2019-12-01 20:09:05 6738 浏览量 回答数 5

回答

楼主,你好,针对你的问题,想要实现其实也十分简单,我用你的问题截图,举一个简单的例子,里面有详细的注释,你先看,如果不懂的可以问我。下面这个是个简单的实现,还可以扩展功能,使他们适用于更多的地方。在下面的例子中,我在对应的ul和span上面都加了一个id属性,为的是能够更快的找到对应的元素。当然,根据文档的结构,也可以不设置元素id,但是需要通过结果查找出来,相对来讲,设置了属性的元素更容易理解一些。 <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <style type="text/css"> .selected { background-color: #ccc; } </style> </head> <body> <span id="checkedPJLi"></span> <ul id="pj_items"> <li val="djhj">定价黄金</li> <li val="jjhj">计价黄金</li> </ul> </body> <script type="text/javascript"> $(function(){ //首先,我们在元素加载完成以后,初始化pj_items下每个li对应的单击事件,也就是选中事件 $("#pj_items li").bind("click", function(){ selectedItem(this); }); }); //选中某个li响应的方法 function selectedItem(obj){ //获取当前发生单击事件的元素对象 var $elemThis = $(obj); //现在我们向元素里添加名为selected的class样式 $elemThis.addClass("selected"); //由于是单选,所以我们需要将之前之前选中的li重置回去,即取消当前选中的样式selected $elemThis.siblings().removeClass("selected"); //方法一、最后我们需要将当前选中的值放到我们需要的span上面去,也就是调用tackSelectedItem方法 //tackSelectedItem(); //方法二、当然,tackSelectedItem方法提供的是一种从全局查找选中元素的方法,还可以省略为下面的步骤,因为我们操作的当前元素就是我们想要的选项,我们可以直接取值并赋给对应的span元素 //也就是,先取得当前选中元素对应的文本内容 var txt_this = $elemThis.text(); $("#checkedPJLi").text(txt_this); } //从全局pj_items的ul查找选中li元素并将其文本内容赋值给checkedPJLi的span function tackSelectedItem(){ //首先获取id="items"的ul下选中的li元素对象 var $selectedLi = $("#pj_items").find(".selected"); //然后通过这个元素对象,可以获取想要从它身上获取的它所拥有的一切,如:文本值 var txt_item = $selectedLi.text(); //又如属性值(当然,楼主并未提到,就作为扩展吧) //var val_item = $selectedLi.attr("val"); //接下来楼主说的将值绑定到对应的span上了 $("#checkedPJLi").text(txt_item); } </script> </html> 上面给span复制的方法一和方法二,二选其一即可,如果选了方法二,就可以不用tackSelectedItem方法,即可以删除。这里写出来,只是为了你可以更好的扩展提供一下思路。比如今后,你可以通过传递ul的id属性和需要绑定的li的id属性,通过一个方法就可以使用于页面上需要相同功能的位置。比如说扩展后的方法为: /*ul_id:需要绑定选中并将值赋予span的ul的id属性值;span_id:与之对应的span元素的id属性值;selected_class:这组功能你所对应想要绑定的选中状态的样式名称(主要针对你可能需要不同的样式的情况,如果不需要刻意不传或默认一个就可以了)*/ function tackSelectedItem(ul_id, span_id, selected_class){ //首先获取id="items"的ul下选中的li元素对象 var $selectedLi = $("#"+ul_id).find("."+selected_class); //然后通过这个元素对象,可以获取想要从它身上获取的它所拥有的一切,如:文本值 var txt_item = $selectedLi.text(); //接下来楼主说的将值绑定到对应的span上了 $("#"+span_id).text(txt_item); }

小旋风柴进 2019-12-02 02:17:00 0 浏览量 回答数 0

回答

这是个好问题。不知道题主是否熟悉自由测试和弱网测试这两个提法——这其实就是你提出的测试需求。简而言之:自由测试就是乱点;弱网测试就是人为制造掉包和延迟(可能制造成随机或确定性的)。这两个测试都是非常重要的。程序能否顶住这两项测试,保证一切情况下的响应都是合理的(而不是跑飞),这是开发者对健壮性把握如何的一个重要指标。问题一分为二地看。先忽略“点击速率的控制”,仅看“如何保证加载结果正确”这一点。从体验的角度来看,用户点击多个选项卡时,内容应该仅以用户点击的最后一个选项卡为准。毕竟用户点击了新的选项卡,就包含着“之前没加载出来的旧选项卡,全都丢弃不要了”的潜台词。考虑这个序列:选项卡1点击 - 选项卡2点击 - 选项卡1响应到达 - 选项卡2响应永远丢包。此时用户体验来看,弹出选项卡1必然是怪异的(我明明点击的是选项卡2!)。唯一的正确答案是:显示为选项卡2永远加载中(或者提示超时出错,允许用户重新加载),而永远丢弃选项卡1的响应。从这个意义上,AJAX请求的发出你是不应当阻止的。你的真正需求是:发出新的AJAX请求的时候,如何将旧的请求全部停下来。这里必须说明的是:AJAX对象,保证HTTP的响应与请求一一对应。具体而言:某个具体的XMLHttpRequest实例发出了HTTP请求。那么此HTTP请求的响应,就会回到发请求的那个XMLHttpRequest实例上。这一点自动、必然、绝对、100%准确无误,并且由浏览器(或JS引擎)直接保证,无需任何编程干预。以上是针对原生AJAX而言的。jQuery也一样,只是对象变成了jQuery封装过的jqXHR而已。1次AJAX请求必然有1个实例,多个请求那就有多个实例来管理,这与任何其他条件无关,根本不用考虑“多个AJAX请求相同页面,响应会不会对应乱了”这种杞人忧天的问题。你说回调?那只不过是挂载在各个AJAX对象实例上的一个普通成员变量(JavaScript里函数和变量同为一等公民)。请求对象对应正确了,回调自然也不会乱。这种1次请求对应1个对象的关系,就给了我们在AJAX请求发出后,仍然能对其进行控制的可能。我们确实通常把 $.ajax() 当语句使用($.ajax(settings);),但事实上 $.ajax() 是有返回值的。$.ajax() 返回此次请求对应的 jqXHR 对象,我们可以通过此对象,来影响和操作这次请求本身。那么每次点击选项卡都发出请求,但只响应用户发出的最后一个请求的代码就非常好写了:$(function() { $('#单选你的选项卡的容器').data('request_buffer', null); }); $('.多选你的每一个选项卡').click(function() { // 旧的HTTP请求直接放弃加载 var previous_jqxhr = $('#单选你的选项卡的容器').data('request_buffer'); if (previous_jqxhr) { previous_jqxhr.abort(); } var current_jqxhr = $.ajax({ type: your_type, url: your_url, data: your_data, timeout: your_timeout_seconds * 1000, context: this, }) .beforeSend(function() { // 显示点loading小动画什么的 }) .done(function() { // 点亮你点击的选项卡,灭掉其他的 $('.多选你的每一个选项卡').removeClass('.选项卡点亮的效果'); $(this).addClass('.选项卡点亮的效果'); // 填充正文区域 $('#单选你显示正文的区域').html(你得到的响应正文); }) .fail(function() { // 你认为合适的超时处理 }); // 新的请求顶掉旧的请求 $('#单选你的选项卡的容器').data('request_buffer', current_jqxhr); });回调函数是控制HTTP请求的jqXHR对象调用的,所以如果不加污染,那么回调函数内的this指的是jqXHR本身。那么回调函数在调用到的时候,根本没有办法反查到你点击了哪个选项卡。所以一定注意代码里那个context。jqXHR对象的context,确定了jqXHR在调用回调函数的时候,把回调函数内看到的this污染成谁。只有在产生jqXHR的时候(即调用$.ajax()时)明确告知“此请求和哪些对象有联系”,在回调的时候才不会迷失方向,导致一些设置视觉效果的需求做不出来。实现要基于事物的本源。如果一个AJAX请求要丢弃,那就应当把请求对象本身挖出来,通知他自己放弃。这样不但彻底把待丢弃的无效回调本身消灭,更可以命令浏览器直接断开HTTP连接,节省宝贵的流量和并发数。这一点也是很重要的。而明知道请求用不着了还要接收下来,再以“提前return”之类的修补手段“手工丢弃”,这个绕圈子的方案明显是不够优的。实际上以上的措施,已经能够达到“保证加载结果正确”的目的了。 用户点得快,发出的请求多又怎么样? 反正同一时刻同时只有1条请求在网上跑,只有1个回调有调到的可能,一切的干扰要素都排除光了。在此基础上,如果引入“限制用户点击的速率”,那么就是纯粹为了减轻服务器压力考虑了。这个的办法就更加简单:用户点击一个选项卡(启动HTTP请求发送,可以挂在beforeSend事件上)时把所有的选项卡置灰。(不能点是必须明确提示用户的)然后等待以下两个触发条件触发任意一个,就可以把所有的选项卡恢复点击:成功分支:用户点的这个选项卡加载成功了(立刻允许用户切换到其他选项卡)失败情况:用户点击之后过去了 X 秒(加载不出来了,允许用户发出新的请求)这个的代码就略了。

小旋风柴进 2019-12-02 02:24:30 0 浏览量 回答数 0

问题

前端小白入门JQuery基础【新手百问合集】

游客886 2019-12-01 20:09:03 1237 浏览量 回答数 1

回答

点击某一个函数名,会读取整个文档并弹出子窗口显示 - 这个无论是用原生js还是jquery都可以简单快速做到 定位到选择的函数 - 这个我认为做个锚就行了,如果不太清楚锚是干嘛的,可以参考一下这个  html 网页中的锚点的使用介绍 ######我知道锚,但问题是读取的文档是一个后台的方法类,无法也不能添加锚点...###### 你想搞一个方便从html页面中快速查看 某个语言的函数文档吧。 类似于语言手册一样方便,或者是自己项目文档。 例如,这样一个列表。 json_decode json_encode 点击后会用 js window.open, 指定大小的新窗口打对应的链接。 如 点击 json_decode 弹开 http://php.net/manual/zh/function.json-decode.php ######是的,但就是不知道怎样定位到点击的函数方法######phpDesigner编辑器, 可以直接关连手册. ######回复 @ZeronoFreya : 用 class来选择 例如列表 <div class="my_list"><ul><li>json_decode</li>....</ul></div> Jquery 选择就写成 $('.my_list > ul > li').click(function(){ open new window}); 或者直接就给函数列表加上某个class名 直接用 $('.my_li')选择就成了。 哈哈,不知道你问是不是这样的。######很遗憾不是的...简单来说就是读取一篇文档,但你不能修改其内容,里面有一些关键字,在html里有对应的链接(其实没对应),单击连接后定位到关键字所在行... 类似查找功能######回复 @ZeronoFreya : 就是百度百科中的关键词连接一样对吧。 又不能改html,你怎么知道一段html里某个是关键词。 保存文档没有这个关键词链接,只能在web返回页面时加上,才是你说不能修改html原因吧。 用php把关键词替换成超链接或者加个<span>标签。 ------------------------------------------------------ 问的不清楚,估计连你自己都不知道要写成什么样的。###### 引用来自“dworry”的评论回复 @ZeronoFreya : 就是百度百科中的关键词连接一样对吧。 又不能改html,你怎么知道一段html里某个是关键词。 保存文档没有这个关键词链接,只能在web返回页面时加上,才是你说不能修改html原因吧。 用php把关键词替换成超链接或者加个<span>标签。 ------------------------------------------------------ 问的不清楚,估计连你自己都不知道要写成什么样的。 无法编辑问题真的很.... 请原谅我不及格的语文成绩... 比如html中是这样的: <ul> <li>hahaha</li> <li>...</li> </ul> 后台控制器,不能改 ... function hahaha(){ ... } ... 当我点击<li>hahaha</li>时,会把整个后台控制器作为文本文档读取到变量中, 然后append到<mycode></mycode>,将包含此自定义标签的Div显示(模拟子窗口), 这时就显示了后台控制器的所有方法, 然后,定位到hahaha这个方法所在行... (别问我为啥这么做,上面要求的) 基本来说,就是做一个后台控制器方法的预览器,无修改能力,但必须要同步...所以采用了读取后台控制器文档的方法,所以绝对不能动后台控制器的脑筋 现在我能想到的就是一般文本编辑器所具有的查找功能,但不知道具体如何实现,百度一堆都是调用了一个函数,然后就没了,老实说,我想要的是思路...跑题了 ###### 引用来自“dworry”的评论 回复 @ZeronoFreya : 就是百度百科中的关键词连接一样对吧。 又不能改html,你怎么知道一段html里某个是关键词。 保存文档没有这个关键词链接,只能在web返回页面时加上,才是你说不能修改html原因吧。 用php把关键词替换成超链接或者加个<span>标签。 ------------------------------------------------------ 问的不清楚,估计连你自己都不知道要写成什么样的。 引用来自“ZeronoFreya”的评论 无法编辑问题真的很.... 请原谅我不及格的语文成绩... 比如html中是这样的: <ul> <li>hahaha</li> <li>...</li> </ul> 后台控制器,不能改 ... function hahaha(){ ... } ... 当我点击<li>hahaha</li>时,会把整个后台控制器作为文本文档读取到变量中, 然后append到<mycode></mycode>,将包含此自定义标签的Div显示(模拟子窗口), 这时就显示了后台控制器的所有方法, 然后,定位到hahaha这个方法所在行... (别问我为啥这么做,上面要求的) 基本来说,就是做一个后台控制器方法的预览器,无修改能力,但必须要同步...所以采用了读取后台控制器文档的方法,所以绝对不能动后台控制器的脑筋 现在我能想到的就是一般文本编辑器所具有的查找功能,但不知道具体如何实现,百度一堆都是调用了一个函数,然后就没了,老实说,我想要的是思路...跑题了 就是在线版的 ctage 你用过 sublime text + ctage 或者 是 gvim + ctage 代码跳转的。 ctage 在项目文档中生成 .tage 文本,(看下面是我项目中生成的.tage一段内容) 你可以根据这段内容来定位到要读取的代码。 secure_cookie .\system\core\Security.php /^ $secure_cookie = (config_item('cookie_secure') === TRUE) ? 1 : 0;$/;" v security .\system\core\Input.php /^ $this->security =& $SEC;$/;" v see_json .\application\helpers\common_helper.php /^ function see_json($json) {$/;" f segment .\system\core\URI.php /^ function segment($n, $no_result = FALSE)$/;" f segment_array .\system\core\URI.php /^ $segment_array = 'rsegment_array';$/;" v segment_array .\system\core\URI.php /^ $segment_array = 'segment_array';$/;" v 如我定义的 see_json 函数 第一列是函数名, 第二列是所在文件, 第三个是正则函数名所有行。 see_json    .\application\helpers\common_helper.php    /^    function see_json($json) {$/;"    f 可以在本地生成 .tage文件与代码一起提交上去。 只要写个php解析这个.tage文件最行了。 ######谢谢,我研究一下

kun坤 2020-06-06 15:30:57 0 浏览量 回答数 0

回答

ReOSS怎么用好?直接做为文件服务器还是用WEB服务器转发? 谢谢云语科技! 还有一个问题啊,我上午试了把静态文件放到OSS上,无论是采用OSS的地址,还是通过Apache转发,网站对于存于OSS上的图片、js、CSS等是可以正常使用的,但单独访问不可以,会下载下来,而且.html文件也不能直接访问而是会下载,另外如果文件不存在不是报404而是下载一个XML。 看到介绍说需要绑定域名才可以正常使用,绑定域名是什么概念?域名已经解析到ECS的情况下,如果把域名绑定过来后,访问域名时是先访问OSS还是先访问ECS?动态请求还会被apache处理吗?还是说必须添加一个子域名来绑定OSS呢?凡是用到静态文件的地方,都换成这个子域名吗? ------------------------- 我配置域名绑定哪里做错了吗? 我绑定了一个子域名,但不起作用。 假设我有一个域名abc.com并已在阿里备案,我在DNS服务器上添加了一个A记录:doc.abc.com,并指向阿里一台ECS服务器IP地址。 这个服务器上,在apache中配置了基于域名的虚拟主机,doc.abc.com作为一个网站可以正常访问。 在OSS的绑定界面,填入doc.abc.com并添加,然后下载验证用的.html文件并上传到doc.abc.com的根下,在OSS绑定界面点击“绑定并验证”,显示绑定成功及ICP号详情! 然后访问OSS上一个文件,该文件获取Object地址为:http://XXX.oss-cn-qingdao.aliyuncs.com/main.html,直接用这个地址,仍然被下载,然后用http://doc.abc.com/main.html 访问,却报: Not Found The requested URL /main.html was not found on this server. 是哪里配置不正确吗?假如doc.abc.com 根下也有一个main.html,会加载哪一个呢? ------------------------- ReOSS怎么用好?直接做为文件服务器还是用WEB服务器转发? 已经明白域名绑定怎么做了,但我上文提到的第二种方式,用域名绑定就无法实现了,因为我们希望与应用是同一个域名,所有资源都可以用相对路径,通过配置apache反向代理来访问OSS,域名绑定需要一个二级域名指向OSS,这样造成的问题是,在网站内容管理中上传的文件不能存相对路径,必须存二级域名开头的绝对路径,如果未来系统迁移到独立服务器或者客户自己的服务器上,未必能保存仍可使用这个二级域名,就造成无法迁移。 其实,必须用域名绑定是阿里为了防止放入非法内容而特意做的限制,对于有需要的客户,能否去掉这种限制?改用其它方式实现对非法内容控制的管理?

窗外有风 2019-12-02 01:46:44 0 浏览量 回答数 0

问题

验证码图片与SESSION中的值不同步:报错 

kun坤 2020-06-04 21:16:03 4 浏览量 回答数 1

问题

验证码图片与SESSION中的值不同步 - 服务报错

montos 2020-06-04 14:01:03 5 浏览量 回答数 1

问题

如何实现PostObject错误及排查?

青衫无名 2019-12-01 22:00:48 2503 浏览量 回答数 0

问题

SpringBoot使用机器学习才能更有火花

huc_逆天 2020-06-07 23:42:12 34 浏览量 回答数 1

问题

请教ExtJs与数据库通信的问题,请各位老师帮助?报错

爱吃鱼的程序员 2020-06-10 14:27:07 0 浏览量 回答数 1

问题

求助一个php正则表达式的问题

小旋风柴进 2019-12-01 20:12:29 1703 浏览量 回答数 1

回答

<p>好像是spring和jackson不兼容的问题吧</p> https://stackoverflow.com/questions/44718345/java-lang-noclassdeffounderror-com-fasterxml-jackson-databind-exc-invaliddefini https://blog.csdn.net/u011781521/article/details/78941550 很是感谢,换了2.9的就好了,但是很奇怪又报jstl的问题了,我有配置依赖,网上查了相关解决办法都没用,麻烦您再帮我看看,详细描述在楼下。 感谢,之前是怀疑spring版本与jackson版本冲突问题,但是刚开始使用jackson2.5后来换成了7还是如此,看来是需要2.9,晚上尝试一下。 <p>pom.xml</p> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>org.seckill</groupId> <artifactId>seckill</artifactId> <packaging>war</packaging> <version>1.0-SNAPSHOT</version> <name>seckill Maven Webapp</name> <url>http://maven.apache.org</url> <dependencies> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>4.12</version> <scope>test</scope> </dependency> <!-- 项目依赖 --> <!-- 1、日志部分依赖 --> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</artifactId> <version>1.7.12</version> </dependency> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</artifactId> <version>1.7.12</version> </dependency> <dependency> <groupId>ch.qos.logback</groupId> <artifactId>logback-core</artifactId> <version>1.1.1</version> </dependency> <dependency> <groupId>ch.qos.logback</groupId> <artifactId>logback-classic</artifactId> <version>1.1.1</version> </dependency> <!-- 2、数据库相关依赖 --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.35</version> <scope>runtime</scope> </dependency> <dependency> <groupId>c3p0</groupId> <artifactId>c3p0</artifactId> <version>0.9.1.2</version> </dependency> <!-- DAO框架依赖-mybatis --> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.4.5</version> </dependency> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>1.3.1</version> </dependency> <!-- servlet web 相关依赖 --> <dependency> <groupId>taglibs</groupId> <artifactId>standard</artifactId> <version>1.1.2</version> </dependency> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.7.0</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-annotations</artifactId> <version>2.7.0</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version>2.7.0</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> </dependency> <!-- spring核心依赖 --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-core</artifactId> <version>5.0.0.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-beans</artifactId> <version>5.0.0.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>5.0.0.RELEASE</version> </dependency> <!-- springDao层依赖 --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>5.0.0.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-tx</artifactId> <version>5.0.0.RELEASE</version> </dependency> <!-- spring web相关依赖 --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> <version>5.0.0.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>5.0.0.RELEASE</version> </dependency> <!-- spring test 相关依赖 --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-test</artifactId> <version>5.0.0.RELEASE</version> </dependency> </dependencies> <build> <finalName>seckill</finalName> </build> </project> spring-web.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:contex="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd"> <!-- 配置springmvc --> <!-- 扫描web相关的bean --> <contex:component-scan base-package="org.web"/> <!-- 1、开启springmvc注解模式 --> <mvc:annotation-driven> <mvc:message-converters> <ref bean="stringHttpMessageConverter"/> <ref bean="mappingJackson2HttpMessageConverter"/> </mvc:message-converters> </mvc:annotation-driven> <bean id="stringHttpMessageConverter" class="org.springframework.http.converter.StringHttpMessageConverter"/> <!--解决IE浏览器json文件下载和json数据中午乱码的问题--> <bean id="mappingJackson2HttpMessageConverter" class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"> <property name="supportedMediaTypes"> <list> <value>text/html;charset=UTF-8</value> </list> </property> </bean> <!-- 2、静态资源请求默认servlet处理(如:js、gif等等,允许web.xml中使用“/”做为整体映射) --> <mvc:default-servlet-handler/> <!-- 3、配置jsp显示ViewResolver --> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/> <property name="prefix" value="/WEB-INF/jsp/"/> <property name="suffix" value=".jsp"/> </bean> </beans>   <p>web.xml</p> <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1" metadata-complete="true"> <!-- 配置DispatcherServlet --> <servlet> <servlet-name>seckillDispatcher</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!-- 配置springmvc需要加载的配置文件 --> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring/spring-*.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>seckillDispatcher</servlet-name> <!-- 默认匹配所有请求 --> <url-pattern>/</url-pattern> </servlet-mapping> </web-app>   <p>又是jstl问题,很奇怪,pom里配置了依赖的</p> Type Exception Report Message The absolute uri: [http://java.sun.com/jsp/jstl/core] cannot be resolved in either web.xml or the jar files deployed with this application Description The server encountered an unexpected condition that prevented it from fulfilling the request. Exception org.apache.jasper.JasperException: The absolute uri: [http://java.sun.com/jsp/jstl/core] cannot be resolved in either web.xml or the jar files deployed with this application org.apache.jasper.compiler.DefaultErrorHandler.jspError(DefaultErrorHandler.java:55) org.apache.jasper.compiler.ErrorDispatcher.dispatch(ErrorDispatcher.java:293) pom.xml <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> </dependency> <dependency> <groupId>taglibs</groupId> <artifactId>standard</artifactId> <version>1.1.2</version> </dependency> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> jsp引入 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page isELIgnored="false" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %> web.xml头 <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1" metadata-complete="true">   <p>包的版本问题</p> <p>网上确实众说纷纭,你看一下这篇文章能解决问题不</p> 配置Jstl的Maven依赖 https://blog.csdn.net/qq_29227939/article/details/52063869 很尴尬 并不行。。。 <p><dependency><br>             <groupId>org.codehaus.jackson</groupId>             <artifactId>jackson-mapper-asl</artifactId>             <version>${jackson.version} 版本号自己查一下</version>         </dependency> 加入到pom.xml 更新maven 回复 <a class="referer" target="_blank">@加州肥猫</a> : 好吧 详细的我贴楼下了 发一下具体 报错截图吧 谢谢,jackson的问题已经解决了,是版本问题,烦劳看看jstl的问题,相关信息在楼上 <p>检查你的jar是否存在,看起来应该是版本冲突</p> jar是存在的 <p><img height="609" src="https://static.oschina.net/uploads/space/2018/0401/204859_56Qc_3708729.png" width="1277"></p> 有时候也会是这个 我想知道这个跟web.xml的 头信息有没有关系? 页面上是这样子的 web.xml头信息是这样子的 pom.xml依赖我是这么配置的 <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> <scope>provided</scope> </dependency> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>jsp-api</artifactId> <version>2.2</version> <scope>provided</scope> </dependency> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>org.glassfish.web</groupId> <artifactId>jstl-impl</artifactId> <version>1.2</version> </dependency> 回复 <a class="referer" target="_blank">@加州肥猫</a> : 语法没有错误啊,我有把你说的复制上去,表达式变量是有值的 检查页面的变量 使用el表达式的时候,有没有没有设置的变量值,还有语法错误,头<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

爱吃鱼的程序员 2020-06-07 17:28:32 0 浏览量 回答数 0
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 企业信息查询 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站