陈仁星

导航

 

 一,核心
jQuery对象访问
    1.each(callback)
    以每一个匹配的元素作为上下文来执行一个函数
    callback 对于每一个匹配的元素所要执行的函数

    2.size()
    jQuery 对象中元素的个数。
    计算文档中所有图片数量
    事例<img src="test1.jpg"/> <img src="test2.jpg"/>
    $("img").size();.结果为2

    3.length
    jQuery 对象中元素的个数。
    <img src="test1.jpg"/> <img src="test2.jpg"/>
    $("img").length;结果2

    4.selector
    返回传给jQuery()的原始选择器
     确定查询选择器

    5.context
    返回传给jQuery()的原始的DOM节点内容,即jQuery()的第二个参数。如果没有指定,那么context指向当前的文档(document)。
    检测使用的文档内容
    可以与selector一起使用,用于精确检测选择器查询情况。这两个属性对插件开发人员很有用。

    6.get([index])
    取得其中一个匹配的元素。 num表示取得第几个匹配的元素。
    <img src="test1.jpg"/> <img src="test2.jpg"/>
    $("img").get(0);[ <img src="test1.jpg"/> ]
    选择文档中所有图像作为元素数组,$("img").get();

    7.index([selector|element])
    搜索匹配的元素,并返回相应元素的索引值,从0开始计数。

数据缓存
    1.data([key],[value])
    如果jQuery集合指向多个元素,那将在所有元素上设置对应数据。 这个函数不用建立一个新的expando,就能在一个元素上存放任何格式的数据,而不仅仅是字符串。
    在一个div上存取名/值对数据
    $("div").data("test", { first: 16, last: "pizza!" });
    $("div").data("test").first  //16;
    $("div").data("test").last  //pizza!;

    2.removeData([name|list])
    在元素上移除存放的数据
    与$(...).data(name, value)函数作用相反

    3.jQuery.data(element,[key],[value])
    在元素上存放数据,返回jQuery对象。这是一个底层方法。你应当使用.data()来代替。

队列控制
    1.queue(element,[queueName])
    显示或操作在匹配元素上执行的函数队列、

    2.dequeue([queueName])
    从队列最前端移除一个队列函数,并执行他。

    3.clearQueue([queueName])
    清空对象上尚未执行的所有队列
    如果不带参数,则默认清空的是动画队列。这跟stop(true)类似,但stop()只能清空动画队列,而这个可以清空所有通过 .queue() 创建的队列。

    queue() 添加函数时,我们应当确保最终调用了 .dequeue(),这样下一个排队的函数才能执行。
    $(document.body).click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
      });
      $("div").animate({left:'-=200'},500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
      });
      $("div").slideUp();
    });
属性
    1.attr(name|properties|key,value|fn)
    返回文档中所有图像的src属性值。
    $("img").attr("src");
    为所有图像设置src属性。
    $("img").sttr("src","text.jpg")
    
    2.removeAttr(name)
    从每一个匹配的元素中删除一个属性
    将文档中图像的src属性删除
    <img src="test.jpg"/>.$("img").removeAttr("src");

    3.prop(name|properties|key,value|fn)
    获取在匹配的元素集中的第一个元素的属性值
    选中复选框为true,没选中为false
    $("input[type='checkbox']").prop("checked");
    禁用页面上的所有复选框。
    $("input[type='checkbox']").prop({disabled: true});
    $("input[type='checkbox']").prop("checked", true);选中
    
    4.removeProp(name)
    用来删除由.prop()方法设置的属性集

CSS类
    1.addClass(class|fn)
    为每个匹配的元素添加指定的类名
    2.removeClass([class|fn])
    从所有匹配的元素中删除全部或者指定的类
    3.toggleClass(class|fn[,sw])
    如果存在(不存在)就删除(添加)一个类
    
   HTML
    1.html([val|fn])
    取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

    2.text([val|fn])
    取得所有匹配元素的内容。
    
    3.val([val|fn|arr])
    获得匹配元素的当前值。

CSS
    1.css(name|pro|[,val|fn])
    访问匹配元素的样式属性。
    $("p").css({ color: "#ff0011", background: "blue" });

  .位置
    1.offset([coordinates])
    获取匹配元素在当前视口的相对偏移。
    2.position()
    获取匹配元素相对父元素的偏移。
    3.scrollTop([val])
    获取匹配元素相对滚动条顶部的偏移。
    此方法对可见和隐藏元素均有效
    4.scrollLeft([val])
    获取匹配元素相对滚动条左侧的偏移。
    此方法对可见和隐藏元素均有效。
   .尺寸
    1.height([val|fn])
    取得匹配元素当前计算的高度值(px)。
    2.innerHeight()
    获取第一个匹配元素内部区域高度(包括补白(padding)、不包括边框)。
    3.outerHeight([options])
    获取第一个匹配元素外部高度(默认包括补白和边框)。
    此方法对可见和隐藏元素均有效。
二.选择器
基本
    1.#id
    根据给定的ID匹配一个元素。
    $("#myDiv");
    2.element
    根据给定的元素名匹配所有元素
    <div>DIV1</div>
    $("div");
    3.class
    根据给定的类匹配元素。
    <div class="myClass">div class="notMe"</div>
    $(".myClass");
    4.*
    匹配所有元素
    div>DIV</div>
    <span>SPAN</span>
    <p>P</p>
    $("*")
    结果[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]
    5.返回值:Array<Element(s)>selector1,selector2,selectorN
    将每一个选择器匹配到的元素合并后一起返回。
    <div>div</div>
    <p class="myClass">p class="myClass"</p>
    <span>span</span>
    <p class="notMyClass">p class="notMyClass"</p>
    $("div,span,p.myClass")    
