9 前端 jQuery 框架Bootstrap

最新推荐文章于 2022-10-03 22:45:43 发布

Jianhao92

最新推荐文章于 2022-10-03 22:45:43 发布

阅读量288

点赞数

分类专栏：前端学习文章标签： js css bootstrap jquery

本文链接：https://blog.csdn.net/qq_36565509/article/details/106267094

版权

前端学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前端

1 jQuery

1.1 阻止元素发生默认的行为

当点击提交按钮时阻止自动提交表单行为；
当点击a标签链接时阻止链接打开URL。

<script>
    $("a").click(function(e) {
		// 阻止链接打开URL
        // 方式1
        return false;
    })
    
    $("a").click(function(e) {
        // 方式2
        e.preventDefault();
    })
</script>

1.2 阻止事件冒泡

事件冒泡：事件从dom 树的特定层开始层层往上传递，直至传递到dom的根节点。
以点击事件为例，当点击子节点时，会自动向上触发其父节点，祖先节点的点击事件。

// 方式1
$("span").click(function(event) {
	return false;
});

// 方式2
$("span").click(function(e) {
	e.stopPropagation();
});

1.3 事件委托

事件委托是利用事件冒泡，只指定一个事件处理，就可以管理某一类型的所有事件。

<script>
    // 为页面上所有的button标签绑定点击事件。
    // 这样添加事件无法影响到动态创建的标签。
    // $('button').click(function() {  
    //     alert(123);
    // });

    // 事件委托
    // 在指定的范围内将事件委托给特定标签，无论该标签是事先写好的还是后面动态创建的。
    $('body').on('click', 'button', function() {
        alert(123);  
    });
</script>

1.4 页面加载

等待页面加载完毕再执行代码

// 原生Javascript
window.onload = function() {
	// 代码
}

// jQuery
// 第一种
$(document).ready(function() {
	// 代码
})

// 第二种
$(function() {
	// 代码
})

1.5 动画效果

$('#d1').hide(5000);  // 5000ms

$('#d1').show(5000);

$('#d1').slideUp(5000);

$('#d1').slideDown(5000);

$('#d1').fadeOut(5000);

$('#d1').fadeIn(5000);

$('#d1').fadeTo(5000,0.4);

1.6 each

为每个匹配元素规定运行的函数。

$(selector).each(function(index, element))

index - 选择器的 index 位置
element - 当前的dom元素

$('div').each(function(index, obj) {
	console.log(index, obj);
});

$.each($('div'), function(index, obj) {
	console.log(index, obj);
});

$.each([111, 222, 333], function(index, obj) {
	console.log(index, obj);
});

1.7 data

向被选元素附加数据，或者从被选元素获取数据。
可以用于标签存储数据，用户无法直接获取。

从被选元素中返回附加的数据。
$(selector).data(name)

向被选元素附加数据。
$(selector).data(name, value)

$('div').data('info', 'Hello');

$('div').first().data('info');  // "Hello"
$('div').last().data('info');  // "Hello"

$('div').first().removeData('info');
$('div').first().data('info');  // undefined

2 Bootstrap

Bootstrap是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap主页：https://www.bootcss.com/
Bootstrap v3：https://v3.bootcss.com/

2.1 使用方法

方法1
下载：https://v3.bootcss.com/getting-started/#download

方法2
使用CDN服务：https://www.bootcdn.cn/twitter-bootstrap/

<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/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

注意：bootstrap的js代码是依赖于jQuery的，使用Bootstrap的动态效果时一定要导入jQuery。

使用Bootstrap时，所有的页面样式只需通过class来调节。

CSS样式：https://v3.bootcss.com/css/

2.2 布局容器

container
container-fluid

.container 类用于固定宽度的容器，左右两侧留有空白区域。
固定宽度的栅格布局

<div class="container">
    ...
</div>

.container-fluid 类用于100%宽度，占据全部视口的容器。
流式布局容器，100%宽度布局。

<div class="container-fluid">
    ...
</div>

制作页面时首先添加布局容器，即一个div，设置其class=“container”。

2.3 栅格系统

row
col-md-8
col-md-offset-2 移动
pull-left / pull-right 浮动

2.3.1 使用方法

栅格系统自动均分为12列。

<div class="container">
	<div class="row">
		<div class="col-md-4"></div>
		<div class="col-md-8"></div>
	</div>
</div>

8份居中

<div class="container">
	<div class="row">
		<!-- 向右移动2份 -->
		<div class="col-md-8 col-md-offset-2"></div>
	</div>
</div>

2.3.2 响应式布局

响应式布局示例

<style>
	.c1 {
		background-color: green;
	}
	@media screen and (max-width: 600px) {
		.c1 {
			background-color: red;
		}
	}
</style>

使用栅格参数制作响应式布局
针对不同种类的显示器bootstrap会自动选择对应的参数，
如果需要兼容所有种类的显示器，可以全部加上。

.col-xs-数字  // 超小屏幕 手机 (<768px)
.col-sm-数字  // 小屏幕 平板 (≥768px)
.col-md-数字  // 中等屏幕 桌面显示器 (≥992px)
.col-lg-数字  // 大屏幕 大桌面显示器 (≥1200px)

<div class="container">
	<div class="row">
		<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"></div>
		<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8"></div>
	</div>
</div>

2.4 排版

bootstrap将所有原生的HTML标签的文本的字体，大小，粗细等参数统一设置成视觉舒适的样式。

在标题内可以使用small标签设置副标题。

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>

2.5 表格

table
table-hover
table-striped
table-bordered

