Web前端
关注
分享
扫一扫
文章平均质量分 90
zhangzeyuaaa
这个作者很懒，什么都没留下…
展开
-
Server-Sent Events（SSE）协议(实现ChatGPT聊天“打字机“效果)
SSE是一种基于HTTP的轻量级协议，允许服务器通过单个HTTP连接持续向客户端推送实时数据。它是HTML5标准的一部分，旨在为Web应用提供一种简单、高效的实时数据传输方式。SSE协议作为一种基于HTTP的轻量级实时数据推送协议，为Web应用提供了一种简单、高效的实时通信解决方案。它继承了HTTP协议的兼容性和简单性，同时解决了实时数据传输的需求。对于不需要双向通信的场景，SSE是比WebSocket更轻量、更易维护的选择。随着Web技术的不断发展，SSE协议在实时通知、流式输出等领域将继续发挥重要作用。原创 2025-03-30 11:18:02 · 858 阅读 · 0 评论 -
Chrome控制台的妙用之使用XPATH
谷歌浏览器，对于作为程序员的我们来说可以是居家必备了，应该用的相当的熟悉了，我们用的最多的应该是network选项吧，一般用来分析网页加载的请求信息，比如post参数之类的，这些基本的功能基本上够用了，今天我说的不是network模块，而是console命令模块的使用，关于console命令的使用网上也有很多的介绍了，但是大多数的都是互相抄袭，根本不知道谁才是作者，在此和大家分享一下 谷歌控制台的命令的妙用。通过网上的信息我得知目前控制台方法和属性有：["$$", "$x", "dir", "转载 2021-12-28 14:11:30 · 3585 阅读 · 1 评论 -
jquery事件委托实现事件预绑定
事件委托，即将本该注册到子元素的上的事件注册到父元素上，其原理是事件冒泡。事件冒泡就是当前元素触发的事件会一级一级地向上传递，如果父级有这个事件，就会触发，没有就不触发，其实父级没有注册这个事件，也会传递的，只是不触发而已。元素如下，需要给li绑定单击事件：<ul id="list"> <li>1111<li> <li>2222<li> <li>3333<li> <li>原创 2020-07-10 23:04:30 · 524 阅读 · 0 评论 -
DIV横向排列的方法：float/inline-block/flex
以下面这组 div 为例，wrap 的高度由内容撑开<div id="wrap"> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div></div>平时是这样的，上下...原创 2020-03-24 22:28:42 · 4310 阅读 · 0 评论 -
html中的checkbox复选框不确定状态的设置
这篇文章要分享的是复选框的不确定状态，html中的复选框是: 一般遇到复选框或许只需要选中或者不选中两种状态即可，但是有时候需要第三种不确定状态，例如做带复选框的级联菜单时，子级菜单的多个复选框为部分选中的时，父级菜单的复选框应处于不确定状态，来反映子菜单的部分选中情况。 方法是通过js设置复选框的indeterminate属性，在标签中设置此属性无效。原创 2015-04-29 17:18:32 · 2611 阅读 · 0 评论 -
一个简单的Web模式对话框
<html><head><title>模式对话框</title><script src="jquery-1.4.2.js"></script><script> function showDialog(){ $('#bodyHide').show(); //显示在屏幕中间 $('#dialog').css('left', $(window原创 2015-05-05 15:34:27 · 4164 阅读 · 1 评论 -
子DIV浮动（float）后父DIV高度自动失效解决方案
如下所示，子元素 div2 本身具有高度和宽度，但由于其具有float:left；属性后。其父元素 div1 不具有高度。 当然我们可以直接给 div1 设置固定高度来解决。另外一种解决办法是给父元素 div1 设置 overflow:auto 或者 overflo转载 2015-11-24 15:03:42 · 3656 阅读 · 0 评论 -
JavaScript版HashMap的简单实现——通过原型prototype扩展
function HashMap(){ this.entry = new Object(); this.size = 0;}HashMap.prototype.put = function(key, value){ this.entry[key] = value; this.size++;}HashMap.prototype.remove = function(key){ i原创 2016-04-03 19:43:37 · 1058 阅读 · 0 评论 -
jquery使用ajax提交表单
我们经常碰到提交表单而不想刷新页面的情况，这时可以借助jquery使用Ajax提交表单。页面代码： 公司名称： 注册码： 所属县区： 详细地址： 引入JQuery文件：/js/jquery-1.8.3.min.js">JS代码：function add(){ alert($("#form").serialize()); $原创 2016-08-12 21:57:54 · 923 阅读 · 0 评论 -
以POST方式下载文件
我们在下载文件时，一般都是以GET方式下载，但是GET请求有参数长度限制，这时候就可以通过构建form表单以POST请求方式下载。function downloadFile() { $("#downloadform").remove(); var form = $("");//定义一个form表单 form.attr("id", "downloadform"); form.at原创 2016-10-15 14:56:37 · 13927 阅读 · 0 评论 -
使用jquery.form.js实现无刷新上传文件
在不支持HTML5的浏览器上，并不支持纯Ajax上传文件，这时可以使用插件jquery.form.js，官网http://malsup.com/jquery/form。客户端代码：<%String path = request.getContextPath();%> My JSP 'index.jsp' starting page /js/jquery-1.8.3.原创 2016-08-14 12:16:54 · 4583 阅读 · 0 评论 -
Ajax请求session过期处理
后端过滤器处理：// 处理Ajax请求 HttpServletResponse response = (HttpServletResponse) arg1; if ("XMLHttpRequest".equalsIgnoreCase(request.getHeader("X-Requested-With"))) { response.setCharacterEncoding("原创 2017-06-03 13:22:35 · 851 阅读 · 0 评论 -
ES6 对象内函数的两种写法
<script>// 写法1var person1 = { name: "p1", sayThis() { console.log(this); }};// 写法2var person2 = { name: "p2", sayThis:()=> { console.log(this); }...原创 2018-11-22 11:11:54 · 6598 阅读 · 0 评论 -
xml特殊字符处理的两种方式：实体引用和CDATA
实体引用（entity reference）非法的 XML 字符必须被替换为实体引用（entity reference）。假如您在 XML 文档中放置了一个类似 "if salary 为了避免此类错误，需要把字符 "if salary < 1000 then在 XML 中有 5 个预定义的实体引用：<小于>>原创 2014-03-26 23:38:06 · 5785 阅读 · 0 评论 -
xml语义约束：DTD和Schema
XML不像HTML那样有一套预置的标签，但是XML有严格的语义约束，主要有两种模式：DTD和SchemaDTDDTD有三种引用方式：1.内部引用，DTD只能供一个XML文档使用。2.外部（SYSTEM）引用，DTD是一个单独的文件，可以供多个XML文档使用。3.公共（PUBLIC）引用，DTD是一个URL，可以供多个XML使用。注：一个XML一般只能引入一个DTD。Sc原创 2014-03-27 22:10:20 · 2269 阅读 · 0 评论 -
XML文档分类
XML文档历史分类按照对XML文档规范的遵循程度，将XML文档分类三类：1.格式不良好（malformed）的XML文档。完全没有遵守XML文档基本规则的XML文档。2.格式良好（well-formed）但无效的XML文档。遵守了XML文档基本规则，但没有使用DTD或schema定义语义约束的XML文档；使用了DTD或schema定义语义约束，但没有遵守DTD或schema原创 2014-03-28 20:07:21 · 1947 阅读 · 0 评论 -
原生的DOM选择器
说说下面几个方法：getElementById,getElementsByName,getElementsByTagNamegetElementsByClassNamequerySelectorquerySelectorAll一、getElementById 语法： obj= document.getElementById( sID )转载 2013-12-19 13:31:06 · 6871 阅读 · 0 评论 -
jQuery选择器探讨进阶
jQuery选择器探讨在jQuery中，当用户把选择器表达式作为参数传递给$()函数时，jQery的Sizzle先对这个选择器表达式进行语法分析，然后再决定如何获得表达式所代表的这些元素。在框架底层，Sizzle应用了浏览器所支持的最高效的DOM 方法来获取一个节点列表(nodeList)，这个节点列表是一个类似于数组的对象的DOM元素的集合。下面的列表展示了jQuery的Sizzle内部采用转载 2013-12-19 13:37:10 · 1799 阅读 · 0 评论 -
bom 和 dom 的联系和区别
BOM中的对象Window对象：是整个BOM的核心，所有对象和集合都以某种方式回接到window对象。Window对象表示整个浏览器窗口，但不必表示其中包含的内容。Document对象：实际上是window对象的属性。这个对象的独特之处是唯一一个既属于BOM又属于DOM的对象。从BOM角度看，document对象由一系列集合构成，这些集合可以访问文档的各个部分。Locati转载 2013-12-19 14:03:05 · 2288 阅读 · 0 评论 -
Html节点类型值
页面上的元素都是节点(Node)，有元素节点(Element Node)、属性节点(Attribute Node)、文本节点(Text Node)等。w3c nodeType的定义如下: const unsigned short ELEMENT_NODE = 1; const unsigned short ATTRIBUTE_NODE = 2;转载 2013-12-19 14:33:41 · 1674 阅读 · 0 评论 -
jQuery对象与DOM对象相互转换
1、DOM对象转jQuery对象 普通的Dom对象一般可以通过$()转换成jQuery对象。 如：$(document.getElementById("msg")) 返回的就是jQuery对象，可以使用jQuery的方法。 2、jQuery对象转DOM对象 由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为Dom对象则必须取出其中的某一项，一般可通过索转载 2013-12-19 14:44:33 · 1226 阅读 · 0 评论 -
HTML DOM 节点信息
nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。节点信息每个节点都拥有包含着关于节点某些信息的属性。这些属性是：nodeName（节点名称）nodeValue（节点值）nodeType（节点类型）nodeNamenodeName 属性含有某个节点的名称。元素节点的 nodeName 是标签名称属性节点的 nodeN转载 2013-12-19 14:35:23 · 703 阅读 · 0 评论 -
JavaScript继承
Student.prototype = new Person('Jim', 23);function test(){ var p = Student.prototype; var student = new Student(90); p = student.prototype; alert(student.getInfo()); alert(student.study());}fu原创 2014-01-21 13:23:10 · 869 阅读 · 0 评论 -
模拟Jquery实现
(function (w){ var Jquery = { log: function(message){ console.log(message); } }; w.Jquery = w.$ = Jquery; })(window); function test(){$.log('My Jquery!');}原创 2014-01-21 14:51:23 · 973 阅读 · 0 评论 -
jQuery表格选中行变色插件
$.fn.extend({ changecolor: function(options) { var defaults = { selectedColor: 'gainsboro' //选中后的颜色,默认淡灰色 }; options = $.extend(defaults, options); return this.each(function() {原创 2014-01-22 15:37:35 · 1257 阅读 · 0 评论 -
Javascript面向对象
定义类function Person(name, age){ this.name = name + '1'; this.age = age + 1; var weight = 100; this.getInfo = function(){ return 'My name is ' + this.name + ',I am ' + this.age + ' years ol原创 2014-01-20 16:45:27 · 683 阅读 · 0 评论 -
JS自调用匿名函数 self-invoking anonymous function
(function (value){ alert(value);}('value'));或者(function (value){ alert(value);})('value');原创 2014-01-21 14:36:17 · 2001 阅读 · 0 评论 -
XML命名空间
XML命名空间（XML namespace，也译作XML名称空间、XML名字空间）用于在一个XML文档中提供名字唯一的元素和属性。XML命名空间在W3C推荐规范《Namespaces in XML》中定义。XML命名空间于1999年1月14日成为W3C的推荐规范。W3C将XML命名空间定义为以国际化资源标识符（Internationalized Resource Identifier，IR转载 2014-03-28 16:23:50 · 1825 阅读 · 0 评论 -
四种常见浏览器内核简介
经常听说各种不同的浏览器，IE、Opera、Firefox、Safari、The World还有现在的Chrome等。看似许多不同的浏览器，其实其中还是有很多相似之处。今天，我们就来了解他们的内核~！那内核是什么呢？内核只是一个通俗的说法，其英文名称为“Layout engine”，翻译过来就是“排版引擎”，也被称为“页面渲染引擎”（下文中各种说法通用）。它负责取得网页的内容（HTML、X转载 2013-12-17 13:38:59 · 1598 阅读 · 0 评论