JQuery(9)——练习问题

最新推荐文章于 2022-09-12 01:08:12 发布

陆老师Peter

最新推荐文章于 2022-09-12 01:08:12 发布

阅读量140

点赞数

分类专栏： JQuery 文章标签： $函数 for循环 each方法

本文链接：https://blog.csdn.net/qq_34573534/article/details/100676814

版权

JQuery 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

1、鼠标放到图片上前面的右看、右边的左看。问题：表兄弟不是兄弟。$函数使用选择器的时候，如果没有传第二个参数，则是相对于整个dom树根的。如果传递第二个参数，则是相对于第二个参数的选择器。

2、问题1：css("")参数能传递哪些东西？还是样式的名字，没特殊的。

3、问题2：alert((“li”).text());为什么不是打印每一个？联想委托的组合。如何解决？用for循环或者each方法（数组的每个元素是dom元素，这是为什么jqueryobject[0]拿到的是dom对象）。

4、为什么text()无法再链式。$(this).text("★").prevAll().text("★");

5、问题3：jquery中每click()一下就注册了一下事件（add，+=）。而不像javascript dom那样是覆盖。这里的+=类似于委托里面的+=

6、源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>

    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#ul1 > li").click(function() {
                //             $(this).css("backgroundColor", "red");
                //                $(this).siblings().css("backgroundColor", "Green");
                //隐式迭代(遍历处理)。css、attr等jquery方法都是默认返回前面的数组，siblings、next等则是返回处理后的数组。
                //            $(this).css("backgroundColor", "red").siblings().css("backgroundColor", "Green");
            });
            //            $("#trimgs img").width(50).height(50).mouseover(function() {
            //                //表兄弟不算兄弟
            //                $(this).attr("src", "images/middle.jpg");
            //                alert($(this).prevAll().length);
            //                $(this).prevAll().attr("src", "images/left.jpg");
            //                $(this).nextAll().attr("src", "images/right.jpg");
            //            });
            $("#trimgs img").width(100).height(100);
            $("#trimgs td").mouseover(function() {
                //$函数使用选择器的时候，如果没有传第二个参数，则是相对于整个dom树根的。如果传递第二个参数，则是相对于第二个参数的选择器。
                 $("img", $(this)).attr("src", "images/middle.jpg");

                $("img", $(this).prevAll()).attr("src", "images/left.jpg");
                $("img", $(this).nextAll()).attr("src", "images/right.jpg");

                //表兄弟不算兄弟
                //                $(this).attr("src", "images/middle.jpg");
                //                alert($(this).prevAll().length);
                //                $(this).prevAll().attr("src", "images/left.jpg");
                //                $(this).nextAll().attr("src", "images/right.jpg");
            });
        });
    </script>
</head>
<body>
    <ul id="ul1">
        <li>A</li>
        <li>A</li>
        <li>A</li>
        <li>A</li>
        <li>A</li>
    </ul>
    <table><tr id="trimgs">
        <td><img src="" /></td>
        <td><img src="" /></td>
        <td><img src="" /></td>
        <td><img src="" /></td>
        <td><img src="" /></td>
        <td><img src="" /></td>
    </tr></table>
</body>
</html>