`
mengqingyu
  • 浏览: 333812 次
  • 性别: 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 是一款轻量级的 JavaScript 库,它的设计宗旨是“write less, do more”,即“写得更少,做得更多”。通过JQuery,可以实现以下功能: 1. **...

    jquery常用效果笔记

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

    jquery学习笔记及常用函数封装.zip

    《jQuery学习笔记及常用函数封装》 在编程领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本资料包“jquery学习笔记及常用函数封装.zip”包含了从JQuery基础...

    jQuery编程笔记

    ### jQuery编程笔记知识点详解 #### 一、jQuery概述 ...以上是对jQuery编程笔记中提到的知识点的详细解读,覆盖了从基础知识到高级应用的各个方面,有助于深入理解和掌握jQuery的使用方法和技术细节。

    jQuery学习笔记 jQuery API

    随着浏览器和Web技术的发展,jQuery也不断更新以保持兼容性和性能。理解不同版本之间的差异和适用场景,对于项目选择合适的jQuery版本至关重要。 ### 8. 性能优化 虽然jQuery简化了许多操作,但过度使用可能导致...

    JQuery笔记.docx

    通过以上介绍,我们了解了JavaScript及其重要组成部分——jQuery的基础概念和技术要点。JavaScript作为一种强大的客户端脚本语言,极大地丰富了网页的交互性和功能性,而jQuery作为JavaScript的一个扩展库,进一步...

    Ajax_JQuery笔记.rar

    1. **$.ajax()函数**:这是jQuery中最常用的Ajax函数,接受一个包含各种选项的对象作为参数,如URL、类型(GET或POST)、数据、成功回调函数等。 2. **$.get()和$.post()**:这两个函数简化了GET和POST请求,分别...

    JQuery笔记

    本篇笔记将深入探讨JQuery中的几个关键概念和技术细节。 #### 二、`$(document).ready()`详解 在JQuery中,`$(document).ready()`是非常重要的一个函数,用于确保DOM(文档对象模型)已经完全加载完毕,然后再执行...

    js_ajax_jquery笔记.docx

    Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。它通过JavaScript实现局部刷新,提高了用户体验,减少了网络带宽的消耗。Ajax的核心是...

    jQuery商城常用左侧悬浮导航定位代码.zip

    《jQuery在商城应用中的左侧悬浮导航定位技术解析》 在Web开发中,jQuery作为一个轻量级的JavaScript库,因其简洁的API和强大的功能而深受开发者喜爱。尤其在商城类网站中,为了提供良好的用户体验,左侧悬浮导航...

    JQUERY学习笔记2

    通过以下详细解析,我们不仅能够理解jQuery的基本用法,还能学会如何在实际项目中灵活运用这些技术。 #### 1. 文档加载事件:`$(document).ready()` `$(document).ready()`函数确保了在执行JavaScript代码之前,...

    jQuery技术三合一教程(电子书 + 理论总结+常用效果源码实践)

    理论篇:对选择器、事件、常用函数方法、外观效果、查找筛选、文档处理、Ajax处理的基础知识,以及《锋利的JQUERY》读书笔记精华完整版。 实践篇:Tab菜单栏源码、手风琴菜单源码、圆角效果源码、网页弹出对话框...

    jquery pagination使用(笔记)

    **jQuery Pagination 使用详解** 在网页开发中,分页是一种常见的数据展示方式,它能帮助用户更有效地浏览大量的信息。jQuery Pagination 是一个轻量级...通过学习和实践,你将能够自如地在自己的项目中应用这一技术。

    JavaScript及jQuery学习笔记(0)

    这篇学习笔记将探讨这两个技术的基础和关键概念。 首先,JavaScript是一种轻量级的脚本语言,它主要在客户端运行,允许网页对用户交互做出实时响应。JavaScript的核心特性包括变量、数据类型(如字符串、数字、布尔...

    狂神笔记,b站狂神说课程笔记大全(最新)

    狂神说上课笔记未删减 Java基础到技术升级 1、JavaSE:Java入门 2、JavaSE:基础语法 3、JavaSE:流程控制 4、JavaSE:方法 5、JavaSE:数组 6、JavaSE:面向对象 7、JavaSE:异常机制 8、JavaSE:常用类 9、JavaSE...

    HTML、CSS、JavaScript、Jquery、Node、Ajax、Vue学习笔记.zip

    每个部分都配有详细的笔记和示例代码,帮助学习者深入理解并掌握各项技术。此资源适合前端初学者系统学习,也适合有经验的开发者作为参考。通过这些学习笔记,开发者可以提升自身技能,更好地应对实际项目开发中的...

    最简单常用的jQuery右侧在线客服代码.zip

    总结,这个"最简单常用的jQuery右侧在线客服代码"是一个很好的学习和实践案例,它结合了jQuery、HTML5和可能的jQuery插件技术,为开发者提供了构建实时在线客服系统的基础。通过深入理解并实践这份代码,无论是初学...

    狂神说上课笔记未删减 Java基础到技术升级

    8、JavaSE:常用类 9、JavaSE:集合框架 10、JavaSE:IO流 11、JavaSE:多线程 12、JavaSE:网络编程 13、JavaSE:Gui编程 14、JavaSE:注解和反射 15、MySQL和JDBC 16、前端:Html5 17、前端:CSS3 18、...

    笔记本样式jQuery滑块特效代码

    在网页设计中,滑块是一种常用的元素,用于展示多张图片或内容,同时节省页面空间并提升用户体验。"笔记本样式jQuery滑块特效代码" 是一个创新的设计,它将传统的滑块功能与独特的笔记本风格相结合,为用户带来更...

Global site tag (gtag.js) - Google Analytics