Python基础day52
文档处理
<body> <div id="d1"></div> <script> let p = $('<p>'); // ===var p = $('<p>') p.text('小帅哥，你好啊！'); p.attr('id','d2'); console.log(p); $('#d1').append(p) //把p标签追加到id为d1的标签内部后面 let s = $('<span>'); s.text('小美女，来玩啊！'); s.attr('class','c1') $('#d1').prepend(s); //把s标签追加到id为d1的标签内部前面 $('#d1').after(s); //把s标签添加到id为d1标签的同级后面 $('#d1').before(s); //把s标签添加到id为d1标签的同级前面 </script>
克隆
<!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> #b1 { background-color: deeppink; padding: 5px; color: white; margin: 5px; } #b2 { background-color: dodgerblue; padding: 5px; color: white; margin: 5px; } </style> </head> <body> <button id="b1">屠龙宝刀，点击就送</button> <hr> <button id="b2">屠龙宝刀，点击就送</button> <script src="jquery-3.2.1.min.js"></script> <script> // clone方法不加参数true，克隆标签但不克隆标签带的事件 $("#b1").on("click", function () { $(this).clone().insertAfter(this); }); // clone方法加参数true，克隆标签并且克隆标签带的事件 $("#b2").on("click", function () { $(this).clone(true).insertAfter(this); }); </script> </body> </html>
常用事件
click(function(){...}) hover(function(){...}) blur(function(){...}) focus(function(){...}) change(function(){...}) keyup(function(){...}) input监控
绑定事件的方式
click(function(){...})
<button id="btn">点击</button> <script> $('#btn').click(function (){ alert('你好啊 小帅哥！') }) </script>
hover(function(){...})
<p>你好啊 小帅哥</p> <script> $('p').hover(function (){//鼠标移上去执行的 alert('来啦 老弟') }, function (){ alert('慢走啊')//鼠标移走执行的 }) </script>
blur(function(){...})
<input type="text"> <script> $('input').blur(function (){//输入框失去焦点时执行 alert('输入完成？') }) </script>
focus(function(){...})
<input type="text"> <script> $('input').focus(function (){//选中输入框时执行 alert('输入完成？') }) </script>
change(function(){...})
<input type="text"> <script> $('input').change(function (){//改变内容时执行 alert('输入完成？') }) </script>
实时监听input输入值变化
<input type="text" id="i1"> <script> $('#i1').on("input",function (){ console.log($(this).val()); //发起Ajax请求，朝后端发起请求，做验证 }) </script>
阻止后续事件执行
<body>
<form action="">
<span class="s1" style="color: red"></span>
<input type="submit" value="点击" id="btn">
</form>
<script>
var span = $('.s1');
var btn = $('#btn');
btn.click(function (e){
span.text('你惦记我了');
return false;//这句话就可以阻止后续事件的提交
e.preventDefault();//这句话就可以阻止后续事件的提交
})
</script>
</body>
阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止事件冒泡</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>
<div>
<p>
<span>点我</span>
</p>
</div>
<script>
$('span').click(function (e){
alert('span');
e.stopPropagation()
});
$('p').click(function (e){
alert('p')
});
$('div').click(function (e){
alert('div')
});
</script>
</body>
</html>
页面载入
// 当页面中的代码全部加载完毕再去执行的代码快 // 在js中 window.onload = function () { } // 在jq中： // 第一种方式 $(document).ready(function(){ // 在这里写你的JS代码... }) // 第二种方式 $(function(){ // 你在这里写你的JS代码 })
事件委托
$("body").on("click", ".btn", function () {
console.log('123456');
})
// 以后body中出现的.btn类的事件都能执行上述代码
补充
each方法
<body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <script> $('div').each(function (index,value){ console.log(index,value) }) // 循环取值，分成索引和值打印 // 第二种方式，BBS中要用的 var arr = [1,2,3,4,5]; $.each(arr,function (index,value){ console.log(index,value) }) // 循环取值，分成索引和值打印 </script> </body>
data用法
data的用法 // $('div').data('username', 'jack'); jQuery.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: jQuery.fn.init(1)] // $('div').data('username'); // 可以跟某一个标签设置data属性 $('div').first().data('username', 'jack'); $('div').eq(3).data('username', 'jack'); $('#d1').data('username', 'jack'); // 获取 $('div').first().data('username');
Bootstarp简介
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单
我们在使用的过程中，只需要通过增加和删除class属性值就能够达到某种特殊效果
如何使用：https://www.bootcss.com/在百度中搜索
bootstrap的版本：v3、v4、v5我们推荐使用v3就行
v3版本依赖 jQuery，v4、v5版本不依赖jQuery
如何使用
下载bootstarp的类库文件
使用CDN
要想使用bootstarp由两部分：css部分，js部分
如果你只想使用css样式，那么，你就只引入css文件即可
如果你想使用它提供的一些动作，就需要引入外部的js文件
你在引入js文件的时候，一定要先引入jQuery文件，bootstrap的js文件是依赖于jQuery的js
在v3版本，在v4、v5版本就不需要了
Normalize.css
一个css 重置样式库
布局容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>栅格系统</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.c1{
height: 100px;
border: 5px solid red;
background: yellow;
}
/*响应式：页面宽度小于800时使用下面的css*/
@media screen and (max-width: 800px){
.c1{
height: 100px;
border: 5px solid red;
background: blue;
}
}
</style>
</head>
<body>
<div class="container c1">
<div class="row">
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
<div class="col-md-1 c1"></div>
</div>
</div>
</body>
</html>
其他css全局样式
全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)
