zoukankan      html  css  js  c++  java
  • 转载 jQuery 整理的很详细,基本都在里面

    jQuery 函数

       
    CSS 函数
    $(a).css(name)     获取name属性值 

    $(a). css(name,value)      设置name的属性值

    $(a).css({})     设置多个css属性值

    $(a).css(name,function(){})     用函数的返回值设置多个CSS属性

    $(a).height()     获取a的高度

    $(a).height(value)    设置a的高度 

    $(a).innerHeight()     获取a的内容高度(除去border和padding)

    $(a).outerHeight()     获取a的外部高度(包括border和padding) 

    $(a).width()     获取a的宽度

    $(a).width(value)    设置a的宽度 

    $(a).innerWidth()     获取a的内容宽度(除去border和padding)

    $(a).outerWidth()     获取a的外部宽度(包括border和padding) 

    $(a).offset()     返回left和top两个整型值,此函数只对可见元素有效

    $(a).offset({top:n,left:n})     设置a的位置 

    $(a).position()     返回值包含两个变量,一个是left,一个是top,可供调用 

    $(a).scrollLeft()    

    $(a).scrollLeft(value)    

    $(a).scrollTop()     

    $(a).scrollTop(value)      

    jQuery 文档处理函数

    $(a).unwrap()     将a的父级元素去掉

    $(a).wrap(element[/funciton(){}])     将a包含在element元素中

    $(a).wrapInner(element[/funciton(){}])      将a的子内容(包括文本节点)用element包含起来

    $(a).clone()     克隆a

    $(a).append(b)     向a中添加b元素

    $(a).appendTo(b)     将a添加到b元素中

    $(a).prepend(b)     在a元素的内容前添加b

    $(a).prependTo(b)     将a元素添加到b元素的内容前

    $(a).detach([选择器])     将匹配到的a元素[以及a元素绑定的方法]删除

    $(a).remove([选择器])     将a元素的删除

    $(a).empty()     将a元素的内容清空

    $(a).replaceAll(b)     将b的内容用a替换

    $(a).replaceWith(b)     将a替换成b

    $(a).after(b)     在a之后插入b

    $(a).insertAfter(b)      将a在b之后插入

    $(a).before(b)     在a之前插入b

    $(a).insertBefore(b)     将a在b之前插入

    jQuery 筛选函数

    查找

    $(a).closest([选择器])     从a开始向上级匹配元素

    $(a).add(b)     将元素b添加到元素a中

    $(a).children([选择器])     从a开始向下级匹配元素

    $(a).contents()     匹配所有子节点,若a是一个iframe,则查找文档内容

    $(a).find(b)     找出a中的b元素

    $(a).siblings([选择器])     取得a的所有同辈元素

    $(a).next([选择器])     取得a元素后紧邻的同辈元素的集合

    $(a).nextAll([选择器])     取得a元素后的所有同辈元素的集合

    $(a).nextUntil([选择器])     查找a后所有的同辈元素,直到遇到匹配的那个元素为止

    $(a).pre([选择器])     取得a元素前紧邻的同辈元素的集合

    $(a).preAll([选择器])     取得a元素前所有的同辈元素的集合

    $(a).preUntil([选择器])     查找a前所有的同辈元素,直到遇到匹配的那个元素为止

    $(a).parent([选择器])     父元素

    $(a).parents([选择器])     祖先元素

    串联

    $(a).andslef()     加上a自己

     过滤

    $(a).eq(N)     从自己开始第N个元素

    $(a).filter(expr)     筛选出与expr匹配的a

    $(a).filter(function(){})   筛选出与函数返回值匹配的a

    $(a).has([表达式])     筛选出与表达式匹配的a

    $(a).hasClass

    $(a).is([表达式])     返回Boolean值

    $(a).map()     将一组元素转换成其他数组(不论是否是元素数组)
                             //var newArray=new Array($("input").map(function(){return $(this).val()}))
    $(a).not([表达式])     删除符合表达式的a
    $(a).slice(start[,end])     选取一个从start开始【,到end结束】的子集
     
    jQuery属性
     

    $(a).addClass(className)     为a添加class

    $(a).removeClass(className)      为a移除clas

    $(a).toggleClass(className)      为a切换class,若有则移除,若无则添加

    $(a).toggleClass(className,switch)     switch为boolean开关,根据switch来决定是否添加class

    $(a).html([str])     相当a.innerHTML返回值,若str参数存在,则相当于a.innerHtml=str

    $(a).attr(key,value[function(){}])     给a添加一个Html属性,属性的值为value,或者是function的返回值

    $(a).attr(key)     取得a的key属性的值     如<img src="a.jpg"/ >则$("img").attr(src)的值为a.jpg

    $(a).attr(key1:value1,key2:value,......)    给a添加多个属性

    $(a).removeAttr(key)     移除a的key属性

    $(a).text([str])     用法和$(a).html([str])相似,只是这里操作会获取a子元素标签的值

    $(a).val([str])     若a包含value属性,此函数可获取和设置a的value

    jQuery 数组、对象、字符串操作、浏览器

    $.each(a,function(i,n){})     a为数组或者对象,i为下标,n为值,此函数用来遍历数组或对象

    $.grep(a,function(i,n){})     function方法中写过滤的条件,此函数返回过滤后的数组或对象

    $.inArray(value,a)     返回value在数组a中的位置

    $.map(a,function(n){})     function中队a数组进行处理后返回一个新数组

    $.merge(a,b)     将a和b两个数组合并

    $.toArray($(dom))     将集合中的所有dom元素放在一个数组中返回

    $.unique(a)     删除a中的所有重复的元素

    $.trim(str)     去掉str中的首尾元素    

    $.browser[.version]     返回浏览器的类型[和版本号],返回值有safari、opera、msie、mozilla

    jQuery 测试操作

     
     
    obj是要测试的对象,返回一个Boolean值

    $.isArray(obj)      是否是数组

    $.contains(container,contained)     测试container是否包含contained

    $.isEmptyObject(obj)     测试是否是空对象

    $.isPlainObject(obj)    测试是否对象(用new Object 或者{}创建)

    $.isFunction(obj)     测试是否是一个方法


    jQuery.param 常用在URL
    jQuery.param(obj, [traditional])

    示例

    var params = { 1680, height:1050 };
    var str = jQuery.param(params);
    $("#results").text(str);

    结果

    <div id="results">
    width=1680&height=1050
    </div>


    jQuery 事件
    $(document).ready(function(){})在dom加载的时候就会触发动作。当body标签中含有onload时,会忽略ready

    $(a).blur(function(){})     a失去焦点,触发动作

    $(a).change(function(){})

    $(a).click(function(){})

    $(a).dblclick(function(){})

    $(a).error(function(){})

    $(a).focus(function(){})

    $(a).focuin(function(){})

    $(a).focuout(function(){})

    $(a).keydown(function(){})

    $(a).keypress(function(){})

    $(a).keyup(function(){})

    $(a).mousedown(function(){})

    $(a).mousemove(function(){})

    $(a).mouseup(function(){})

    $(a).mouseover(function(){})

    $(a).mouseout(function(){})

    $(a).resize(function(){})    当文档窗口大小改变时触发动作

    $(a).scroll(function(){})

    $(a).select(function(){})

    $(a).submit(function(){})

    $(a).unload(function(){})

    $(a).bind({e:function(){},e1:function(){},...})   为a绑定一个或者多个事件处理函数,e、e1等为事件;如click、blur等等

    $(a).bind(type,[data],function(){})     type为事件类型

    $(a).bind(type,[data])    bind的反操作

    $(a).one(type,function(){})     只执行一次事件动作

    $(a).hover(function(){},function(){})     第一个方法为mouseover,第二个function为mouseout

    $(a).toggle(function(){},function(),.......)     当a每点击一次,执行一次function,下次点击则执行下一个function函数

    jQuery 选择器
    $(":表单类型")    如:$(":button"),查找所有的Button

    $("redio:checked")    $("input:disabled[/enabled]")    $("select option:selectd")

    $("父级元素 子级元素")    $("父级元素>子级元素")    $("pre元素+next元素")    $("pre元素~all_after元素")

    $(".className")    $("#idName")    $("Element") 

    :animate    匹配正在执行动画效果的元素

    $("a:eq(number)")    匹配a的第number个元素

    $("a:even")    匹配索引值为偶数的a

    $("a:odd")    匹配索引值为奇数的a

    $("a:first")    匹配找到的第一个元素

    $("a:gt(number)")    匹配大于索引值大于number的元素

    $("a:lt(number)")    匹配小于索引值大于number的元素

    $(":header")    匹配h1、h2之类的标题元素

    $("a:last")

    $("a:not()")    匹配所有没有给定选择器的a元素

    $("a:hidden")    $("a:visible")    匹配所有不可见[/可见]的a

    $("a:contains(text)")    匹配含有text文本的a元素

    $("a:empty")    匹配不包含子元素或文本的元素

    $("a:has(b)")    匹配含有b的a元素

    $("a:parent")    匹配含有子元素或文本的元素a

    $("a[项目名*='值']")     //$("input[name*='user']")    匹配所有name中含有"user"的input

    $("a[项目名!='值']")

    $("a[项目名$='值']")    匹配某项目以特定值结尾的元素a

    $("a[项目名^='值']")    匹配某项目以特定值开始的元素a 

    $("a[项目名='值']")

    $("a[项目名]")    //$("div[id]")    匹配所有有id属性的div元素

    $("a[选择器1][选择器二][...]")    匹配满足多个条件的a元素

    $("a b:first-child")    //$("ul li:first-child")    匹配ul中的第一个li

    $("a b:nth-child(number)")

    $("a b:last-child")

    $("a b:only-child")    //如果b是a中唯一的子元素,则将被匹配

    jQUery 核心
    $(a).get([number])    返回包含a的所有元素的数组,number可以是数组的下标

    $(document).ready(function(){})    加载dom是执行方法

    $(document).css("样式属性名","样式属性值")    

    $(formName.elements).hide()    隐藏formName中所有的元素

    $(express[,context])    接受一个包含CSS选择器的字符串,然后用这个字符串去匹配一组数组

                 //$("div>p")    查找所有div中包含的p元素

                 //$("input:radio",document.formName)    查找所有formName表单中所有radio的表单项

    $("HtmlCode").appendTo(a)    在a元素中插入HtmlCode

    $(a).data("name","value")    在a元素上面存取数据

    $.data(a,name","value")    在a元素上面存取数据


    jQuery 1.4.2中常用动画函数用法
    [a为匹配的元素可是HTML的标签名(加引号),也可以是通过id获取到的模块]:

    speed为动画显示的时间,可以是毫秒数,也可以是“fast”、“normal”、“slow”三个参数之一

    $(a).show(speed,function(){})    显示a

    $(a).hide(speed,function(){})    隐藏a

    $(a).toggle(speed,function(){})    切换a的显示/隐藏  

    $(a).fadeIn(speed,function(){})    a元素渐显(透明度+display)

    $(a).fadeOut(speed,function(){})    a元素渐显(透明度+display)

    $(a).fadeTo(speed,number,function(){})    a元素从不显示到指定的浓度(number*100,number是一个小数)

    $(a).show(speed).delay(800).$(a).hide(speed)    show和hide之间延迟执

    $(btn).click=(function{

        $(a).animate({params:'value'},speed)

    });   点击btn后,a在speed毫秒后开始向params:'value'(fontSise:'15em')渐变,一个事件中可以写多条animate语句,不过会按顺序执行,在同一个animate中夜可以写多个params项,这多个会同时执行。

  • 相关阅读:
    Go组件学习——Web框架Gin
    一次线上接口超时的排查过程
    Go组件学习——手写连接池并没有那么简单
    终于跑通分布式事务框架tcc-transaction的示例项目
    Go语言学习——如何实现一个过滤器
    Go组件学习——database/sql数据库连接池你用对了吗
    我们这一年 | 诗人呀
    NodeMan架构
    NodeMan介绍
    微信小程序录音实现
  • 原文地址:https://www.cnblogs.com/wangguoning/p/6108523.html
Copyright © 2011-2022 走看看