![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Javascript相关
文章平均质量分 73
不全
这个作者很懒,什么都没留下…
展开
-
Html中的 Doctype 标签及与zTree树形组件的使用注意
HTML<!DOCTYPE Html> 了解这个是初始于解决系统里面的一个Bug,jquery dialog在所有的IE浏览器中都打不开,因为这是之前别人建立的页面,找了好久才知道是因为没有在页面之前声明<!DOCTYPE>,开启了浏览器的怪异模式,所以在IE中显示不出要的效果来。所以就稍微深入的了解了一下<!DOCTYPE>。 <!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用原创 2021-12-27 14:16:19 · 273 阅读 · 0 评论 -
JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义
JQuery中:1、width()方法用于获得元素内容所占的宽度;2、innerWidth()方法用于获得包括内边界(padding)的元素宽度;算式:innerWidth()=width()+padding(左右)3、outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度;算式:outerWidth()=width()+padding(左右)+border(左右)4、outerWidth()方法的参数为true(如:$(this).oute原创 2021-08-14 16:45:10 · 1093 阅读 · 0 评论 -
js实现table表头冻结(scroll时固定)
方案一:思路:当table在父容器中滑动滚动条显示内容时,使用scrollTop判断边界,同时使用JQuery中的clone方法,把原table创建复制一份,插入到动态创建的一个div中,再将该div的position设置为fixed,height设置table中的thread的高度即可。示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t原创 2021-08-14 11:50:22 · 2584 阅读 · 0 评论 -
js中的offsetLeft和style.left
(1)style.left是带单位"px"的,而offsetLeft没有单位,另外,style.left必须是内联样式,或者在JS中通过style.left赋值,否则取得的将为空字符串(在内部样式和外部样式中指定left是无效的)(2)如果没有已经定位的父元素,那么offsetLeft指向的是文档(document)的左边缘<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g转载 2021-08-05 17:53:29 · 2022 阅读 · 0 评论 -
html区域 、元素位置相关
1)html节点在可视区域(浏览器显示网页可见的部分)的位置 obj.getBoundingClientRect().top obj.getBoundingClientRect().left这个方法最早出现在IE浏览器中,后来的浏览器也跟着支持了这个方法,而且还更加完善,IE中只能获取到元素的left,top,bottom,right的属性,而后面的现代浏览器还能获取到元素的width和height.推荐示例: var box = document.get...原创 2021-07-21 10:20:47 · 358 阅读 · 0 评论 -
js中的NaN,isNaN与Number.isNaN的区别,如何判断一个值严格等于NaN
在JavaScript的数字类型Number中,我们最常使用的大概是整数类型与浮点数类型,但除这两者外,还有个特殊的存在NaN,为什么NaN!==NaN?我们如何判断一个值是否等于NaN呢?这篇文章好好聊聊NaN。1.NaN是什么?NaN全称是Not-A-Number(不是一个数字),我们可以通过Number.NaN来获得一个NaN,在类型转换失败时,我们常常会得到一个NaN,需要注意的是,NaN是JS中唯一一个自身不相等的存在。...转载 2021-06-18 16:58:34 · 561 阅读 · 0 评论 -
js new一个对象的过程,实现一个简单的new方法
对于大部分前端开发者而言,new一个构造函数或类得到对应实例,是非常普遍的操作了。下面的例子中分别通过构造函数与class类实现了一个简单的创建实例的过程。// ES5构造函数let Parent = function (name, age) { this.name = name; this.age = age;};Parent.prototype.sayName = function () { console.log(this.name);};const child转载 2021-06-18 16:55:08 · 1182 阅读 · 0 评论 -
js操作svg整体缩放的示例
<!DOCTYPE html><html><head> <title>js操作svg实现整体缩放</title> <meta charset="utf-8"></head><body> <svg id="svg" style="background:#FAFAFA;"> <g id="svgPanel"> <g...原创 2021-02-27 15:04:37 · 537 阅读 · 0 评论 -
svg之ViewBox详解,秒懂SVG里的viewbox
今天学 SVG 的时候看到了 viewbox 属性,先来看一下svg的格式:<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version="1.1" id="layer1" xmlns="http://www.w3.org/2000/svg" .原创 2021-02-27 14:40:01 · 29515 阅读 · 3 评论 -
svg的transform-matrix详解
一、svg transform的种类translate(平移) skew(倾斜) rotate(旋转) scale(缩放) matrix(矩阵操作,可涵盖前四者,威力十分强大)二、用matrix表达前三者matrix接口样式:matrix(a,b,c,d,e,f)对应矩阵:a c eb d f0 0 11.Translate(tx, ty)矩阵:1 0 tx0 1 ty0 0 1写法:matrix(1,0,0,1,tx,ty).转载 2021-02-27 13:40:20 · 4541 阅读 · 0 评论 -
XML与JSON比较,并用AJAX传输XML/JSON数据
为实现数据与逻辑代码的分离,可以把数据单独存放,一般用xml 和json格式来存储数据。XML介绍XML 指可扩展标记语言(EXtensible Markup Language),很类似 HTML。XML 的设计宗旨是传输数据,而非显示数据。来个xml示例:<?xml version ="1.0" encoding ="UTF-8"?><singer> <name>张信哲</name> <skill&g...转载 2020-09-21 09:11:56 · 97 阅读 · 0 评论 -
JSONP跨域请求原理及示例
Jsonp的跨域问题,再讲之前先说明一下什么是同源策略。来自百度的介绍同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面。当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。如下:下表引自网络其.转载 2020-09-21 09:07:50 · 125 阅读 · 0 评论 -
JS中prototype介绍
用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,最近看了一些 JavaScript高级程序设计,终于揭开了其神秘面纱。每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和方法。转载 2020-07-06 14:52:19 · 1328 阅读 · 0 评论 -
JS中Prototype属性解释及常用方法
1、prototype的定义javascript中的每个类都有prototype属性,其prototype属性的解释是:返回对象类型原型的引用。每一个构造函数都有一个属性叫做原型。这个属性非常有用:为一个特定类声明通用的变量或者函数。你不需要显式地声明一个prototype属性,因为在每一个构造函数中都有它的存在。你可以看看下面的例子:function Test(){}console.log(Test.prototype); 输出:2 、什么是原型原型:现在有1个类A,我想要创建原创 2020-07-06 14:47:15 · 2033 阅读 · 0 评论 -
XML DOM摘要五(XPath)
XPath 是一门在 XML 文档中查找信息的语言。XPath 可用来在 XML 文档中对元素和属性进行遍历。XPath 是 W3C XSLT 标准的主要元素,并且 XQuery 和 XPointer 都构建于 XPath 表达之上。因此,对 XPath 的理解是很多高级 XML 应用的基础。什么是 XPath?XPath 使用路径表达式在 XML 文档中进行导航 XPath 包含一个标准函数库 XPath 是 XSLT 中的主要元素 XPath 是一个 W3C 标准XP...转载 2020-07-01 17:07:07 · 250 阅读 · 0 评论 -
XML DOM摘要四(XMLHttpRequest 对象)
什么是 XMLHttpRequest 对象?XMLHttpRequest 对象提供了在网页加载后与服务器进行通信的方法。XMLHttpRequest 对象是开发者的梦想,因为您能够:在不重新加载页面的情况下更新网页 在页面已加载后从服务器请求数据 在页面已加载后从服务器接收数据 在后台向服务器发送数据所有现代的浏览器都支持 XMLHttpRequest 对象。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 G...转载 2020-07-01 16:44:43 · 231 阅读 · 0 评论 -
XML DOM摘要三(XML DOM节点增、删、改、查)
定位 DOM 节点通过节点间的关系访问节点树中的节点,通常称为定位节点 ("navigating nodes")。在 XML DOM 中,节点的关系被定义为节点的属性:parentNode childNodes firstChild lastChild nextSibling previousSibling下面的图像展示了books.xml中节点树的一个部分,并说明了节点之间的关系:DOM - 父节点所有的节点都仅有一个父节点。下面的代码定位到 <book>..转载 2020-07-01 16:33:06 · 299 阅读 · 0 评论 -
XML DOM摘要二(XML DOM节点、属性、方法介绍)
编程接口DOM 把 XML 模拟为一系列节点接口。可通过 JavaScript 或其他编程语言来访问节点。在本教程中,我们使用 JavaScript。对 DOM 的编程接口是通过一套标准的属性和方法来定义的。属性经常按照“某事物是什么”的方式来使用(例如节点名是 "book")。方法经常按照“对某事物做什么”的方式来使用(例如删除 "book" 节点)。XML DOM 属性一些典型的 DOM 属性:x.nodeName - x 的名称 x.nodeValue - x 的值 x转载 2020-07-01 15:27:41 · 1018 阅读 · 0 评论 -
XML DOM摘要一(XML DOM介绍和解析)
XML 文档对象模型(XML DOM,XML Document Object Model 的缩写)定义访问和操作XML文档的标准方法。DOM 将 XML 文档作为一个树形结构,而树叶被定义为节点。XML DOM结节树:XML DOM 把 XML 文档视为一种树结构。这种树结构被称为节点树。可通过这棵树访问所有节点。可以修改或删除它们的内容,也可以创建新的元素。这颗节点树展示了节点的集合,以及它们之间的联系。这棵树从根节点开始,然后在树的最低层级向文本节点长出枝条:什...转载 2020-07-01 14:58:30 · 419 阅读 · 0 评论 -
onmouseover 、onmouseout和onmouseenter、onmouseleave的区别-简记
onmouseover、onmouseout:1) onmouseover:鼠标进入元素时触发,onmouseout:鼠标离开元素时触发;2) 特点:鼠标经过子元素时,其父元素的onmouseover、onmouseout事件也会触发,产生事件冒泡效果;示例:<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>原创 2020-06-01 14:12:13 · 1780 阅读 · 0 评论 -
正则表达式-简记
常用的正则表达式无字符说明:1) \d:非转义字符,验证的目标只能是数字,等价于[0-9],js示例如下:var regex=/\d/; //等价/[0-9]/,两个"/"中间的字符串为正则表达式的主体,一定要用"/"包起来if(regex.test(目标符字符串)) alert("匹配");else alert("不合规范");C#示例(其它语言类似,不作具体说明):string strPatter=@"\d"; //等价于[0-9],建议使用“@”防止转义,原创 2020-05-24 21:59:59 · 1163 阅读 · 0 评论 -
jsonp原理详解-十分清楚,推荐
什么是JSONP?先说说JSONP是怎么产生的:其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,着用自己的方式来阐释一下这个问题,看看是否有帮助。1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准。2、不过我们又发现,Web页面上调...转载 2020-04-30 21:45:42 · 114 阅读 · 0 评论 -
html5 postMessage解决跨域、跨窗口消息传递
一些麻烦事儿平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题1.页面和其打开的新窗口的数据传递2.多窗口之间消息传递3.页面与嵌套的iframe消息传递4.上面三个问题的跨域数据传递postMessage()这些问题都有一些解决办法,但html5引入的message的API可以更方便、有效、安全的解决这些难题。postMessag...转载 2020-04-30 16:31:57 · 241 阅读 · 0 评论 -
Asp.Net MVC 中的 Cookie讲解
一、CookieCookie是请求服务器或访问Web页面时携带的一个小的文本信息。Cookie为Web应用程序中提供了一种存储特定用户信息的方法。Cookie的值是字符串类型,且对用户是可见的。Cookie随着每次Request和Response在浏览器和服务器之间交换数据。如果一个用户请求服务器上的一个页面,服务器除了返回请求的页面,也返回了一个包含日期和时间的Cookie。这个Co...转载 2020-03-10 16:07:20 · 1173 阅读 · 0 评论 -
JQuery中Radio、CheckBox的用法简记
一、Radio的赋值与取值示例:一定要注意赋值时的数据格式 //设置Radio的值 $("#setRBtn").click(function(){ $(":radio").val(["女"]); //等同于$(":radio[value=女]").attr("checked",true); //$(":radio[value=女]").attr("check...原创 2020-03-07 17:09:40 · 257 阅读 · 0 评论 -
jQuery——remove()、empty()区别
remove()与empty() 有删除的功能,但是remove方法会把选中的元素标签也一起删除掉,empty()只会清空元素标签中的内容,不会把选中的标签($(tag))也干掉,但会把包含的子标签DOM节点删除掉.1. remove(),都会返回被选择的标签JQuery对象,empty()则不会返回有意义JQuery对象; <div id="fdiv"> <...原创 2020-03-06 22:30:46 · 464 阅读 · 0 评论 -
jQuery方法链式调用的原理
在使用jQuery库的时候,是可以连续调用多个方法的,这是怎么实现的呢?如:$("div").width("100px").height("100px");1、实现原理:这里使用原生js来模拟这样的效果:let fun = { fun1: function() { console.log("fun1"); return this; ...转载 2020-03-06 14:24:09 · 983 阅读 · 0 评论 -
JQuery中each的使用
$.each()是对数组,json和dom结构等的遍历,使用示例如下:1、遍历一维数组 var arr1=['aa','bb','cc','dd']; $.each(arr1,function(i,val){ //两个参数,第一个参数表示遍历的数组的下标,第二个参数表示下标对应的值 console.log(i+'```````'+val);输出的结果为:0```````aa...原创 2020-03-05 14:14:41 · 430 阅读 · 0 评论 -
【JS】new 一个对象具体做了什么
function Person () { this.name = name; this.age = age; this.job = job; this.sayName = function () { return this.name; } } var ...转载 2020-03-02 18:18:31 · 296 阅读 · 0 评论 -
JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth
常用:JS 获取浏览器窗口大小// 获取窗口宽度if (window.innerWidth)winWidth = window.innerWidth;else if ((document.body) && (document.body.clientWidth))winWidth = document.body.clientWidth;// 获取窗口高度if (...转载 2020-03-02 17:46:42 · 588 阅读 · 0 评论 -
JS new原理和代码实现
示例: var Fn=function(){ this.name='hty' } const fn=new Fn;当new Fn执行的时候,内部执行过程如下:1、一个继承自Fn.prototype的新对象被创建。2、使用指定的参数调用构造函数Fn,并将this绑定到新创建的对象。new Fn等同于new Fn(),...转载 2020-03-02 17:42:59 · 276 阅读 · 0 评论 -
javascript中的定时器setTimeout、setInterval介绍-简记
在制作网页动态效果时,一定会遇到某些需求,要求某段程序等待一定时间后再开始执行,JavaScript中主要通过定时器setTimeout方法实现此类需求;或者需要间隔一段时间多次的去做相同的一些操作,JavaScript中主要通过定时器setInterval方法实现此类需求;SetTimeout介绍:定义:setTimeout(code,millisec) ...原创 2019-02-22 10:12:46 · 242 阅读 · 0 评论