文档处理、jQ事件、Bootstarp
文档处理
JS中创建一个节点
var a = document.createElement（‘a’）；
jQ中创建一个节点
var a = $('<a>');
元素添加
$(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的前面
案例
<body> <div id="d1"></div> <script> let $pEle = $('<p>') $pEle.text('你好啊 草莓要不要来几个?') $pEle.attr('id', 'p1') $('#d1').append($pEle) // 把￥pEle添加到div中 </script> </body>
结果
移出和清空
remove()// 从DOM中删除所有匹配的元素。 empty()// 删除匹配的元素集合中所有的子节点。
案例
<body>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div id="d2">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<div id="d1"></div>
<script>
// let $pEle = $('<p>')
// $pEle.text('你好啊 草莓要不要来几个?')
// $pEle.attr('id', 'p1')
// $('#d1').append($pEle) // 把￥pEle添加到div中
console.log($('.c1').remove())
console.log($('#d2').empty())
</script>
</body>
结果
替换
replaceWith()//替换匹配元素内容、匹配元素本身
replaceAll()//将选择器匹配的元素替换为指定的元素或内容
案例
<body> <p id="d1">你好呀</p> <div id="d2"></div> <p class="target">Replace this paragraph.</p> <script> var p1 = '你好呀帅哥' $('#d1').replaceWith(p1) var d1 = $('<p>') d1.attr('id', 'd3') d1.addClass('d1') $("#d2").replaceWith(d1) var newContent = "<div>New content here.</div>"; $("<div>").html(newContent).replaceAll(".target"); </script> </body> </html>
结果
克隆
clone()// 参数
案例
<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.4.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监控 $(window).keydown(function (event) { console.log(event.keyCode) if (event.keyCode === 16){ alert('你按了shift键') } })
绑定事件
绑定方法
<body>
<button id="t1">按键</button>
<script>
//方法一：
var btn = $('#t1')
// btn.click(function () {
// alert('123')
// })
//方法二：
// btn.on('click',function () {
// alert('123')
// })
//方式三
$("body").on("click", '#t1', function () {
// clone括号中没有true这个参数，克隆的时候只可能标签样式等，如果加上true这个参数，就会连事件也一块克隆
alert(123456);
});
</script>
</body>
移除事件
off.()方法
案例
<body>
<button id="t1">按键</button>
<script>
var btn = $('#t1')
function aler() {
alert('123')
}
btn.on('click', aler)
btn.off('click', aler)
</script>
</body>
</html>
阻止后续事件执行
- return false; // 常见阻止表单提交等
- e.preventDefault();
案例
<body>
<form action="">
<!-- <button id="b1">点我</button>-->
<span class="s1"></span>
<input type="submit" id="btn">
</form>
<script src="jquery-3.4.1.min.js"></script>
<script>
var span = $(".s1");
var btn = $("#btn");
btn.click(function (e) {
span.text('你惦记我了');
// return false; // 这句话就可以组织后续事件的提交
e.preventDefault(); // 这句话就可以组织后续事件的提交
})
</script>
</body>
阻止冒泡事件
e.stopPropagation()方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止事件冒泡</title>
</head>
<body>
<div>
<p>
<span>点我</span>
</p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("span").click(function (e) {
alert("span");
e.stopPropagation();
});
$("p").click(function () {
alert("p");
});
$("div").click(function () {
alert("div");
})
</script>
</body>
</html>
页面载入
页面代码加载完在去执行代码块
在JS中
window.onload=function(){}
在jQ中
# 第一种方式 $(document).ready(function(){ // 在这里写你的JS代码... }) # 第二种方式 $(function(){ // 你在这里写你的JS代码 })
事件委托
$("table").on("click", ".delete", function () {
// 删除按钮绑定的事件
})
案例
<ul id="parentList"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul>
$(document).ready(function() { // 使用事件委托，将点击事件绑定到父元素 <ul> 上 $('#parentList').on('click', 'li', function() { var itemText = $(this).text(); alert('You clicked: ' + itemText); }); });
补充
each方法
// 第一种方式：
// $('div').each(function (index, value) { // console.log(value, index); // }); // 第二种方式：BBS中要用的 var arr = [1, 2, 3, 4, 5]; $.each(arr, function (index, value) { console.log(value,index); });
data方法
.data(key, value):
描述：在匹配的元素上存储任意相关数据。
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
.data(key):
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。
$("div").data("k");//返回第一个div标签中保存的"k"的值
.removeData(key):
描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。
$("div").removeData("k"); //移除元素上存放k对应的数据
ps：data添加的属性不会在元素中显示
可以跟某一个标签设置data属性
$('div').first().data('username', 'jack');
$('div').eq(3).data('username', 'jack');
$('#d1').data('username', 'jack');
# 获取
$('div').first().data('username');
我们使用bootstrap库可以很方便的写一些好看的样式，他的内部给我们封装了很多很多的css样式和一些非常好的js事件，以后我们只需要把他的类库文件引入到我们的文档中就能使用
我们在使用的过程中，只需要通过增加和删除class属性值就能够达到某种特殊效果
如何使用：https://www.bootcss.com/在百度中搜索
bootstrap的版本：v3、v4、v5我们推荐使用v3就行
v3版本依赖 jQuery，v4、v5版本不依赖jQue
如何使用
下载bootstrap的类库文件
使用CDN
要想使用bootstrap有两部分，css部分，js部分
# 如果你只想使用css样式，那么，你就只引入css文件即可
# 如果你想使用它提供的一些动作，就需要引入外部的js文件
# 你在引入js文件的时候，一定要先引入jQuery文件，bootstrap的js文件是依赖于jQuery的js
# 在v3版本，在v4、v5版本就不需要了
Normalize.css
为了增强跨浏览器渲染的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库
布局容器
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
案例
<style>
.c1{
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container c1">
<span>nihao</span>
</div>
<div class="container-fluid c1"></div>
</body>
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
- “行（row）”必须包含在
.container（固定宽度）或.container-fluid（100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。 - 通过“行（row）”在水平方向创建一组“列（column）”。
- 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
- 类似
.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 - 通过为“列（column）”设置
padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。 - 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
- 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个
.col-xs-4来创建。 - 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
- 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何
.col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何.col-lg-*不存在， 也影响大屏幕设备。
排版
标题
HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。
<body> <h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap heading</h5> <h6>h6. Bootstrap heading</h6> </body>
在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。
<body> <h1>h1. Bootstrap heading <small>Secondary text</small></h1> <h2>h2. Bootstrap heading <small>Secondary text</small></h2> <h3>h3. Bootstrap heading <small>Secondary text</small></h3> <h4>h4. Bootstrap heading <small>Secondary text</small></h4> <h5>h5. Bootstrap heading <small>Secondary text</small></h5> <h6>h6. Bootstrap heading <small>Secondary text</small></h6> </body>
页面主体
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）
中心内容
通过添加 .lead 类可以让段落突出显示。
对齐
改变大小写
表格
普通表格
为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来
条纹状表格
通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。
跨浏览器兼容性
条纹状表格是依赖 :nth-child CSS 选择器实现的，而这一功能不被 Internet Explorer 8 支持
带边框的表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
鼠标悬停
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
响应式表格
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
垂直方向的内容截断
响应式表格使用了 overflow-y: hidden 属性，这样就能将超出表格底部和顶部的内容截断。特别是，也可以截断下拉菜单和其他第三方组件。
Firefox 和 fieldset 元素
Firefox 浏览器对 fieldset 元素设置了一些影响 width 属性的样式，导致响应式表格出现问题。可以使用下面提供的针对 Firefox 的 hack 代码解决，但是以下代码并未集成在 Bootstrap 中：
浙公网安备 33010602011771号