jQuery简单练习（2）

最新推荐文章于 2019-07-01 15:58:19 发布

人走丿茶凉

最新推荐文章于 2019-07-01 15:58:19 发布

阅读量473

点赞数

分类专栏： html5+css3 javascript 文章标签： jquery css 标签 class

本文链接：https://blog.csdn.net/Luck_whr/article/details/78196798

版权

html5+css3 同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

javascript

22 篇文章 1 订阅

订阅专栏

* 需要添加jquery工具包*

1. 通过jquery控制到ul中li标签的元素

$(“ul”).children() // 获取到ul标签下的所有子级标签
.children(“.sh”) // 获取子级标签中，调用到sh的class类的标签
.css() // 添加css样式
.next() // 返回被选元素的下一个同级元素
.prev() // 返回被选元素的上一个同级元素
.siblings() // 返回被选元素的所有同级元素
.closest() // 返回被选元素的第一个祖先元素
$(document).ready(function () {}); // 在文档加载后激活函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <script type="text/javascript">
        $(function () {
            // $("ul").children().css({"color": "green"});
            // $("ul").children(".sh").css({"color": "green"});
            // $("ul").children(".sh").next().css({"color": "green"});
            // $("ul").children(".sh").prev().css({"color": "green"});
            // $("ul").children(".sh").siblings().css({"color": "green"});
            $("li:first").closest("ul").css({"background-color": "green"});
        });

        //        $(document).ready(function () {
        //
        //        });
    </script>
</head>
<body>
<ul>
    <li>北京</li>
    <li class="sh">上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
</html>

2. 通过jquery控制文字与图片的显示与隐藏

$(function (){}） // 当调用该函数时，会执行函数内的代码
.click() // 当点击按钮时，隐藏或显示元素
.slideUp() // 使用滑动效果，隐藏被选元素
- ”slow” // 设置速度为慢
- “normal” // 设置速度为中
- “fast” // 设置速度为快
- 毫秒（比如 1500） // 设置速度为具体时间
.slideDown() // 使用滑动效果，显示隐藏元素
.slideToggle() // 使用滑动效果（高度变化）来切换元素的可见状态
- 如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素
.show() // 如果被选的元素已被隐藏，则显示该元素
.hide() // 如果被选的元素已被显示，则隐藏该元素
.toggle() // 绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件
- 例如：（如果存在三个函数）
  - 第一次点击将调用第一个函数
  - 第二次点击调用第二个函数
  - 第三次点击调用第三个函数
  - 第四次点击再次调用第一个函数
  - 以此类推


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#out").click(function () {
                $("#title").slideUp("fast");
            });

            $("#in").click(function () {
                $("#title").slideDown(10000);
            });

            $("#in_out").click(function () {
                $("#title").slideToggle();
            });

            $("#myShow").click(function () {
                $("#topImg").show();
            });

            $("#myHide").click(function () {
                $("#topImg").hide();
            });

            $("#myShowOrHide").click(function () {
                $("#topImg").toggle();
            });
        });
    </script>
</head>
<body>
<button id="out">淡出</button>
<br/>
<button id="in">淡入</button>
<br/>
<button id="in_out">点击我，如果隐藏就滑入|否则滑出</button>
<br/>
<button id="myShow">点击我，显示</button>
<br/>
<button id="myHide">点击我，隐藏</button>
<br/>
<button id="myShowOrHide">点击我，如果显示就隐藏|如果隐藏就显示</button>
<br/>
<button id="moveright100px">点击我，图片向右移动100px</button>
<br/>
<br/>

<div id="title" style="font-size: 32px">八维学院</div>
<img id="topImg" src="../Baidu/top1.jpg"/>
</body>
</html>

3. 通过jquery控制图片的移动效果

*{ } //全局适配器，所有标签都会调用
var moveToLeft = function () {}; // 把函数当作变量一样进行申明
- 在多人同时开发的情况下，可以保证自己运行的不会是其他人编写的同名函数
- 例如：
  - A编写了:
    - var foo = function(){alert(‘a’);};
    - foo();
  - B编写了:
    - var foo = function(){alert(‘b’);};
    - foo();
- 当他们的文件合并时，都可以正常工作
.animate({“left”: “0”}, “slow”, moveToRight); // 执行 CSS 属性集的自定义动画
- {“left”: “0”} - - 规定动画效果的 CSS 样式和值
  - left –规定动画的效果
  - 0 - - 规定动画运行的速度
- slow - - 规定在不同的动画点中设置动画速度的 easing 函数
  - 也就是说：
    - 当图片从0%运行到50%时，可设置一个运行速度
    - 当图片从50%运行到100%时，可设置一个运行速度
  - 内置的 easing 函数：
    - swing
    - linear
  - 扩展插件中提供更多 easing 函数。
moveToRight // 此函数执行完之后，要执行的函数


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义动画</title>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <style>
        * {
            margin: 0;
        }
    </style>
    <script type="text/javascript">
        var moveToLeft = function () {
            $("#topImg").animate({"left": "0"}, "slow", moveToRight);
        };

        var moveToRight = function () {
            $("#topImg").animate({"left": "100px"}, "slow", moveToLeft);
        };

        $(function () {
            $("button").click(moveToRight);
        });
    </script>
</head>
<body>
<button>点击我右移100px</button>
<br/><br/><br/><br/>
<img id="topImg" style="position: absolute; left: 0" src="../Baidu/top1.jpg"/>
</body>
</html>

4. 通过jquery控制到文字属性

.append(“”); // 在被选元素的结尾（仍然在内部）插入指定内容
.prepend(“”); // 在被选元素的开头（仍位于内部）插入指定内容
.before(“”); // 在被选元素前插入指定的内容
.after(“”); // 在被选元素后插入指定的内容
- .remove(); // 移除被选元素，包括所有文本和子节点
- .detach(); // 移除被选元素，包括所有文本和子节点
  - 这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素
  - detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义动画</title>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <script type="text/javascript">
        $(function () {
            $("button").click(function () {
                // $("ul").append("<li>上海</li>"); // 在元素的内部，最后面添加html
                // $("ul").prepend("<li>上海</li>"); // 在元素的内部，最前面添加html

                // $("ul").before("<li>上海</li>"); // 在元素的同级，前面添加html
                // $("ul").after("<li>上海</li>"); // 在元素的同级，后面添加html

                // $("li:eq(2)").remove(); // 删除html
                var liObj = $("li:eq(2)").detach(); // 删除html
                $("ul").prepend(liObj);
            });
        });
    </script>
</head>
<body>
<button>点击我，在城市中删除“上海”</button>
<br/><br/><br/><br/>
<ul>
    <li>北京</li>
    <li>天津</li>
    <li>上海</li>
</ul>
</body>
</html>

人走丿茶凉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery简单练习（2）

* 需要添加jquery工具包*1. 通过jquery控制到ul中li标签的元素$(“ul”).children() // 获取到ul标签下的所有子级标签.children(“.sh”) // 获取子级标签中，调用到sh的class类的标签.css() // 添加css样式.next() // 返回被选元素的下一个同级元素.prev() // 返回被选元素的上一个同级元素.siblin
复制链接

扫一扫