Web、移动开发之Web前端:(5)jQuery(下)

创建时间:2018/1/28 12:26:55
关键字:jQuery操作节点、 jQuery动态添加元素 、jQuey动态修改css、jQuey动画、jQuey导航伸缩条

9、jQuery获取、子、兄弟节点元素

9.1parent()、parents()获取节点元素

9.1.1 parent()获取父一节点元素

.parent()取得父级节点元素的jQuery对象

获得当前匹配元素集合中每个元素的父元素,使用选择器进行筛选是可选的。

几个上级就用几个.parent(),可连续使用。

以下代码现将所有p标签的父节点背景设置为蓝色,然后将class="selected"的p标签的父节点背景色设置为黄色。

 

代码清单:

<body>

<div><p>Hello</p></div>

<div class="selected"><p>Hello Again</p></div>

<script>

$("p").parent().css("background", "blue");

  $("p").parent(".selected").css("background", "yellow");

</script>

</body>

 

网页效果:

.parent()[0] 取得父级节点元素的DOM对象

以下示例,使用.parent()[0]取得父节点DOM对象进行传参。

<asp:Repeater runat="server" ID="rTree">

<HeaderTemplate>

<ul class="head">

</HeaderTemplate>

<ItemTemplate>

<li class="item" alt='<%# Eval("ID") %>'>

<asp:Image runat="server" onmouseover="var item=$(this).parent()[0]; groupMouseOver(item)"onmouseout="var item=$(this).parent()[0];groupMouseOut(item)" Height="13px" CssClass="flag" />

<a rel='<%# Eval("Photo") %>' id='<%# Eval("ID") %>' href="#"><%# Eval("Name") %></a>

</li>

</ItemTemplate>

<FooterTemplate>

</ul>

</FooterTemplate>

</asp:Repeater>

9.1.2parents([expr])获取各级父节点元素

parents() 获得当前匹配元素集合中每个元素的祖先元素,使用选择器进行筛选是可选的。

.parents() 方法允许我们在 DOM 树中搜索这些元素的祖先元素,并用从最近的父元素向上的顺序排列的匹配元素构造一个新的 jQuery 对象。

从父元素开始匹配寻找,一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤 。

以下示例,在<b>标签中显示父元素标签名称:

代码清单:

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

</head>

<body>

<div>

<p>

<span>

<b>我的父元素是:</b>

</span>

</p>

</div>

<script>

var parentEls = $("b").parents()

            .map(function () {

                  return this.tagName;

                })

            .get().join(", ");

$("b").append("<strong>" parentEls "</strong>");

</script>

</body>

</html>

 

网页效果:

9.2 children() 获取子节点元素方法

.children(selector)

 

返回匹配元素集合中每个元素的子元素,添加可选参数可通过选择器进行过滤。

 

找到类名为 "selected" 的所有 div 的子元素,并将其设置为蓝色:

$("div").children(".selected").css("color", "blue");

 

9.3 jQuery获取兄弟节点元素方法

siblings()方法用于获取所有同辈元素

next()用于获取节点之后的挨着的第一个符合筛选的同辈元素:$(".menuitem").next("div")

nextAll()用于获取节点之后的所有符合筛选的同辈元素,$(".menuitem").nextAll("div")

prev()、prevAll()获取节点之前的兄弟元素。

9.3.1 siblings()

siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。

 

查找每个 p 元素的所有类名为 "selected" 的所有同胞元素:

$("p").siblings(".selected")

 

以下示例将每个 p 元素的所有类名为 "selected" 的同胞元素背景置为黄色:

代码清单:

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

</head>

 

<body>

<p>Hello</p>

<p class="selected">Hello Again</p>

<div>

<span class="selected">Hello!!</span>

<p>And Again</p>

</div>

 

<script>

$("p").siblings(".selected").css("background", "yellow");

</script>

 

</body>

</html>

 

网页效果:

9.3.2 next()、nextAll()

next()

