Jquery练习
2019-09-18 15:13
1471 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44019597/article/details/100984252
**1.使用jquery修改div元素的背景色(随意颜色)** <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 500px;height: 500px;background-color: orangered;"></div> <button id="change">切换颜色</button> <script src="../jquery-3.4.1.min.js"></script> <script> $(function () { $('#change').click(function () { $('div').css("background","yellow"); }) }) </script> </body> </html> **2.使用jquery修改div的子元素p的内容为"我是子元素"** <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="width: 200px;height: 200px; background-color: yellowgreen;"> <p>我不要改名字</p> <p>我也不要改名字</p> </div> <script src="../jquery-3.4.1.min.js"></script> <script> $(function () { $('div').text("我是子元素"); }) </script> </body> </html> **3.使用jquery修改第二个p元素的背景色为"orange"** <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <p style="background-color: yellowgreen;">我是第一个</p> <p style="background-color: yellow;">我是第二个</p> </div> <button id="change">切换第二个P标签颜色</button> <script src="../jquery-3.4.1.min.js"></script> <script> $(function () { $('#change').click(function () { $('P:eq(1)').css("background","orange"); }) }) </script> </body> </html> **4.删除列表元素中最后一个li元素** <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <button id="delete">删除最后一个li</button> <script src="../jquery-3.4.1.min.js"></script> <script> $(function () { $('#delete').click(function () { $('li:last').remove(); }) }) </script> </body> </html> **5.点击当前的p标签,弹出相对应的元素下标** <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <script src="../jquery-3.4.1.min.js"></script> <script> $(function () { $('p').click(function () { alert($(this).index()); }) }) </script> </body> </html> **6.利用jquery中的animate()方法.点击id为btn的按钮,实现类名为box的元素,向左移动500px** <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn">移动box</button> <div class="box" style="width: 500px;height: 200px;background-color: brown;left: 500px;position: absolute;">123</div> <script src="../jquery-3.4.1.min.js"></script> <script> $(function () { $('#btn').click(function () { $('.box').animate({"left":"-=500px"}); }) }) </script> </body> </html>
相关文章推荐
- JQuery练习删除
- JQuery 常见选择器详解练习2
- JQuery小练习
- Mootools遮罩层练习(原为网上的jquery写法)
- Ajax在JQuery中的应用(get方法练习1)
- 基于Jquery的淡入淡出的特效基础练习
- jquery:效果练习地址
- 【练习向】jQuery基础教程第四版课后练习——Book06_jQuery_通过Ajax发送数据
- [转]扩展对input的一些方法(练习jQuery插件)
- jQuery 练习[二] jquery 对象选择器(1)
- jquery事件练习
- Jquery练习总结
- jQuery节点操作练习
- jquery练习1 字符串分割求数字和
- jquery练习5 鼠标经过改变样式(TBC)
- Jquery选择器练习产品筛选
- jQuery基础教程-第6章练习
- jquery练习
- JQuery 小练习(实例代码)
- jquery学习之1.19-小练习3-输入用户名密码时焦点触发和失去焦点