层级    
    1.ancestor descendant
    ancestor 任何有效的选择器
    descendant 用以匹配元素的选择器,并且它是第一个选择器的后代元素
    找到表单中所有的 input 元素
    $("form input")
    2.parent > child
    在给定的父元素下匹配所有的子元素
    匹配表单中所有的子级input元素。$("form > input")
    3.prev + next
    匹配所有紧接在 prev 元素后的 next 元素
    匹配所有跟在 label 后面的 input 元素
    $("label + input")
    prev任何有效选择器
    next一个有效选择器并且紧接着第一个选择器
    4.prev ~ siblings
    匹配 prev 元素之后的所有 siblings 元素
    siblings一个选择器,并且它作为第一个选择器的同辈
    <form>
      <label>Name:</label>
      <input name="name" />
      <fieldset>
          <label>Newsletter:</label>
          <input name="newsletter" />
     </fieldset>
    </form>
    <input name="none" />
    $("form ~ input")结果[ <input name="none" /> ]
基本    
    1.:first
    获取第一个元素
    $('li:first');
    2.:last()
    获取最后个元素
    $('li:last')
    3.:not(selector)
    查找所有未选中的 input 元素
    <input name="flower" checked="checked" />
    $("input:not(:checked)")
    4.:even
    匹配所有索引值为偶数的元素,从 0 开始计数
    查找表格的1、3、5...行(即索引值0、2、4...)
    5.:odd
    匹配所有索引值为奇数的元素,从 0 开始计数
    查找表格的2、4、6行(即索引值1、3、5...)
    6.:eq(index)
    匹配一个给定索引值的元素
    index从 0 开始计数
    $("tr:eq(1)")
    7.gt(index)
    匹配所有大于给定索引值的元素
    查找第二第三行,即索引值是1和2,也就是比0大
    8.:lt(index)
    匹配所有小于给定索引值的元素
    查找第一第二行,即索引值是0和1,也就是比2小
    9.:header
    匹配如 h1, h2, h3之类的标题元素
    给页面内所有标题加上背景色
    $(":header").css("background", "#EEE");
    10.:animated
    匹配所有正在执行动画效果的元素
    只有对不在执行动画效果的元素执行一个动画特效
    $("#run").click(function(){
    $("div:not(:animated)").animate({ left: "+=20" }, 1000);}    );
    11.:focus
    触发每一个匹配元素的focus事件。
    当页面加载后将 id 为 'login' 的元素设置焦点:
    $("#login:focus");
内容
    1.:contains(text)
    匹配包含给定文本的元素
    $("div:contains('John')")
    2.:empty
    匹配所有不包含子元素或者文本的空元素
    3.:has(selector)
    匹配含有选择器所匹配的元素的元素
    $("div:has(p)").addClass("test");
    4.:parent
    匹配含有子元素或者文本的元素
    $("td:parent")
    :empty跟:parent相反

可见性
    1.:hidden
    匹配所有不可见元素,或者type为hidden的元素
    $("tr:hidden") $("input:hidden")
    2.:visible
    匹配所有的可见元素
    $("tr:visible")
属性
    1.[attribute]
    匹配包含给定属性的元素
    查找所有含有 id 属性的 div 元素
    $("div[id]")
    2.[attribute=value]
    匹配给定的属性是某个特定值的元素
    查找所有 name 属性是 newsletter 的 input 元素
    $("input[name='newsletter']").attr("checked", true);
    3.[attribute!=value]
    匹配所有不含有指定的属性,或者属性不等于特定值的元素
    查找所有 name 属性不是 newsletter 的 input 元素
    $("input[name!='newsletter']").attr("checked", true);
    4.[attribute^=value]
    匹配给定的属性是以某些值开始的元素
    查找所有 name 以 'news' 开始的 input 元素
    $("input[name^='news']")
    5.[attribute$=value]
    匹配给定的属性是以某些值结尾的元素
    查找所有 name 以 'letter' 结尾的 input 元素
    $("input[name$='letter']")
    6.[attribute*=value]
    匹配给定的属性是以包含某些值的元素
    查找所有 name 包含 'man' 的 input 元素
    $("input[name*='man']")
    7.[selector1][selector2][selectorN]
    复合属性选择器,需要同时满足多个条件时使用。
    找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的
    $("input[id][name$='man']")
子元素
    1.:nth-child
    匹配其父元素下的第N个子或奇偶元素
    $("ul li:nth-child(2)")
    2.:first-child
    匹配第一个子元素
    $("ul li:first-child")
    3.:last-child
    匹配最后一个子元素
    $("ul li:last-child")
    4.:only-child
    如果某个元素是父元素中唯一的子元素,那将会被匹配
    <ul>
      <li>Glen</li>
    </ul>
    $("ul li:only-child")
表单
    1.:input
    匹配所有 input, textarea, select 和 button 元素
    查找所有的input元素,下面这些元素都会被匹配到。
    $(":input")
    2.:text
    匹配所有的单行文本框
    查找所有文本框
    $(":text")
    .......
表单对象属性
    1.:enabled
    匹配所有可用元素
    查找所有可用的input元素
    <form>
      <input name="email" disabled="disabled" />
      <input name="id" />
    </form>
    $("input:enabled")
    结果[ <input name="id" /> ] 
    2.:disabled
    匹配所有不可用元素
    查找所有不可用的input元素
    $("input:disabled")
    3.:checked
    匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
    查找所有选中的复选框元素
    $("input:checked")
    4.:selected
    匹配所有选中的option元素
    $("select option:selected")

posted on 2016-05-22 15:43  陈仁星  阅读(167)  评论(0)    收藏  举报