jQuery学习笔记之2个小技巧

1.jQuery功能函数前缀

在javascript中，开发者通常会编写一些小函数来处理各种操作细节，例如在用户提交表单时，要将文本框最前端和最末端的空格内容清理掉。而javascript中没有类似trim()功能，在师院jQuery后，便可以使用trim()函数。

trim()函数是jQuery对象的一个方法，使用以下例子

代码如下:

<script type="text/javascript">
            var sString = "   1234567890";
            sString = $.trim(sString);
            alert(sString.length);
        </script>

执行结果

字符串sString的首尾空格都被jQuery取掉了。

其中

$.trim(sString)
相当于

jQuery.trim(sString)
jQuery类似这样的函数很多，而且涉及到javascript的方方面面。

2.解决window.onload函数冲突

由于页面html框架需要在页面完全加载后才能使用，因此在DOM编程时，window.onload被频繁使用，倘若页面中很多处需要使用此函数，其它js也需要包含window.onload函数，将导致很多冲突。

jQuery中的ready()方法很好的解决了上述问题，它能够自动将其中的函数在页面加载完成后自动运行。并且同一个页面可以使用多个ready()方法，而且不相互冲突。

例如：

代码如下:

<script type="text/javascript">
            $(document).ready(function() {
                $("table#mytable tr:nth-child(odd)").addClass("altcss");
            })
        </script>

对上述代码jQuery还提供了简写，可以省略其中的(document).ready部分

代码如下：

代码如下:

<script type="text/javascript">
            $(function() {
                $("table#mytable tr:nth-child(odd)").addClass("altcss");
            })
        </script>

这就是上文中表格隔行变色的代码。

赞 (0)

