您是第欢迎光临我的主页位访客
浩凡儿
天行健,君子以自强不息;地势坤,君子以厚德载物!

  第四部分:JQuery的迭代

1):
如何判断对象是否存在,JQuery选择器返回的是一个对象数组,调用text(),html() ,click() 之类方法的时候其实是对数组中每个元素迭代调用每个方法,因此即使通过id选择的元素不存在也不会报错,如果需要指定的id是否存在,应该写:

   <script type="text/javascript">
        $(function () {
            var result = $("#btn12");
            if (result.length <= 0)
            { alert("没有找到指定的按钮"); }
            else {
               result.mouseover(function () { alert("移上来了。"); });
            }
        });
</script>
在body里边写点这个就行啦:
<body>
<input type="button" id="btn1" class="waring" value="确定" />
<input type="button" id="btn2" class="waring" value="取消" />
</body>
2)节点的遍历:
【1】.next()方法用于获取节点之后的第一个同辈元素,例子如下:
在body中写几个div
<body>
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
</body>
 <script type="text/javascript">
        $(function () { $("div").click(function () { alert($(this).next().text()); }) });
    </script>
这样就可以了在点击每个div时都会显示出它的下一个div的Text内容。

【2】而.nextAll()方法是把它后的所有内容显示出来也包含在包含在它里面的元素()

也可以给它再加上过滤器在.nextAll("div")也就是只显示是div元素里边的内容。

那么对于这个节点都给遍历了有什么用呢?
下面算个小用处吧:可以在点某个div时让它后面的所有div的background变为红色具体代码如下:

$(function () { $("div").click(function () { $.each($(this).nextAll("div"), function () { $(this).css("background", "red"); }); }) });

注意上边的其实不用$.each();因为对于JQuery中它会自动迭代因此只用如下所写就可以啦:
$(function(){$("div").click(function(){$(this).nextAll("div").css("background","red");});});
【3】siblings();用于获得所有的同辈的元素:不管是后边的还是前边的注意上边的.nextAll().next()、专指的是在本元素的后面的元素。
$(function(){$("div").click(function(){$(this).css("background","red");$(this).siblings("div").css("backgroud","yellow");})});

【为显示下JQuery的链式编程上面的代码还可以这样写如下:$(function(){$("div").click(function(){$(this).css("background","red").siblings("div").css("backgroud","yellow");})});也就是把对于一个对象的事件都给它串到一起一直点下去都没问题 。但为减少出错还是一个一个写比较安全。


                             
                        第五部分  过滤选择器
一个小部分:
1):  :first选取第一个元素。如:$("#div:first") 选取第一个<div>。
2):  :last选取最后一个元素。$("#div:last")选取最后一个<div>。
3):  :not (选择器)选取不满足“选择器”条件的元素。
$("input:not(.myClass)") ,就是要选取样式名不是myClass的<input>。
4):even ,:odd。选取索引是奇数,偶数的元素:$("input:even")选取索引是奇数的<input>

5)::eq(索引序号),gt(),lt()选取索引等于,大于,小于索引序号的元素,比如$("input:lt(5)")选取索引小于5的<input>

例子:表格隔行变色除标题外的行:代码如下:
 <script type="text/javascript">
        $(function () {
            $("#test tr:first").css("fontSize", "36"); $("#test tr:last").css("color", "red"); $("#test tr:gt(0):lt(3)").css("fontSize", "20");
            $("#test tr:gt(0):even").css("background", "red");
            $("#test tr:gt(0):odd").css("background", "yellow");
        });
       
    </script>

6):不仅可以使用选择器进行绝对定位,还可以进行相对定位,只要在$()指定第二个参数第二个参数为相对的元素。$("ul",$(this)).css("background","red");
例子修改点击行的所有tdr 背景色。代码如下:
<script type="text/javascript">
        $(function () { $("#t1 tr").click(function () { $("td", $(this)).css("background","red"); }); });
    </script>
body中这样写就OK啦
<table id="t1">
<tr><td>sdfsd</td><td>sdfsdfsdf</td><td>sdfsdfsdfsd</td></tr>
<tr><td>枯枯顶替顶替顶替</td><td>极一夺夺在</td><td>sdfsdfsdfsd</td></tr>
</table>
二个小部分:

1)属性过滤选择器:

$("div[id]"); 选取有id属性的<div> ——$("div[div1]")

$("div[title=test]")选取title属性为"test" 的div

$("input[name=abc]")也可以$("input[name!=test]")
2)表单对象选择器(过滤器)
$("#form1 :enable")选取id为form1的表单内所有启用的元素。
$("#form1:disabled")选取id为form1的表单内所有禁用的元素。
$("input checked") 选取所有选中的元素(Radio.CheckBox)
$("select :selected")选取所有选中的选项元素(下拉列表);
小例子:当把有的checkbox选中之后再点一按钮时将其文本显示出来:
在bodyk 这样写:
<body>
<input type="checkbox" value="北京"/>北京<br />
<input type="checkbox" value="南京"/>南京<br />
<input type="checkbox" value="东京"/>东京<br />
<input type="checkbox" value="西安"/>西安<br />
<input type="button" value="显示选中文本" />
</body>

JQuery脚本这样写:
 <script type="text/javascript">
        $(function () {
            $("input[value=显示选中文本]").click(function () {
                alert($("input:checked").val());
            });
        });
    </script>
注意在$("input:checked"):两边一定不要有空格呀;并且这样只会显示出第一个选中的项这要用下$.each().迭代下。

body中这样写:
<body>
<input type="checkbox" name="names" value="孙业宝" />孙业宝<br />
<input type="checkbox" name="names" value="王丹丹" />王丹丹<br />
<input type="checkbox" name="names" value="章超" />章超<br />
<input type="checkbox" name="names" value="陈海波" />陈海波<br />
<p id="showname"></p>
</body>


而脚本就这样写:
 <script type="text/javascript">
        $(function () {
            $("input[name=names]").click(function () {
                var arr = new Array();
                $("input[name=names]:checked").each(function (key, value) {
                    arr[key] = $(value).val();
                });
                $("#showname").text("你一共选择了"+arr.length +"项"+arr.join(","));
            });
        });
    </script>
3)

$(":input") 选取所有<input>,<textarea>,<select>,<button>的元素。和
$("input")不一样前者是所有的原来是input 的控件全选取,而后者只选取
$(":text")与$("input[type=text]")等价只不过简单用即选取所有单行文本框。

posted on 2012-03-05 17:13  浩凡儿  阅读(307)  评论(0编辑  收藏  举报