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';
}
}