Java后端学习路线笔记汇总表【黑马程序员】

JQuery-学习笔记01【基础——JQuery基础】——【day01】

JQuery-学习笔记02【基础——JQuery选择器】

JQuery-学习笔记03【基础——DOM操作】

JQuery-学习笔记04【基础——JQuery基础案例】

JQuery-学习笔记05【高级——JQuery动画和遍历】——【day02】

JQuery-学习笔记06【高级——JQuery事件绑定和切换】

JQuery-学习笔记07【高级——JQuery高级案例】

第3节 JQuery基础案例

JQuery_案例_隔行换色

JQuery_案例_全选和全不选

JQuery_案例_QQ表情选择

JQuery_案例_多选下拉列表左右移动

第3节 JQuery基础案例

JQuery_案例_隔行换色

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>01.隔行换色.html</title><script src="../../js/jquery-3.3.1.min.js"></script><script>//需求：将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow$(function () {//1. 获取数据行的奇数行的tr,设置背景色为pink$("tr:gt(1):odd").css("backgroundColor", "pink");//2. 获取数据行的偶数行的tr,设置背景色为yellow$("tr:gt(1):even").css("backgroundColor", "yellow");});</script>
</head>
<body><table id="tab1" border="1" width="800" align="center"><tr><td colspan="5"><input type="button" value="删除"></td></tr><tr style="background-color: #999999;"><th><input type="checkbox"></th><th>分类ID</th><th>分类名称</th><th>分类描述</th><th>操作</th></tr><tr><td><input type="checkbox"></td><td>0</td><td>手机数码</td><td>手机数码类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox"></td><td>1</td><td>电脑办公</td><td>电脑办公类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox"></td><td>2</td><td>鞋靴箱包</td><td>鞋靴箱包类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox"></td><td>3</td><td>家居饰品</td><td>家居饰品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr></table>
</body>
</html>

JQuery_案例_全选和全不选

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>02.全选和全不选.html</title><script src="../../js/jquery-3.3.1.min.js"></script><script>//分析：需要保证下边的选中状态和第一个复选框的选中状态一致即可function selectAll(obj) {//获取下边的复选框$(".itemSelect").prop("checked", obj.checked);}</script>
</head>
<body><table id="tab1" border="1" width="800" align="center"><tr><td colspan="5"><input type="button" value="删除"></td></tr><tr><th><input type="checkbox" onclick="selectAll(this)"></th><th>分类ID</th><th>分类名称</th><th>分类描述</th><th>操作</th></tr><tr><td><input type="checkbox" class="itemSelect"></td><td>1</td><td>手机数码</td><td>手机数码类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="itemSelect"></td><td>2</td><td>电脑办公</td><td>电脑办公类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="itemSelect"></td><td>3</td><td>鞋靴箱包</td><td>鞋靴箱包类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="itemSelect"></td><td>4</td><td>家居饰品</td><td>家居饰品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr></table>
</body>
</html>

JQuery_案例_QQ表情选择

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>03.QQ表情选择.html</title><script src="../../js/jquery-3.3.1.min.js"></script><style type="text/css">* {margin: 0;padding: 0;list-style: none;}.emoji {margin: 50px;}ul {overflow: hidden;}li {float: left;width: 48px;height: 48px;cursor: pointer;}.emoji img {cursor: pointer;}</style><script>//需求：点击qq表情，将其追加到发言框中$(function () {//1.给img图片添加onclick事件$("ul img").click(function () {//2.追加到p标签中//js转jq：$(this)  clone()克隆方法$(".word").append($(this).clone());});});</script>
</head>
<body><div class="emoji"><ul><li><img src="img/01.gif" height="22" width="22" alt="" /></li><li><img src="img/02.gif" height="22" width="22" alt="" /></li><li><img src="img/03.gif" height="22" width="22" alt="" /></li><li><img src="img/04.gif" height="22" width="22" alt="" /></li><li><img src="img/05.gif" height="22" width="22" alt="" /></li><li><img src="img/06.gif" height="22" width="22" alt="" /></li><li><img src="img/07.gif" height="22" width="22" alt="" /></li><li><img src="img/08.gif" height="22" width="22" alt="" /></li><li><img src="img/09.gif" height="22" width="22" alt="" /></li><li><img src="img/10.gif" height="22" width="22" alt="" /></li><li><img src="img/11.gif" height="22" width="22" alt="" /></li><li><img src="img/12.gif" height="22" width="22" alt="" /></li></ul><p class="word"><strong>请发言：</strong><img src="img/12.gif" height="22" width="22" alt="" /></p></div>
</body>
</html>

