jQuery选择器和遍历

jQuery中选择器的使用

有哪些选择器：
ID选择器、类选择器、标签选择器、属性选择器、伪类选择器
常用的获取元素的方式：
第一种：通过CSS中的选择器来进行元素的获取
第二种：通过JQuery提供的方法来进行获取

需求1：使用选择器的形式获取元素
:first / :last 获取一组元素中的第一个或者最后一个元素
:even / :odd 获取一组元素中下标为偶数的元素或者奇数的元素
:nth-of-type(表达式) 表达式格式：2n 2n+1 2n+2
:eq(index) 获取指定下标的元素对象
:not(selector) 除…之外的元素

实例如下：

    $('button:first').html() 获取一组button元素中的第一个元素的值
    $('button:even').text()	获取一组button元素中下标为偶数的元素的值，下标从0开始
    $('button:nth-of-type(2n+1)').text() 获取一组button元素中下标为奇数的元素的值
    $('input:not([type="submit"])') 获取除了类型为submit外的input元素

需求2：以函数的形式获取元素
eq(index) 和:eq功能一样，代表获取指定下标的元素
not() 和:not功能一样，代表获取除…外的元素
next() 获取当前元素紧邻的下一个元素，在表单中会用到

实例如下：

$('button').eq(1).text()  获取一组button元素中下标为1的元素
$('input').not("[type=submit]") 获取除了类型为submit的input元素
$('input').eq(0).next() 获取下标为0的input元素的下一个元素

需求3：便利button按钮的值

使用js遍历
var btns = document.getElementByTagName("button");
for(var i=0;i<btns.length;i++){
	console.log(btns[i].innerHTML);
}

jQuery的形式遍历节点对象 节点数组 .each(function(index,element){}) 参数可省略
$('button').each(function(index,element){
	console.log($('button').eq(index).text());
	console.log($('button')[index].innerHTML);
	console.log(element.innerHTML);
	console.log(this.innerHTML)
	})

需求4：遍历数组或json对象

var arr = ["你","我","他","她"]
var json = [
		{"name":"1","price":"1"},
		{"name":"2","price":"2"},
		{"name":"3","price":"3"}
		];
//jQuery遍历数组和json对象用的是$.each(data.function(index,element){})
$.each(arr,function(index,element){
	console.log(index,element);
})
$.each(json,function(index,jsonObj){
	console.log(index,jsonObj.name,jsonObj.price);
})