<table class="table table-hover table-striped table-bordered">
	<thead>
		<tr>
			<th>Head</th>
		</tr>
	</thead>
	<tbody>
		<tr class="active">
			<td>Body</td>
		</tr>
		<tr class="success">
			<td>Body</td>
		</tr>
		<tr class="info">
			<td>Body</td>
		</tr>
		<tr class="warning">
			<td>Body</td>
		</tr>
		<tr class="danger">
			<td>Body</td>
		</tr>
	</tbody>
</table>

2.6 表单

form-control

针对表单标签，使用form-control样式。

<input type="text" class="form-control">
<select name="" id="" class="form-control">
	<option value="">111</option>
    <option value="">222</option>
    <option value="">333</option>
 </select>
 <textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>

针对checkbox和radio，一般不会加样式form-control，直接使用原生样式。

<p class="has-error">
	username:
    <input type="text" class="form-control">
</p>

2.7 按钮

btn
btn-primary

将a标签变为按钮

<a href="https://www.baidu.com/" class="btn btn-primary">百度一下，你就知道。</a>

按钮样式

<!-- 调节按钮颜色 -->
<button class="btn btn-primary">按我</button>
<button class="btn btn-default">按我</button>
<button class="btn btn-success">按我</button>
<button class="btn btn-info">按我</button>
<button class="btn btn-warning">按我</button>
<button class="btn btn-danger">按我</button>

<!-- 调节按钮大小 -->
<button class="btn btn-warning btn-lg">按我</button>
<button class="btn btn-warning btn-sm">按我</button>
<button class="btn btn-warning btn-xs">按我</button>

块级按钮
为按钮添加 .btn-block 类，可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

<input type="submit" class="btn btn-primary btn-block">

2.8 图标

2.8.1 Bootstrap

组件：https://v3.bootcss.com/components/

使用方法：span标签 + class样式

<span class="glyphicon glyphicon-pencil"></span>

2.8.2 Font Awesome

Font Awesome：http://www.fontawesome.com.cn/

Font Awesome 完全兼容 Bootstrap 的所有组件。

<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"></link>

<i class="fa fa-thermometer-quarter" aria-hidden="true"></i>

2.9 弹框

[Sweet Alert](https://lipis.github.io/bootstrap-sweetalert/：https://lipis.github.io/bootstrap-sweetalert/
主页：https://sweetalert.bootcss.com/

<script src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>

3 知识回顾

3.1 下面这段代码的输出结果是什么，并给出你的解释

def index():
    return [lambda x: i * x for i in range(4)]

print([m(2) for m in index()])

定义函数index，运行打印函数，执行列表生成式 [m(2) for m in index()]；
对于列表生成式，执行后面的for循环语句，先执行in后面的index函数；
index函数执行并返回return后面的语句，即先执行 [lambda x: i * x for i in range(4)]；
[lambda x: i * x for i in range(4)] 相当于

def func():
    fun_lambda_list = []
    for i in range(4):
        def lambda_(x):
            return x * i

        fun_lambda_list.append(lambda_)

    return fun_lambda_list

执行列表生成式先执行后面的循环语句，再将每次获取的值交给前面的表达式；
前面的表达式是个匿名函数，相当于定义了一个内层函数，并未执行；
每次循环相当于定义一个内层函数，变量 i 的值由每次循环的range(4)决定，循环次数由range(4)决定，即4次；
最后获得一个列表，包含4个内层函数定义和一个变量 i，i 的值最后等于3；
将获得的列表交给 [m(2) for m in index()]，每次执行m(2)，相当于执行内层函数；
执行时需要参数x， x 由 m(2) 提供，即 x = 2；
函数局部变量 i 在函数定义阶段逐层向外寻找，i = 3；
因此每次执行函数时获得结果 x * i => 2 * 3 = 6；
最后结果为[6, 6, 6, 6]。

补充，注意区别

fun1 = [lambda x: x * i for i in range(4)]
for item in fun1:
    print(item(2))  # 6, 6, 6, 6

fun2 = [lambda x, i=i: x * i for i in range(4)]
for item in fun2:
    print(item(2))  # 0, 2, 4, 6

func1中 i 是函数局部变量，运行时向外逐层寻找，相当于闭包；
func2中 i 是函数的默认形参，每次运行 for i in range(4) 时都会为其传入默认形参并存储在函数func2的命名空间中，即

lambda x, i=0: x * i
lambda x, i=1: x * i
lambda x, i=2: x * i
lambda x, i=3: x * i

3.2 递归调用

什么是函数的递归调用?
书写递归函数需要注意什么？
你能否利用递归函数打印出下面列表中每一个元素(只能打印数字)，l = [1, [2, [3, [4, [5, [6, [7, [8, [9]]]]]]]]]

递归调用是指在调用一个函数的过程中直接或间接地调用这个函数本身。
函数递归调用需要结束条件。
函数每调用一次都会产生自己的局部空间。
如果允许无限地递归调用，则会无限地申请内存空间，这样会耗尽可用内存空间。
python解释器对递归调用深度进行了限制，默认是1000层。
不应该让递归调用触发解释器的限制条件，一般需要自己添加递归调用的结束条件。

l = [1, [2, [3, [4, [5, [6, [7, [8, [9]]]]]]]]]

def print_num(lst):
    for each_item in lst:
        if isinstance(each_item, int):
            print(each_item)
        else:
            print_num(each_item)

print_num(l)

Jianhao92

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
9 前端 jQuery 框架Bootstrap

前端1 jQuery1.1 阻止元素发生默认的行为当点击提交按钮时阻止自动提交表单行为；当点击a标签链接时阻止链接打开URL。<script> $("a").click(function(e) { // 阻止链接打开URL // 方式1 return false; }) $("a").click(function(e) { // 方式2 e.preventDefault();
复制链接

扫一扫