jQuery选择器总结

  1 jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法 

  2 

  3  

  4 

  5 $("#myELement")    选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 

  6 

  7 $("div")           选择所有的div标签元素，返回div元素数组 

  8 

  9 $(".myClass")      选择使用myClass类的css的所有元素 

 10 

 11 $("*")             选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass") 

 12 

 13  

 14 

 15 层叠选择器： 

 16 

 17 $("form input")         选择所有的form元素中的input元素 

 18 

 19 $("#main > *")          选择id值为main的所有的子元素 

 20 

 21 $("label + input")     选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 

 22 

 23 $("#prev ~ div")       同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 

 24 

 25  

 26 

 27 基本过滤选择器： 

 28 

 29 $("tr:first")               选择所有tr元素的第一个 

 30 

 31 $("tr:last")                选择所有tr元素的最后一个 

 32 

 33 $("input:not(:checked) + span")   

 34 

 35  

 36 

 37 过滤掉：checked的选择器的所有的input元素 

 38 

 39  

 40 

 41 $("tr:even")               选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始） 

 42 

 43  

 44 

 45 $("tr:odd")                选择所有的tr元素的第1，3，5... ...个元素 

 46 

 47 $("td:eq(2)")             选择所有的td元素中序号为2的那个td元素 

 48 

 49 $("td:gt(4)")             选择td元素中序号大于4的所有td元素 

 50 

 51 $("td:lt(4)")              选择td元素中序号小于4的所有的td元素 

 52 

 53 $(":header") 

 54 

 55 $("div:animated") 

 56 

 57 内容过滤选择器： 

 58 

 59  

 60 

 61 $("div:contains('John')") 选择所有div中含有John文本的元素 

 62 

 63 $("td:empty")           选择所有的为空（也不包括文本节点）的td元素的数组 

 64 

 65 $("div:has(p)")        选择所有含有p标签的div元素 

 66 

 67 $("td:parent")          选择所有的以td为父节点的元素数组 

 68 

 69 可视化过滤选择器： 

 70 

 71  

 72 

 73 $("div:hidden")        选择所有的被hidden的div元素 

 74 

 75 $("div:visible")        选择所有的可视化的div元素 

 76 

 77 属性过滤选择器： 

 78 

 79  

 80 

 81 $("div[id]")              选择所有含有id属性的div元素 

 82 

 83 $("input[name='newsletter']")    选择所有的name属性等于'newsletter'的input元素 

 84 

 85  

 86 

 87 $("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素 

 88 

 89  

 90 

 91 $("input[name^='news']")         选择所有的name属性以'news'开头的input元素 

 92 

 93 $("input[name$='news']")         选择所有的name属性以'news'结尾的input元素 

 94 

 95 $("input[name*='man']")          选择所有的name属性包含'news'的input元素 

 96 

 97  

 98 

 99 $("input[id][name$='man']")    可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素 

100 

101  

102 

103 子元素过滤选择器： 

104 

105  

106 

107 $("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)") 

108 

109  

110 

111 $("div span:first-child")          返回所有的div元素的第一个子节点的数组 

112 

113 $("div span:last-child")           返回所有的div元素的最后一个节点的数组 

114 

115 $("div button:only-child")       返回所有的div中只有唯一一个子节点的所有子节点的数组 

116 

117  

118 

119 表单元素选择器： 

120 

121  

122 

123 $(":input")                  选择所有的表单输入元素，包括input, textarea, select 和 button 

124 

125  

126 

127 $(":text")                     选择所有的text input元素 

128 

129 $(":password")           选择所有的password input元素 

130 

131 $(":radio")                   选择所有的radio input元素 

132 

133 $(":checkbox")            选择所有的checkbox input元素 

134 

135 $(":submit")               选择所有的submit input元素 

136 

137 $(":image")                 选择所有的image input元素 

138 

139 $(":reset")                   选择所有的reset input元素 

140 

141 $(":button")                选择所有的button input元素 

142 

143 $(":file")                     选择所有的file input元素 

144 

145 $(":hidden")               选择所有类型为hidden的input元素或表单的隐藏域 

146 

147  

148 

149 表单元素过滤选择器： 

150 

151  

152 

153 $(":enabled")             选择所有的可操作的表单元素 

154 

155 $(":disabled")            选择所有的不可操作的表单元素 

156 

157 $(":checked")            选择所有的被checked的表单元素 

158 

159 $("select option:selected") 选择所有的select 的子元素中被selected的元素 

160 

161  

162 

163   

164 

165  

166 

167 选取一个 name 为”S_03_22″的input text框的上一个td的text值

168 

169 $(”input[@ name =S_03_22]“).parent().prev().text() 

170 

171  

172 

173 名字以”S_”开始，并且不是以”_R”结尾的

174 

175 $(”input[@ name ^='S_']“).not(”[@ name $='_R']“) 

176 

177  

178 

179 一个名为 radio_01的radio所选的值

180 

181 $(”input[@ name =radio_01][@checked]“).val(); 

182 

183  

184 

185   

186 

187  

188 

189   

190 

191  

192 

193 $("A B") 查找A元素下面的所有子节点，包括非直接子节点

194 

195 $("A>B") 查找A元素下面的直接子节点

196 

197 $("A+B") 查找A元素后面的兄弟节点，包括非直接子节点

198 

199 $("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点 

200 

201  

202 

203 1. $("A B") 查找A元素下面的所有子节点，包括非直接子节点 

204 

205  

206 

207 例子：找到表单中所有的 input 元素 

208 

209  

210 

211 HTML 代码: 

212 

213  

214 

215 <form>

216 

217 <label>Name:</label>

218 

219 <input name="name" />

220 

221 <fieldset>

222 

223       <label>Newsletter:</label>

224 

225       <input name="newsletter" />

226 

227 </fieldset>

228 

229 </form>

230 

231 <input name="none" /> 

232 

233 jQuery 代码: 

234 

235  

236 

237 $("form input") 

238 

239 结果: 

240 

241  

242 

243 [ <input name="name" />, <input name="newsletter" /> ] 

244 

245  

246 

247 2. $("A>B") 查找A元素下面的直接子节点 

248 

249 例子：匹配表单中所有的子级input元素。 

250 

251  

252 

253 HTML 代码: 

254 

255  

256 

257 <form>

258 

259 <label>Name:</label>

260 

261 <input name="name" />

262 

263 <fieldset>

264 

265       <label>Newsletter:</label>

266 

267       <input name="newsletter" />

268 

269 </fieldset>

270 

271 </form>

272 

273 <input name="none" /> 

274 

275 jQuery 代码: 

276 

277  

278 

279 $("form > input") 

280 

281 结果: 

282 

283  

284 

285 [ <input name="name" /> ] 

286 

287  

288 

289 3. $("A+B") 查找A元素后面的兄弟节点，包括非直接子节点 

290 

291 例子：匹配所有跟在 label 后面的 input 元素 

292 

293  

294 

295 HTML 代码: 

296 

297  

298 

299 <form>

300 

301 <label>Name:</label>

302 

303 <input name="name" />

304 

305 <fieldset>

306 

307       <label>Newsletter:</label>

308 

309       <input name="newsletter" />

310 

311 </fieldset>

312 

313 </form>

314 

315 <input name="none" /> 

316 

317 jQuery 代码: 

318 

319  

320 

321 $("label + input") 

322 

323 结果: 

324 

325  

326 

327 [ <input name="name" />, <input name="newsletter" /> ] 

328 

329  

330 

331  

332 

333 4. $("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点 

334 

335 例子：找到所有与表单同辈的 input 元素 

336 

337  

338 

339 HTML 代码: 

340 

341  

342 

343 <form>

344 

345 <label>Name:</label>

346 

347 <input name="name" />

348 

349 <fieldset>

350 

351       <label>Newsletter:</label>

352 

353       <input name="newsletter" />

354 

355 </fieldset>

356 

357 </form>

358 

359 <input name="none" /> 

360 

361 jQuery 代码: 

362 

363  

364 

365 $("form ~ input") 

366 

367 结果: 

368 

369  

370 

371 [ <input name="none" /> ]