jQuery开发从入门到精通 jquery快速开发

1、jQuery( “:eq(index)” )

在匹配的集合中选择索引值为index的元素。

jQuery( “:eq(index)” )
添加的版本: 1.0
index: 要匹配元素的索引值（从0开始计数）

jQuery( “:eq(-index)” )
添加的版本: 1.8
indexFromEnd: 要匹配元素的索引值（从0开始计数）, 从最后一个元素开始倒计数。（-1匹配倒数第一个元素）

$("td:eq(2)").css("color", "red");

:eq() 是一个 jQuery 延伸出来的选择器，并不是的CSS规范的一部分, 使用:eq()查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了在现代浏览器上获得更佳的性能，请使用 $(“selector”).eq(index) 代替。

2. get(index)

通过检索匹配jQuery对象得到对应的DOM元素。

返回: Element, Array
描述: 通过jQuery对象获取一个对应的DOM元素。

添加的版本: 1.0.get( [index ] )
index 类型: Integer 从0开始计数，用来确定获取哪个元素。

.get() 方法允许我们直接访问jQuery对象中相关的DOM节点。 如果index的值超出范围 - 小于元素数量的负数或等于或大于元素的数量 - 那么它将返回 undefined。

<div>
    <p class="p">p0</p>
    <p class="p">p1</p>
    <p class="p">p2</p>
</div>


<script>
    $(function(){       
        //.get()  返回Dom元素，非jquery对象

        console.log($(".p").get(0)); //<p class="p">p0</p>

        console.log($(".p").get(-1)); //<p class="p">p2</p>

        console.log($(".p").get(0).data('test', 'test')); 
        //$(...).get(...).data is not a function， 报错
    });
</script>

每个 jQuery 对象也被 当成一个数组，所以我们也可以直接用数组的取值运算符来获得列表项：

console.log( $( ".p" )[0] );

然而，这种语法缺少某些 .get() 所具有的附加功能，比如可以指定索引值为负值：

console.log( $( ".p" ).get(-1) );

负的索引值表示从匹配的集合中从末尾开始倒数，所以上面这个例子将会返回列表中最后一项：

<p class="p">p2</p>

3、filter()

.filter(selector)

filter方法将匹配元素集合缩减为匹配指定选择器的元素。

selector：字符串值，包含供匹配当前元素集合的选择器表达式。

$("div").css("background", "#c8ebcc")
    .filter(".middle")
    .css("border-color", "red");


<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

$('li').filter(':even').css('background-color', 'red');

如果给定表示 DOM 元素集合的 jQuery 对象，.filter() 方法会 用匹配元素的子集构造一个新的 jQuery 对象。所使用的选择器会测试每个元素；所有匹配该选择器的元素都会包含在结果中。

使用过滤函数

通过函数而不是选择器来筛选元素。对于每个元素，如果该函数返回 true，则元素会被包含在已筛选集合中；否则，会排除这个元素。

<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong>
   - two <span>strong tags</span></li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

$('li').filter(function(index) {
  return $('strong', this).length == 1;
}).css('background-color', 'red');

$form.find(".setBoxRequired").filter(function () {
    return $(this).hasClass("appManager") ? "" : $(this);
}).textbox("setValue", "");

$appListTable.find(".check-item").filter("[value='" + result[i] + "']");

4、：visible

Selects all elements that are visible

$( "div:visible" ).click(function() {
  $( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
  $( "div:hidden" ).show( "fast" );
});

元素可以被认为是隐藏的几个情况：

1. CSS display值是none的元素；
2. type=”hidden” 的表单元素；
3. 宽度和高度都显式设置为0的元素
4. 祖先元素是隐藏的，该元素是不会在页面上显示。

元素visibility: hidden或opacity: 0被认为是 可见的，因为他们仍然占据布局空间。在动画显示的元素期间，动画一旦开始，该元素就被认为是可见的。

不在文档中的元素是被认为是不可见的; 如果当他们被插入到文档中，jQuery没有办法知道他们是否是可见的，因为元素可见性依赖于使用的样式。

CSS的能见度属性（visibility）不影响元素是否隐藏的判断，因此$(elem).css(‘visibility’,’hidden’).is(‘:hidden’) == false；

5、:lt 选择器

$(":lt(index)")

:lt() 选择器选取带有小于指定 index 值的元素。
index 值从 0 开始。
经常与其他元素/选择器一起使用，来选择指定的组中特定序号之前的元素（如上面的例子）。

$("tr:lt(2)")

选择前 2 个 元素;
不包括当前索引值对应的元素;

6、:gt 选择器

$(":gt(index)")

定义和用法
:gt 选择器选取 index 值高于指定数的元素。
index 值从 0 开始。
经常与其他元素/选择器一起使用，来选择指定的组中特定序号之后的元素。

$("tr:gt(2)")

选择前 3 个之后的所有 元素;
不包括当前索引值对应的元素;

7、操作

1、获取选中的radio的值：

$("input[name='city']:checked").val();

使用元素选择器，再使用属性过滤器name=’city’，最后使用:checked选取被选中的元素。

2、给指定值的radio设置选中状态：

$("input[name='city'][value='YangZhou']").attr("checked",true);

给name=”city”而且value=”YangZhou”的radio设置选中状态。

3、取消name=”city”的radio的选中状态：

$('input[name="city"]:checked').attr("checked",false);

4、获取name=”city”的radio的个数：

$("input[name='city']").length;

5、获取name=”city”而且索引是偶数的radio:

$("input[name='city']:even");

索引是从0开始的。

6、获取name=”city”而且索引是奇数的radio:

$("input[name='city']:odd");

索引是从0开始的。

7、迭代radio:

$("input[name='city']").each(function(i,obj){
    //i,迭代的下标，从0开始
    //obj,当前的对象(HTMLInputElement),可以使用obj.value格式获取属性值
    //$(this);当前jQuery对象,可以使用$(this).val()获取属性值
});

迭代name=”city”的radio。

8、禁用radio:

$("input[name='city']").attr("disabled",true);

禁用name=”city”的radio。

9、启用radio:

$("input[name='city']").attr("disabled",false);

启用name=”city”的radio。

8、多个显示和隐藏方法的效率

下面的改变方式，执行速度会越来越慢。

.css({‘display’:’none’}) 和 .css({‘display’:’block’}) 
 .addClass(‘hide’) 和 .removeClass(‘hide’) 
 .show() 和 .hide() 
 .toggle()