相关推荐

  • 14款经典网页图片和文字特效的jQuery插件-前端开发必备

    14款经典网页图片和文字特效的jQuery插件-前端开发必备

    不废话了,直接贴图片了,亲们可以点击查看演示和下载源码哦. 经典1.网页图片3d旋转jQuery代码 查看演示  下载插件 经典2.存css3实现的tabl选项卡代码 查看演示 下载插件 经典3.jQuery标签旋转代码 查看演示  下载插件 经典4.鼠标悬浮的图片选项卡代码 查看演示  下载插件 经典5.鼠标往下滚动时文字变大的css3代码 查看演示  下载插件 经典6.动画标签云网页代码 查看演示  下载插件 经典7.css3文字晃动代码 查看演示  下载插件 经典8.css3幻灯片代码 查

  • web前端开发JQuery常用实例代码片段(50个)

    本文给大家展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助你又快又好地把事情完成.这些都是我尽量记住的有着最佳性能的代码段,因此如果你发现你任何可以做得更好的地方的话,欢迎把你的版本粘贴在评论中!我希望你在这一文章中能找到有帮助的东西. 1. 如何创建嵌套的过滤器 //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下

  • jQuery提交多个表单的小技巧

    <script type="text/javascript"> $(function(){ $("#btnSubmit").click(function(){ $("form[name='form1']").submit(); $("form[name='form2']").submit(); }) }) </script> <form name = "form1" actio

  • 开发中可能会用到的jQuery小技巧

    1) 禁止右键 在开发 Web 应用的时候,有些情况需要禁用右键单击功能.使用此代码,jQuery 开发人员可以在网页上禁用鼠标右键点击.代码如下: 复制代码 代码如下: $(document).ready(function() { //catch the right-click context menu $(document).bind("contextmenu",function(e) { //warning prompt - optional alert("No rig

  • jquery操作复选框(checkbox)的12个小技巧总结

    1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$("input:[type='checkbox']:checked").val();或者$("input:[name='ck']:checked").val(); 2. 获取多个checkbox选中项$('input:checkbox').each(function() {        if ($(this).attr('che

  • 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你. Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ✓  16个独特的过渡效果

  • jquery图片延迟加载 前端开发技能必备系列

    目前,主要的购物网站都采用了这种加载方式.今天在一个网友的站里发现一个图片延迟加载的插件,很好用,在这里介绍一下. 先介绍一下图片延迟加载原理.我们需要先将图片的真实地址保存在一个自定义的属性中(属性名任你发挥吧,这里我用的是lazy-src),而图片的src属性中用一个占位图片来替代,这个占位图片当然是越小越好,它基本上只干活.不露面. 复制代码 代码如下: <img src="images/placeholder.png" lazy-src="images/real

  • 15个jquery常用方法、小技巧分享

    1.获取td的行标和列标 复制代码 代码如下: $(this).prop('cellIndex') 2.判断是否是回车按下 复制代码 代码如下: var myEvent = event || window.event;  var key = myEvent.keyCode;  if(key == 13){     //此时为回车按下          } 3.全选和反选 复制代码 代码如下: $("#selectall").click(function(){     if($(&quo

  • 关注jquery技巧提高jquery技能(前端开发必学)

    一个简单技巧的集合,帮你提升 jQuery 技能. Matt Smith 发起的一个小项目,目前已有 14 个 小技巧.伯乐在线会持续跟进更新. 回到顶部按钮 预加载图片 检查图片是否加载完毕 自动修复损坏的图片 Hover 上的 Class 开关 禁用 input 字段 停止链接加载 淡入淡出/滑动开关 简单的折叠效果 将两个 Div 设为相同高度 在新窗口打开外部链接 找到文本元素 切换可视与隐藏的触发器 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方

  • jQuery开发者都需要知道的5个小技巧

    1.禁用右键菜单 复制代码 代码如下: $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2.让字体闪烁 复制代码 代码如下: jQuery.fn.flash = function( color, duration ) { var current = this.css( 'color' ); this.animate( { color: 'rgb

  • 几个比较经典常用的jQuery小技巧

    几个比较经典常用的jQuery小技巧

    > 唔,这个主题挂的时间也够长的了,也该换换了,到时候找找看有没有合胃口的主题. > 话说,最近有点偏向 PHP 去了,我发现贪多嚼不烂,所以就又回到主题咯,(*^__^*) 嘻嘻. 1. Jquery 库的调用: > 呵呵,相信很多童鞋早就会了,不过还是得提一下,忘记就杯具咯. > 第一个是常用的 Google 托管处的 jQuery 库地址. > 而第二个则是 jQuery 官方网站的库地址,随时获取最新版,嘿嘿. 复制代码 代码如下: <script src=&q

  • Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)

    比如有禁止右键点击.隐藏搜索文本框文字.在新窗口中打开链接.检测浏览器.预加载图片.页面样式切换.所有列等高.动态控制页面字体大小.获得鼠标指针的X值Y值.验证元素是否为空.替换元素.延迟加载.验证元素是否存在于Jquery集合中.使DIV可点击.克隆对象.使元素居中.计算元素个数.使用Google主机上的Jquery类库.禁用Jquery效果.解决Jquery类库与其他Javascript类库冲突问题. 具体如下: 1. 禁止右键点击 复制代码 代码如下: $(document).ready(

  • 分享五个有用的jquery小技巧

    下文里技巧实现的效果虽然并不新鲜,但通过jQuery的封装,HTML实现了很大的清洁.清爽简洁又高效的代码任何时候都是开发者所醉心追求的终极目标,也许它简单,但是它能量巨大.一起来看看我们小编推荐给大家的五个非常实用的jQuery技巧. 1.禁用鼠标右键 $(document).ready(function() { $(document).bind("contextmenu", function(e) { return false; }); }); 当然jquery1.7版本以后bin

  • WEB前端开发都应知道的jquery小技巧及jquery三个简写

    一个简单技巧的集合,帮你提升 jQuery 技能.目前小编给大家整理了14个jquery小技巧. 目录结构 1回到顶部按钮 2预加载图片 3检查图片是否加载完毕 4自动修复损坏的图片 5Hover 上的 Class 开关 6禁用 input 字段 7停止链接加载 8淡入淡出/滑动开关 9简单的折叠效果 10将两个 Div 设为相同高度 11在新窗口打开外部链接 12找到文本元素 13切换可视与隐藏的触发器 下面给大家介绍每个小技巧的具体含义. 1.回到顶部按钮 通过使用 jQuery 中的 an

随机推荐