next() 获得匹配元素集合中每个元素之后紧邻的同胞元素。如果提供选择器,则取回匹配该选择器的下一个同胞元素。

如果给定一个表示 DOM 元素集合的 jQuery 对象,.next() 方法允许我们搜索 DOM 树中的元素紧跟的同胞元素,并用匹配元素构造新的 jQuery 对象。

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

</head>

 

<body>

<ul>

<li>list item 1</li>

<li>list item 2</li>

<li class="third">list item 3</li>

<li id="fourth">list item 4</li>

<li>list item 5</li>

</ul>

 

<script>

$('li.third').next().css('background-color', 'red');

$('li#fourth ').next().css('background-color', 'blue');

</script>

</body>

</html>

 

nextAll()

nextAll() 获得匹配元素集合中每个元素的所有跟随的同胞元素,由选择器筛选是可选的。$(".bg").nextAll().css("background", "green")

9.3.3 prev()、prevAll()

prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素,通过选择器进行筛选是可选的

prevAll() 获得当前匹配元素集合中每个元素的前面的所有同胞元素,使用选择器进行筛选是可选的。

$(function () {

            $("a").prev().css("background", "pink")

            $("#p1").prevAll().css("background", "blue")

});

9.3.4 获取兄弟节点应用

应用1 评分控件:

$("#rating li").mouseover(function () {

$(this).prevAll().andSelf().text("★").end().end().nextAll().text("☆");

    })

 

应用2选美女:选中项高亮--highlight风格

$(function () {

            var bg = $("#mv li").css("background-color");

            $("#mv li").mouseover(function () {

                $(this).css("background-color", "red").siblings().css("background-color", bg);

            });

        });

10、jQuery中对setInterval的调用

10.1 setInterval方法的调用

10.1.1 常规写法:change方法在$(function () {})之外

以下示例实现图片自动切换。

<head>

<title></title>

<style type = "text/css">

        li

        {

            display:none;

            }

</style>

<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

<script type="text/javascript">

        $(function () {

setInterval("change()", 1000);

        })

var i = 0;

        function change() {

            if (i == $("#mv a").length - 1) {

                i = 0;

            }

            else {

                i ;

            }

            $("#pic").attr("src", $("#mv a:eq(" i ")").attr("href"));

        }

</script>

</head>

<body>

<ul id = "mv">

<li><a href=".\picture\53.jpg">图片0</a></li>

<li><a href=".\picture\67.jpg">图片1</a></li>

<li><a href=".\picture\72.jpg">图片2</a></li>

<li><a href=".\picture\36.jpg">图片3</a></li>

</ul>

<img id = "pic" src = ".\picture\00.jpg"  alt="Alternate Text" />

</body>

10.1.2 change方法写在$(function () {})方法内部

setInterval()方法中调用方法时,直接使用方法名change传参。

<script type="text/javascript">

        $(function () {

            var i = 0;

            setInterval(change, 1000);

            function change() {

                if (i == $("#mv a").length - 1) {

                    i = 0;

                }

                else {

                    i ;

                }

                $("#pic").attr("src", $("#mv a:eq(" i ")").attr("href"));

            }

        })

</script>

10.2 setInterval实现倒计时注册

使用attr("disabled", false),倒计时过程中禁用按钮功能

<head>

<title></title>

<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

<script type="text/javascript">

        var count = 5;

        var interId;

        $(function () {

            interId = setInterval(setCount, 1000);

        })

        function setCount() {

            if (count > 0) {

                count--;

                $("input[name=zc]").val("请仔细阅读协议," count "秒后再注册");

            }

            else {

                $("input[name=zc]").attr("disabled", false).val("同意");

                clearInterval(interId);

            }

        }  

</script>

</head>

<body>

<input type = "text" name = "xy" value =""/>

<input type = "button" name = "zc" disabled="disabled" value ="请仔细阅读协议,5秒后再注册" />

    //此处可用三种方式 disabled="disabled" disabled="true" disabled=true </body>