JQuery_案例_多选下拉列表左右移动

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>04.多选下拉列表左右移动.html</title><script src="../../js/jquery-3.3.1.min.js"></script><style>#leftName,#btn,#rightName {float: left;width: 100px;height: 300px;}#toRight,#toLeft {margin-top: 100px;margin-left: 30px;width: 50px;}.border {height: 500px;padding: 100px;}</style><script>//需求：实现下拉列表选中条目左右选择功能$(function () {//toRight$("#toRight").click(function () {//获取右边的下拉列表对象，append(左边下拉列表选中的option)$("#rightName").append($("#leftName > option:selected"));});//toLeft$("#toLeft").click(function () {//appendTo   获取右边选中的option，将其移动到左边下拉列表中$("#rightName > option:selected").appendTo($("#leftName"));});});</script>
</head>
<body><div class="border"><select id="leftName" multiple="multiple"><option>张三</option><option>李四</option><option>王五</option><option>赵六</option></select><div id="btn"><input type="button" id="toRight" value="-->"><br><input type="button" id="toLeft" value="<--"></div><select id="rightName" multiple="multiple"><option>钱七</option></select></div>
</body>
</html>

加油~~~ ヾ(◍°∇°◍)ﾉﾞ

JQuery-学习笔记04【基础——JQuery基础案例】相关推荐

JavaScript程序库jQuery学习笔记分享(二)jQuery对象和DOM操作，和其他js库冲突处理
今天我继续更新jQuery学习笔记,最近考试比较忙,也就更新的比较慢了,这里向大家说一声抱歉,嘻嘻. 让那不愉快的情绪过去吧,继续进行我们的jQuery之旅吧. 一:jQuery对象和DOM对象 1. ...
jQuery学习笔记（一）——基础选择器、过滤选择器、表单选择器
$()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如示例中$("p")会得到一组P标签元素,其中"p"表示CSS中的标签选择器.$()中的() ...
Jquery学习笔记：获取jquery对象的基本方法
jquery最大的好处是将js对html页面的操作(读写)进行了封装,隔离了浏览器的差异性,并简化了操作,和提供了强大的功能. 在web页面中,所有的js操作都是围绕操作dom对象来的.而jquery ...
jQuery 学习笔记之二 (jQuery代码风格)
jquery 学习之代码风格对于同一个对象的较多操作,建议每行写一个操作,代码如下: $(this).removeClass() .addClass() .stop() .fadeTo(" ...
jQuery 学习笔记之二 (jQuery代码风格)
jquery 学习之代码风格对于同一个对象的较多操作,建议每行写一个操作,代码如下: $(this).removeClass() .addClass() .stop() .fadeTo("f ...
jQuery 学习笔记之九 (jQuery 图片提示 )
案例研究网站的超链接和图片提示1.超级链接提示效果浏览器已经自带了超级链接提示,只需要在超链接中加入title属性就可以了.HTML 代码如下:<a href="#" ti ...
jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
jquery学习笔记（-）
Jquery学习笔记(-) Jquery的简介 Jquery是继prototype之后又一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后只有21k),兼容各种浏览器(IE6.0+,FF1 ...
【Python学习笔记】第一章基础知识：格式化输出，转义字符，变量类型转换，算术运算符，运算符优先级和赋值运算符，逻辑运算符，世界杯案例题目，条件判断if语句，猜拳游戏与三目运算符
Python学习笔记之[第一章]基础知识前言: 一.格式化输出 1.基本格式: 2.练习代码: 二.转义字符 1.基本格式: 2.练习代码: 3.输出结果: 三.输入 1.基本格式: 2.练习代码: ...
【转载】jQuery学习笔记
jQuery学习笔记 1 基础 HTML :一个人的裸体,是一个人的物质基础,是一个结构. CSS :一个人的漂亮外衣,使一个人看起来不是那么原始,修饰了一个人. JavaScript :一个人的灵魂 ...

JQuery-学习笔记04【基础——JQuery基础案例】

第3节 JQuery基础案例

JQuery_案例_隔行换色

JQuery_案例_全选和全不选

JQuery_案例_QQ表情选择

JQuery_案例_多选下拉列表左右移动

JQuery-学习笔记04【基础——JQuery基础案例】相关推荐

最新文章

热门文章