标签： JQuery

jQuery优雅Post提交

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

JQuery实现checkbox状态切换（Toggle）

9.2k 前端 发表评论
点击查看效果演示。 有如下一段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定时自动消失提示框/弹出框

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

JQuery Post转义提交HTML模板

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

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

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

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

9.9k 前端 , 一条评论
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方法总结

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

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

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

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

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

jQuery封装插件开发入门教程

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