js VS jQuery

js获取DOM元素的八种方法：

1、通过ID获取：getElementById   返回一个元素，上下文只能是document

2、通过name属性获取：getElementsByName     返回一组元素，上下文必须是documet

3、通过标签名获取:getElementsByTagName    返回一组元素 ，上下文可以是document，也可以是一个元素

4、通过类名获取:getElementsByClassName     返回一组元素，上下文可以是document，也可以是一个元素

5、获取HTML的方法:document.documentElement      专门获取HTML这个标签的

6、获取body的方法:document.body     专门获取body这个标签的

7、通过选择器获取一个元素:querySelector    返回一个元素，上下文可以是document，也可以是一个元素

8、通过选择器获取一组元素:querySelectorAll     返回一组元素，上下文可以是document，也可以是一个元素

jQuery获取DOM元素的方法分为两种：jQuery选择器、jQuery遍历函数

jQuery的行为必须在获取到元素之后才能生效，所以选择器是jQuery的根基

1、基本选择器：

$("#div1"):选取id为div1的元素

$(".test"):选取class为test的元素

$("*"):选取所有的元素

$("div,span,p.myClass"):选取所有div，span，和拥有myClass的p标签的一组元素

2、层次选择器：

$("div span");选取div里所有的span，包括孙子，曾孙

$("div>span")选取div里的子代span

$(".one+div"):选取class为one的下一个同辈div元素

$("#two~div")：选取id为two的元素后面的所有同辈div元素

3、过滤选择器：

$("div:first"):选取所有div元素中的第一个div元素

$("div:last"):选取所有div元素中的最后一个div元素

$("input:not(.myClass)"):选取class不是myClass的input元素

$("input:even"):选取索引是偶数的input元素

$("input:odd"):选取索引是奇数的input元素

$("input:eq(1)"):选取索引等于1的input元素，从0开始算起

$("input:gt(1)"):选取索引大于1，不包括1的input元素   从0开始算起

$("input:lt(1)"):选取索引小于1但不包括1的input元素

$(":header")：选取网页中所有的h标签

$("div.animated"):选取正在执行动画的div元素

$(":focus"):选取当前获得焦点的元素

4、内容过滤选择器：

$("div:contains("我")")：选取含有文本“我”的div元素

$("div:empty"):选取不包括子元素（文本）的div空元素

$("div:has(p)"):选取含有p元素的div元素

$("div:parent")：选取拥有子元素（文本）的div元素

5、可见性过滤选择器：

$(":hidden"):选取所有不可见的元素，包括display：none；visibility：hidden

$("div:visible"):选取所有可见的div元素

6、属性过滤选择器：

$("div[id]"):选取拥有id属性的div元素

$("div[title = test]"):选取属性title为test的div元素

$("div[title!=test]"):选取属性title不等于test的div元素，没有属性title的元素也会被选取

$("div[title^=test]"):选取属性title以test开始的div元素

$("div[title$=test]"):选取属性以test结束的div元素

$("div[title*=test]"):选取属性title含有test的div元素

$("div[title|=“en”]"):选取属性title等于en或以en为前缀的元素

$("div[title~="uk"]"):选取属性title用空格分隔的值中包含UK的元素

$("div[id][title$="test"]"):选取拥有属性id并且属性title以test结束的div元素

7、子元素过滤选择器：

$(div.one :nth-child(2)):选取class为one的下的第二个子元素           索引是从1开始

$(div.one :first-child):选取class为one的第一个子元素

$(div.one :last-child):选取class为one的最后一个元素

$("div.one :only-child")：选取只有一个子元素的class为one的元素下的子元素

8、表单对象属性过滤选择器

$("#form1 :enabled")选取id为form1的表单内的所有可用元素

$("#form1 :disabled"):选取id为form1的表单内的所有不可用元素

$("input:checked"):选取所有被选中的input元素

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

注意：用#id作为选择符取得的是jQuery对象而并非document.getElementByID(id)所得到的DOM对象，二者不等价。所以他们的方法不能互相使用。

html（）是jQuery里的方法

is（“：checked”）是jQuery中的方法，用来判断jQuery对象是否被选中，返回布尔值

show（）是jQuery中的方法，它的功能是显示元素，show（3000）从无到全部显示需要3000毫秒

css（name，value）给元素设置样式

test（string）设置所有匹配元素的文本内容

filter（expr）筛选出与指定表达式匹配的元素集合

addClass(class)为匹配的元素添加指定类名

removeClass（class）从匹配的元素中删除指定的类

is（“：visible”）判断元素是否显示，返回布尔值

hide（）；隐藏元素

例子：

1、从第7条开始隐藏后面的品牌，最后一条除外

jQuery：

var category = $('ul li:gt(6):not(:last)');索引从0开始，过滤选择器
category.hide();//调用hide（）方法

js：

for (var i =0;i<oLi.length;i++) {//先遍历元素
			if (i>=7&&i!=oLi.length-1) {//选择大于7不等于最后一条的元素
				oLi[i].style.display = 'none';//设置为隐藏
			}
		}

2、点击按钮后，显示全部品牌，并且高亮显示部分品牌，按钮变色

jQuery：

$('div.more>a').click(function () {
    category.show();
    $(this).find('span').css('background','white')
			.text('精简全部品牌');
			$('ul li').filter(":contains('佳能'),:contains('尼康')").addClass('promoted');
}

js：

var oWarp =document.getElementsByClassName('SubCategoryBox')[0];
var oMore = oWarp.getElementsByClassName('more')[0];
var oSpan = oMore.getElementsByTagName('span')[0];
oSpan.style.background = 'white';
		oSpan.innerHTML='精简显示品牌';
		for (var i = 0;i<oLi.length;i++) {
			var str = oLi[i].innerHTML
			if (str.indexOf('佳能')!=-1) {
				oLi[i].className='promoted';
			}
			oLi[i].style.display = 'block';
		}

3、再次点击按钮，恢复原来隐藏状态

jQuery：

category.hide();
			$(this).find('span').css('background','#ccc')
			.text('显示全部品牌');
			$('ul li').removeClass('promoted');

js：

oSpan.style.background = '#ccc';
		oSpan.innerHTML='显示全部品牌';
		for (var i =0;i<oLi.length;i++) {
			oLi[i].className='';
			if (i>=7&&i!=oLi.length-1) {
				oLi[i].style.display = 'none';
			}
		}