JQuery入门(3)

6.属性过滤选择器

<script type="text/javascript">
$(function(){ //显示所有包含id属性的元素 1
    $("div[id]").show(3000);
})
$(function(){ //显示所有属性title的值是"A"的元素  2
    $("div[title=‘A‘]").show(3000);
})
$(function(){ //显示所有属性title的值不是"A"的元素  3
    $("div[title!=‘A‘]").show(3000);
})
$(function(){ //显示所有属性title的值是"A"开始的元素  4
    $("div[title^=‘A‘]").show(3000);
})
$(function(){ //显示所有属性title的值是"C"结束的元素  5
    $("div[title$=‘C‘]").show(3000);
})
$(function(){ //显示所有属性title的值中含有"B"的元素  6
    $("div[title*=‘B‘]").show(3000);
})
$(function(){ //显示所有属性title的值中含有"B"且属性id的值是“divAB”的元素   7
    $("div[id=‘divAB‘][title*=‘B‘]").show(3000);
})
</script>

7.子元素过滤选择器

在页面开发中，总是遇到突出指定某行的需求。如果实现单个表格的显示，用基本过滤选择器:eq(index)就能实现；但如果是大量数据的选择需求可以通过子元素过滤选择器轻松获取所有父元素中指定的某个元素。

<script type="text/javascript">
$(function(){ //增加每个父元素下的第2个子元素类别 1
    $("li:nth-child(2)").addClass("GetFocus");
})
$(function(){ //增加每个父元素下的第1个子元素类别  2
    $("li:first-child").addClass("GetFocus");
})
$(function(){ //增加每个父元素下的最后一个子元素类别  3
    $("li:last-child").addClass("GetFocus");
})
$(function(){ //增加每个父元素下只有一个子元素类别  4
    $("li:only-child").addClass("GetFocus");
})
</script>

8.表单对象属性过滤选择器

表单对象属性过滤选择器通过表单中的某对象属性特征获取该类元素，如enabled、disabled、checked、selected属性。

<script type="text/javascript">
$(function(){ //增加表单中所有属性为可用的元素类别
    $("#divA").show(3000);
    $("#form1 input:enabled").addClass("GetFocus");
})
$(function(){ //增加表单中所有属性为不可用的元素类别  2
    $("#divA").show(3000);
    $("#form1 input:disabled").addClass("GetFocus");
})
$(function(){ //增加表单中所有被选中的元素类别  3
    $("#divB").show(3000);
    $("#form1 input:disabled").addClass("GetFocus");
})
$(function(){ //显示表单中所有option的元素内容  4
    $("#divC").show(3000);
    $("#Span2").html("选中项是：" + $("select option:selected").text());
})
</script>

9.表单选择器

在表单中，为了使用更加方便和高效，在jQuery选择器中引入了表单选择器，通过它可以再页面中快速定位某表单对象。

<script type="text/javascript">
$(function(){ //显示input类型元素的总数量 1
    $("#form1 div").html("表单共找出input类型元素" +
    $("#form1 :input").length);
    $("#form1 div").addClass("div");
})
$(function(){ //显示所有文本框对象  2
    $("#form1 :text").show(3000);
})
$(function(){ //显示所有密码框对象  3
    $("#form1 :password").show(3000);
})
$(function(){ //显示所有单选按钮对象  4
    $("#form1 :radio").show(3000);
    $("#form1 #span1").show(3000);
})
$(function(){ //显示所有复选框对象  5
    $("#form1 :checkbox").show(3000);
    $("#form1 #span2").show(3000);
})
$(function(){ //显示所有提交按钮对象  6
    $("#form1 :submit").show(3000);
})
$(function(){ //显示所有图片域对象  7
    $("#form1 :image").show(3000);
})
$(function(){ //显示所有重置按钮对象  8
    $("#form1 :reset").show(3000);
})
$(function(){ //显示所有按钮对象  9
    $("#form1 :button").show(3000);
})
$(function(){ //显示所有文件域对象  10
    $("#form1 :file").show(3000);
})
</script>