jQuery优雅Post提交

本功能实现: 禁用form原本提交方式; 自动获取action属性; 自动serialize数据; 提交状态显示到提示框,1.2秒提示框自动消失; 提交失败或错误,页面不跳转; 提交成功,跳转到指定页面。 HTML代码: <form action="submit.php"> <input name="title" value="" /> <button type="submit">提交</button> </…

JQuery实现checkbox状态切换(Toggle)

点击查看效果演示。 有如下一段HTML代码,是一个checkbox复选框: <div class="line"> <label for="status"> <input type="checkbox" id="status" name="status" value="1" />开启 </label> </div> 我们希望点击div.line的时候,能够自动切换checkbox的状态。 这个实现起来也很简单,JS代码如下: <sc…

JQuery定时自动消失提示框/弹出框

在表单提交中,不论成功与否,好的体验都应该有弹出提示,效果: 在页面中央显示提示,1.5秒后消失,不影响页面的正常布局。 1 HTML代码 HTML代码显示提示内容,放在页面中任何位置。 <div class="alert"></div> 2 CSS代码 弹出框参考了 Bootstrap 的样式: .alert { display: none; position: fixed; top: 50%; left: 50%;…

JQuery Post转义提交HTML模板

最近遇到这样一个问题,在表单中有一个textarea文本框,用来保存HTML模板。 因为是HTML模板,所以会有<html>、<script>等标签,但是这样无法通过AJAX Post方式保存。 经过实验,<script是导致无法提交的根源。找到原因,解决办法就简单了,就是把<转义成HTML实体&lt;。 最新说明:这个最后发现,是__POST被后台的…

JQuery和Awesome实现炫酷【返回顶部】按钮

之前通过JQuery+纯CSS实现了返回顶部的功能,比较轻量级:JQuery+CSS实现【返回顶部】按钮,不需要图片。 现在我们再用JQuery+Awesome实现更炫酷的“返回顶部”按钮。 效果如下:      按钮的工作流程大致是:页面加载后按钮隐藏,向下拖动显现,鼠标悬浮时变色(颜色可以更改),点击返回顶部。 代码如下,复制成HTML文件保存即可看到效…

自定义JavaScript的alert()弹出框样式

JavaScript原始的 alert()弹出框效果很差。 于是想着自定义这个原始alert()的显示样式。 JQuery方式实现代码如下: <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> (function () { window.alert = function (text) { //解析…

JQuery的checkbox、radio、select方法总结

JQuery的checkbox,radio和select是JQuery操作的一个难点和重点,很多前端新手对其了解不是很透彻。时间久了不用,我在写的时候有时也难免对某些操作支支吾吾,记不清楚,现在,对其做一些简单的总结! 1 checkbox 现在我们以下面的html为例进行checkbox的操作。 <input id="checkAll" type="checkbox" />全选 <input name="su…

JQuery实现checkbox复选框同步勾选和取消

JQuery对checkbox的读写与其他input不太一样,很容易出错,浪费很多时间。 打个比方,要获取checkbox是否是checked状态,用.attr('checked') === true 是不奏效的,得用 .is(':checked') === true。 本例要实现checkbox同步勾选和取消,我们仅同步与当前主题data-url一样的checkbox: $('input[type=checkbox]').on('click', function()…

scrollTrack:jQuery实现页面滚动时菜单悬浮跟踪功能

这个插件主要实现的功能有: 根据页面内容方框生成目录(一般是类似h1、h2这样的标题) 生成的目录在滚动时悬浮在浏览器中间 滚动过程中,实时跟踪页面内容,并在目录中高效标题 解决悬浮水平滑动导致的内容遮盖 插件未压缩前2.5K,属于相当轻量级了,有5个选项,配置相当简单。 演示和下载 话不多说,先看 演示 点击 这里下载 用法 在…

jQuery封装插件开发入门教程

扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱。 入门 编写一个jQuery插件开始于,给jQuery.fn加入​​新的功能属性,这个属性的名称就是插件的名称。 jQuery.fn.myPlugin = function(){ //你自己的插件代码 }; 在JQuery中,jQuery.fn是jQuery.prototy…