标签：move gen app element tom 默认 cti back code
1. 注册示例
form 表单的 action：URL
1.全路径：ip+port+....
2./index：当前打开页面ip+port
3.不写：当前代开页面的url
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <form action=""> <p><label for="i1">username: <input type="text" id="i1" name="username"> <span class="errors"></span> </label></p> <p><label for="i2">password: <input type="text" id="i2" name="password"> <span class="errors"></span> </label></p> <input type="submit" value="注册" id="d1"> </form> <script> var $b1Ele = $(‘#d1‘); // 获取按钮标签 // 给按钮标签绑定点击事件 // 原生js b1ELe.onclick = function(){} $b1Ele.on(‘click‘,function () { var $username = $(‘#i1‘); // 获取到用户输入的内容 var $password = $(‘#i2‘); // 判断上面标签的value是否为空 if ($username.val().length==0) { $(‘.errors‘).first().text(‘用户名不能为空‘) // 找到username对于的span标签添加提示信息 } if ($password.val().length==0){ $(‘.errors‘).last().text(‘密码不能为空‘) } return false // 取消标签自带的提交事件，但都不为空是也不能提交 }) </script> </body> </html>
2. jQuery属性操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <p id="d1">淡定！！！</p> <p>马上行动</p> <p>永远也不会太晚</p> <input type="checkbox" name="hobby" id="i1" checked>读书 <input type="checkbox" name="hobby" id="i2">写字 <input type="checkbox" name="hobby" id="i3">音乐 </body> </html>
// 动态页面添加的数值，页面刷新就没了 $(‘#d1‘).attr(‘id‘); // 查值 $(‘#d1‘).attr(‘username‘,‘Tom‘); // 赋单值 $(‘#d1‘).attr({‘password‘:‘123‘,‘hobby‘:‘study‘}); // 赋多值 $(‘#d1‘).removeAttr(‘username‘); // 删除值 $(‘#i1‘).attr(‘checked‘); // 获取标签属性值，在html文档中设置了返回‘checked‘，否则undefined $(‘#i2‘).prop(‘checked‘); // 动态获取属性值，页面只要选上返回true，否则false
3.文档处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<span></span>
<div>div
<span>div的span</span>
<span></span>
<p>p
<a href="">p a</a>
</p>
<span>div span</span>
</div>
<span>span</span>
<span>span</span>
</body>
</html>
添加标签
var pEle = document.createElement(‘p‘); pEle.innerText = ‘超越前人!‘ var $divEle = $(‘div‘); $divEle.append(pEle); // div添加：尾部添加 ！！！js原生标签才能在页面显示(js的appendChild) $(pEle).appendTo($divEle); // 添加到标签尾部 var pEle = document.createElement(‘p‘); pEle.innerText = ‘谦虚！‘； var $divEle = $(‘div‘); $divEle.prepend(pEle); // div标签：头部添加 var pEle = document.createElement(‘p‘); pEle.innerText = ‘莫浮躁！‘； var $divEle = $(‘div‘); $divEle.before(pEle); //div标签：前面位置
替换标签
var pEle = document.createElement(‘p‘); eEle.innerText = ‘坚持到底！‘; var $divEle = $(‘div‘); $divEle.replaceWith(pEle); // 替换标签（标签+文本）
$(‘p‘).data(‘username‘,‘Tom‘); // 标签存储键值对 $(‘p‘).data(‘username‘); // 获取 $(‘p‘).removeData(‘username‘); // 删除 $(‘p‘).data(‘username‘); // undefined：不存在，不会报错
4. 克隆事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <style> button { background-color: magenta; } </style> </head> <body> <button>button</button> <script> // $(‘button‘).click(function () {}) 另一种绑定方式 $(‘button‘).on(‘click‘,function () { // console.log(this) this指代的是当前被操作对象(并且是原生的js对象) $(this).clone(true).insertAfter(this); // 克隆标签:默认（不加true）情况下只克隆标签的文本和样式不克隆事件 }) </script> </body> </html>
5.悬浮事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <p>来玩呀！</p> <script> $(‘p‘).hover( function () { alert(‘漫花庄园的花开了！‘) // 悬浮p上显示该弹出框 }, function () { alert(‘欢迎下次再来！‘) // 离开p上显示该弹出框 } ) </script> </body> </html>
6.取消标签自带事件
取消标签自带的事件有两种方式：
$(‘input‘).click(function (e) { alert(123); // 方式1. return false // 方式2. e.preventDefault(); })
取消input的submit自带的提交事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <form action=""> <input type="submit"> </form> <script> $(‘input‘).click(function () { alert(123); return false }) // $(‘input‘).click(function (e) { // alert(123); // e.preventDefault(); // }) </script> </body> </html>
7. input框实时获取用户输入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <input type="text"> <script> $(‘input‘).on(‘input‘,function () { console.log(this.value) }) </script> </body> </html>
8. 事件冒泡
事件会一层层往上一级汇报
如何阻止事件冒泡:
在你的事件函数内部加一句取消事件冒泡的代码
！！！注意需要加上形参e
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <div>架子 <p>架子上的篮子 <span>篮子里的草莓！！ˋ( ° ▽、° ) </span> </p> </div> <script> $(‘div‘).click(function () { alert(‘架子：新鲜的草莓，过时不候(＾Ｕ＾)ノ~ＹＯ‘); }); $(‘p‘).click(function (a) { alert(‘篮子：(*^_^*)‘); a.stopPropagation() // 中断向上一级传递：终止冒泡事件 }); $(‘span‘).click(function () { alert(‘草莓:ˋ( ° ▽、° ) ‘); }); </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input type="text">
<script>
$(‘input‘).on(‘input‘,function () {
console.log(this.value)
})
</script>
</body>
</html>
9. 事件委托
将触发的事件委托给内部某个标签去执行
无论该标签是初始化就有还是后期动态添加都可以执行
<button>点我有惊喜??</button> <script> // $(‘button‘).click(function(){ // console后添加该标签不能执行 // alert(123) // }); // 事件委托 $(‘body‘).on(‘click‘,function () { alert(123) })
10. jQuery动态效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <img width="400px" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559667761691&di=cb9cc17011c3cea3dff7a46f3921ab21&imgtype=0&src=http%3A%2F%2Fcdn.lizhi.fm%2Fradio_cover%2F2014%2F07%2F15%2F13007232489558148.jpg" alt=""> <script> $(‘img‘).hide(1000); //以左上角为基点隐藏 $(‘img‘).show(2000); // 以左上角为基点展示 $(‘img‘).slideDown(1000); //以上边框为基准展示 $(‘img‘).slideUp(1000); //以上边框为基准隐藏 $(‘img‘).fadeIn(1000); //渐淡显示 $(‘img‘).fadeOut(1000); //渐淡隐藏 $(‘img‘).fadeTo(1000,0.4); //渐淡至0.4 </script> </body> </html>
11. 标签存储数据
在console中，可以将标签当做临时小仓库，可以让任何标签帮忙存储数据，只要不刷新页面，数据就一直存在
关于文档加载三种方式:
//第一种(了解): $(document).ready(function(){ // 在这里写你的JS代码... }) //第二种(了解): $(function(){ // 你在这里写你的代码 }) //第三种: 直接在body内部最下方书写代码
11. 标签存储数据
在console中，可以将标签当做临时小仓库，可以让任何标签帮忙存储数据，只要不刷新页面，数据就一直存在
12. each循环
// 循环打印标签 $(‘div‘).each(function(){ console.log(this) // this指代的是当前被操作对象(并且是原生的js对象) })
标签：move gen app element tom 默认 cti back code
原文地址：https://www.cnblogs.com/zhouyongv5/p/10976072.html
