标签:
hi
周一完全的不在状态。。。中午还去观战,没有睡觉的我,晚上的smarty不知道能不能做完,加油吧
1、jQuery
---过滤性选择器(二)---
--[attribute=value]属性选择器
属性作为DOM元素的一个重要特征,也可以用于选择器中,从本节开始将介绍通过元素属性获取元素的选择器,[attribute=value]
属性选择器的功能是获取与属性名和属性值完全相同的全部元素,其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示属性值。
<h3>改变"title"属性值为"蔬菜"的背景色</h3>
<ul>
<li title="蔬菜">茄子</li>
<li title="水果">香蕉</li>
<li title="蔬菜">芹菜</li>
<li title="水果">苹果</li>
<li title="水果">西瓜</li>
</ul>
<script type="text/javascript">
$("li[title=‘蔬菜‘]").css("background-color", "green");
与[attribute=value]
属性选择器正好相反,[attribute!=value]
属性选择器的功能是获取不包含属性名,或者与属性名和属性值不相同的全部元素,其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示属性值。
--[attribute*=value]属性选择器
介绍一个功能更为强大的属性选择器[attribute*=value]
,它可以获取属性值中包含指定内容的全部元素,其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示对应的属性值。
<h3>改变"title"属性值包含"果"的背景色</h3>
<ul>
<li title="蔬菜">茄子</li>
<li title="水果">香蕉</li>
<li title="蔬菜">芹菜</li>
<li title="人参果">小西红柿</li>
<li title="水果">西瓜</li>
</ul>
<script type="text/javascript">
$("li[title*=‘果‘]").css("background-color", "green");
--:first-child子元素过滤选择器
通过上面章节的学习,我们知道使用:first
过滤选择器可以获取指定父元素中的首个子元素,但该选择器返回的只有一个元素,并不是一个集合,而使用:first-child
子元素过滤选择器则可以获取每个父元素中返回的首个子元素,它是一个集合,常用多个集合数据的选择处理。
<h3>改变每个"蔬菜水果"中第一行的背景色</h3>
<ol>
<li>芹菜</li>
<li>茄子</li>
<li>萝卜</li>
<li>大白菜</li>
<li>西红柿</li>
</ol>
<ol>
<li>橘子</li>
<li>香蕉</li>
<li>葡萄</li>
<li>苹果</li>
<li>西瓜</li>
</ol>
<script type="text/javascript">
$("li:first-child").css("background-color", "green");
$("li:last-child").css("background-color", "blue");
与:first-child
子元素过滤选择器功能相反,:last-child
子元素过滤选择器的功能是获取每个父元素中返回的最后一个子元素,它也是一个集合,常用多个集合数据的选择处理。
---表单选择器---
--:input表单选择器
如何获取表单全部元素?:input
表单选择器可以实现,它的功能是返回全部的表单元素,不仅包括所有<input>标记的表单元素,而且还包括<textarea>、<select> 和 <button>标记的表单元素,因此,它选择的表单元素是最广的。
<h3>修改全部表单元素的背景色</h3>
<form id="frmTest" action="#">
<input type="button" value="Input Button" /><br />
<select>
<option>Option</option>
</select><br />
<textarea rows="3" cols="8"></textarea><br />
<button>
Button</button><br />
</form>
<script type="text/javascript">
$("#frmTest:input").addClass("bg_blue");
</script>
--:text表单文本选择器
:text
表单文本选择器可以获取表单中全部单行的文本输入框元素,单行的文本输入框就像一个不换行的字条工具,使用非常广泛。
<h3>修改多个单行输入框元素的背景色</h3>
<form id="frmTest" action="#">
<input type="text" id="Text1" value="我是小纸条"/><br />
<textarea rows="3" cols="8"></textarea><br />
<input type="text" id="Text2" value="我也是小纸条"/><br />
<button>
Button</button><br />
</form>
<script type="text/javascript">
$("#frmTest :text").addClass("bg_blue");
</script>
--:password表单密码选择器
如果想要获取密码输入文本框,可以使用:password
选择器,它的功能是获取表单中全部的密码输入文本框元素。
<h3>修改多个密码输入框元素的背景色</h3>
<form id="frmTest" action="#">
<input type="text" id="Text1" value="单行文本输入框"/><br />
<input type="password" id="Text2" value="密码文本输入框"/><br />
<textarea rows="3" cols="8">区域文本输入框</textarea><br />
<input type="password" id="Text3" value="密码文本输入框"/><br />
<button>
Button</button><br />
</form>
<script type="text/javascript">
$("#frmTest :password").addClass("bg_red");
</script>
</body>
--:radio单选按钮选择器
表单中的单选按钮常用于多项数据中仅选择其一,而使用:radio
选择器可轻松获取表单中的全部单选按钮元素。
<h3>将表单中单选按钮设为不可用</h3>
<form id="frmTest" action="#">
<input type="button" value="Input Button" /><br />
<input id="Radio1" type="radio" />
<label for="Radio1">
男</label>
<input id="Radio2" type="radio" />
<label for="Radio2">
女</label><br />
<button>
Button</button><br />
</form>
<script type="text/javascript">
$("#frmTest :radio").attr("disabled","true");
</script>
--:checkbox复选框选择器
表单中的复选框常用于多项数据的选择,使用:checkbox
选择器可以快速定位并获取表单中的复选框元素。
<h3>将表单的全部复选框设为不可用</h3>
<form id="frmTest" action="#">
<input type="button" value="Input Button" /><br />
<input id="Checkbox1" type="checkbox" />
<label for="Checkbox1">
西红柿</label><br />
<input id="Checkbox2" type="checkbox" />
<label for="Checkbox2">
茄子</label><br />
<input id="Checkbox3" type="checkbox" />
<label for="Checkbox3">
黄瓜</label><br />
<button>
Button</button><br />
</form>
<script type="text/javascript">
$("#frmTest :checkbox").attr("disabled","true");
</script>
--:submit提交按钮选择器
通常情况下,一个表单中只允许有一个“type”属性值为“submit”的提交按钮,使用:submit
选择器可获取表单中的这个提交按钮元素。
<h3>修改表单中提交按钮的背景色</h3>
<form id="frmTest" action="#">
<input type="button" value="Input Button" /><br />
<input type="submit" value="点我就提交了" /><br />
<button>
Button</button><br />
</form>
<script type="text/javascript">
$("#frmTest input:submit").addClass("bg_red");
</script>
--:image图像域选择器
当一个<input>元素的“type”属性值设为“image”时,该元素就是一个图像域,使用:image
选择器可以快速获取该类全部元素。
<h3>修改表单中图像元素的背景色</h3>
<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>这两类普通按钮元素。
<h3>修改表单中按钮元素的背景色</h3>
<form id="frmTest" action="#">
<input id="Button1" type="button" value="我是普通按钮" /><br />
<input id="Submit1" type="submit" value="点我就提交" /><br />
<button> 我也是普通按钮 </button><br />
</form>
<script type="text/javascript">
$("#frmTest :button").addClass("bg_blue");
</script>
--:checked选中状态选择器
有一些元素存在选中状态,如复选框、单选按钮元素,选中时“checked”属性值为“checked”,调用:checked可以获取处于选中状态的全部元素。
<h3>将处于选中状态的元素设为不可用</h3>
<form id="frmTest" action="#">
<input id="Radio1" type="radio" checked="checked" />
<label id="Label1" for="Radio1">
苹果</label><br />
<input id="Radio2" type="radio" />
<label id="Label2" for="Radio2">
桔子</label><br />
<input id="Checkbox1" type="checkbox" checked="checked" />
<label id="Label3" for="Checkbox1">
荔枝</label><br />
<input id="Checkbox2" type="checkbox" />
<label id="Label4" for="Checkbox2">
葡萄</label><br />
<input id="Checkbox3" type="checkbox" checked="checked" />
<label id="Label5" for="Checkbox3">
香蕉</label><br />
</form>
<script type="text/javascript">
$("#frmTest :checked").attr("disabled", true);
</script>
--:selected选中状态选择器
与:checked
选择器相比,:selected
选择器只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素。
<h3>获取处于选中状态元素的内容</h3>
<form id="frmTest" action="#">
<select id="Select1" multiple="multiple">
<option value="0">苹果</option>
<option value="1" selected="selected">桔子</option>
<option value="2">荔枝</option>
<option value="3" selected="selected">葡萄</option>
<option value="4">香蕉</option>
</select><br /><br />
<div id="tip"></div>
</form>
<script type="text/javascript">
var $txtOpt = $("#frmTest :selected").text();
$("#tip").html("选中内容为:" + $txtOpt);
</script>
----------------------------------------------------------------
2、正则表达式
jQuery入门第二天&&&正则表达式完结篇——仿smarty引擎的制作
标签:
原文地址:http://www.cnblogs.com/andy1202go/p/4930757.html