大家好,又见面了,我是你们的朋友全栈君。 html中偶尔会使用到列表,记录一下。 1 9 10 11 12 列表使用...test: 13 ul class = "level_1"> 14 15 亚洲 16 ul class = "level_2"> 17 中国 18 日本 19 ul> 20 21 22 欧洲 23 ul class = "level_2"> 24 德国 25 意大利 26...ul> 27 28 ul> 29 30 1.
自定义右键菜单——复制到粘贴板 需求: 鼠标在li标签上点击右键出现菜单,主要是复制等功能 屏蔽浏览器默认右键点击事件 右键菜单出现在鼠标点击的位置 点击屏幕其他位置菜单消失 点击之后有回调 实现: 1...、使用jQuery - 右键菜单插件contextMenu 在项目中引入jquery.contextMenu.js 和 jquery.contextMenu.css, 同时 contextMenu...依赖 jQuery。...成功复制到粘贴板。...contextMenu插件:GitHub 主页 contextMenu插件:使用方法 2、使用原生js手撸一个 直接上代码: html: ul>
前言 好多天前,领导让我实现一个树形图拖拽插件,这个插件用来描述各部门领导与员工之间的关系,每个父节点显示其子结点数量,拖拽任意一个叶结点上的人到另一个结点,他们之间的关系发生改变,树形图重新渲染。...用户操作都完成后,点击保存根据树形图生成JSON,将JSON发送给后端,后端根据JSON修改数据库中的人员对应关系。 接下来就跟大家下分享下我实现的这个插件,欢迎各位感兴趣的开发者阅读本文。...难点分析 实现可拖拽树形图 可拖拽树形图的实现,也是本插件的核心功能,根据dom的特定规则构建树,实现拖拽功能,拖拽功能我使用的是JQueryUI提供的方法,获取当前拖拽结点和目标结点的原始dom,重新构建树...json结构数据,渲染拖拽树需要特定的dom结点,我们需要根据dom结点规则,将json数据渲染成我们需要的dom结点。...文件 如何使用 在要使用插件的html文件里引入下述依赖 <!
jQuery 制作美化版的 select 下拉选框 前言 在web前端工作中,总有一些东西是你搞不定的,比如 select 。...近日看到一篇文章,说 find 是原生方法 ,是比children的效率要搞的。 执行下一个动画之前,一定要.stop()上一个动画。 input 使用 readonly 之后,是可以继续传值的。...而使用了 disabled 之后,是没办法传值的。...ul> input 和 ul 元素,存与 class 为 fengselect 的 label 下。...JS部分,只要复制到页面里面,或者直接引用就可以了。
第一个选项是简单地链接到另一个页面,这可以与用户的响应关联。...ul> navbar 还有另一个很好的特性,您可以在每个按钮内包括自定义图标。...jQuery Mobile 框架为 collapsible 内容提供一个 data-role,若使用恰当,它可以将 header 元素及关联的内容转换为一个折叠块。 清单 5....该列表项还包括一个用作在对话框中购买该列表项的一个超链接的图标。您也可以使用 data-split-icon 属性,修改显示在列表项右侧的拆分按钮的默认图标。 另一个有用的基本列表增强是列表分隔符。...在这种情况下,您就会有一个长列表,它看起来几乎是无法使用的,而搜索筛选器栏就是处理该问题的一个很好的方式。很幸运,使用 jQuery Mobile 将搜索筛选器栏添加到列表中并不需要花很大功夫。
微件化,即通过对构建系统的 hack,使不同的前端应用可以使用同一套依赖。它在应用微服务化的基本上,改进了重复加载依赖文件的问题。...微应用化,又可以称之为组合式集成,即通过软件工程的方式,在开发环境对单体应用进行拆分,在构建环境将应用组合在一起构建成一个应用。...使用单spa构建前端可以带来很多好处,如: 在同一页面上使用多个框架 而无需刷新页面 ( React , AngularJS , Angular ,Ember或您使用的任何东西) 独立部署您的微前端。...qiankun qiankun 是由蚂蚁金服推出的比较成熟的微前端框架,基于 single-spa 进行二次开发,用于将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。...class="main-app-menu"> vue子项目 ul> <main id
例70:C语言写一个函数,将一个字符串中的元音字母复制到另一字符串,然后输出。 ...解析:if语句判断一下每一个字母是否符合元音字母,读者看着道题的时候,需要注意一点的是如果用scanf函数是否可以,思考为什么要用gets函数?.../提示语句 gets(str); //键盘录入 copy(str,character); //调用该函数 printf("元音字母是:%s\n",character);//输出复制后的字符串...以上,如果你看了觉得对你有所帮助,就给小林点个赞,分享给身边的人叭,这样小林也有更新下去的动力,跪谢各位父老乡亲啦~ C语言 | 将字符串中的元音字母复制到另一个字符串中 更多案例可以go公众号:C语言入门到精通
:删掉空格元素间出现空隙的原因,是因为标签段之间存在空格,只要我们把 HTML 中的空格去掉后,空隙自然就不存在了,下面提供三种去掉空格的方式:ul id="main"> ul id="main"> left center rightul>使用负边距需要根据父元素来确定要使用多少个像素值...: 0;}#right { letter-spacing: 0;}类似的属性还有 word-spacing,该属性是用来定义元素中字之间插入多少空白符,在父级直接添加该属性即可完成我们想要的效果,子项不需要添加其他属性...#main { word-spacing: -8px;}将字体大小设置为 0该方法是在父级元素中添加 font-size: 0; 属性,但是子元素也会继承父级 0 字体大小的属性,无法显示出文本内容...#main { font-size: 0;}若是想要子元素的文本内容呈现出来,只需在每个子项里设置 font-size 属性即可#left { font-size: 16px;}#center {
其宗旨就是:写得少,做的多。 下载地址:https://jquery.com/ 推荐下载3.X版本。 点击后直接鼠标右键另存页面为…即可,最后将下载下来的文件引入项目中。...jQuery 对DOM的原生方法进行了封装,jQuery 对象只能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 属性和方法。...对象只能使用jQuery 封装的方法。...所以,jQuery 只是对js常用属性和方法进行了封装。 DOM使用原生js方法和属性,jQuery 使用jQuery 属性和方法。...$(this).children("ul").slideToggle(); }); 上述写法的bug:快速经过离开,导航动画等一个结束,另一个才开始 待解决:动画队列(动画或者效果一旦触发就会执行
").append($li1); $("ul").append($li2); }); }); 插入HTML元素 append() 向每个匹配的元素内部追加内容 appendTo() 将所有匹配的元素追加到另一个指定的元素集合中...注意:$(A).append(B)的操作,不是将B追加到A中,而是将A追加到B中 prepend() 向每个匹配的元素内部前置内容 prependTo() 将所有匹配的元素前置到另一个指定的元素集合中...注意:$(A).prepend(B)的操作,不是将B前置到A中,而是将A前置到B中 after() 在每个匹配的元素之后插入内容 insertAfter() 将所有匹配的元素插入另一个指定的元素集合的后面...注意:$(A).after(B)的操作,不是将B插入到A后面,而是将A插入到B的后面 before() 在每个匹配的元素之前插入内容 insertBefore() 将所有匹配的元素插入另一个指定的元素集合的前面...注意:$(A).before(B)的操作,不是将B插入A前面,而是将A插入B前面 删除HTML元素 删除HTML元素一般使用jquery中的remove()和empty() remove()的作用就是从
1.2. jQuery 的基本使用 1.2.1 jQuery 的下载 jQuery的官网地址: https://jquery.com/,官网即可下载最新版本。...1.2.4. jQuery中的顶级对象$ 是 jQuery 的别称,在代码中可以使用 jQuery 代替,但一般为了方便,通常都直接使用 。...注意:只有 jQuery 对象才能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 方法。 jQuery对象和DOM对象 1.2.6....因为原生js 比 jQuery 更大,原生的一些属性和方法 jQuery没有给我们封装,要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。...jQuery为我们提供另一个方法,可以停止动画排队:stop()。 1.5.1.
ztree的使用 一、ztree简介 1.什么是zTree zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。...二、ztree使用 1.入门实例 1.1下载ztree资源链接 1.2解压资源并导入到项目 ?...将js、metro.css和metro.css对应的img文件夹复制到项目,注意保持css和img结构对应关系 1.3 示例 jquery 必须导入 --> jquery-2.1.1.min.js"> ul> new Vue({ el:'#treeDiv', //vue的data中,
01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的...1.2.4. jQuery中的顶级对象$ 是 jQuery 的别称,在代码中可以使用 jQuery 代替,但一般为了方便,通常都直接使用 。...注意: 只有 jQuery 对象才能使用 jQuery 方法,DOM 对象则使用原生的 JavaScirpt 方法。 ?...因为原生js 比 jQuery 更大,原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。...jQuery为我们提供另一个方法,可以停止动画排队:stop() ; 1.5.1.
· //你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内· selector1 //一个有效的选择器 selector2 //另一个有效的选择器 selectorN //任意多个有效的选择器...jQuery的removeAttr方法删除disabled是无效的· 1.7版本在IE6下已支持删除disabled· name 要删除的属性名 描述 将文本中图像的src属性删除 HTML代码...//随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误,jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误· name 属性名称...; 回调函数描述 使用函数来设置所有匹配元素的内容 jQuery代码 $("p").html(function(n){ return "这个p元素的 index是:" +n; })...元素的index是:"+n; }) val([val|fn|arr]) //概述 //获得匹配元素的当前值 //jQuery 1.2中,可以 返回任意的值了.包括select.如果多选,将返回一个数组
jQuery 给我们封装了很多动画效果,最为常见的如下: 显示隐藏:show() / hide() / toggle() ; 划入画出:slideDown() / slideUp() / slideToggle...jQuery为我们提供另一个方法,可以停止动画排队:stop() ; 一、显示隐藏 显示隐藏动画,常见有三个方法:show() / hide() / toggle() ; 语法规范如下: ?...介绍如下 语法 hover([over,]out) // 其中over和out为两个函数 over:鼠标移到元素上要触发的函数(相当于mouseenter) out:鼠标移出元素要触发的函数...停止动画排队的方法为:stop() ; stop() 方法用于停止动画或效果。 stop() 写到动画或者效果的前面, 相当于停止结束上一次的动画。...总结: 每次使用动画之前,先调用 stop() ,在调用动画。
一、Glyphicons 字体图标 1、所有可用的图标 见https://v3.bootcss.com/components/#glyphicons 2、如何使用 出于性能的考虑,所有图标都需要一个基类和对应每个图标的类...把下面的代码放在任何地方都可以正常使用。注意,为了设置正确的内补(padding),务必在图标和文本之间添加一个空格; 注意: 代码演示: Error: Enter a valid email address 运行结果: 二、下拉菜单 1、下拉菜单实例 将下拉菜单触发器和下拉菜单都包裹在....dropdown 里,或者另一个声明了 position: relative; 的元素。...> 运行结果: 5、分割线 为下拉菜单添加一条分割线,用于将多个链接分组; 代码演示: <!
b>你好 2 appendTo() 将所有匹配的元素追加到指定的元素中。...var $li = $("ul li:eq(1)").remove(); // 获取第2个元素节点后,将它删除 $li.appendTo("ul"); // 将刚才删除的节点重新添加到...需要注意的是,这个方法不会将匹配的元素从jQuery对象中删除,其所有绑定的事件和附加数据可以保留下来。 如果将来再使用这个元素,相关事件和数据依然存在。...// 如果使用remove()方法删除元素,那么之前绑定的事件将会失效。 (3)empty() 清空元素中的所有后代节点。...$("ul").empty(); 复制节点 可以使用clone()方法来复制节点。如果在clone方法中传人参数true,表示复制元素的同时也复制元素中绑定的事件。
大家好,又见面了,我是你们的朋友全栈君。 方法一:使用HTML和CSS实现 首先是Html代码,习惯上会将菜单放在一个div里,使用盒子模型,方便以后的操作和设置样式。...,在设置a标签样 式时应该会接触过 方法二:使用jQuery实现 要用到jQuery首先第一步就是引入jquery.js文件 jquery-1.7.min.js”> 在平时做网页项目时,最好是将css,html,js分开,在html页面中引入css和js文件,css文件引入放在head中,js放在body的最后...那么注意了,在这里如果你的js代码是放在body中,那么引入jquery文件必须放在js代码之前,浏览器编译html文件时,是从上自下编译的,如果jquery文件放在最后,那么在你的js代码又使用到了jquery...使用Bootstrap框架就必须使用a标签了,因为它的很多样式是设置在a标签上的, 不使用没有效果,相比前面的两种来说,使用框架又省力又省心,非常简单。
DOCTYPE html> Bootstrap 实例 - 默认的导航栏 jquery.../2.1.1/jquery.min.js"> EJB Jasper Report 分离的链接... 另一个分离的链接 ul> ul>
大家好,又见面了,我是你们的朋友全栈君。...1、将一个文件夹下的所有内容复制到另一个文件夹下 cp -r /home/packageA/* /home/cp/packageB/ 或 cp -r /home/packageA/....方法示例: 2、将一个文件夹复制到另一个文件夹下 cp -r /home/packageA /home/packageB 运行命令之后packageB文件夹下就有packageA文件夹了。...: 4、移动一个文件夹到另一个文件夹下面 mv /home/packageA /home/packageB/ 或 mv /home/packageA /home/packageB 这两种方法效果是一样的...方法示例: 5、移动一个文件夹下的所有内容到另一个文件夹下面 mv /home/packageA/* /home/packageB/ 方法示例: 发布者:全栈程序员栈长,转载请注明出处