11、jQuery CSS控制

css() //设置或返回被选元素的一个或多个样式属性

$("p").css("background-color");

$("p").css("background-color","yellow");

addClass("myclass") //不影响其他样式)

removeClass("myclass") //移除样式

toggleClass("myclass") //如果存在样式则去掉样式,如果没有样式则添加样式

hasClass("myclass") //判断是否存在样式

        $(function () {

            $("#btn").click(function () {

                $("body").toggleClass("dark");

                if ($("body").hasClass("dark")) {

                    $("#btn").val("开灯");

                }

                else {

                    $("#btn").val("关灯");

                }

            })

        })

控件获取聚焦和失去焦点

        $(function () {

                $("input[type=text]").focus(function () {

                    $(this).addClass("txt");

                }).blur(function(){

                    $(this).removeClass("txt")

                });

            });

11.1 搜索文本框空值判断及处理 addClass() removedClass() val()

<style type ="text/css">

        .color

        {

            color:Gray;

            }

</style>

<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

<script type="text/javascript">

 

        $(function () {

            $("input[name = search]").focus(function () {

                //如果文本是初始值,做如下处理

                if ($(this).val() == "请输入关键字!") {

                    $(this).val("").removeClass("color");

                }

            }).blur(function () {

                if ($(this).val() == "") {

                    $(this).val("请输入关键字!").addClass("color");

                }

            });

        })

</script>

11.2文本框空值控制 addClass hasClass removedClass

<style type="text/css">

        .new

        {

            border: 2px dotted red;

            }

</style>

<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

<script type="text/javascript">

        $(function () {

            $("input[type=text]").each(function () {

                $(this).focus(function () {

                    $(this).removeClass();

                }).blur(function () {

                    if ($(this).val() == "") {

                        $(this).addClass("new");

                    }

                });

            });

        });

11.3 选美女链式编程应用addClass、removedClass等方法

$(function () {

            //实现mouseover效果和点击事件移动到另一个区域

            $("#all li").each(

                function movemethod() {

                    $(this).mouseover(function () {

                        $(this).css("cursor", "pointer");

                        $(this).addClass("color");

                    }).mouseout(function () {

                        $(this).removeClass("color");

                    }).click(function () {

                        //$(this).remove().removeClass().css("cursor", "auto").appendTo($("#mm"))

                        //实现新的样式效果以及点击再移回去(有问题的再次点击无法重复移动了)

                        $(this).remove().removeClass().appendTo($("#mm"))

                        .mouseover(function () {

                        $(this).css("cursor", "pointer");

                        $(this).addClass("mmcolor");

                    }).mouseout(function () {

                        $(this).removeClass("mmcolor");

                    }).click(function () {

                        $(this).remove().removeClass().css("cursor", "auto").appendTo($("#all"));

                    });

                    })

                })

        })

12、jQuery动态创建、添加删除

12.1 jQuery创建添加append() prepend()等

12.1.1动态创建超链接append() prepend() before() after()

a.before在被选元素a前插入指定的内容,在开始标签前添加元素

a.after在被选元素a后插入指定的内容,在结束标签外添加元素

 

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

<script type="text/javascript">

        $(function () {

 

$("#btn").click(function(){

$link=$("<a href='http://www.qiushibaike.com'>糗事百科</a>");

$("#d1").append($link);

})

$("#prepend").click(function(){

$link=$("<a href='http://www.qiushibaike.com'>糗事百科</a>");

$("#d0").prepend($link);

})

$("#btnAfter").click(function(){

$link=$("<a href='http://www.qiushibaike.com'>糗事百科</a>");

$("#d1").after($link);

})

$("#before").click(function(){

$link=$("<a href='http://www.qiushibaike.com'>糗事百科</a>");

$("#d1").before($link);

})

 

})

</script>

