jquery教程专题
js将form表单元素包装成json对象(Jquery获取表单的所有元素组成json数据)
js将form表单元素包装成json对象(Jquery获取表单的所有元素组成json数据)。 例如： <form id="addOrEditProjectForm"> <input type="text" id="name" name="name" placeholder="www.phpernote.com" /> <input type="text" id="age" name="age" placeholder="10" /> </form> var jsonData = {}; $($('#addOrEditProjectForm').serializeArray()).each(function (idx, obj) { jsonData[obj.name] = obj.value; }); 处理......
2023-12-10 08:48:47Jquery 实现简洁实用的弹窗代码
Jquery 实现简洁实用的弹窗代码，两种方法。 1. position = absolute 版，这种形式的有个缺点是弹窗会随着滚动条的滚动而滚动，因此仅做参考，不建议使用。 css 代码： .oppoBg{width: 100%;height:100%;position:absolute;background-color: #000;top:0;left:0;opacity: 0.6;z-index:10;margin:0;} .oppoBox{position:absolute;background-color: #fff;z-index: 11;margin:0;} js 代码（下面这段 js 代码记得包在 $(functi......
2023-05-06 16:11:07使用Jquery ajax实现文件上传
使用Jquery ajax实现文件上传，只贴关键代码。 html 代码： <input type="file" id="phpernote_pop_uploadfile" multiple /> javascript 代码： $('body').on('change', '#phpernote_pop_uploadfile', function () { var file = new FormData; file.append('file', $('#phpernote_pop_uploadfile')[0].files[0]); $.ajax({ url: 'http://localhost:8051/', type: 'POST', cache: false,......
2022-09-15 10:36:04Jquery实现投票占比特效
Jquery实现投票占比特效，具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jquery实现投票占比特效</title> <style type="text/css"> #ProgressBarBox{vertical-align: middle;} #ProgressBarBox div {float:left;} #processBar{width:6px;height:10px; background-color: #FFFFFF;} #processBar div{height:100%;} #barOk{float:l......
2020-06-28 17:41:26Jquery实现的简单百分比进度条效果示例
Jquery实现的简单百分比进度条效果示例，具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jquery实现的简单百分比进度条效果示例</title> </head> <script type="text/javascript" src="http://www.phpernote.com/js/Jquery.min.js"></script> <script type="text/javascript"> var progressId = "ProgressBarID", time = 30; function setProgressBar(progress) { ......
2020-06-28 17:12:38Jquery ajax再封装使用方法
有时候我们需要统一整个项目的ajax请求格式，比如在所有的ajax请求中附加上一些必须的参数，这时就不可能一个一个的去加了，我们可以在Jquery的ajax方法的基础上再封装一层做统一处理，具体代码如下，供参考： /** * ajax post 提交 * @param param 参数(json格式) * @param successCallback 成功后的回调函数 * @return * @author www.phpernote.com */ function sendAjax(param, successCallback) { if (param) { ......
2020-04-28 11:05:05Jquery 让DIV显示后延时几秒后消失
Jquery 让DIV显示后延时几秒后消失。 1. 最常用的方法 $(function () { $("divid").show(); setTimeout(function () { $("divid").hide(); }, 6000); }); 2. 第二种方法 a.delay函数式Jquery1.4.2新增函数 b.hide函数里必须带有参数0，不然不起作用 $(function() { $("#ddiv").show().delay(6000).hide(0); });
2020-03-30 10:55:16Jquery删除一个元素后淡出效果展示删除过程的方法
Jquery删除一个元素后淡出效果展示删除过程的方法，html结构如下： <li> <div class="qiniuImgIcon"> <a rel="lightbox" href="#"> <img src="images/image_icon.png"> </a> </div> <div class="fileName"><p>5b84ed08a13f7.jpg</p></div> <div class="fileSize"><p>2.3 MB</p></div> <div class="filePutTime"><p>2020-03-23 18:21:25</p></div> <div class="operateAct">......
2020-03-30 10:47:34Jquery 获取客户端ip地址 和 地区位置
搜狐IP地址查询接口（默认GBK）：http://pv.sohu.com/cityjson 搜狐IP地址查询接口（可设置编码）：http://pv.sohu.com/cityjson?ie=utf-8 使用搜狐接口demo: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../plugins/Jquery/Jquery-1.12.4.min.js"></script> <script src="http://pv.sohu.com/cityjson"></script> </head> <body> <p id="ip"></p> <......
2019-11-14 16:29:02Jquery的click 事件点击一次会累加执行多次的解决方法
用Jquery绑定一个按钮click事件后，第一次点击后，一切正常，第二次点击，竟然执行两次，以后累加越来越多。 后来查看文档发现 Jquery click 不是替换原有的function ，而是接着添加，所以才会执行次数越来越多。 所以，可以在绑定click函数之前，先解绑或者说是移出以前绑定的click，然后再添加绑定。 解绑定方法 $("...").unbind('click'); $("#id").unbind('click').click(function(){} $("#id").unbind('click').on("cli......
2019-11-06 14:28:54onclick调用函数中的$(this)未指向当前节点——Jquery
在写html时，对button绑定了onclick事件，如下： <input type="button" value="修改" οnclick="changeContent()"> 注意：此时的onclick中函数未传递任何参数 在function中我们尝试获取input这个节点信息： function changeContent(){ alert($(this).tagName; } 在chrome中运行后我们发现返回的是undefined，也就是说获取到的不是input节点 查找资料后发现： 写在元素上onclick里面的函数changeContent，函数里面使......
2019-08-29 13:44:29用phpQuery像Jquery一样解析html代码
简介 queryList 如何在php中方便地解析html代码，估计是每个phper都会遇到的问题。用phpQuery就可以让php处理html代码像Jquery一样方便。 项目地址：https://code.google.com/p/phpquery/ github地址：https://github.com/TobiaszCudnik/phpquery DEMO 下载库文件：https://code.google.com/p/phpquery/downloads/list 我下的是onefile版：phpQuery-0.9.5.386-onefile.zip 官方demo：https://code.google.com/p/phpquery/so......
2019-02-12 11:20:47Jquery post跨域请求数据
原先一直以为要实现跨域请求只能用jsonp，只能支持GET请求，后来了解到使用POST请求也可以实现跨域，但是需要在服务器增加Access-Control-Allow-Origin和Access-Control-Allow-Headers头。下面说明下两个不同的方法实现的方式和原理。 JSONP实现跨域 常用的Jquery实现跨域调用 $.ajax({ url: "http://www.phpernote.com/php/crossdomain/index.php", dataType: "jsonp", jsonp: "callback", context: document......
2019-02-12 11:14:32js,Jquery正则验证不能含有中文的方法
这次给大家带来在JQ中正则验证不能含有中文的方法，在JQ中正则验证不能含有中文的注意事项有哪些，下面就是实战案例，一起来看一下。 本文实例讲述了正则验证不能含有中文的实现方法。分享给大家供大家参考，具体如下： Jquery利用正则验证不能含有中文 var myReg = /^[a-zA-Z0-9_]{0,}$/; if (!myReg.test(input.val())) { $.validation.tip(false, input, "用户名不能含有中文或特殊字符"); return; }
2018-12-15 12:26:00分享一个弹幕效果，Jquery弹幕插件
分享一个Jquery弹幕效果，具体代码细节就不分析了，经整理代码已经极简化了，有兴趣的可以参考下，文末提供了效果下载，可看完整的弹幕效果。 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>Jquery弹幕效果插件</title> <link rel="stylesheet" type="text/css" href="barrager.css"> <script type="text/javascript" src="Jquery-1.12.4.min.js"></script> <script type="tex......
2018-04-10 17:37:50js(Jquery)实现鼠标拖动DIV功能
本文分享一个使用js实现的鼠标拖动div的效果，不同于网上其他的案例，这里实现的是鼠标按在菜单上移动，整个DIV跟着移动的效果。具体细节就不分析了，自己看下面的代码吧！ <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> <script src="http://www.phpernote.com/js/Jquery.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> * {margin: 0;p......
2018-04-02 10:11:17Jquery 模拟点击事件，自动触发事件
有时候，需要通过模拟用户操作，来达到单击的效果。例如在用户进入页面后，就触发click事件，而不需要用户去主动单击。 在Jquery中，可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn的按钮的click事件。 $('#btn').trigger("click"); 这样，当页面加载完毕后，就会立刻输出想要的效果。也可以直接简写click()，来达到同样的效果： $('#btn').click(); 触发自定义事件 trigger()方法不仅能触发浏......
2017-10-07 08:13:51Jquery click()方法模拟点击事件对a标签不生效的解决办法
a标签正常使用方式 <a href="www.phpernote.com"></a> 问题分析 点击A标签本身，并不会触发跳转到指定链接的事件，就是说，我们平时都是点击的A标签中的文字了。所以要想用JS模拟点击A标签事件，就得先往A标签中的文字添加能被JS捕获的元素，然后再用JS模拟点击该元素即可。 打印$("a")[0]，得到的是http://www.phpernote.com，但实际上$("a")[0]是一个object对象，或许说是DOM对象更贴切一些。 解决方案 解决方案一 documen......
2017-10-05 11:45:53带参数的Jquery插件的开发方法
带参数的Jquery插件的开发方法。 1.在Jquery命名空间内声明一个特定的命名。 $.fn.myStyleOne = function() { //在这里输入你的插件执行代码 }; 我们可以这样调用： $('#myDiv').myStyleOne(); 2.接收参数来控制插件的行为； 来为我们的myStyleOne插件添加指定前景和背景色的功能，我们需要在函数中允许一个object类型的选项设置。如下所展示的那样： $.fn.myStyleOne = function(options) { v......
2017-03-02 14:29:07Jquery模拟title提示效果
当文字字符长度被限制后，总有些长标题会被截断，用title提示虽简单但会造成页面html代码的冗余，这里用Jquery做了一个模拟title的提示效果，具体代码如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Jquery实现的简单文字提示效果</title> <script src="http://www.phpernote.com/js/Jquery.min.js" type="text/javascript"></script> <style type="text/css"> #......
2016-09-26 17:32:40Jquery设置元素的readonly和disabled
Jquery的api中提供了对元素应用disabled和readonly属性的方法，在这里记录下。如下： 1.readonly $('input').attr("readonly","readonly")//将input元素设置为readonly $('input').removeAttr("readonly");//去除input元素的readonly属性 if($('input').attr("readonly")==true)//判断input元素是否已经设置了readonly属性 对于为元素设置readonly属性和取消readonly属性的方法还有如下两种： $('input').attr("readonly",t......
2015-06-16 21:04:49Jquery获取checkbox的attr(checked)一直为undefined问题的解决办法
使用 Jquery 判断 checkbox 是否选中，大家估计马上就会想到如下方法： $("#phpernote").attr("checked") 但是今天却发现这个语句总是返回undefined，非常不解，网上查了下，发现原来是这样的。 这个方法在 Jquery1.6 版本及以上版本便对此做出了修改，修改的原因是： checked属性在页面初始化的时候已经初始化好了，不会随着状态的改变而改变。 也就是说如果checkbox在页面加载完毕是选中的，那么返回的永远都是checked（我......
2015-06-16 09:21:08Jquery选择器中的空格、大于号、加号、波浪号的意思解析
经常看到Jquery代码中有一些比较不太熟悉的写法，比如空格，大于号什么的。今天就碰到个加号的，看半天没看懂，决定今天把这个问题总结一下。有需要的朋友可以参考一下。 空格：$('#phpernote span') 表示获取id=phpernote下的所有的span节点，所有的子孙。 大于号：$('#phpernote > span') 表示获取id=phpernote下的所有第一层span的节点，即第一代，隔代不获取。 加号：$('#phpernote + .com') 表示获得id=phpernote节点的......
2014-08-25 23:51:14基于Jquery控制的左右滚动,自动滚动效果
分享一个基于Jquery控制的左右滚动,自动滚动效果。效果图如下： 代码一如既往的简洁易懂，有需要的可以根据自己的情况稍作修改即可直接使用。效果下载地址如下： 基于Jquery控制的左右滚动,自动滚动效果
2014-08-11 22:23:43Jquery操作同组元素的第N个元素的方法
Jquery操作同组元素的第N个元素的方法。举例如下： 在 class="phpernote" 下有 3个 ul，现在希望给每个ul下的第5个li元素添加 class="com" 具体Jquery代码： $(".phpernote ul li:nth-child(5)").addClass("com"); 已经成功给每个ul下的第5个li添加class为com 当然，也可以直接添加 CSS 代码： $(".phpernote ul li:nth-child(5)").css({"padding-right":"5px"}); nth-child：英文中的缩写，n-th，表示第几个，1,2,3分......
2014-07-01 22:50:26使Jquery更加高效的方法
讨论 Jquery 和 javascript 性能的文章并不罕见。然而，本文我计划总结一些速度方面的技巧和我本人的一些建议，来提升你的 Jquery 和 javascript 代码。好的代码会带来速度的提升。快速渲染和响应意味着更好的用户体验。 首先，在脑子里牢牢记住 Jquery 就是 javascript。这意味着我们应该采取相同的编码惯例，风格指南和最佳实践。 首先，如果你是一个 javascript 新手，我建议您阅读 《24 JavaScript Best Practices for Begin......
2014-05-13 22:38:31Jquery toggle类方法的总结
Jquery的出现让web开发的工作变得更加简单快速。以前需要写一堆js代码的地方，用Jquery几句代码就over了。下面作者就用Jquery的toggle方法快速实现工作中几种常见的js效果。仅列举示例说明，也算是对Jquery toggle类的方法的一个小总结。 （1）toggle 隐藏显示的切换效果应该是比较常见的。这个效果有多种实现方法，如下： var phpersnote=document.getElementById('phpernote'); if(phpersnote.style.display=='block'){ ph......
2014-05-10 23:00:40Jquery怎么判断toggle状态
Jquery toggle方法的过程中，怎么知道现在的状态是show还是hide，目测吗？肯定是不行的。正确的方法是使用is方法判断是否是hidden状态。例如： if($("#phpernote").is(":hidden")){ //当前是hide状态 }else{ //当前是show状态 }
2014-05-10 22:58:36Jquery排除选择元素的方法
Jquery选择器众多，使用选取某个DOM的方法有很多种，如何在选取的某个元素集上面做一些排除呢？下面通过几个实例说明： （1）选择所有的img元素，排除class=phpernote的元素的个数： $('img:not(.phpernote)').length();//或者$('img').not('.phpernote').length(); （2）获取id=phpernote下面所有没有class=com的li元素的个数 $('#phpernote li:not(.com)').size();//或者$('#phpernote li').not('.com').length(); （3......
2014-04-19 22:22:39Jquery判断checkbox是否选中
使用Jquery判断一组checkbox是否选中，以及如何如何使用js提交checkbox选中的值。具体代码如下： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://www.phpernote.com/js/Jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('input[type=button]').click(function(){ var result=new Array(),str=''; $......
2014-04-05 22:24:05
- 站内搜索
- jquery教程专题
- jQuery 是一个快速、简单的JavaScript library， 它简化了HTML 文件的traversing，事件处理、动画、Ajax 互动，从而方便了网页制作的快速发展。 jQuery 是为改变你编写JavaScript 的方式而设计的。本页面汇聚了 jquery 各方面的技术知识，提供了比较流行的jquery插件下载，是想要学习jquery的朋友们的入门级教程。