当前位置: 首页  - 个人笔记  - 前端设计  - 列表 免费服务器领取!

前端设计

前端设计

jQuery去掉 serialize() 方法中指定的name值

在修改一个前台表单提交逻辑时,为了不动以前的代码(代码和屎一样),就想着在提交数据时过滤掉form表单中指定的name属性和值,由于表单直接使用jquery中的serialize()方法来获取的form表单的数据,所以就要对 serialize() 方法获取的数据进行处理!jQuery去掉 serialize() 方法中指定的name值自

前端设计

js代码判断IP地址的合法性(只支持IPV4)

客户定制了一个IPV4格式的IP地址在线查询的工具,需要用户在前台输入IPV4格的IP地址,为了防止用户输入的IPV4格式的IP错误,又减少后端的服务器资源的浪费,就想到了先在前台用JS脚本判断一下,用户输入的IPV4地址是否合法。js代码判断IP地址是否合法例1:下面利用js脚本来效验ip地址的合法性,是用的正则表达式的方式,大家可以参

前端设计

js判断域名是否为顶级域名的方法

写了一个查询域名资料的小项目,需要用户输入查询域名的顶级域名,为了保证用户输入的域名为顶级域名,就写一个通过JS脚本代码来判断输入的域名是否为顶级域名的方法,下面飞鸟慕鱼博客就来分享一下,大家可以做个参考!js判断是否为顶级域名的方法示例代码:注:以下代码来自网络,稍微做了一些修改,已测试正常可用!/** * 判断输入的地址是否为顶级域名

前端设计

jquery实现点击某元素外触发事件的方法

写了一个jq指定元素排除某个事件触发的效果,正好用上了上一篇博文中所说的 closest 方法,那么下面就来详细的说一下。jq实现点击某元素外触发事件的方法排除某元素触发事件,无非是整个文档中,点击指定的元素不会触发事件,而点击指定元素外的范围则会触发事件。示例:1、先上效果图2、示例代码<style>#mochu{width

前端设计

jquery中 closest() 方法的详解和使用

写在一个JS动态效果的时候,发现了一个在JQuery中从来没有见过的 closest() 方法,看了一下介绍和使用方法,发现非常的好用。下面的博文,飞鸟慕鱼博客就来详细的说一下。jQuery closest() 方法closest():从当前元素开始向上,遍历所有的祖先元素,直达文档的html元素标签。语法:$(selector).clo

前端设计

CSS实现爱心形状动态加载条的方法

下面记录一个利用纯CSS样式代码实现一个爱心形状的动态加载条,用到了CSS中的动画效果与伪元素样式,有一定的参考价值。感兴趣的小伙伴,不妨测试一下。纯CSS实现心形加载动画效果1、动画效果2、示例代码<style>#he{display: flex;justify-content: center;align-items: ce

前端设计

CSS实现聚光灯特效的方法

分享一个利用CSS样式代码实现文字聚光灯特效的方法,其实现的逻辑方法与代码非常的简单,主要用到了CSS中的 animation 动画渐变背景等。CSS聚光灯效果1、效果图片2、实现代码<style>html,body{ display: flex; justify-content: center; align-items

前端设计

CSS实现打字机效果的方法

发现一个有趣的东西,就是使用纯CSS代码实现打字机的效果。所谓的打字机效果就是控制一个字符串字符,并且字符串中的每个一个字符一个接着一个的出现。纯CSS实现文字的打印机效果,要用到 animation 动画元素,下面先上示例代码。CSS实现文字打印机效果的方法1、先上效果图2、示例代码<style>.main {height

前端设计

js中常用的正则表达式

列出几个在js脚本中常常用到的正则表达式,存放下来以后备用。JS 检测用户名正则表达式(1)、用户名正则,4到16位(字母,数字,下划线,减号)var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;console.log(uPattern.test("Mochu123"));//输出 true(

前端设计

js判断元素是否有滚动条的方法

前端网页的有事动态事件中,需要我们判断某些DIV元素是否有滚动条,下面就详细的介绍一下。js 判断是否有滚动条的方法js 判断页面或DIV是否滚动条,其解决思路非常的简单,首先使用js控制元素先滚动一定值,然后再取当前滚动值是否大于0,如果大于0就说明有滚动条,等于0说明没有滚动成功则自然是没有滚动条例1:js判断页面是否有滚动条// 飞

前端设计

js提示框,警告框以及确认框的使用方法

在写前端的页面时,关于JS的提示,警告或确认框一直使用一些集成好的JS插件来实现比如layer弹窗插件,很少用到原生JS中自带的弹出提示(吐糟一下,主要因为太丑了)。js中alert()--警告框JS中的警告框(alert()),常用于向网站的访客弹出一条提示,比如错误信息等等!注意:(1)、alert() 返回的值为 undefined

前端设计

js暴力禁止alert弹窗的方法

浏览网页的时候最凡人的就是时不时的弹出一个alert窗口,下面就介绍一种利用js代码来禁止alert弹窗的方法。js禁止alert弹窗的方法1、js 禁止 alert 弹窗的方法示例代码:// feiniaomy.com 飞鸟慕鱼博客//这是第一个弹窗alert('这是第一个弹窗');//禁止 alert 弹窗window

前端设计

CSS美化html文件上传按钮的方法

写了一个带有表单的html页面,发现原生的 input 文件上传输入框样式太丑了,就琢磨着自己写个美化的样式,下面就是 html input 文件上传样的美化方法,单纯的只用CSS实现,很简单的。CSS 美化input上传按钮样式的方法美化实现逻辑:1、用 div 元素写一个美化的上传按钮2、将 input 上传按钮的透明度设置为 0 ,

前端设计

js判断数组中是否存在某个值

JS脚本判断数组中是否有某个指定的值,有多种方法,下面简单的介绍一下。JS判断数组中是否含有某个值1、JavaScript indexOf() 方法array.indexOf:判断数组中是否有某个值,如果有则返回元素的下标,如果没有则返回 -1示例代码:var arr = ['mochu','feiniaomy.c

前端设计

js获取上传文件类型以及大小的方法

前端web上传文件时,需要在上传之前判断一下文件的类型以及文件的大小,HTML为前端的标记语言是无法做到这一点,只能使用javascript 动态脚本代码来实现。js获取上传文件大小的方法示例代码:<!--表单数据--><form name="form1" id="form1"&g

前端设计

FormData 简单介绍与用法

FormData是XMLHttpRequest Level 2提供的一个接口对象,用以将数据编译成键值对,以便于XMLHttpRequest来发送数据。它可以用来模拟来添加,删除或判断表单数据,还可以用于文件的上传操作。FormData 使用方法1、FormData 用来处理一个html表单数据例:<!--表单数据--><

前端设计

Jquery动态生成form表单并提交的几种方法

下面列几种利用jquery插件实现创建form表单,并自动提交数据的方法,一般在隐藏的数据提交并跳转页面时使用,非常的方法实用。jquery动生成form表单并提交的方法方法1:先来个稍微复杂点的,很多元素都是动态的写入form表中的,然后再将form表单写入到dom文档流中,进行提交的!示例代码://创建form表单var form =

前端设计

js中截取数组的方法

js中截取数组时要使用 slice() 方法,它可以从指定的数组中返回选定的元素,而不用改变原有的数组,非常的简单方便。js中slice() 方法slice():从已有的数组中返回选定的元素,而不用改变原有的数组。语法:array.slice(start, end)参数:start:规定截取的位置,如为负数表示从数组的末尾开始。end:截

前端设计

JS从数组中随机取出多个不同元素的方法

利用JS脚本从数组中随机取出多个不同的元素,其实非常的简单。只需要打要处理的数组进行打乱,然后在打乱的数组中截取指定的元素即可,下面是案例,大家可以参考一下。JS从数组中随机取出多个不同元素的方法1、定义一个打乱数组的方法//定义一个打乱数组的方法function shuffle(array) {var m = array.length,

前端设计

html中checkbox与radio样式美化的简单实例

html元素中checkbox与radio元素的样式在每个浏览器中显示的效果是不同的,为了统一它们在各个品牌浏览器中的显示样式,我们可以对它们做个简单的美化。html checkbox 元素美化实例:使用纯CSS代码就可以实现 checkbox 元素的美化,只需要隐藏掉 checkbox 选择元素,并使用css中的相邻兄弟选择器,来控制他

前端设计

利用JS代码实现HTML转义与反转义的方法

在表单提交的数据中如果含有html代码片段,为了保证数据入库的安全性,需要对提交的内容做一下html转义,下面就来说说利用JS代码进行HTML代码的转义与反转义的方法。JS 实现HTML转义与反转义的方法例1:js对html进行转义示例代码:var html = '<p>feiniaomy.com</p>&

1 2 3 4 5 末页
点击下拉

ZBLOG主题/插件定制开发流程

ZBLOG主题/插件定制开发流程