zoukankan      html  css  js  c++  java
  • jQuery选择函数

    得到或设置文本内容或HTML内容或属性的值

    $(“p”).addClass(css中定义的样式类型); 给某个元素添加样式 
    $(“img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性/值,参数是map 
    $(“img”).attr(“src”,”test.jpg”); 给某个元素添加属性/值 
    $(“img”).attr(“title”, function() { return this.src }); 给某个元素添加属性/值 
    $(“元素名称”).html(); 获得该元素内的内容(元素,文本等) 
    $(“元素名称”).html(“new stuff“); 给某元素设置内容 
    $(“元素名称”).removeAttr(“属性名称”); 给某元素删除指定的属性以及该属性的值 
    $(“元素名称”).removeClass(“class”); 给某元素删除指定的样式 
    $(“元素名称”).text(); 获得该元素的文本 
    $(“元素名称”).text(value); 设置该元素的文本值为value 
    $(“元素名称”).toggleClass(class); 当元素存在参数中的样式的时候取消,如果不存在就设置此样式 
    $(“input元素名称”).val(); 获取input元素的值 
    $(“input元素名称”).val(value); 设置input元素的值为value

    对DOM节点进行操作

    $(“元素名称”).after(content); 在匹配元素后面添加内容 
    $(“元素名称”).append(content); 将content作为元素的内容插入到该元素的后面 
    $(“元素名称”).appendTo(content); 在content后接元素 
    $(“元素名称”).before(content); 与after方法相反 
    $(“元素名称”).clone(布尔表达式); 当布尔表达式为真时,克隆元素(无参时,当作true处理) 
    $(“元素名称”).empty(); 将该元素的内容设置为空 
    $(“元素名称”).insertAfter(content); 将该元素插入到content之后 
    $(“元素名称”).insertBefore(content); 将该元素插入到content之前 
    $(“元素”).prepend(content); 将content作为该元素的一部分,放到该元素的最前面 
    $(“元素”).prependTo(content); 将该元素作为content的一部分,放content的最前面 
    $(“元素”).remove(); 删除所有的指定元素 
    $(“元素”).remove(“exp”); 删除所有含有exp的元素 
    $(“元素”).wrap(“html”); 用html来包围该元素 
    $(“元素”).wrap(element); 用element来包围该元素

    $(html).appendTo(“body”) 相当于在body中写了一段html代码 
    $(elems) 获得DOM上的某个元素 
    $(function(){……..}); 执行一个函数 
    $(“div > p”).css(“border”, “1px solid gray”); 查找所有div的子节点p,添加样式 
    $(“input:radio”, document.forms[0]) 在当前页面的第一个表单中查找所有的单选按钮 
    $.extend(prop) prop是一个jquery对象 

    事件绑定

    ready(fn); $(document).ready()注意在body中没有onload事件,否则该函数不能执行。在每个页面中可以有很多个函数被加载执行,按照fn的顺序来执行。

    bind( type, [data], fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。 
    可能的事件属性有:blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,keyup, error

    one( type, [data], fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。

    trigger( type, [data] ) 在每一个匹配的元素上触发某类事件。 
    triggerHandler( type, [data] ) 这一特定方法会触发一个元素上特定的事件(指定一个事件类型),同时取消浏览器对此事件的默认行动。

    unbind( [type], [data] ) 反绑定,从每一个匹配的元素中删除绑定的事件。

    $(“p”).unbind() 移除所有段落上的所有绑定的事件 
    $(“p”).unbind(“click”) 移除所有段落上的click事件

    hover( over, out ) over,out都是方法, 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。

    jquery中常用事件

    blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area 
    change( ) 用户改变域的内容 input, textarea, select 
    click( ) 鼠标点击某个对象 几乎所有元素 
    dblclick( ) 鼠标双击某个对象 几乎所有元素 
    error( ) 当加载文档或图像时发生某个错误 window, img 
    focus( ) 元素获得焦点 a, input, textarea, button, select, label, map, area 
    keydown( ) 某个键盘的键被按下 几乎所有元素 
    keypress( ) 某个键盘的键被按下或按住 几乎所有元素 
    keyup( ) 某个键盘的键被松开 几乎所有元素 
    load( fn ) 某个页面或图像被完成加载 window, img 
    mousedown( fn ) 某个鼠标按键被按下 几乎所有元素 
    mousemove( fn ) 鼠标被移动 几乎所有元素 
    mouseout( fn ) 鼠标从某元素移开 几乎所有元素 
    mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素 
    mouseup( fn ) 某个鼠标按键被松开 几乎所有元素 
    resize( fn ) 窗口或框架被调整尺寸 window, iframe, frame 
    scroll( fn ) 滚动文档的可视部分时 window 
    select( ) 文本被选定 document, input, textarea 
    submit( ) 提交按钮被点击 form 
    unload( fn ) 用户退出页面 window

    JQuery Ajax 方法说明: 

    JQuery Effects 方法说明

    show( ) 显示隐藏的匹配元素。 
    show( speed, [callback] ) 以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。

    hide( ) 隐藏所有的匹配元素。 
    hide( speed, [callback] ) 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数

    toggle( ) 切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

    slideDown( speed, [callback] ) 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。

    slideUp( speed, [callback] ) 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以”滑动”的方式隐藏起来。

    slideToggle( speed, [callback] ) 通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。 这个动画效果只调整元素的高度,可以使匹配的元素以”滑动”的方式隐藏或显示。

    fadeIn( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。

    fadeOut( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。

    fadeTo( speed, opacity, [callback] ) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地 
    触发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。

    stop( ) 停止所有匹配元素当前正在运行的动画。如果有动画处于队列当中,他们就会立即开始。

    queue( ) 取得第一个匹配元素的动画序列的引用(返回一个内容为函数的数组) 
    queue( callback ) 在每一个匹配元素的事件序列的末尾添加一个可执行函数,作为此元素的事件函数 
    queue( queue ) 以一个新的动画序列代替所有匹配元素的原动画序列 
    dequeue( ) 执行并移除动画序列前端的动画

    animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数。 
    animate( params, options ) 创建自定义动画的另一个方法。作用同上。

    JQuery 选择函数 说明 

    eq( index ) 从匹配的元素集合中取得一个指定位置的元素,index从0开始。

    filter( expr ) 返回与指定表达式匹配的元素集合,可以使用”,”号分割多个expr,用于实现多个条件筛选。

    filter( fn ) 利用一个特殊的函数来作为筛选条件移除集合中不匹配的元素。

    is( expr ) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。

    map( callback ) 将jQuery对象中的一组元素利用callback方法转换其值,然后添加到一个jQuery数组中。

    not( expr ) 从匹配的元素集合中删除与指定的表达式匹配的元素。

    slice( start, [end] ) 从匹配元素集合中取得一个子集,和内建的数组的slice方法相同。

    add( expr ) 把与表达式匹配的元素添加到jQuery对象中。

    children( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可选的过滤器将使这个方法只匹配符合的元素(只包括元素节点,不包括文本节点)。

    contents( ) 取得一个包含匹配的元素集合中每一个元素的所有子孙节点的集合(只包括元素节点,不包括文本节点),如果元素为iframe,则取得其中的文档元素。

    find( expr ) 搜索所有与指定表达式匹配的元素。

    next( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。 
    nextAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素所有的后面同辈元素的元素集合

    closest( [expr] ) 沿 DOM 树向上遍历,直到找到已应用选择器的一个匹配为止。 
    parent( [expr] ) 取得一个包含着所有匹配元素的唯一父元素的元素集合。 
    parents( [expr] ) 取得一个包含着所有匹配元素的唯一祖先元素的元素集合(不包含根元素)。

    prev( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。 
    prevAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素的之前所有同辈元素的元素集合。

    siblings( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。

    andSelf( ) 将前一个匹配的元素集合添加到当前的集合中取得所有div元素和其中的p元素,添加border类属性。 
    取得所有div元素中的p元素,添加background类属性 
    $(“div”).find(“p”).andSelf().addClass(“border”); 
    $(“div”).find(“p”).addClass(“background”);

    end( ) 结束当前的操作,回到当前操作的前一个操作找到所有p元素其中的span元素集合,然后返回p元素集合,添加css属性 
    $(“p”).find(“span”).end().css(“border”, “2px red solid”);

    JQuery 选择器 

    基本选择器 

    $(“#myDiv”) id选择器
    $(“div”)element选择器
    $(“.myClass”) 类名选择器
    $(“*”) 通配符选择器
    $(“div,span,p.myClass”)复合选择器

    层级选择器 

     ancestor descendant

    例如:$(“form input”)  中间的空格(表示下一级元素里面的(包括子孙元素))  选择form元素里面的input元素

    parent>child 

    例如:$(“div>p”) 表示之后选择子元素  不会选择孙元素

    prev + next

    例如:$(“div+p”)  表示选择每个div元素后面的第一个p元素   $(“.div+.p”)都行

    prev~siblings

    例如:$(“div~p”)选定所有div后面的所有p元素(p元素和div元素是同级的)

    属性选择器

    [attribute]    选定有该属性的所有元素

    [attribite=value]  选定有属性且属性值必须等于value(不是包含value)

    [attribite!=value] 选定属性不等于value的对象   的元素差不多

    [attribite^=value] 选定属性以value值开始的对象

    [attribite$ =value]  选定属性值以value结尾的对象

    [attribite* =value]   选定属性包含value的元素

    [selector1][selector2][selectorN]   组合选择器

    简单过滤器

    :first 把所有满足条件的组合一个集合,去集合里面第一个对象,返回是一个对象。 例如$("tr:first")  匹配表格的第一行

    :last  把所有满足条件的组合一个集合,去集合里面的最后一个对象,返回是一个对象。 例如$("tr:last")  匹配表格的最后一行

    :even 把所有满足条件的组合一个集合, 匹配所有索引值为偶数的元素,从 0 开始计数   使用时反过来,代表奇书   $("tr:event") 匹配表格的偶数行

    :odd  把所有满足条件的组合一个集合,匹配所有索引值为奇数的元素,从 0 开始计数()  使用时反过来,代表偶数    $("tr:odd")匹配表格的偶数行

    :eq(index) 匹配一个给定索引值的元素   例如:$("div:eq(1)")  匹配第二个div元素

    :gt(index) 匹配所有大于给定索引值得元素  例如:$("div:gt(0)") 匹配第二个及以上的div元素

    :lt(index)匹配所有小于给定索引值得元素   例如:$("div:lt(2)")  匹配第二个及以下的div元素

    :header匹配如h1,h2,h3...之类的标题元素  例如:$(":header")  匹配所有的标题元素

    :not(selector) 去除所有与给定选择器匹配的元素   例如:$("input:not(:checked)")  去除所有被选定的input元素

    :animated  匹配所有正在执行动画效果的元素  例如:$(":animated")  匹配所有正在执行动画效果的元素

    内容过滤器

    :contains(text) 匹配包含文本的元素  例如:$(“div div:contains(‘java’)”)  选定div元素里面的子孙div,内容必须包含java

    :empty 匹配所有不包含子元素或文本为空的元素 例如:$("td:empty") 匹配不包含子元素或文本的单元格

    :has(selector)匹配含有选择器所匹配元素的元素  例如:$("td:has(p)")  匹配含有p标签的单元格

    :parent  匹配含有子元素或文本的内容   例如:("td:parent")匹配含有子元素或文本的单元格

    可见性过滤器

    :hidden  匹配所有不可见的元素  $("input :hidden") 匹配所有不可见的input

    :visible 匹配所有可见的元素   $("input :visible") 匹配所有可见的input

    表单对象的属性过滤器

    :checked  匹配所有被选中的元素   $("input:checked")  匹配checked属性为checked的input元素

    :disabled 匹配所有不可用的元素  $("input:disabled")  匹配disabled属性为disabled的input元素

    :enabled 匹配所有不可用的元素  $("input:enabled")   匹配enabled属性为enabled的input元素

    :selected  匹配所有选中的option元素  $("select option :selected")  匹配所有select元素中被选中的option元素

    子元素选择器

    :first-child  选择每组里面的第一个对象,返回的是一个集合。例如:$("ul li:first-child")  选择每组里面的第一个li

    :Last-child  选择每组里面的最后一个对象,返回的是一个集合。例如:$("ul li:last-child")   选择每组里面的最后一个li

    :only-child 匹配元素中唯一的子元素   例如:$("ul li:only-child")  匹配只含有一个li元素的ul元素中的li

    :nth-child(even)   选择每组里面的第偶数个对象,返回的是一个集合。从1开始
    :nth-child(odd)
    :nth-child(3n)    选择每组里面的第3的倍数个对象,返回的是一个集合。n从1开始
    :nth-child(2)     选择每组里面的第2个对象,返回的是一个集合。

    :nth-child(3n+1)
    :nth-child(3n+2)

    表单选择器

    :input 选定的是所有表单元素,包含select,textare,button如果没有:则是基本选择器中的元素选择器,则不包含这三种,还是有区别的。

    :button  :checkbox  :file  :hidden  :image  :password  :radio  :reset  :submit  :text

  • 相关阅读:
    【题解】P2569 [SCOI2010]股票交易
    【题解】P3354 [IOI2005]Riv 河流
    入职阿里蚂蚁三个月有感
    搞懂G1垃圾收集器
    MySql分库分表与分区的区别和思考
    Kafka源码分析及图解原理之Broker端
    Kafka源码分析及图解原理之Producer端
    Oracle GoldenGate mysql To Kafka上车记录
    从动态代理到Spring AOP(中)
    从动态代理到Spring AOP(上)
  • 原文地址:https://www.cnblogs.com/xiaohu666/p/10116529.html
Copyright © 2011-2022 走看看