12.1.2 动态创建文本框 append()empty()

        $(function () {

            $("#btn").click(function () {

                //清空div

                $("#d1").empty();

                //获取文本框的值,转化成数值

                var num = parseInt($("#txt").val());

 

                //循环动态创建文本框加载到div中

                for (var i = 1; i <= num; i ) {

                    var $txt = $("<input type='text' />");

                    $("#d1").append($txt);

                    //如果输出三个文本框,输出一个换行

                    if (i % 3 == 0) {

                        $("#d1").append($("<br />"));

                    }

                }

            })

        })

12.1.3 动态创建表格,显示网站列表json对象 append()方法 $.each

$(function () {

            var json = [

                { "name": "cnbeta", "url": "http://www.cnbeta.com" },

                { "name": "cnblogs", "url": "http://www.cnblogs.com" },

                { "name": "qiushibaike", "url": "http://www.qiushibaike.com" }

            ];

            //动态创建控件,变量用$修饰 ,好识别,指示这是在jQuery的变量

            var $table = $("<table id = 'tb'></table>");

            $table.attr("border", "1px");

            $("#d1").append($table); //此处是引用传值,修改$table,div中就改了

            //遍历json,为每个子元素创建一个tr,并加到$table中,然后加数据td

            $.each(json, function () {

                var $tr = $("<tr></tr>");

                $table.append($tr);

                var $td = $("<td><a href = '" this.url "'>" this.name "</a></td>");

                $tr.append($td); //$tr追加指向了$td指向的person,然后就跟$td没关系了

                $td = $("<td>" this.url "</td>"); //这里是对$td变量重新赋值,没有改变上面已经追加到$tr中的对象//例如此处使用$td.empty(),则会修改对象(清空内容)

                $tr.append($td);

            });

        })

12.2jQuery添加操作appendTo()、prependTo()等

appendTo(a)在被选元素a的结尾(仍然在内部)插入指定内容。

prependTo(a)在被选元素a的开头(仍位于内部)插入指定内容。

insertBefore(a)在被选元素a前插入指定的内容

insertAfter(a)在被选元素a后插入指定的内容

 

12.2.1 实现权限选择功能 option:selected

<head>

<title></title>

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

<script type="text/javascript">

        $(function () {

            $("input[value=>]").click(function () {

                $("#all option:selected").appendTo($("#sel"));

            })

            $("input[value=>>]").click(function () {

                $("#all option").appendTo($("#sel"));

            })

            $("input[value=<]").click(function () {

                $("#sel option:selected").appendTo($("#all"));

            })

            $("input[value=<<]").click(function () {

                $("#sel option").appendTo($("#all"));

            })

        })

</script>

</head>

<body>

<select id="all" size="5" multiple="multiple">

<option>查询</option>

<option>添加</option>

<option>编辑</option>

<option>删除</option>

</select>

<input type="button" value=">" />

<input type="button" value="<" />

<input type="button" value=">>" />

<input type="button" value="<<" />

<select id="sel" size="5" multiple="multiple">

</select>

</body>

12.2.2无刷新评论及动态创建jQuery元素

<script type="text/javascript">

        $(function () {

            $("#btn").click(function () {

                //如果表不存在,创建一个表格加载到div中

                var $tb = $("#tbcomment");

                if ($tb.length <= 0) {

                    $tb = $("<table id ='tbcomment' ></table>");

                    $("#re").append($tb);

                }

                //获取值准备数据

                var name = $("#userName").val();

                var comment = $("#content").val();

 

                //动态创建表的行加载

                var $tr = $("<tr></tr>");

                $tr.prependTo($tb);

 

                //动态创建表的列加载数据

                var $td = $("<td>" name "</td>");

                $td.appendTo($tr);

                $td = $("<td>" comment "</td>");

                $td.appendTo($tr);

            });

        })

</script>

12.3jQuery删除remove()、empty()

remove()删除节点,empty()清空内容

<head>

<title></title>

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

<script type="text/javascript">

        $(function () {

            $("#btn").click(function () {

                //删除该节点

                $("#mv li:last").remove();

 

                //清空标签之间的内容

                //$("#mv li:last").empty();

            })

        })

