及联选择...-用于权限选择比较合适 ...this.checked } li = li.parentElement.parentElement } } 更新：支持三态级联选择
问： 前端开发css禁止选中文本如何禁止选中文字？？？...禁止选中的方法很简单，有两种方法：JS和CSS两种 js方法（onselectstart=”return false;） 直接干货 123456789 if(document.all){ document.onselectstart...function(){return true;};}document.onselectstart = new Function('event.returnValue=false;'); //劫持开始选择事件和...简单方法，可以直接在标签里添加 onselectstart="return false; 例子如下： 123 adasdasdasdasdasdasdad... css方法（user-select） user-select有两个值： none：用户不能选择文本 text：用户可以选择文本 需要注意的是：user-select并不是一个W3C的
❞ Ext.js 系列课程笔记 Ext.js 系列课程笔记「类」 Ext.js 系列课程笔记「组件」更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』 1.Ext.Window 1.1...xtype: "datefield", fieldLabel: "Released", name: "released", // 校验不能选择周一到周五的日期..."根", // 是否展开子节点 expanded: true, // 是否为叶子节点 leaf: false, children: [...text: "根下节点一[user图标]", leaf: true, // ExtJs自带的图标显示为“文件夹”或是“列表”，通过 iconCls 可以列换树型菜单的图标...var win = new Ext.Window({ title: "窗口", width: 476, height: 574, // 用户是否可以调整窗口的大小
，不需要重新渲染其他节点，只需要重新渲染被点击的节点就可以了，又比如某个节点收缩或展开时，其他节点只是位置需要变化，节点内容并不需要重新渲染，所以只需要重新计算其他节点的位置并把它们移动过去即可，这样额外的好处是还可以让它们通过动画的方式移动过去...数据结构 思维导图可以看成就是一棵树，我把它称作渲染树，所以基本的结构就是树的结构，每个节点保存节点本身的信息再加上子节点的信息，具体来说，大概需要包含节点的各种内容（文本、图片、图标等固定格式）、节点展开状态...接下来开启第二轮遍历，这轮遍历可以计算所有节点的top，因为此时节点树已经创建成功了，所以可以不用再遍历渲染树，直接遍历节点树： // 第二次遍历 walk(this.root, null, (node...展开与收起 有时候节点太多了，我们不需要全部都显示，那么可以通过展开和收起来只显示需要的节点，首先需要给有子节点的节点渲染一个展开收起按钮，然后绑定点击事件，切换节点的展开和收缩状态： class Node..._expandBtn) } } SET_NODE_EXPAND命令会设置节点的展开收起状态，并渲染或删除其所有子孙节点，达到展开或收起的效果，并且还需要重新计算和移动其他所有节点的位置，此外遍历树计算位置的相关代码也需要加上展开收缩的判断
/js/jquery.js"> HTML结构 可以使用任何HTML DOM元素来作为该列表树的容器： 调用插件 function...，使用一个带text属性的js对象来实现即可： { text: "Node 1" } 如果你需要自定义更多的内容，可以参考下面： { text: "Node 1", icon: "glyphicon...也可以展开任何给定级别的树节点。...也可以展开任何给定级别的树节点。
自定义 JS 字段名：js 自定义 js。注意仅在当前文章页生效。 显示文章目录树 字段名：showTOC 1.7.2 及以上版本请使用「显示文章目录树」设置。...显示模式可选值： 1 ==> 页面打开时目录树【隐藏】在文章【右侧】，页面仅展示展开按钮，【可通过】页面边缘的展开按钮展开或隐藏目录树。...该选项是默认选项 2 ==> 页面打开时目录树【展示】在文章【右侧】，【可通过】页面边缘的展开按钮展开或隐藏目录树 3 ==> 页面打开时目录树【展示】在文章【左侧】，【可通过】页面边缘的展开按钮展开或隐藏目录树...4 ==> 页面打开时目录树【展示】在文章【右侧】，页面不会展示展开按钮，因此【不可通过】展开按钮展开或隐藏目录树 5 ==> 页面打开时目录树【展示】在文章【左侧】，页面不会展示展开按钮，因此【不可通过...】展开按钮展开或隐藏目录树 文章目录树在手机端不会自动展开，不可隐藏的设置也将不生效。
这种关系，可以用一张图来清晰的把它们的关系展示出来： ? HTML DOM树 这看起来像一颗倒置的树，最上面是唯一的树根，往下是分支树杈和树叶。...这只上帝之手，就是浏览器开放给我们的JS API，通过JavaScript编程的方式，我们可以很灵活的去访问和操纵这棵DOM树。...我们可以通过一些例子来学习和理解JS API的用法，由于起初的这些代码会比较简单，我们也没必要去专门创建js文件，只要借助浏览器自带的开发者工具，就可以很方便的随手运行我们的js代码片段。...直到像Prototype，jQuery，Mootools之类的前端JS工具库的兴起，它们都自带了一套比较完整的用于执行选择器的API，由于它们太好用了，倒逼了浏览器标准，使得类似的选择器API出现在了现代的浏览器中...添加边框 我们可以看到，选择器精确的获取到了三个class名为container-2的DOM节点，并为其设置了边框样式。
可以手动（在模板中）或通过SelectionOptions实例指定选项。 可以通过模板或通过检查选择模型将选项标记为已选择。...使用factoryRenderer而不是树可更改树 disabled bool 是否应将选择显示为已禁用。 默认为false。...MaterialSelectItemComponent Selector: 材料选择项是一种特殊的列表项，可以选择。...当与单个选择模型一起使用时，下拉选择时关闭。 使用多选模型时，用户必须通过单击其外部来关闭下拉列表。 可以通过传递material-select-item元素手动声明选择选项。...ariaExpanded bool 如果下拉列表已展开，则为True。 ariaLabelledBy String 另外描述按钮的元素的id。
添加依赖模块 在JS中添加它的依赖模块...属性配置讲解 加载数据 属性 tree-model：树数据的对象，格式: [Node|Array[Node]]，对象范围在'$scope'的范围内。范围可以是一个node数组或一个node对象。...为“true”，点击目录名为选择，点击目录图标才为展开；为“false”时，点击目录就是展开。...过滤器 filter-expression：过滤器公式 filter-comparator：是否完全匹配(大小写) 过滤表达式(filter-expression)用于选择的节点从树中显示。...它可以是一个字符串，对象或函数。如果一个字符串，它是用来匹配的节点属性值。如果一个对象，每个属性的表达对象是用来匹配的节点属性名称相同的值。一个函数可以用来写任意的滤波器，并将树的每个节点调用。
可以看到，在源代码里面没有请抓取我！这段文字。难道这个网页是异步加载？我们现在来看一下网页的请求： ? 网页也没有发起任何的Ajax 请求。那么，这段文字是从哪里来的？...对于伪元素里面的文字，应该如何提取呢？当然，你可以使用正则表达式来提取。不过我们今天不准备讲这个。...XPath 没有办法提取伪元素，因为 XPath 只能提取 Dom 树中的内容，但是伪元素是不属于 Dom 树的，因此无法提取。要提取伪元素，需要使用 CSS 选择器。...所以 BeautifulSoup4的 CSS 选择器也没有什么作用。所以我们需要把 CSS 和 HTML 放到一起来渲染，然后再使用JavaScript 的 CSS 选择器找到需要提取的内容。...在 Selenium 要执行 Js，需要使用driver.execute_script()方法，代码如下： ?
方法一：echarts原生Api开发 第一步：在网页中引入echarts官方js库，或者引入SovitChart提供的封装js库，这里使用SovitChart提供的封装js库。...是什么意思可以去查阅官方API，这里第三张图是实现渐变色最关键的，上面会分别对每根柱子进行设置。...第二步：选择柱状图后编辑柱状图的属性： 在第三个选项卡“图表仓库”中找到柱状图，选择点击基本柱状图。...结下来分别展开标题属性修改标题文字和颜色、展开X和Y坐标轴属性修改X轴和Y轴的样式和颜色等、图例用来设置图例的显示文字和颜色。...设置完成以后点击“发布”，选择公开发布，发布后的图表可以直接访问或者在自己的项目页面中引用： 以下是在网页面引用的效果：
常用属性： 1、autoExpandDelay:int 执行drag/drop操作时，控制树控件自动展开的延时时间。 默认的设置为-1，此时意味着响应拖拽功能时，自动展开无效。...3、indentation:int 树控件中每一项的缩进，默认为20。 4、itemsExpandable:bool 树控件是否能展开或收缩。...5、rootIsDecorated:bool 树控件的顶层项用以表示展开和收缩的小控件是否显示。如果只有一个层级的树结构，可以设置该属性为false，让 他看起来更像简单的list结构。...当有大量数据时，可以将该属性设为true，以保证控件更快的效率。 8、wordWrap:bool 每一项文字在遇到换行符时候是否换行。默认为false。...注意：即使设置该属性为true，也不能保证文字在过长的时候被完全显示，都会出现省略号。 常用接口： 1、折叠操作（collapse） 2、展开操作（expand） 3、根据像素坐标X，定位列。
Atom作为一款前端开发利器，有很多的插件供我们选择，这里罗列常见的可以提高我们开发效率的插件给大家介绍一下。...5、linter-js-standard 用来使javascript代码格式化。 6、git-plus 提供git版本控制操作的命令，个人感觉不是很好用，还是terminal比较习惯。...10、atom-ternjs 该插件能对一个对象中拥有的对外提供的属性和方法都能通过suggest的形式提示出来，能对一个对象对外提供的接口有一个选择过程，可以理解为js代码自动提示。...cmd-\，cmd-k ，cmd-b 显示(隐藏)目录树 ctrl-0 焦点切换到目录树(再按一次或者Esc退出目录树) a 添加文件 d将当前文件另存为(duplicate) i显示...(隐藏)版本控制忽略的文件 alt-right 和 alt-left展开(隐藏)所有目录 ctrl-al-] 和 ctrl-al-[ 展开(隐藏)所有目录 ctrl-[ 和 ctrl-] 展开
安装Markdown Preview Enhance后，在右上角选择Markdown Preview Enhance：open preview,也就是三角形，B， I" 的左边的左边，可以看到流程图。...目录树中的每一项都是一个跳转链接，点击后就会跳转到其对应的锚点（即标题所在位置）。你可以点击本文档开始处的目录树尝试一下。...如果需要在目录树之外还要增加跳转到某个标题的链接，使用Markdown的语法来增加跳转链接：“名称”。其中的“名称”可以随便填写，“id”需要填写跳转到的标题的内容。 1.18.1....折叠 安装Fold后，可以按标题选择折叠或者展开。 Fold，Automatic folding of indented lines for Visual Studio Code。 1.20....参考文章 使用折叠语法details语法后，其中的内容自动折叠，可以手工展开。
首先，我们先来设计下服务器，这次Demo的服务器采用Node.js，用到了Node.js的express、socket.io、fs和http这四个模块，Node.js的相关知识，我在这里就不阐述了，网上的教材一堆...到此，一个简单的服务器就搭建好了，现在可以通过http://localhost:5000来访问服务器了。等等，好像缺了点什么。...整体的思路是这样子的，当然这离我们要实现的树组件的延迟加载技术还有些差距，那么，HT for Web的HTML5树组件的延迟加载技术是怎么实现的呢？不要着急，马上开始探讨。...看吧，控制台打印的是4条记录，第一条是请求跟目录时打印的，我在浏览器中展开里三个目录，在控制台打印了其对应的目录路径。...等等，现在这个目录看起来好烦，只有文字，除了位子前的展开图标可以用来区别文件和目录外，没有其他什么区别，所以我决定对其进行一番改造，让每一级目录都有图标，而且不同文件对应不同的图标，来看看效果吧： ?
DOM树 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树 描述网页内容关系的名词 作用：文档树直观的体现了标签与标签之间的关系 4....树 作用：文档树直观的体现了标签与标签之间的关系 浏览器根据html标签生成的 JS对象（DOM对象） DOM的核心就是把内容当对象来处理 是 DOM 里提供的一个对象 网页所有内容都在document...querySelector() 只能选择一个元素， 可以直接操作 querySelectorAll() 可以选择多个元素，得到的是伪数组，需要遍历得到每一个元素 他们两者小括号里面的参数有神马注意事项？...可以通过 JS 设置/修改标签元素的样式属性 比如通过 轮播图小圆点自动更换颜色样式 点击按钮可以滚动图片，这是移动的图片的位置 left 等等 1....倒计时效果 开始先把按钮禁用（disabled 属性） 一定要获取元素 函数内处理逻辑 秒数开始减减 按钮里面的文字跟着一起变化 如果秒数等于0 停止定时器 里面文字变为 同意 最后 按钮可以点击 <textarea
/关闭 在默认情况下，代码框自动展开，可设置是否所有代码框都关闭状态，点击>可展开代码 true 全部代码框不展开，需点击>打开 false 代码框展开，有>点击按钮 none 不显示>按钮 highlight_shrink...: true #代码框不展开，需点击 '>' 打开 你也可以在post/page页对应的markdown文件front-matter添加highlight_shrink来独立配置。...如果不配置 cover,可以设置显示默认的 cover。 如果不想在首页显示 cover, 可以设置为 false。...在butterfly里，有四种可供选择 description： 只显示description both： 优先选择description，如果没有配置description，则显示自动节选的内容 auto_excerpt...图片描述 可开启图片Figcaption描述文字显示 优先显示图片的 title 属性，然后是 alt 属性 photofigcaption: true 复制相关配置 可配置网站是否可以复制、复制的内容是否添加版权信息
笔者不用这类框架的原因很简单：框架很容易就会过时，原生CSS+JS才是王道。 教程 笔者实在是不擅长写这类东西，不过倒是可以把常用的属性和模式列出来，供大家参考参考。...Shining Text[18] Menu Hover Fill Text[19] 利用动态hsl颜色实现彩虹文字效果 Rainbow Color Text[20] 利用text-shadow实现发光文字效果...web animation实现冒泡文字效果 Bubbling Text[24] 利用动态max-width实现文本展开效果 Abbr Expansion[25] 利用绝对定位、3D变换和JS实现翻转文字...实现简单的分页栏 Pagination[78] 利用伪元素、overflow:hidden、动画、JS实现标签页 Tabs[79] 利用伪元素、:checked、~兄弟选择器实现5星评分 Star Rating...利用conic-gradient，伪元素和CSS变量实现圆盘度量计 Gauge \(No SVG\)[83] 逆锋起笔是一个专注于程序员圈子的技术平台，你可以收获最新技术动态、最新内测资格、BAT等大厂的经验
文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。...DOM操作的内容 为了增加DOM树结点与页面主题信息相关程度的语义信息，计算结点内容的重要度，将HTML标签的类别(Category)、非链接文字数(WordNum)、超链接数(LinkNum)、属性集...jQuery的DOM 使用 jQuery 选择器选择页面中的元素，是为了生成 jQuery 对象，jQuery 对象具有特有的方法和属性，完全能够实现传统 DOM 对象的所有功能 使用jQuery操作元素...使用选择器获取某个元素 使用jQuery对象的方法操作元素。...jQuery 对象，其语法结构为：(DOM 对象 ) 示例： 利用js的DOM修改颜色，使用jQuery对象修改文本内容 点击变颜色·变文字 <script src="<em>js</em>/jquery
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
