首页 > 代码库 > jquery知识点
jquery知识点
引入jquery
<script language="javascript" type="text/javascript" src="http://www.mamicode.com/1.9.0/jquery.js"></script>
基础选择器
id选择器
$("#my_id")
元素选择器---eg:div
$(“element”)
class选择器
$(“.class”)
全选---eg:$(“div *”)--选择全部的div
$(“*”)
选择多个
$(“sele1,sele2,seleN”)
父子选择器--子包括子孙
$("ance desc")
父子选择器-子仅仅包括儿子
$(“parent > child”)
相邻的选择器--只获取相邻的下一个元素
$(“prev + next”)
相邻的选择器--获取相邻的所有元素
$(“prev ~ siblings”)
eg:
$("p~span").css("border", "solid 1px red");
$("p~label").html("我们都是p先生的粉丝");
过滤选择器
first过滤选择器--选择第一个li
$(“li:first”)
:eq(index)过滤选择器--从0开始计数
eg: $("li:eq(2)").css("background-color", "#60F");
文本内容查找过滤选择器contains(text)
$("li:contains(‘你好‘)").css("background", "green");
:has(selector)过滤选择器
<li><p>我是P先生</p></li>
$("li:has(‘p‘)").css("background-color", "blue");
:hidden过滤选择器
:visible过滤选择器
[attribute=value]属性选择器
<li title="水果">西瓜</li>
eg: $("li[title=‘水果‘]").css("background-color", "green");
[attribute!=value]属性选择器
[attribute*=value]属性选择器--包含
<li title="水果">西瓜</li>
eg: $("li[title*=‘水‘]").css("background-color", "green");
:first-child子元素过滤选择器--每个列表的第一个li
$("li:first-child").css("background-color", "green");
:last-child子元素过滤选择器
表单选择器
:input表单选择器--冒号前有空格
返回全部的表单元素，不仅包括所有<input>标记的表单元素，而且还包括<textarea>、<select> 和 <button>标记的表单元素
<form id="frmTest" action="#">
<input type="button" value="http://www.mamicode.com/Input Button" /><br />
<select>
<option>Option</option>
</select><br />
<textarea rows="3" cols="8"></textarea><br />
</form>
eg:$("#frmTest :input").addClass("bg_blue");
:text表单文本选择器
$("#frmTest :text").addClass("bg_blue");
:password表单密码选择器
<input type="password" id="Text2" value="http://www.mamicode.com/密码文本输入框"/>
$("#frmTest :password").addClass("bg_red");
:radio单选按钮选择器
<form id="frmTest" action="#">
<input type="button" value="http://www.mamicode.com/Input Button" /><br />
<input id="Radio1" type="radio" />
<label for="Radio1">
男</label>
</form>
$("#frmTest :radio").attr("disabled","true");
:checkbox复选框选择器
$("#frmTest :checkbox").attr("disabled","true");
:submit提交按钮选择器
通常情况下，一个表单中只允许有一个“type”属性值为“submit”的提交按钮
<input type="submit" value="http://www.mamicode.com/点我就提交了" />
<form id="frmTest" action="#">
<input type="button" value="http://www.mamicode.com/Input Button" /><br />
<input type="submit" value="http://www.mamicode.com/点我就提交了" /><br />
<button>
Button</button><br />
</form>
$("#frmTest input:submit").addClass("bg_red");-----如果没有input的话，button也会添加上样式。
:image图像域选择器
使用:image选择器只能获取<input>图像域，而不能获取<img>格式的图像元素。
<form id="frmTest" action="#">
<input type="image" src="http://img.mukewang.com/52b284ea00016b2902590070.jpg" /><br />
<br />
<img src="http://img.mukewang.com/52b284ea00016b2902590070.jpg" /><br />
</form>
<script type="text/javascript">
$("#frmTest :image").addClass("bg_red");
</script>
:button表单按钮选择器
:button选择器能获取且只能获取“type”属性值为“button”的<input>和<button>这两类普通按钮元素。
$("#frmTest :button").addClass("bg_blue");
:checked选中状态选择器
$("#frmTest :checked").attr("disabled", true);
<input id="Radio1" type="radio" checked="checked" />
<label id="Label1" for="Radio1">
苹果</label>
:selected选中状态选择器
与:checked选择器相比，:selected选择器只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素
<form id="frmTest" action="#">
<select id="Select1" multiple="multiple">
<option value="http://www.mamicode.com/0">苹果</option>
<option value="http://www.mamicode.com/1" selected="selected">桔子</option>
<option value="http://www.mamicode.com/2">荔枝</option>
<option value="http://www.mamicode.com/3" selected="selected">葡萄</option>
<option value="http://www.mamicode.com/4">香蕉</option>
</select><br /><br />
<div id="tip"></div>
</form>
<script type="text/javascript">
var $txtOpt = $("#frmTest :selected").text();
$("#tip").html("选中内容为:" + $txtOpt);
</script>
dom元素的操作
jquery知识点