</script>

</head>

<body>

<input type="button" id="btn" value="remove" />

<ul id="mv">

<li>

贵妃

</li>

<li>

貂蝉

</li>

<li>

西施

</li>

</ul>

</body>

13动画效果

13.1简单动画

    $(function () {

        $("input[value=btn]").click(function () {

  $("#d1").hide(1500).show(1500).slideUp(1800).fadeIn(1500).toggle(1800).slideDown(1800).fadeOut(1800).slideToggle(1800);

        })

        $("input[value=toggle]").click(function () {

            $("#d1").toggle(800).slideToggle(800);

        })

        $("#stop").click(function () {

            ("#d1").stop();

        )

})

13.2复杂动画 animate()

    $("#btn").click(function () {

        $("#d1").animate({ "left": "200px", "top": "200px" }, 2000).animate({ "width": "400px", "height": "200px" }, 1000).animate({ "opacity": 0 }, 2000);

    })

//左移

    $("#btn1").click(function () {

        $("#d1").animate({"left":"-=40"},800);

    })

//右移

    $("#btn2").click(function () {

        $("#d1").animate({ "left": " =40" }, 800);

    })

 

<input type="button" value="click" id="btn" /><br />

<input type="button" id="btn1" value="向左" /><input type="button" id="btn2" value="向右" />

<div id="d1"></div>

13.3 slider照片

            $("#tb img").hover(function () {

                $(this).animate({"width":"270px","height":"180px"},"slow")

            }, function () {

                $(this).animate({ "width": "150px", "height": "100px" }, "slow")

            })

13.4 图片飞到鼠标点击的地方

        $(function () {

            $(document).click(function (e) {

                var x = e.pageX -parseInt($("#pic").css("left")) ;

                var y = e.pageY -parseInt($("#pic").css("top"));

$("#pic").animate({ left: " =" x, top: " =" y }, 3000);

            });

        })

13.5广告弹出与消失

 $(function () {

            $("#pic").animate({ right: 0, bottom: 0 }, 5000).animate({ "opacity": 0 }).animate({right:0,bottom:-120 },5000);

        })

14、Tab切换效果

14.1 QQTab

    $(function () {

//全部隐藏

        $("h3").next().hide();

//注册单击事件

        $("h3").click(function () {

            $(this).next().slideToggle(500);

        });

//显示第一项

        $("#qqTab h3:first").next().slideDown(500);

    })    

<div id="qqTab">

<h3>我的好友</h3>

<ul>

<li>锦涛</li>

<li>邦国</li>

<li>悟空</li>

</ul>

<h3>陌生人</h3>

<ul>

<li>拉登</li>

<li>007</li>

</ul>

<h3>黑名单</h3>

<ul>

<li>拉登</li>

<li>芙蓉</li>

</ul>

</div>

14.2 TabControl

    $("#qqTab li").mouseover(function () {

        //1 bg

$(this).addClass("activeTab").siblings().removeClass("activeTab");

 

        //2 div display

        var index = $("#qqTab li").index($(this));

       $("#tabs div").hide().eq(index).fadeIn("fast");

    })  

<div id="qqTab">

<ul>

<li class="activeTab">国内新闻</li>

<li>国际新闻</li>

<li>火星新闻</li>

</ul>

<div id="tabs">

<div id="tabPage1" >

国内新闻111111111111

</div>

<div id="tabPage2" style="display:none">

国际新闻2222222222222

</div>

<div id="tabPage3" style="display:none">

火星新闻333333333333

</div>

</div>

</div>

14.3伸缩导航条

    $(function () {

        $("#navigation li:not(.current_page) a").css("left", "-120px");

        $("#navigation li:not(.current_page)").hover(function () {

            $("a", $(this)).animate({"left":"0px"},"fast");

        }, function () {

                $("a", $(this)).animate({ "left": "-120px" }, "fast");

        })

    })