jquery教程专题
Jquery设置元素的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",tr......
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'){ p......
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:05Jquery动画效果总结
Jquery中有各种已经封装好的动画效果方法，清楚的了解这些动画效果能更简单快速的开发一些比较酷的效果，下面将Jquery中比较常用的动画效果做一下简单的总结。 （1）show()和hide() 显示和隐藏，同时修改高度、宽度、以及不透明度。 （2）toggle() 控制显示或者隐藏，能很好的代替show()和hide()。 （3）fadeIn()和fadeOut() 只是改变不透明度。 （4）fadeTo() 只改变不透明度至某一值。 （5）slideUp()和slideDown() 只......
2014-03-28 22:37:21Jquery判断页面是否已经加载了Jquery文件
动态加载的js代码，如果网页中包含有Jquery代码，一般首先需要判断一下页面是否有加载Jquery文件，如果加载了，直接写js代码，如果没有加载，还得先加载一下Jquery代码，然后才可以使用一些Jquery的方法。 注意此处说的动态加载js代码是针对如下这种情况的： <script type="text/javascript" src="http://www.phpernote.com/echoJs.php"></script> <!--echoJs.php文件中的代码输出的是js代码--> 回归正题，那么如何判断当前......
2014-03-23 22:15:49Jquery特效两边固定的对联广告效果
分享一个网站两边对联广告效果（兼容IE firefox等各浏览器），本效果特点如下： Jquery实现，相对于网上流传的一些对联效果，本效果代码简练易懂，仅8行但兼容各浏览器，可按照自己的需求随意更改。 具体效果如下图，另外下面提供有下载地址 下载地址
2014-03-16 22:26:43Jquery $.ajax $.post或者$.get如何提交checkbox的值
form表单中包含有checkbox这种表单项的时候，直接提交处理很简单，只需在程序中处理结果即可。但使用Jquery的ajax提交时该如何处理呢？下面通过一个例子说明一下。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Jquery $.ajax $.post或者$.get如何提交checkbox的值</title> <script type="text/javascript" src="http://www.phpernote.com/js/Jquery.min.js";></script> ......
2014-03-06 22:02:05Jquery动画效果简单总结
本文将对Jquery中的动画效果做一个简单的总结。 （1）Jquery中常见的几种动画效果 方法名 说明 Hide() 跟 show() 同时修改多个样式属性：高度、宽度、不透明度 fadeIn(),fadeout() 只修改不透明度 slideUp() 和 slideDown() ......
2014-02-21 23:04:51Jquery动画删除效果
写js的时候经常会碰到删除某个节点，用Jquery处理这个事情很简单了，直接找到该节点，然后使用remove方法就行了，但为了追求用户体验，下面说一下如何将删除这个过程动态化，就是渐渐的删除，具体代码如下： $('#phpernote').fadeOut('fast',function(){ $('#phpernote').remove()(); }); 以上代码可以解释为先使用淡出效果来隐藏id="phpernote"的DOM，待该DOM完全隐藏后就执行删除该DOM操作。隐藏的过程使用了fadeOut方法......
2014-02-21 22:46:46Jquery中阻止事件冒泡方式及其区别
Jquery 提供了两种方式来阻止事件冒泡，下面就来说一下这两种方式以及具体的应用案例。 方式一：event.stopPropagation(); $("#div1").mousedown(function(event){ event.stopPropagation(); }); 方式二：return false; $("#div1").mousedown(function(event){ return false; }); 这两种方式区别如下： return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，......
2014-01-23 22:00:43Jquery获取浏览器窗口的可视区域高度和宽度,滚动条高度
Jquery获取浏览器的各种高度总结，现在才发现以前用js获取这些数据是多么的麻烦，Jquery一句话就搞定了还把各浏览器的兼容性问题也给解决了。 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(document.body).height());//浏览器时下窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border p......
2014-01-06 22:10:07Jquery弹出窗口插件(兼容所有浏览器)分享
由于工作中经常碰到页面需要弹窗这种效果的，于是从网上下载的一些弹窗效果研究了下，总感觉有些弹窗效果虽然很酷，但问题很多，更要命的是代码一大堆大堆的，看着很头痛，于是根据实际需要自己用Jquery写了一个弹窗效果并做成了插件的形式，有需要的可以下载下来看看。 Jquery弹出窗口插件(兼容所有浏览器)效果 需要说明的是本例实现的比较粗糙，读者可以根据自己的实际情况做相应的修改，代码挺简单，看得懂Jquery代码一定能看......
2014-01-04 22:11:59Jquery插件开发方法分享
首先说明的是Jquery插件的开发包括两种：一种是类级别的插件开发，即给Jquery添加新的全局函数，相当于给Jquery类本身添加方法。Jquery的全局函数就是属于Jquery命名空间的函数；另一种是对象级别的插件开发，即给Jquery对象添加方法。下面就两种插件的开发方法做一些分享。 1、类级别的插件开发 类级别的插件开发最直接的理解就是给Jquery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于j......
2014-01-02 21:56:19Jquery ajax防止重复提交的办法
本篇文章主要分享下在使用Jquery ajax时防止重复提交的办法。 其实方法很简单，就是在用户点击了提交按钮之后将按钮设置为不可点击即可，具体代码如下： $('#submit').click(function(){ var objButton=$(this); var content=$('#content').val(); $.ajax({ url:web_url+'Jquery.php', type:'post', cache:false, data: 'action=submit&content='+content, beforeSend:function(){//触发ajax请求开始时执......
2013-08-23 21:21:41Jquery性能优化指南(1)
本篇文章主要介绍一些基本的Jquery性能优化方面的知识。 1，总是从ID选择器开始继承 在Jquery中最快的选择器是ID选择器，因为它直接来自于JavaScript的getElementById()方法。 例如有一段HTML代码： <div id="content"> <form method="post" action="#"> <h2>交通信号灯</h2> <ul id="traffic_light"> <li><input type="radio" class="on" name="light" value="red" />红色</li......
2013-08-01 07:11:23Jquery当前节点之前插入节点
Jquery插入dom节点的方法很多，这里主要说下在Jquery中实现在当前节点之前插入节点的方法。 Jquery中在匹配的节点之前插入节点的方法有before() insertBefore()两个。 before() 方法在被选元素前插入指定的内容。 语法 $(selector).before(content) 使用示例如下： $('.insert').click(function(){ var str='<div>插入内容</div>'; $('#phpernote').before(str); }); 当前节点之前插入的示例： $('button').click(......
2013-07-25 23:06:27DW CS5 Jquery代码提示插件
喜欢使用Dreamweaver（业内简称dw）做php开发的朋友应该都知道dw是从6.0开始才支持Jquery代码提示的。那么对于电脑上安装的是dw cs5而又需要Jquery代码提示的该怎么办呢？将cs5卸了然后安装6吗？这个方法不是很妥，毕竟现在dw cs软件已经是几百兆的了，如果卸载不完全再安装的话，会出现各种问题。 下面本文就分享一下如何让 Dreamweaver CS5 也支持Jquery代码提示的功能。 （1）首先说明的一下这个是个插件，所以第一步需要下载......
2013-07-24 23:23:48Jquery倒计时效果插件
这个案例是使用Jquery实现的一个比较常见的倒计时效果，现实中我们经常会在购物网站上看到某商品定时开抢或某活动开始等，基本都是这么实现的，下面首先看一下这个倒计时效果图！ 下面是具体的实现代码： <html xmlns="http://www.phpernote.com/php-template-framework/850.html"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Jquery倒计时效果插件</title> <style type="te......
2013-07-20 23:57:00Jquery QQ 表情插件分享
最近因项目的要求需要在输入留言的文本框中支持输入QQ表情，这种效果已经很常见了，下面将自己在网上找到的一个使用Jquery实现的qq表情插件做一下分享。 首先看一下这个qq表情插件的效果图吧！ 下面是具体的实现代码（这里只贴了代码，下面提供有完整的下载包地址）： <html xmlns="http://www.phpernote.com/javascript-function/661.html"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"......
2013-07-11 23:03:12Jquery模拟select下拉框效果
最近开发一网站的过程中碰到个需求，没有使用传统的select下拉框，而是使用了现代比较美观的一些元素设计了一个下拉框。对于这种东东，第一反应就是使用Jquery来模拟了，还好，网上找了下，很快就找到了，而且效果还不错，这里和大家分享一下一个使用Jquery模拟的select下拉框的效果。 首先看一下效果图吧！ 下面是具体的源码！有兴趣的朋友自己看吧！应用到自己的项目中去还是非常容易的。 <html xmlns="http://www.phpe......
2013-07-04 23:29:38Jquery live change事件在IE下失效的解决方法
Jquery live方法的作用是向动态生成的内容添加事件响应，具体这里距不多说了，有兴趣的可以参照本站这篇文章： Jquery向动态生成的内容添加事件响应（Jquery live方法简介） 但是昨天却发现这个live方法在ie浏览器下对change事件没有作用，经过几番折腾，终于将这个问题解决，下面是Jquery live change事件在IE下失效的解决方法。 $("#phpernote select").live("change",function(){ //处理内容 }); 以上这段代码在火狐......
2013-06-25 00:03:34Jquery库与其他库冲突的解决方法
在使用Jquery开发的时候，可能还会使用到其他的JS库或插件，比如Prototype，但多库共存时可能会发生冲突导致发生各种意外。下面就和大家分享几种Jquery库与其他库发生冲突时的解决方法。 一、 Jquery库在其他库之前导入，直接使用Jquery(callback)方法如： <html xmlns="http://www.phpernote.com/php-function/849.html"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Jquery库......
2013-06-21 23:47:41js报TypeError $(...) is null错误，Jquery失效的原因及解决办法
最近在工作中发现个问题，原本好好的网页，写了一些自己的Jquery代码之后，竟然总是不起作用，无论写的多么简单，都不起作用，似乎Jquery失效了一般，在火狐下调试看了下，页面报TypeError $(...) is null这种错误，找了半天原因最后发现竟是页面中加载的一个插件给捣的鬼，是它将Jquery的$方法给覆盖了。对于这个问题，现在分享两种解决方法。 （1）删冲突插件，Jquery作为基础库，当然是没有理由被删了。这个方法最直接了。 ......
2013-06-20 23:23:12
- 站内搜索
- jquery教程专题
- jQuery 是一个快速、简单的JavaScript library， 它简化了HTML 文件的traversing，事件处理、动画、Ajax 互动，从而方便了网页制作的快速发展。 jQuery 是为改变你编写JavaScript 的方式而设计的。本页面汇聚了 jquery 各方面的技术知识，提供了比较流行的jquery插件下载，是想要学习jquery的朋友们的入门级教程。