前言:之前的一篇介绍了下如何封装自己的组件,这篇再次来体验下自己封装组件的乐趣。看过博主博客的园友应该记得之前分享过一篇树形菜单的使用JS组件系列——Bootstrap 树控件使用经验分享,这篇里面第一个Jquery Tree,只是用简单样式和js去实现了效果,没有给出一个系统的封装,这篇博主就来试试在此样式的基础上封装一个稍微完整点的树形组件。一、组件效果预览其实效果和之前的那个差不多,博主只是在之前的基础上加了一个选中...
前端使用Webpack打包后,生成的html一般类似下面,head中一些节点是不闭合的,一般情况下浏览器能正常解析。<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8" ><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" ><meta name="renderer" content="webkit" > 项目的甲方指定了使用Weblogic部署项目,这里将前端打包的dist目录放在后台的resources/static目录下,用spring发布。部署后出现了一个奇怪的...
JS图片切换大集合 利用周末2天把JS图片切换常见效果封装了下,比如:轮播,显示隐藏,淡入淡出等。废话不多说,直接看效果吧!JSFiddler链接如下: 想看JS轮播切换效果请点击我! 当然由于上传图片时候 png图片自动转换成jpg 所以左右按钮有透明,但是也没有关系,我们最主要的是看看效果是什么样的,至于图片大家可以替换。下面看看默认配置项吧! container‘‘, 外层容器 必填项 默认为空 contentCls ‘.list‘...
在触发任何事件时都会产生一个对象。如:DOM事件,window事件等,都会产生一个对象,该对象就是当前元素的事件对象。DOM事件对象<body><input type="button" value="按钮" id="btn"/><!--js--><script>var btn = document.getElementById("btn");btn.onmousemove =function(e){alert(e.x);}btn.onclick =function(e){document.write(e.type);}</script></body>window事件对象<body><!--js--><script>window.onmousemove =function(...
方法一:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #outside{ width: 1200px; overflow: hidden; margin: 0 auto; height: 300px; } #outside #inside{ width: 3100px; } #outside #inside div{ width: 300px; height: 300px; margin: 0px 5px; background-color: red; float: left; ...
为什么没有var声明的变量是全局的?是因为,在js中,如果某个变量没有var声明,会自动到上一层作用域中去找这个变量的声明语句,如果找到,就使用,如果没有找到,继续向上查找,一直查找到全局作用域为止,如果全局中仍然没有这个变量的声明语句,那么会自动在全局作用域进行声明,这个就是js中的作用域链 <script>var i = 10;function f1() { //第一层i = 20;function f2() { //第二层i = 30;function f3() { //第三层i...
最近在学习《数据结构与算法JavaScript描述》这本书,对JavaScript的特性和数据结构都有了进一步的了解和体会。学习之余,也进行了相应的练习,题目难度不大,但是对所学知识的巩固十分有帮助,所以在这里和大家做一个分享。注:题目主要来源于牛客网,这是一个不错的网站,对于代码的学习和自我能力的检验很有帮助,有兴趣的朋友可以去看看。这些题目解法绝大多数是根据自己的思路做的,并且几乎都采用了多种方法,某些方法参考了网...
最近做的一个网站页面中需要根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的。下面给出js判断处理代码,以作参考。<script type="text/javascript">function browserRedirect() {var sUserAgent = navigator.userAgent.toLowerCase();var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";var bIsMidp = sUserAgent.match...
1、表单事件:submit事件reset事件click事件change事件focus事件(不冒泡) (IE和ES5支持冒泡的focusin)blur事件(不冒泡) (IE和ES5支持冒泡的focusout)input事件(ES5 textinput提供更方便的获取输入文字的方案) 2、Window事件load事件DOMContentLoaded事件readyStatechage事件unload事件beforeunload事件resize事件scroll事件 3、鼠标事件click事件dbclick事件mouseover事件(冒泡)mouseout事件(冒泡)mousedown事件mous...
起初没听说过内链外链,只有链接锚文本,在面试中被问到如何查找到页面中的内链和外链,就在想,什么是内链和外链啊???????后来面试官给我解释了一下他们的区别,自己稍微懂了,自己当时回答的是通过获取a标签的href属性,查找字符串中是否存在href,后来又被问到如果用选择器怎么用呢?自己不会....后来下来又想到这个问题,觉得自己猪啊,有属性选择器来匹配,但是当时为什么回答不上来,因为这个是css3中的,自己只知道,...
<body> <div id="ball" style="width:20px; height:20px; background:red; border-radius:50%; position:absolute; left:0; top:80px;"></div> <script> var ball = document.getElementById("ball"); var radian = 0.1; var x = 0; var y = 0; document.onmousemove = function(e){ e = e || event; x = e.clientX; y = e.clientY; } var timer1 = setInterval(function(){ ball.style.left = x + Math.cos(radian...
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>addclass,removeclass,hasclass,toggleclass,getbyclass</title> </head> <body> <div class="div1" id="box1"></div> <input type="button" value="按钮" id="btn1"/> <script>function addClass(obj,cls) {//obj:要添加classname的元素,cls:要添加的classname;//如果原来没有class:if(obj.className == ‘‘){obj.className = cls;} else {//本来已经有c...
原文参考http://blog.csdn.net/lzding/article/details/463177771.写在dom上的属性,内联样式 <div id="box" style="background-color:#ccc;margin-top:100px;"></div> var oBox = document.getElementById(‘box‘) console.log(oBox.style.width) 1)对于复合属性(如background),假设行间设置了样式:background-color:#333,不能通过 element.style.background 来获取(见上面例子) 2)css属性使用驼峰法,如...
要求把一段html脚本中的疾病名添加到疾病库的链接,只添加一次,要避开超链接或图片链接。最初是用的 str.replace(‘糖尿病‘, ‘<a href=...>糖尿病</a>‘);结果找了半天,愣是没找到替换后的效果,原来是有个图片的title中包含糖尿病,被它捷足先登了。因此要把<a>链接、<img>标签避开,但<p><div>等标签不用避开上图: [javascript] view plaincopy s = "<a href=‘http://www.yx129.com/bingli/1_310.html‘>先看一个糖...
在很多现实的场景中,有的文本框我们希望在选择“是”的按钮之后才出现,这就需要js控制TR的隐藏和显示,如何控制,本文为大家揭晓下文分享的一段代码:选择是的按钮就显示身高和体重的文本框的代码。注意:ready方法必须要引用jquery的库。1.html Code<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><title>无标题文档</title><style type="text/css">.div1{ width:300px; height:80px; bord...