DOM创建节点
let trEle = document.createElement('tr');
HTML创建节点
var textNode1 = '<p>我是通过HTML创建出来的</p>';JQ创建节点的方式
var textNode2 = $('<p></p>').text('我是通过JQ创建出来的')
$('body').html(`<p>123</p>`)
节点拼接进文档
$('a').append('b')常见的事件
click(function(){...}) 点击触发事件
hover(function(){...}) 鼠标移动到上面触发
blur(function(){...}) 鼠标取消选中触发
focus(function(){...}) 鼠标选中触发
change(function(){...}) 元素的值发生变化的时候触发，常用与select
keyup(function(){...}) 键盘按键按下的时候触发
keydown(function(){...}) 键盘按键松开的时候触发
常见应用场景
hover事件有2个匿名函数，移入和移出 hover --购物车按钮 focus blur --input框获得或丢失焦点 change -- keyup keydown --批量操作
button onclick='foo()'
绑定事件的两种方式
1. click(function(){...}) -----绑定点击事件 2. $('父标签').on("对象","事件名称", function(){...}) ----事件委托 事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。 1.常用来作用于哪些会在未来创建或者增加的元素上面，使未来元素也能继承特点功能 2.实现的原理时冒泡原理，即从触发者本身开始往上一级查找绑定的事件，直到找到为止，类似气泡从水底上浮 事件委托在表格的增删改查中有使用 $("对象").on("事件名称", function(){...}) ----另一种事件的写法,但是没有使用事件冒泡
阻止后续事件的执行
return false; // 常见阻止表单提交等 原因：submit自带一个提交的事件，如果在绑定一个事件就相当于绑定一个操作会执行2个事件，一般在submit之前都会对数据进行校验通过后才会执行submit，实现的方式就是在判断的最后加上return false
页面jsj加载
可以很好的避免了在文档之前先加载了JS，而导致无法找到选择器的问题
方式一：$(document).ready(function(){
// 在这里写你的JS代码...
})
文档加载完后加载js,一般js写在body标签最底下
方式二：$(function(){
// 你在这里写你的代码
})
方式一和方式二作用相同,写法不同,一的可读性更强
不过大多数情况都是直接将js写在body标签的最下面
js动画
// 基本 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])
each方法
循环打印列表,循环取出节点,并对节点操作(加类名)
方式一
$.each()
jquery对象.each
方式二
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>
跳出each循环
data方法
赋值(数字)$('.modal').data('tr',1);
赋值(字符串)$('.modal').data('tr','hello');
赋值(jq对象)$('.modal').data('tr',$('html'));
查$('.modal').data('tr');
删$('.modal').removeData('tr')
+//新思路:jQuery对象代表的是对象被修改,对象所在的节点的数据也会被修改,$('.modal')这个对象填谁都可以,只要能保证jq对象数据不会被清除就行,其次需要考虑多次编辑的情况下,之前保留的jq对象数据会不会残留,导致后面回填数据错误,
// 实际测试好像并不影响,可能是数据对象呗重新赋值,所以老数据呗新数据替换掉了-.-||,实测以上全错,编辑之后再新增,会出错,新增的对象不会出现,会对被编辑的对象做修改,
// 解决方案,每次使用完jq对象,就.removeDate('key')清除原来的对象
例子详见表格的增删改以及模态框
表格拼接
let username=$('#username').val();
let hobby=$('#hobby').val();
// 把值拼接给TR>TD(创建节点是显示的,必须在append之后才会显示)
let trEle = document.createElement('tr');
let td1 = document.createElement('td');
td1.innerText=$('table tr').length;
$(trEle).append(td1);
let td2 = document.createElement('td');
td2.innerText=username;
$(trEle).append(td2);
let td3 = document.createElement('td');
td3.innerText=hobby;
$(trEle).append(td3);
let td4 = document.createElement('td');
td4.innerHTML=`<input type="button" value="编辑" class="edit">
<input type="button" value="删除" class="delete">`;
$(trEle).append(td4);
$('table tbody').append(trEle);
表格内id自增写法
$('table').on('click','.delete',function () {
// 删除当前行
$(this).parent().parent().remove();
//删除之后动态调整序号
let len = $('table tr').length;
for (let i = 1; i < len; i++) {
$('table tr:eq(' + i + ') td:first').text(i);
}
});
表格的增删改以及模态框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>今日作业</title> <style> .cover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 9; } .modal { position: absolute; left: 50%; top: 50%; height: 300px; 400px; background-color: white; z-index: 100; margin-top: -150px; margin-left: -200px; } .hide { display: none; } </style> </head> <body> <button id="add">新增</button> <table border="1"> <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="编辑" class="edit"> <input type="button" value="删除" class="delete"> </td> </tr> <tr> <td>2</td> <td>Alex</td> <td>吹牛逼</td> <td> <input type="button" value="编辑" class="edit"> <input type="button" value="删除" class="delete"> </td> </tr> <tr> <td>3</td> <td>苑昊</td> <td>不洗头</td> <td> <input type="button" value="编辑" class="edit"> <input type="button" value="删除" class="delete"> </td> </tr> </tbody> </table> <div class="cover hide"></div> <div class="modal hide"> <p><input type="text" id="username"></p> <p><input type="text" id="hobby"></p> <p> <button id="submit">提交</button> <button id="cancel">取消</button> </p> </div> <script src="jquery-3.3.1.min.js"></script> <script> function hideModal() { $('.cover,.modal').addClass('hide'); } function showModal() { $('.cover,.modal').removeClass('hide'); } $('#add').click(function () { showModal(); }); $('#submit').click(function (index) { hideModal(); // 打开模态框 // 获取input的值 let type = $($('tbody tr').eq[index]).data('type'); console.log(type); if (typeof ($('.modal').data('tr'))==='object'){ // let username = $($('tbody tr').eq[index]).data('tr1'); // let hobby = $($('tbody tr').eq[index]).data('tr2'); // $($($('tbody tr')[index]).children()[1]).text(username); // $($($('tbody tr')[index]).children()[2]).text(hobby); let new_username=$('#username').val(); let new_hobby=$('#hobby').val(); $($('.modal').data('tr').children()[1]).text(new_username); $($('.modal').data('tr').children()[2]).text(new_hobby); $('.modal').removeData('tr') } else { let username=$('#username').val(); let hobby=$('#hobby').val(); // 把值拼接给TR>TD(创建节点是显示的,必须在append之后才会显示) let trEle = document.createElement('tr'); let td1 = document.createElement('td'); td1.innerText=$('table tr').length; $(trEle).append(td1); let td2 = document.createElement('td'); td2.innerText=username; $(trEle).append(td2); let td3 = document.createElement('td'); td3.innerText=hobby; $(trEle).append(td3); let td4 = document.createElement('td'); td4.innerHTML=`<input type="button" value="编辑" class="edit"> <input type="button" value="删除" class="delete">`; $(trEle).append(td4); $('table tbody').append(trEle); } }); // 事件委托,冒泡事件(从当前向上一级找事件触发的函数) $('table').on('click','.delete',function () { // 删除当前行 $(this).parent().parent().remove(); //删除之后动态调整序号 let len = $('table tr').length; for (let i = 1; i < len; i++) { $('table tr:eq(' + i + ') td:first').text(i); } }); $('table').on('click','.edit',function () { showModal(); // 将列表的信息填入模态框的input中 let tr = $(this).parent().parent(); let username=$(tr.children()[1]).text(); let hobby=$(tr.children()[2]).text(); console.log(username); console.log(hobby); $('#username').val(username); $('#hobby').val(hobby); +//新思路:jQuery对象代表的是对象被修改,对象所在的节点的数据也会被修改,$('.modal')这个对象填谁都可以,只要能保证jq对象数据不会被清除就行,其次需要考虑多次编辑的情况下,之前保留的jq对象数据会不会残留,导致后面回填数据错误, // 实际测试好像并不影响,可能是数据对象呗重新赋值,所以老数据呗新数据替换掉了-.-||,实测以上全错,编辑之后再新增,会出错,新增的对象不会出现,会对被编辑的对象做修改, // 解决方案,每次使用完jq对象,就.removeDate('key')清除原来的对象 $('.modal').data('tr',tr); //自己的思路 // let new_username=$('#username').val(); // let new_hobby=$('#hobby').val(); // let index=$(this).parent().parent().index(); // console.log(index); // tr.data({'type':1,'index':index,'tr1':123,'tr2':1234}); // console.log(tr.data()); // return tr.data(); //点击提交按钮时,怎么判断用哪个功能? // type(jquery对象) 如果是对象就是object类型,否则是undefined //老师的方法我不会 // let tr = $(this).parent().parent(); // $(this).data('tr',tr); }); $('#cancel').on('click',function () { hideModal(); $('#username').val(''); $('#hobby').val(''); }) </script> </body> </html>