day55 jQuery 练习
day55 jQuery 练习
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>位置相关示例之返回顶部</title>
<style>
.c1 {
width: 100px;
height: 200px;
background-color: red;
}
.c2 {
height: 50px;
width: 50px;
position: fixed;
bottom: 15px;
right: 15px;
background-color: #2b669a;
}
.hide {
display: none;
}
.c3 {
height: 100px;
}
</style>
</head>
<body>
<button id="b1" class="btn btn-default">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div>
<button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(\'#b1\').on(\'click\',function () {
$(\'.c1\').offset({left:200,top:200});
});
// 移动c1 的位置 按照本视口移动
// 设置滚动图标返回顶部
$(window).on(\'scroll\',function () {
// 注意window不能加上引号
if($(window).scrollTop() >100){
//. 当向下滚动超过100px, 就把右下角那个返回顶部的按钮显示出来
// 窗口的顶部行数大于100 删除隐藏
$(\'#b2\').removeClass(\'hide\');
}
else{
// 否则添加隐藏
$(\'#b2\').addClass(\'hide\');
}
});
// 设置函数并触发
$(\'#b2\').on(\'click\',function () {
// 点击后回滚到0 顶部
$(window).scrollTop(0);
})
</script>
</body>
</html>
返回顶部示例
2
1怎么样新建一个tr 然后添加内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM 怎么样新建一个tr 然后添加内容</title>
</head>
<body>
<script>
// 1新建一个tr行的标签然后准备建td
var trEle=document.createElement(\'tr\');
// console.log(trEle);
// 2随意添加一些文档内容 0 1 2
for(var i=0;i<3;i++){
// 3 新建一个td
var tdEle=document.createElement(\'td\');
// console.log(tdEle);
//***** 4td文档的内容赋值就是td之间的内容等于i
tdEle.innerText=i;
// 5添加td 行元素标签添加td元素
trEle.appendChild(tdEle);
// 6查看tr 标签及其内容
console.log(trEle.innerHTML);
}
// 查看行标签
console.log(trEle)
</script>
</body>
</html>
3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于菜单的全选，反选 取消</title>
</head>
<body>
<table border="1px" >
<thead>
<tr>
<th>#</th>
<th>name</th>
<th>hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>egon</td>
<td>街舞</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>德胜</td>
<td>睡觉</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>建超</td>
<td>拍马</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>晓梅</td>
<td>开车</td>
</tr>
</tbody>
</table>
<div>
<input type="button" id=\'all\' value="全选">
<input type="button" id=\'fan\' value="反选">
<input type="button" id=\'cancer\' value="取消">
</div>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 1绑定事件全选 找到标签
$(\'#all\').on(\'click\',function () {
// 找到所有的多选框并利用属性prop（checked,true）的知识
// 注意checked 是个默认已经选择选择 属性里面必须加上引号
$(\':checkbox\').prop(\'checked\',true);
})
// 2 绑定事件取消 先找到标签
$(\'#cancer\').on(\'click\',function () {
$(\':checkbox\').prop(\'checked\',false);
})
// 3 反选 事件并找到标签
// 新知识each
$(\'#fan\').on(\'click\',function () {
// $(\':checkbox\')是个数组 类似枚举循环 此时内容是[复选框1 复选框2 或者其他]
$(\':checkbox\').each(function () {
var flag = $(this).prop(\'checked\');
// this 可能就是复选框1 checked默认是选择了的
// $(this)此时就是把dom包起来
$(this).prop(\'checked\',!flag);
})
})
</script>
</html>
4 关于each 循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>each循环</title>
</head>
<body>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script>
var a = [11, 22, 33, 44, 55];
// //第一种 格式 $.each(数组，function ()
// $.each(a ,function (i,v) {
// console.log(i,v);
// if (v === 44){
// return false;
// }
// })
// //第二种$(数组).each(function () {
$(a).each(function (i,v) {
console.log(i,v);
if (v === 44){
return false;
}
})
4 登录注册聚焦时候为空 失去焦点报出内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录校验练习</title>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<!--form表单就是个网址可以为空-->
<form action=""></form>
<div>
<!--用户名设置 注意 for 后边和id值是一样的-->
<label for="input-name">用户名</label>
<input type="text" id="input-name">
<span class="error"></span>
</div>
<div> <!--用户名设置 注意 for 后边和id值是一样的-->
<label for="input-password">密码</label>
<input type="password" id="input-password">
<span class="error"></span>
</div>
<div>
<input type="button" id=\'btn\' value="提交">
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 找标签并定义函数点击提注意没有on jQuery 此时可有可无
// 1找到标签 定义函数 实现点击后为空时候 的规范文字不能为空
// $(\'#btn\').on(\'click\',function () {
// // 找到用户名密码的第一次取得值
// var username= $("#input-name").val();
// var password= $("#input-password").val();
// if(username.length===0) {
// // 找到标签后的下一个next(标签)标签的错误类名并弹出文档text文本内容
// $(\'#input-name\').next(\'.error\').text(\'对不起 用户名 不能为空\');
// }
// if(password.length===0) {
// $(\'#input-password\').next(\'.error\').text(\'对不起 密码 不能为空\');
// }
// });
$(\'#input-name\').on(\'blur\',function () {
var username= $(\'#input-name\').val();
if(username.length===0){
$(\'#input-name\').next(\'.error\').text(\'你好密码不能为空哦\');
}
});
// // 3聚焦用户名设置为空 先找到标签
$("#input-name").on(\'focus\',function () {
$(\'#input-name\').next(\'.error\').text(\'\');
});
// // //4聚焦密码设置为空 先找到标签
$("#input-password").on(\'focus\',function () {
$("#input-password").next(\'.error\').text(\'\');
});
// 设置密码不能为空 非聚焦的时候
$(\'#input-password\').on(\'blur\',function () {
var password= $("#input-password").val();
if(password.length===0){
$("#input-password").next(\'.error\').text(\'你好密码不能为空哦\');
}
});
</script>
</body>
</html>
6关于return false 切断提交刷新的的示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>return false 切断提交的刷新</title>
</head>
<body>
<form action="">
<input id=\'name\' type="text">
<input id=\'pwd\' type="password">
<input type="submit" value="提交">
</form>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 1先找到提交按钮所在的标签 注意input的属性格式 :submit
$(\':submit\').on(\'click\',function () {
if ($(\'#name\').val().length === 0||$(\'#pwd\').val().length===0){
// 加上return false后不能点击提交刷新了
return false;
}
})
</script>
</body>
</html>
7
$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。 empty()// 删除匹配的元素集合中所有的子节点。
例子：
点击按钮在表格添加一行数据。
点击每一行的删除按钮删除当前行数据。
替换
replaceWith() replaceAll()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul id="u1">
<l1>11</l1>
</ul>
<p id="p1">p1</p>
<div id="d1">
<div>
<span>1</span><span>2</span>
</div>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 1创建元素dom 和jQuery 是一样的 只是需要$包起来 需求在l1后边添加l2 内容是22
//向后插 注意添加的后边不要加引号 否则成了字符串了
// 针对于子标签的
// var li2Ele=document.createElement(\'li\');
// $(li2Ele).text(\'22\');
// $(\'ul\').append(li2Ele);
// $(li2Ele).appendTo(\'ul\');
// 2往前插入
// $(li2Ele).text(\'00\');
// // $(\'ul\').prepend(li2Ele);
// $(li2Ele).prependTo(\'ul\');
// 3 针对同级标签 外部插入
var pEle=document.createElement(\'p\');
// $(pEle).text(\'p2\')
// $(\'#p1\').after(pEle)
// $(pEle).insertAfter($(\'#p1\'));
$(pEle).text(\'p0\');
// $(\'#p1\').before(pEle);
$(pEle).insertBefore($(\'#p1\'));
</script>
</body>
</html>
8 文档操作示例 删除 新增
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="b1">新增</button>
<table border="1" id="t1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>egon</td>
<td>杠娘</td>
<td>
<input type="button" value="编辑">
<input class="delete" type="button" value="删除">
</td>
</tr>
<tr>
<td>2</td>
<td>晓梅</td>
<td>开车</td>
<td>
<input type="button" value="编辑">
<input class="delete" type="button" value="删除">
</td>
</tr>
<tr>
<td>3</td>
<td>德胜</td>
<td>睡觉</td>
<td>
<input type="button" value="编辑">
<input class="delete" type="button" value="删除">
</td>
</tr><tr>
<td>4</td>
<td>建超</td>
<td>拍马</td>
<td>
<input type="button" value="编辑">
<input class="delete" type="button" value="删除">
</td>
</tr>
</tbody>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 1查找标签 并定义函数
$(\'#b1\').on(\'click\',function () {
// 创建一个行
var trEle=document.createElement(\'tr\');
$(trEle).html("<td>5</td> <td>Gold</td> <td>开车</td> <td> <input type=\'button\' value=\'编辑\'> <input class=\'delete\' type=\'button\' value=\'删除\'> </td>");
$(trEle).appendTo($(\'tbody\'));
// $(\'tbody\').append(trEle);
});
// 2普通绑定事件 绑定删除
$(\'.delete\').on(\'click\',function () {
// //利用删除标签remove()
// //this 此时就是现在的delete 所在的标签
// //此时的标签上一级 是td 再上一级是tr
$(this).parent().parent().remove();
});
// 3 以上出现一个问题 新增的不能删除 因为新增的没有被绑定、
// 事件委托 利用tr的上级标签去删除
// 此时注意 .delete 的位置
$(\'tbody\').on(\'click\',\'.delete\',function () {
// 利用删除标签remove()
// this 此时就是现在的delete 所在的标签
// 此时的标签上一级 是td 再上一级是tr
$(this).parent().parent().remove();
});
</script>
</html>
9 关于替换演示
1找到div标签然后用pEle 替换
// $(\'div\').replaceWith(pEle);
// 2 可以理解pEle覆盖div 标签
$(pEle).replaceAll($(\'div\'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>替换示例</title>
</head>
<body>
<div>div1</div>
<div>div2</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
// var pEle = document.createElement("p");
var pEle= document.createElement(\'p\');
$(pEle).text(\'p替换div\');
// 1找到div标签然后用pEle 替换
// $(\'div\').replaceWith(pEle);
// 2 可以理解pEle覆盖div 标签
$(pEle).replaceAll($(\'div\'));
// $(pEle).text("p标签");
// $("div").replaceWith(pEle);
// $(pEle).replaceAll($("div"));
</script>
</body>
</html
10 关于克隆 .clone() 默认是(true)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
background-color: deeppink;
padding: 10px;
color: white;
margin: 5px;
border: none;
}
.c2 {
background-color: dodgerblue;
padding: 10px;
color: white;
margin: 5px;
border: none;
}
</style>
</head>
<body>
<button class="c1">屠龙宝刀，点击就送11</button>
<hr>
<button class="c2">屠龙宝刀，点击就送22</button>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 1克隆.clone() insertAfter($(\'.c1\')); 这种情况会迭代的克隆
$(\'.c1\').on(\'click\',function () {
//$(this).clone().insertAfter($(\'.c1\'));
// 2 克隆本个 一个一个的克隆
$(this).clone(true).insertAfter(this);
})
</script>
</html>
11 关于事件的 click hover change keydown 键盘码 event.keyCode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<button id="b1">点我</button>
<select name="" id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</body>
<script src="jquery-3.2.1.min.js"></script>
<script>
// // 1 选择标签后定义函数 点击触发
// $(\'#b1\').click(function () {
// alert(123);
// });
// // 2 选择标签后定义函数 点击触发 on和1的效果是样 比较推荐的
// $(\'#b1\').on(\'click\',function () {
// alert(456);
// });
// // 3 鼠标移上去 触发 hover事件 按钮会变色
// $(\'#b1\').hover(\'click\',function () {
// alert(789);
// });
// 4 change 改变下拉选项并选择会显示alert
// $("#s1").change(function () {
// alert("大王小王");
// });
// 按键事件
// keydown 按下
// keyup 抬起
// keypress 按一下
// 5 按下键盘会显示键盘相对应的键盘码
// 引用桌面的window的标签 键盘码 keyCode
$(window).keydown(function () {
alert(event.keyCode);
});
</script>
</html>
11 利用shift 键 操作
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>键盘事件示例</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Egon</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Alex</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Yuan</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>EvaJ</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Gold</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
</tbody>
</table>
<input type="button" id="b1" value="全选">
<input type="button" id="b2" value="取消">
<input type="button" id="b3" value="反选">
<script src="jquery-3.2.1.min.js"></script>
<script>
// 全选
$("#b1").on("click", function () {
$(":checkbox").prop("checked", true);
});
// 取消
$("#b2").on("click", function () {
$(":checkbox").prop("checked", false);
});
// 反选
$("#b3").on("click", function () {
$(":checkbox").each(function () {
var flag = $(this).prop("checked");
$(this).prop("checked", !flag);
})
});
var flag=false;
// 1 按键shift 按下时候 event.keyCode===16
$(window).on(\'keydown\',function () {
if (event.keyCode===16) {
flag=true;
}
});
// 2 按键shift 抬起时候
$(window).on(\'keyup\',function () {
if (event.keyCode===16) {
flag=false;
}
});
// 3 找到select标签 利用change 定义函数
$(\'select\').on(\'change\',function () {
// 找到select选中的标签 this此时是select标签内的 上级td 在上一级是tr
var ischecked= $(this).parent().parent().find(\'input:checkbox\').prop(\'checked\');
// 如果flag是true 并且找到选中的
if (flag && ischecked){
// // $(this).val()指的是在select 中找到的的那个选中的值 例如 下线
var opptionvalue= $(this).val();
}
$(\'input:checked\').parent().parent().find(\'select\').val(opptionvalue);
})
</script>
</body>
</html>
13 关于$(document).ready(function) 可以预先把加载的内容显示出来前提位置放在body 前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面加载完绑定事件 （页面加载之前要想看看内容加上此话）</title>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 传统的找不到
// var d1Ele = document.getElementById("d1");
// console.log(d1Ele.innerText);
// 传统的找不到
$(document).ready(function () {
var d1Ele = document.getElementById("d1");
console.log(d1Ele.innerText);
// 把绑定事件的操作都放在这里面
});
</script>
</head>
<body>
<div id="d1">我是div标签</div>
</body>
</html>
13 关于动画的
// 基本 show([s,[e],[fn]]) hide([s,[e],[fn]]) toggle([s],[e],[fn]) // 滑动 slideDown([s],[e],[fn]) slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn]) // 淡入淡出 fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) fadeToggle([s,[e],[fn]]) // 自定义 animate(p,[s],[e],[fn])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画效果示例</title>
</head>
<body>
<img style="position: relative" id="i1" width="300" src="http://www.iyi8.com/uploadfile/2015/1024/20151024114500805.jpg" alt="我前女友">
<button id="b1">再见</button>
<button id="b2">再见x2</button>
<button id="b3">往左</button>
<button id="b4">往右</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
// <!--1toggle 有的话点击就删除 没有的话点击就出现 3秒时间-->
$("#b1").on("click", function () {
!--$("#i1").toggle(3000);
});
// 2fadetoggle 浅入浅出有的话点击就删除 没有的话点击就出现 3秒时间
$("#b2").on("click", function () {
$("#i1").fadeToggle(3000);
});
// 3 自定义向左向右移动 animated({})
$("#b3").on("click", function () {
$("#i1").animate({
"right": "+50px"
}, 3000)
});
$("#b4").on("click", function () {
$("#i1").animate({
"right": "-50px"
}, 3000)
})
</script>
</body>
</html>
16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate() 自定义动画 </title>
<style>
.c1{
width: 100px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class="c1"></div>
<button class="c2">变长</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 绑定点击事件 并定义函数
$(\'.c2\').on(\'click\',function () {
// 找到要变化的标签 animated( )
$(\'.c1\').animate({
\'width\': \'+=50px\',\'height\': \'+=50px\'
},1000);
})
</script>
</body>
</html>
版权声明：本文为xiaoluoboer原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。