
JavaScript
文章平均质量分 65
iBenxiaohai123
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
js replace全部替换的方法
在写前端代码的时候,我们有时希望替换掉一个字符串中的一部分,理所当然的想到了replace这个方法。但是在实践中发现javascript中的replace方法只替换字符串中第一次出现的目标,比如:var str='我是生长在中国南方的纯正中国人';var newstr=str.replace('中国','天朝');alert(newstr);如图:结果是:我是生长在天朝南...原创 2019-01-14 09:50:40 · 210 阅读 · 0 评论 -
彻底弄懂JS的事件冒泡和事件捕获
事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。假设一个元素div,它有一个下级元素p。 元素这两个元素都绑定了click事件,如果用户点击了p,它在div和p上都触发了click事件,那这两个事件处理程序哪个先执行呢?事件顺序是什么?两种模型以前,Netscape和Microsoft是不同的实现方式。Netscape中,div先触发,这就叫原创 2018-02-05 14:34:57 · 295 阅读 · 0 评论 -
设置select下拉框禁用
<select style="width:195px" name="role" id="role" onfocus="this.defaultIndex=this.selectedIndex;"onchange="this.selectedIndex=this.defaultIndex;"> 这种方法可以使下拉框和平常没有区别,看起来没有任何不同。唯一不同的就是下拉并单并选择之后,选了和没有原创 2017-08-18 19:54:24 · 2904 阅读 · 0 评论 -
.net添加前端样式和JS添加标签样式、以及div/a 标签的显示和隐藏
.net添加前端样式第一种:UserName.Style["Display"] = "None";第二种:UserName.Attributes.Add("width", "100px");第三种:UserName.Attributes[ "readonly "]= "readonly ";Js添加标签样式第一种:$("#UserName").attr('dis原创 2017-08-18 19:43:30 · 894 阅读 · 0 评论 -
关于控制下拉菜单的JS控制
文本框有readonly属性,直接设置;下拉框没有readonly属性,也不能通过其他属性进行只读的设置,下拉框只有disabled属性,但是这个属性设成true之后,值就获取不到了;网上搜了一下,大部分是控制鼠标、键盘事件,来控制只读的(即:不让下拉框获取焦点)代码如下:1 2 其中onmousemove="this.setCapture();" onmouseout="t原创 2017-12-13 17:44:57 · 859 阅读 · 0 评论 -
javascript event(事件对象)详解
1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象.事件通常与函数结合使用,函数不会在事件发生前被执行!2. 事件流原创 2017-11-11 10:24:53 · 519 阅读 · 0 评论 -
js离开当前页面时触发的函数
js离开当前页面时触发的函数:window.onbeforeunload=fun() ;function fun(return 'msg';) ;这样子在浏览器在捕捉到页面即将离开的时候就会弹出提示框,显示msg的内容,询问你确定或者取消目前三大主流浏览器中firefox和IE都支持onbeforeunload事件另外还有一个相似的函数Onunload:Onunlo原创 2017-11-10 11:38:19 · 12044 阅读 · 0 评论 -
js的window.onscroll事件兼容各大浏览器!
为窗口添加滚动条事件其实非常的简单, window.onscroll=function(){}; 注意在获取滚动条距离的时候 谷歌不识别document.documentElement.scrollTop,必须要加上document.body.scrollTop;即 var scrolltop=document.documentElement原创 2017-10-12 14:27:33 · 662 阅读 · 0 评论 -
JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸
1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模原创 2017-10-12 11:11:53 · 447 阅读 · 0 评论 -
jquery sortable参数说明
所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ui.position - 表示相对当前对象,鼠标的坐标值对象{top,left} ui.offset - 表示相对于当前页面,鼠标的坐标值对象{top,left} ui.item - 表示当原创 2017-09-01 15:52:17 · 834 阅读 · 0 评论 -
js,jQuery获取html5的data-*属性
data-*自定义数据属性HTML5规定可以为元素添加非标准型的属性,只需添加前缀data-,这些属性可以随意添加,随意命名,目的是为元素提供与渲染无关的信息,或提供语义信息。js获取data-*的方式通过dataset属性访问//HTML代码 <div id="myDiv" data-appid="123" data-myname="lsxj"></div>//js代...原创 2018-03-08 10:58:31 · 469 阅读 · 0 评论 -
js中类定义函数时用prototype与不用的区别
首先来看一个实例:function ListCommon2(first,second,third) { this.First=function () { alert("first do"+first); } } //不加prototype的情况ListCommon2.do1=function(first) { // this.Fi...原创 2018-03-09 10:09:37 · 265 阅读 · 0 评论 -
简单明了区分escape、encodeURI和encodeURIComponent
一、前言讲这3个方法区别的文章太多了,但是大部分写的都很绕。本文试图从实践角度去讲这3个方法。 二、escape和它们不是同一类简单来说,escape是对字符串(string)进行编码(而另外两种是对URL),作用是让它们在所有电脑上可读。编码之后的效果是%XX或者%uXXXX这种形式。其中 ASCII字母、数字、@*/+ ,这几个字符不会被编码,其余的都会。最关键的是,当你...转载 2018-10-26 16:00:53 · 196 阅读 · 0 评论 -
Object.freeze() 方法
Object.freeze() 方法可以冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回被冻结的对象。const object1 = { property1: 42};const object2 = Object.freeze(object1);object2.pro...原创 2018-07-25 10:55:54 · 1133 阅读 · 1 评论 -
js中style,currentStyle和getComputedStyle的区别以及获取css操作方法
在js中,之前我们获取属性大多用的都是ele.style.border这种形式的方法,但是这种方法是有局限性的,该方法只能获取到行内样式,获取不了外部的样式.所以呢下面我就教大家获取外部样式的方法,因为获取外部的样式存在兼容性的问题,所以后面我还会教大家解决兼容性的方法.style:各大浏览器都兼容,能设置样式和获取样式,但是获取不了外部样式,如果写了行内没有的样式,返回的是空值写法:el...原创 2018-07-19 17:20:26 · 207 阅读 · 0 评论 -
JS延迟加载的几种方式
JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件。 JS延迟加载有助于提高页面加载速度。一般有以下几种方式: defer 属性 async 属性 动态创建DOM方式 使用jQuery的getScript方法 使用setTimeout延迟方法 让JS最后加载 1. defer 属性HTML 4.01 为 <script...原创 2018-07-19 09:44:26 · 570 阅读 · 0 评论 -
web网站css,js更新后客户浏览器缓存问题,需要刷新才能正常展示的解决办法
问题描述最近将公司官网样式进行了调整,部署到服务器后访问发现页面展示不正常,但是刷新之后就会展示正常。问题分析研究之后发现可能的原因有css文件过大,加载缓慢 本地缓存问题,虽然服务器修改了css文件,但是浏览器仍然使用本地缓存的css,需要用户多刷新一次才能正常展示显然是很不合理的,那么怎么样解决更新后让浏览器请求新的css或js文件呢?解决办法方法1 更新文件后更改...原创 2018-07-24 14:32:54 · 448 阅读 · 0 评论 -
location.reload() 和 location.replace()的区别和应用。
首先介绍两个方法的语法:reload 方法,该方法强迫浏览器刷新当前页面。语法: location.reload([bForceGet]) ...原创 2018-04-19 16:20:14 · 292 阅读 · 0 评论 -
Offset、Scroll、Client偏移知识
offsetoffset这个单词本身是--偏移,补偿,位移的意思。js中有一套方便的获取元素尺寸的办法就是offset家族;offsetWidth、offsetHight、offsetLeft、offsetTop、offsetParent,共同组成了offset家族。1、offsetWidth和offsetHight(是用来检测盒子自身宽高+padding+border)这两个属性,他们绑定在了所...原创 2018-04-13 11:38:15 · 701 阅读 · 0 评论 -
js判断某个方法是否存在
<script type="text/javascript"> window.onload = function(){ try{ if(test && typeof(test) == "function"){ test(); } }catch(e){ ...原创 2018-04-18 17:28:01 · 3786 阅读 · 0 评论 -
js本地存储:localStorage以及LocalStorage和SessionStorage的不同之处
一.简介 localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库 ——注意:在IE8以上的IE版本才支持localStorage这个属性。localStorage属于永久性存储,如果存储内容多的话会消耗内存空间,会导致页面变卡。 二.具体使用方式如下: 1.localStorage - 没有时间限制的数据存储 var arr=[...转载 2018-04-18 17:25:44 · 589 阅读 · 0 评论 -
onselectstart="return false" : 禁止选取
禁止鼠标右键:oncontextmenu="return false";禁止选择:onselectstart="return false";禁止拖放:ondragstart="return false";禁止拷贝:oncopy=document.selection.empty() 。禁止复制:oncopy = "return false";禁止保原创 2017-08-31 17:21:24 · 663 阅读 · 0 评论 -
JS设置checkbox 为选中和未选中状态
$("#checkAll").prop("checked",false);//重新请求数据的时候把全选框变为未选中if ($("#checkbox-id")get(0).checked) { // do something}方法二:if($('#checkbox-id').is(':checked')) { // do something}方法三:i原创 2017-08-31 15:25:01 · 21005 阅读 · 0 评论 -
深刻了解jQuery对象和普通DOM对象的区别
第一步,http://www.k99k.com/jQuery_getting_started.html 第二步,新手先仔细得全部看一遍jQuery的选择器,很重要!!! (http://shawphy.com/jqueryapi/ 这里是最新文档,有离线版下载) 第三步,深刻了解jQuery对象和普通DOM对象的区别。互相转化见Q1 Q1,js的写法:document原创 2017-08-19 09:21:48 · 336 阅读 · 0 评论 -
JSjQuery parent,next,prev的使用例子
//取当前对象的父对象的上一个节点的上一个节点的值的第一个对象的值$($(item).parent().prev().prev().children()[0]).attr('value'); //item为ti_0_3对象,则取的是value_ti_0_1 //取当前对象的父对象的下一个节点的第一个对象的值$($(input).parent().next().children()原创 2017-08-18 19:43:45 · 1589 阅读 · 0 评论 -
Canvas标签用来绘制图像会使用到的方法和属性
clearRect() 方法清空给定矩形内的指定像素JavaScript 语法:context.clearRect(x,y,width,height);参数值参数描述x要清除的矩形左上角的 x 坐标y要清除的矩形左上角的 y 坐标width要清除的矩形的宽度,以像素计height要清除的矩形原创 2017-08-10 17:57:49 · 845 阅读 · 0 评论 -
addEventListener() 方法,事件监听
addEventListener() 方法,事件监听你可以使用 removeEventListener() 方法来移除事件的监听语法element.addEventListener(event, function, useCapture);第一个参数是事件的类型 (如 "click" 或 "mousedown").第二个参数是事件触发后调用的函数。第三个参数是个布尔原创 2017-08-10 16:09:01 · 1498 阅读 · 0 评论 -
window.requestAnimationFrame()的使用
1.前言在说明这个js的api用法之前,我先给个效果以及源码:1. 页面效果 2. 页面源码2.说明window.requestAnimationFrame()这个API是浏览器提供的js全局方法,针对动画效果。1)使用用法1:function animate() { //done(); requestAnimationFrame(anim原创 2017-08-10 15:56:46 · 738 阅读 · 0 评论 -
window.event对象详细介绍
1、event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。event对象只在事件发生的过程中才有效。event的某些属性只对特定的事件有意义。比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。 2、属性:altKey, button, cancelBubble, c原创 2017-08-03 14:24:39 · 264 阅读 · 0 评论 -
随笔
JS问题问题一:在HTML或aspx页面验证可以通过,复制到JS文件中后就不能通过 运行程序,按F12进去,查看代码,检查代码是否有误,是否是浏览器缓存原因导致的select下拉框问题问题一:JS怎么获取select选中的值 var obj = document.getElementByIdx_x(”testSelect”); //定位id ...原创 2017-07-28 17:03:03 · 347 阅读 · 0 评论 -
jQuery事件绑定on()、bind()与delegate() 方法详解
啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是一直没完全弄懂之间的区别,于是今天查了下资料,自己做个总结。之所以有这么多类型的绑定方法,是因为jQuery的版本更新的原因,如on()方法就是1.7以后出现的。jQuery的事件绑定api页原创 2017-08-16 17:54:57 · 289 阅读 · 0 评论 -
Js操作Select(取值、设置选中等等)
jquery操作select(取值,设置选中) 每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了。 比如 1、设置value为pxx的项选中 $(".selector").val("pxx"); 2、设置text为pxx的项选中 $(".selector").find("option[text='pxx']").attr("selecte原创 2017-08-16 17:43:12 · 431 阅读 · 0 评论 -
window.history.go(-1)返回且刷新页面
windows窗口对象(历史)history.go(),history.back(),history.forward()。 因为windows对象引用不是必须的。所以windows.history.go() == history.go()的。 go()方法只有一个参数,可以是整数、负数。如果是正数,就前进。负数就是后退。(相当于Forward和Back的区别)原创 2017-08-19 14:08:13 · 8281 阅读 · 0 评论 -
Js中的window.parent ,window.top,window.self 详解
在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法打开当前窗口的那个窗口。 window.self功能:是对当前窗口自身的引用。它和window属性是等价的。语法:window.self注:window、self、window原创 2017-08-19 14:10:03 · 474 阅读 · 0 评论 -
js中如何判断按钮是否被点击了
firfox版: document.onclick=function(e){ var evt=e||window.event; var tar=evt.target||evt.srcElement; if( (tar.tagName.toLowerCase()=="input"&&tar.t原创 2017-08-03 14:25:15 · 13361 阅读 · 0 评论 -
CSS display属性的值及作用
display 的属性值有:none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-captio原创 2017-07-28 17:14:48 · 1450 阅读 · 0 评论 -
td长度固定,内容过长,超过部分用省略号代替
很多情况下,在网页设计时每个模块的宽度和高度都要固定,然后只需往模块里更新内容即可,但是如果内容过多,就有可能把模块撑大,从而使版面错乱。准对这个情况,网页设计时就要考虑到,每个模块的div或table的高宽一定不能因内容过多而变化,这需要在设计上使用一点技巧来实现。本文便介绍一个常用的也是非常简单的方法,这个方法是通过css代码来实现的。实现代码如下1、隐藏超出td宽度的图片区域(或原创 2017-07-28 16:15:45 · 1480 阅读 · 0 评论 -
form表单提交onclick和onsubmit
onsubmit只能表单上使用,提交表单前会触发, onclick是按钮等控件使用, 用来触发点击事件。在提交表单前,一般都会进行数据验证,可以选择在submit按钮上的onclick中验证,也可以在onsubmit中验证。但是onclick比onsubmit更早的被触发。 提交过程1、用户点击按钮 ----> 2、触发onclick事件 ----> 3、原创 2017-07-28 16:36:10 · 481 阅读 · 0 评论 -
event.srcElement与event.target的区别
window.event.srcElement与window.event.target 都是指向触发事件的元素,它是什么就有什么样的属性srcElement是事件初始化目标html元素对象引用,因为事件通过元素层次冒泡,可以在任意一层进行处理,有了元素的引用,就可以读写改元素的属性。 IE浏览器支持window.event.srcElement , 而firefox支持window原创 2017-07-28 14:59:46 · 811 阅读 · 0 评论 -
onselectstart与onselect—禁止选择或禁止复制
这两个事件看起来很相似,事实上却非常的不同。1.onselectstart 这个事件主要是用于禁止选择网页中的文字。代码为:document.onselectstart =function(){ return false; } 另外ff/opera不支持此事件,ff可以用css控制:css: body { -m原创 2017-07-28 14:42:34 · 1129 阅读 · 0 评论