jQuery实例方法与DOM操作【壹】

get()

get([index])[index] Number 取得第 index 个位置上的元素。从0开始，返回的是DOM对象，类似的有eq(index),不过eq(index)返回的是jQuery对象。
这能够让你选择一个实际的DOM 元素并且对他直接操作，而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。
比如：

<div class="dom">1</div>
<div class="dom">2</div>
<div class="dom">3</div>
<script>
// get    dom对象
//传递null和undefined的时候，输出的是数组，
console.log( $(".dom").get() ) //在控制台看到是    Array(3)
 //通过get方法出来的是***dom对象****
console.log( $(".dom").get(0) )   // 在控制台看到是  <div class="dom">1</div>
console.log( $(".dom").get(-2) )  //在控制台看到是   <div class="dom">2</div>
<script>

eq()

eq(index|-index) 获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个，具体可以看以下示例。

console.log( $(".dom").eq(2) )  //jQuery.init
console.log( $(".dom(1)") )    //jQuery.init
console.log( $(".dom").eq(1) )    //jQuery.init

通过eq(index)我在控制台可以看到 //jQuery.init 类似的jQuery对象。

find()

find(expr|obj|ele) 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。
例：我们看到jQuery对象。还可以通过配合css选择器添加样式。

<div class="jq">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>
	<div>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>
	<script>
	console.log($(".jq"))   // jQuery.fn.init(1)
	console.log( $(".jq").find("ul") )     // jQuery.fn.init(1)
	console.log( $(".jq").find("ul").find("li") )     // jQuery.fn.init(5)
	console.log( $(".jq").find("li") )    // jQuery.fn.init(5)

$(".jq")
			.css({position : "relative"})  //相对定位
			.find("ul")
			.css({position : "absolute",top:"80px"})    //相对定位   
			.find("li")
			.css({color : "red"});   //jq下面li标签变红
</script>

filter()

filter(expr|obj|ele|fn) 筛选（过滤）出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
expr 字符串值，包含供匹配当前元素集合的选择器表达式。
jQuery object 现有的jQuery对象，以匹配当前的元素。
element 一个用于匹配元素的DOM元素。
function(index) 个函数用来作为测试元素的集合。它接受一个参数index，这是元素在jQuery集合的索引。在函数， this指的是当前的DOM元素。
通过下面代码得到不同效果

<div class="wrapper">
		<ul>
			<li>1</li>
			<li class="demo">2</li>
			<li>3</li>
			<li>4</li>
			<li class="demo">5</li>
		</ul>
	</div>
<script>
// $(".wrapper ul li")   //在前面有的基础之上进行过滤
		// 	.filter("li:odd")
		// 	.css({color:"red"})

var test = $(".wrapper ul li").filter(function(index,ele){
return index % 2 == 0
		}).css({color:"red"})
<、script>