`
accpzgp
  • 浏览: 14247 次
  • 性别: Icon_minigender_1
  • 来自: 天津
最近访客 更多访客>>
社区版块
存档分类
最新评论

jquery常用技术

 
阅读更多
1.选择器   
    (1)通配符:   
    $("input[id^='code']");//id属性以code开始的所有input标签   
    $("input[id$='code']");//id属性以code结束的所有input标签   
    $("input[id*='code']");//id属性包含code的所有input标签   
    (2)根据索引选择   
    $("tbody tr:even"); //选择索引为偶数的所有tr标签   
    $("tbody tr:odd");  //选择索引为奇数的所有tr标签   
    (3)获得jqueryObj下一级节点的input个数   
    jqueryObj.children("input").length;   
    (4)获得class为main的标签的子节点下所有<a>标签   
    $(".main > a");    
    (5)选择紧邻标签   
    jqueryObj.next("div");//获取jqueryObj标签的后面紧邻的一个div,nextAll获取所有   
    (6)根据索引选择   
    $("div").eq(0);//获取第一个div标签   
2.筛选器   
    (1)not   
    $("#code input:not([id^='code'])");//id为code标签内不包含id以code开始的所有input标签   
3.其他   
    (1)创建一个文本框   
    var inputObj = $("<input type='text'/>");   
    (2)取得文本框内容   
    jqueryObj.html();//html   
    jqueryObj.text();//纯文本   
    (3)取得标签属性值   
    jqueryObj.val();//取得标签value值   
    jqueryObj.attr("属性名如:name");//取得标签属性值   
    (4)向dom节点添加对象   
    inputObj.appendTo(jqueryObj); //将新创建的对象追加到jqueryObj里   
    inputObj.trigger("focus").trigger("select");//使文本框插入之后被选中
    (5)改变CSS样式
    inputObj.css({zIndex:3}); //给样式赋值
    inputObj.css("zIndex");
    (6)延迟   
    var timeoutId = setTimeout(function(){  },300);//延迟300毫秒,再执行函数   
    clearTimeout(timeoutId);//解除延迟,使未执行的函数不再执行   
    (7)定时间隔时间
    var timerId = setInterval(function(){  },300);//每间隔300毫秒,再执行函数  
    clearInterval(timerId);//解除定时,使未执行的函数不再执行 
    (8)动画
    inputObj.animate{"top":3,"left":3},300,function(){ });
4.事件   
    //处理文本框上的键盘操作   
    jqueryObj.keyup(function(event){   
        var keyCode = event.which;//获取当前按下键盘的键值,回车键为13   
    }   
    mouseover(fn),mouseout(fn)//鼠标移进,移出    
5.效果   
    show(),toggle(),slideDown(),slideUp(),slideToggle(),fadeIn(),fadeOut(),fadeTo()  
6.工具函数   
    $('#someField').val($.trim($('#someField').val()));//消除空格,语法:$.trim(value)   
7.常用函数封装   
    (function($){   
        $.extend({   
            //操作多个多选框   
            controlAllCheckBox:function(tableId,isSelectAll){   
                if(tableId==undefined){   
                    throw new Error("tableId 不能为空");               
                }   
                else{   
                    if(isSelectAll==undefined){   
                        throw new Error("isSelectAll 不能为空");               
                    }   
                    else{   
                        if(isSelectAll==true){   
                            $("#"+tableId+" :checkbox").each(function(){   
                                $(this).attr('checked','true');   
                            })   
                        }   
                        else{   
                            $("#"+tableId+" :checkbox").each(function(){   
                                $(this).attr('checked','');   
                            })   
                        }   
                    }   
                }   
            },   
            //取得选中的checkbox中的id   
            getCheckedIds:function(tableId){   
                var checkboxs = $("#"+tableId+" :checkbox:checked");   
                if(checkboxs.size()==0){   
                    throw new Error("没有选中记录");             
                }   
                else {   
                    var ids = "";   
                    checkboxs.each(function(){   
                        if(ids==''){   
                            ids+=$(this).attr('id');   
                        }   
                        else{   
                            ids+=","+$(this).attr('id');   
                        }   
                    })   
                    return ids;   
                }   
            }   
        })   
    })(jQuery); 


分享到:
评论

相关推荐

    jQuery常用技术点

    ### jQuery 常用技术点详解 #### 一、jQuery 选择器 jQuery 提供了一系列强大的选择器,这些选择器可以极大地简化 DOM 操作过程,提高开发效率。 1. **基本选择器** - `$(this)`:表示当前 HTML 元素。 - `$("*...

    jQuery常用技术

    适合jquery的初步学习和开发时可以查看

    常用的几个jquery版本文件

    本资源包含了一些常用的jQuery版本文件,这些文件可以帮助开发者在不同项目需求下选择最适合的jQuery版本。 1. jQuery的核心概念: jQuery的核心理念是"Write Less, Do More",它通过简洁的API提供了丰富的功能。...

    jquery常用组件打包下载

    这个“jquery常用组件打包下载”提供了一系列实用的jQuery插件,帮助开发者快速构建功能丰富的Web应用。 首先,让我们来了解一下jQuery库的核心特性: 1. **选择器**:jQuery提供了一种强大的CSS选择器语法,使得...

    jquery常用方法总结

    ### jQuery 常用方法总结 #### 一、页面元素的引用 在使用 jQuery 进行页面元素操作时,我们通常...以上是 jQuery 中常用的几种方法和技术要点,通过合理运用这些方法和技术,我们可以更加高效地进行网页开发和维护。

    《jQuery开发技术详解》教程PPT(全)

    同时,`$(document).ready()`确保DOM加载完成后执行代码,是jQuery中的常用实践。 动画效果是jQuery的一大亮点。`.animate()`函数允许创建自定义动画,而`.fadeIn()`, `.slideUp()`, `.slideDown()`等预定义动画则...

    十套常用的精美jquery插件

    本资源包含十套常用的精美jQuery插件,涵盖了多个实用场景,下面将逐一介绍。 1. **jQuery鼠标悬停图片放大突出内容显示代码** 这个插件主要用于图片展示,当用户鼠标悬停在图片上时,图片会放大并突出显示内容,...

    7款jQuery常用插件

    这里我们讨论的“7款jQuery常用插件”涵盖了不同功能,旨在提升用户体验和网页互动性。 1. **jQuery幻灯片插件Skippr**:Skippr是一款强大的幻灯片展示插件,它提供了丰富的自定义选项,如过渡效果、自动播放、导航...

    Jquery和jquery的常用插件

    **jQuery和jQuery插件详解** jQuery是一个高效、简洁且易用的JavaScript库,它极大地简化了JavaScript代码的编写,使得DOM操作、事件...理解并熟练掌握这些技术,对于提升Web应用的用户体验和开发效率具有重要意义。

    ajax jquery 常用图片

    在网页开发中,Ajax(Asynchronous JavaScript and XML)和jQuery是两种非常重要的技术,它们极大地提高了用户体验,使得页面能够在不刷新整个页面的情况下与服务器进行数据交互。jQuery是一个强大的JavaScript库,...

    jquery常用效果笔记

    ### jQuery常用效果详解 在日常的前端开发工作中,jQuery因其简单易用的特性而成为许多开发者的选择,尤其是在处理DOM操作、动画效果以及AJAX请求时。以下是对给定文件中的几个常见jQuery效果的深入解析: #### 1....

    JSJQUERY常用函数.pdf

    JSJQUERY常用函数.pdf

    Jquery常用正在表达式验证

    在Web开发中,jQuery是一个非常流行的...通过学习和熟练掌握这些技术,你可以为用户提供更加安全、友好的交互体验。在实际项目中,根据业务需求灵活运用正则表达式和jQuery验证功能,可以大大提高开发效率和产品质量。

    jquery常用的校验.rar

    本资料“jquery常用的校验.rar”正是针对这个主题,包含了一些关于jQuery校验的实践应用。 首先,jQuery的核心API中并没有内置的数据验证功能,但可以通过扩展或者使用第三方插件来实现。最常用的数据验证插件之一...

    jQuery常用特效功能示例源码(19个)

    jQuery是一种广泛应用于Web开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。...同时,这些示例也适合作为教学材料,帮助初学者快速掌握jQuery的核心技术。

    jquery 常用新闻焦点图片效果

    以上就是jQuery实现新闻焦点图的一些核心技术和步骤。通过结合HTML、CSS和JavaScript,我们可以创建一个功能全面且视觉效果出色的新闻焦点图片组件,提升网站的整体质感。在实际应用中,还需要根据具体需求进行定制...

    教案JSJQUERY常用函数.pdf

    教案JSJQUERY常用函数.pdf

    jQuery常用知识点总结以及平时封装常用函数

    ### jQuery常用知识点总结以及平时封装常用函数 jQuery是一个快速、小巧、功能丰富的JavaScript库,它通过封装和简化DOM操作、事件处理、动画和Ajax交互,极大地提升了网页开发的效率。本文将详细介绍jQuery中的...

Global site tag (gtag.js) - Google Analytics