ID 查找

$('#test')  =>  document.getElementById('test');

单 Class 查找

$('.test')  =>  document.getElementsByClassName('test') ## 多 Class 查找
var a = $('.red.green'); // 同时符合两个条件, 注意没有空格!

HTML标签 查找

$('div')  =>  document.getElementsByTagName('div')

var ps = $('p'); // 返回所有<p>节点
ps.length;       // 数一数页面有多少个<p>节点

DOM属性 查找

DOM节点除了有 id/class 外还有很多属性: name / type / items… 当属性的值包含空格等特殊字符时,需要用双引号括起来。 var email = $(‘[name=email]’); // 找出<??? name=”email”> var passwordInput = $(‘[type=password]’); // 找出<??? type=”password”> var a = $(‘[items=”A B”]’); // 找出<??? items=”A B”>

属性前缀后 查找 (类似正则式)

var icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM
// 例如: name="icon-1", name="icon-2"
var names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM
// 例如: name="startswith", name="endswith"

匹配第一个元素

$('#test')  => document.querySelector('#test')

匹配单个元素

$('#test div').eq(0)[0]  =>  document.querySelectorAll('#test div')[0] 

匹配某元素下的 所有某HTML标签

$('#test div')  =>  document.querySelectorAll('#test div')
$('#test').find('span')  => document.querySelectorAll('#test span');

获取HTML、head、body:

$('html')  =>  document.documentElement
$('head')  =>  document.head
$('body')  =>  document.body

组合查找

查找所有标签中的某属性

$('[name=email]') 会把 div + input 标签中的  name="email" 都找出来, ### 查找某个标签中的某属性:
var emailInput = $('input[name=email]'); ### 查找某个标签中的某Class
 var tr = $('tr.red'); 
// 找出<tr class="red ...">...</tr>