jQ最方便的部分就是选择器对于元素的筛选:基本标签匹配、层级、可见性、内容、属性、表单、子元素、表单对象等方便都做了一些封装!
html结构:
<div id="wrap">
<box class="nav">
<ul>
<li>1</li>
<li>2</li>
<li class="three">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>hello</li>
<li><p></p></li>
<li></li>
</ul>
<form>
<label>name:</label>
<input type="text" value="请输入用户名" name="username">
<input type="text" value="请输入密码" name="passwd">
<input type="submit" name="login" value="登录">
<input type="submit" name="reg" value="注册">
</form>
<input type="button" name="" value="重置">
</box>
</div>
选择器总结:
$("*") // 获取所有的元素
$("#wrap") // id 类的元素
$(".nav") // class 类的元素
$("ul") // ul标签类的元素
$("ul li") // 给定的祖先下匹配所有的子元素
$(".nav,ul,form") // 多项同时选择元素
//层级
$("form > input") // form下的第一个input元素 父元素的第一个子元素
$("label + input") // 匹配所有跟在lable后面的input元素 此时匹配到的是表单中所有的input
$("form ~ input") // form 的同级input元素
//基本
$("ul li:first").css({"color":"red"}) // ul下面的第一个li
$("ul li:last").css({"color":"green"}) // ul下面的最后一个li
$("ul li:even").css({"backgroundColor":"yellow"}) // ul下面所有的奇数行
$("ul li:odd").css({"backgroundColor":"pink"}) // ul下面所有的偶数行
$("ul li:eq(3)").css("color","white") // 对象集合li里面索引为3的li
$("ul li:gt(3)").css("color","white") // 对象集合li里面索引大于3的li
$("ul li:lt(3)").css("color","red") // 对象集合li里面索引小于3的li
//----------------------------------------------------------------
//:not()伪类过滤选择器
$("ul li:not(.three)") //所有的li里面排除class为three的li $("selector1:not(selector2)")
$("input:not(:checked)") // 所有的input,排除已经选中的复选框
// 按内容匹配
$("ul li:contains('hello')").css("color","red") // 选中内容为hello的li
$("ul li:empty").css("backgroundColor","red") // 选中内容为空的li
$("ul li:has('p')").addClass('p') //选中内部有p标签的li
$("ul li:parent").addClass('p') //匹配含有文本或者子元素的li,即能作为父级存在的li
//按显隐性匹配
//-----------------------------------------------------------
// 如 $('input:hidden') 匹配属性display为hidden的input,或者是type为hidden的input
// 如 $('input:visible') 匹配所有可见的input
// ----------------------------------------------------------
// 按属性匹配
$("input[name='username']") // 匹配name为username的输入框
$("input[name!='username']")// 匹配name不为username的输入框
// ' ^= ' 以特定字符串开头的; '$=' 以特定字符串结尾的 '*=' 包含某种特定字符串的
//
$(":input") // 匹配所有input
//:text 匹配所有文本框(type='text') :password 匹配所有密码框(type='password') :radio 单选框
//:checkbox 复选框(type='checkbox') :submit 提交按钮 :reset 重置按钮 :button 所有按钮
// $("select option:selected") 所有选中的下拉框 $("input:checked") 所有选择的复选框
//---------------------------------------------------------------------------------
//子元素筛选
$("ul li:fist-child") // 匹配ul下面第一个子元素li