js获取dome
原生:
document.getElementById('id名')
document.getElementsByClassName('class名')
document.getElementsByTagName('标签名')
document.querySelector() // 精准的获取某个元素
document.queryselectorAll() // 获取符合类名或者标签名等条件的的所有元素
document.getElemenstByName() // 通过name属性获取元素
jq:
以下面dome为例
<button class="btn">按钮</button>
<button id="btninfo" class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<input type="text" disabled/>
<input type="radio"/>
<input type="password"/>
<input type="checkbox"/>
<input type="file"/>
<input type="button"/>
<input type="submit"/>
<input type="reset"/>
<select></select>
<textarea></textarea>
<ul class="menu">
<h3>选择器0</h3>
<li>选择器1</li>
<li>选择器2
<h3>测试</h3>
<ul>
<li>2-1</li>
<li>2-2</li>
</ul>
</li>
<li class="three">选择器3</li>
<li>选择器4</li>
<li>选择器5</li>
<h3>选择器6</h3>
</ul>
<div class=".box"></div>
以下选择器名都能在上述例子中找到 (常用度递减)
1、基本选择器
选择器 | 概述 |
---|---|
$(‘#btninfo’) | 根据给定的ID匹配一个元素。 |
$(‘button’) | 根据给定的元素标签名匹配所有元素。 |
$(‘.btn’) | 根据给定的css类名匹配元素。 |
$(‘*’) | 匹配所有元素。(不会真有人用吧,不会吧不会吧) |
$(‘#btninfo,h3’) | 将每一个选择器匹配到的元素合并后一起返回。 |
2、层级选择器
选择器 | 概述 |
---|---|
$(‘ul.menu li’) 或 $(‘ul.menu>li’) | 在给定的祖先元素下匹配所有的后代元素。 |
$(‘.three+li’) | 匹配所有紧接在 .three 元素后的 li 元素 |
$(‘.three~*’) | 匹配 .three 元素之后的所有元素合并后一起返回。 |
3、属性选择器
选择器 | 概述 |
---|---|
$(‘input[type]’) | 匹配包含给定属性的元素。 |
$(‘input[type = text]’) | 匹配给定的属性是某个特定值的元素 |
$(‘input[type != text]’) | 匹配所有不含有指定的属性,或者属性不等于特定值的元素。 |
$(‘input[type ^= t]’) | 匹配给定的属性是以某些值开始的元素。开始的元素。 |
$(‘input[type $= o]’) | 匹配给定的属性是以某些值结尾的元素。 |
$(‘input[type *= e]’) | 匹配给定的属性是以包含某些值的元素。 |