1. 事件:绑定bind和解绑unbind:

     $('选择器').bind('事件',function(){
      // 操作
     ​
     })
     ​
     $('选择器').unbind('事件')
     ​
     $('选择器').click(function(){
      // 操作
     ​
     })
     ​mouseenter 鼠标进入
     mouseleave 鼠标离开
     ​
     hover =   mouseenter + mouseleave

each 循环

 $('选择器').each(function(index,dom){
  $(this) // 循环出来的每个jq对象
  // index 索引   dom dom对象
 })
 ​

文档加载

 window.onload = function () { 
     // 文档 图片 视频 音频 都加载完 执行一次 写多次会覆盖前面的
 ​
 }
 ​
 $(window).ready(function () {  
     // 文档 图片 视频 音频 都加载完 执行一次 能写多次
 ​
 })
 ​
 $(document).ready(function () {  
     // 文档 加载完 执行一次 能写多次
 ​
 })
 ​
 $(function () {  
     // 文档 加载完 执行一次 能写多次
 
 })

事件冒泡

儿子父亲都绑定事件,触发儿子的事件,会一层层往上冒泡触发父辈的事件执行.

阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.fa {
width: 200px;
height: 200px;
background-color: #77acff;
}
.son {
width: 100px;
height: 100px;
background-color: #ffbea8;
}
</style>
</head>
<body>
<div class="fa">
<div class="son"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$('.son').click(function (e) {
alert('你是我儿子')
// return false // 阻止事件冒泡
e.stopPropagation() // 阻止事件冒泡
})
$('.fa').click(function () {
alert('我是你爸爸')
})
</script>
</body>
</html>

事件委托

利用了事件冒泡的原理,将事件委托给父亲,儿子触发事件时,执行父亲的事件.

  // 事件委托
 $('tbody').on('click','button',function () {
        $(this).parents('tr').remove()
 })

bootstrap

https://v3.bootcss.com/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--拽入bootstrap.min.css文件:-->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<!--定义样式:-->
<style>
.row div{
background-color: #77acff;
height: 20px;
/*加边框并固定:*/
border: solid 1px #000000;
}
.son {
background-color: #fff65b;
height: 20px;
z-index: 100;
}
</style>
</head>
<body> <!--定义容器:-->
<div class="container-fluid">
<!--定义行:-->
<div class="row">
<!--把9推3个:-->
<div class="col-lg-9 col-lg-push-3">col-lg-9</div>
<!--把3拉9个:-->
<div class="col-lg-3 col-lg-pull-9">col-lg-3</div>
</div>
<!--定义行:-->
<div class="row">
<!--定义屏幕大小:-->
<div class="col-lg-3"></div>
</div>
<div class="row">
<div class="col-md-1">姓名</div>
<div class="col-md-1">性别</div>
<div class="col-md-1">年龄</div>
<div class="col-md-1">爱好</div>
<div class="col-md-1">身份证号</div>
<div class="col-md-1">家乡</div>
<div class="col-md-1">学历</div>
<div class="col-md-1">婚否</div>
<div class="col-md-1">工作</div>
<div class="col-md-1">职业</div>
<div class="col-md-1">地狱</div>
<div class="col-md-1">交通工具</div>
</div>
<div class="row">
<div class="col-md-8">张三</div>
<div class="col-md-4">李四</div>
</div>
<div class="row">
<div class="col-md-4">王五</div>
<div class="col-md-4">赵六</div>
<div class="col-md-4">王麻子</div>
</div>
<div class="row">
<div class="col-md-6">男</div>
<div class="col-md-6">女</div>
</div>
</div>
</body>
</html>
效果如下:

按钮

表格

表单

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--拽入bootstrap.min.css文件:-->
<!--<link rel="stylesheet" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css">-->
<!--定义样式:-->
<style>
.row div{
background-color: #77acff;
height: 20px;
/*加边框并固定:*/
border: solid 1px #000000;
}
.son {
background-color: #fff65b;
height: 20px;
z-index: 100;
}
</style>
</head>
<body> <!--定义容器:-->
<div class="container-fluid">
<!--定义标题标签:-->
<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>
<!--定义p标签:-->
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<!--定义内联列表:-->
<ul class="list-inline">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!--定义行:-->
<div class="row">
<!--把9推3个:-->
<div class="col-lg-9 col-lg-push-3">col-lg-9</div>
<!--把3拉9个:-->
<div class="col-lg-3 col-lg-pull-9">col-lg-3</div>
</div>
<!--定义行:-->
<div class="row">
<!--定义屏幕大小:-->
<div class="col-lg-3"></div>
</div>
<div class="row">
<div class="col-md-1">姓名</div>
<div class="col-md-1">性别</div>
<div class="col-md-1">年龄</div>
<div class="col-md-1">爱好</div>
<div class="col-md-1">身份证号</div>
<div class="col-md-1">家乡</div>
<div class="col-md-1">学历</div>
<div class="col-md-1">婚否</div>
<div class="col-md-1">工作</div>
<div class="col-md-1">职业</div>
<div class="col-md-1">地狱</div>
<div class="col-md-1">交通工具</div>
</div>
<div class="row">
<div class="col-md-8">张三</div>
<div class="col-md-4">李四</div>
</div>
<div class="row">
<div class="col-md-4">王五</div>
<div class="col-md-4">赵六</div>
<div class="col-md-4">王麻子</div>
</div>
<div class="row">
<div class="col-md-6">男</div>
<div class="col-md-6">女</div>
</div>
</div>
</body>
</html>

模态框

分页

面板

导航

图标

http://www.fontawesome.com.cn/faicons/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入jquery文件:-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!--导入bootstrap.js文件:-->
<script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<!--导入bootstrap:-->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<!--导入font-awesome:-->
<link rel="stylesheet" href="../day42django框架/font-awesome-4.7.0/css/font-awesome.css">
</head>
<body>
<!--定义标签页:-->
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
<!--定义导航条:-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div> <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!--定义路径导航:-->
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
<!--定义分页功能:-->
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>
<!--<button id="b1">新增</button>-->
<!--增加新增按钮:-->
<!--<button id="b1" class="btn">新增</button>-->
<!--新增按钮增加白色:-->
<!--<button id="b1" class="btn btn-default">新增</button>-->
<!--增加深蓝色:-->
<!--<button id="b1" class="btn btn-info">新增</button>-->
<!--增加深蓝色:-->
<!--<button id="b1" class="btn btn-primary">新增</button>-->
<!--增加绿色:-->
<!--<button id="b1" class="btn btn-success">新增</button>-->
<!--增加橘黄色:-->
<!--<button id="b1" class="btn btn-warning">新增</button>-->
<!--增加红色:-->
<!--<button id="b1" class="btn btn-danger">新增</button>-->
<!--变大:-->
<!--<button id="b1" class="btn btn-danger btn-lg">新增</button>-->
<!--稍微大:-->
<!--<button id="b1" class="btn btn-danger btn-sm">新增</button>-->
<!--超小:-->
<button id="b1" class="btn btn-danger btn-xs">新增</button>
<!--定义a标签:-->
<!--<a href="">添加</a>-->
<!--定义a标签和按钮组合:-->
<!--<a href="" class="btn btn-danger btn-lg">添加</a>-->
<!--a标签加禁用状态:-->
<a href="" class="btn btn-success btn-sm" disabled="disabled">添加</a>
<button id="a">全选</button>
<!--<button id="all">全选</button>-->
<!--<button id="cancel">取消</button>-->
<button id="reverse">反选</button>
<!--定义图标span标签齿轮:-->
<span class="glyphicon glyphicon-asterisk"></span>
<!--定义i标签增加图标:-->
<i class="fa fa-bank"></i>
<!--增加火箭标签:-->
<i class="fa fa-rocket" aria-hidden="true"></i>
<!--增加span标签类型、大小、颜色:-->
<span style="font-size: 20px;color:red">
<!--增加倍数大:-->
<i class="fa fa-rocket fa-5x"></i>
</span>
<!--定义旋转:-->
<i class="fa fa-rocket fa-spin"></i>
<!--定义组合图标:-->
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
<!--定义下拉菜单:-->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<!--定义表格及全局样式:-->
<!--<table class="table">-->
<!--定义条纹表格:-->
<!--<table class="table table-striped">-->
<!--定义带边框的表格:-->
<!--<table class="table table-bordered">-->
<!--定义鼠标悬停:-->
<!--<table class="table table-bordered table-hover">-->
<!--定义间距紧凑:-->
<table class="table table-bordered table-hover table-condensed">
<thead>
<!--定义浅色:-->
<tr class="active">
<th>选择</th>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!--定义深色:-->
<tr class="info">
<td><input type="checkbox"></td>
<td>1</td>
<td>宝元</td>
<td>不详</td>
<td>钻</td>
<td>
<button>删除</button>
</td>
</tr>
<!--定义浅黄色:-->
<tr class="warning">
<td><input type="checkbox"></td>
<td>1</td>
<td>宝元</td>
<td>不详</td>
<td>钻</td>
<td>
<button>删除</button>
</td>
</tr>
<!--定义绿色:-->
<tr class="success">
<td><input type="checkbox"></td>
<td>1</td>
<td>宝元</td>
<td>不详</td>
<td>钻</td>
<td>
<button>删除</button>
</td>
</tr>
<!--定义粉红色:-->
<tr class="danger">
<td><input type="checkbox"></td>
<td>1</td>
<td>宝元</td>
<td>不详</td>
<td>钻</td>
<td>
<button>删除</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>和尚</td>
<td>男</td>
<td>合气道</td>
<td>
<button>删除</button>
</td>
</tr>
</tbody>
</table>
<!--定义form表单:-->
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<!--定义行居中:-->
<div class="col-lg-6 col-lg-offset-3">
<!--定义堆一行:-->
<!--<div class="col-lg-offset-3">-->
<!--定义堆一行:-->
<form class="form-inline">
<!--<form>-->
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<!--定义顺序的:-->
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
<!--定义单独行:-->
<!--<input type="email" class="" id="exampleInputEmail1" placeholder="Email">-->
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!--定义水平排列:-->
<form class="form-horizontal">
<!--has-success定义正常状态变绿:-->
<!--<div class="form-group has-success">-->
<!--加错误提示样式has-error:-->
<div class="form-group has-error">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
<!--#定义错误提示:-->
<span class="help-block">A block of help text that breaks d one line.</span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<!--disabled禁用:-->
<input disabled type="password" class="form-control" id="inputPassword3" placeholder="Password">
<!--readonly只读:-->
<input readonly type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="s1" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<select name="" id="s1" class="form-control">
<option value="1">男</option>
<option value="2">女</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</body>
</html>

jquery和bootstrap:的更多相关文章

  1. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  2. Bootstrap-基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  3. Jquery的bootstrap在线文本编辑器插件Summernote

    http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...

  4. asp.netajax与jquery和bootstrap的无刷新完美实现

    20190421asp.netajax与jquery和bootstrap的无刷新完美实现 设计代码和后台代码中重要部分加粗和深色以及字号加大. 设计前台代码: <%@ Page Title=&q ...

  5. 标签页(tab)切换的原生js,jquery和bootstrap实现

    概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...

  6. vue框架(三)_vue引入jquery、bootstrap

    一.vue安装jquery 1.按照之前博客的内容,新建一个vue工程. 2.在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 3.在build/ ...

  7. Sublime text代码补全插件(支持Javascript、JQuery、Bootstrap框架)

    Sublime text代码补全插件(支持Javascript.JQuery.Bootstrap框架)   插件名称:javascript-API-Completions 支持Javascript.J ...

  8. 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记

    <疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...

  9. vue引入jQuery、bootstrap

    vue引入jQuery.bootstrap 1.使用vue-cli构建的vue项目 2.npm安装jquery.bootstrap npm install jquery 3.修改build/webpa ...

  10. 基于jquery的bootstrap在线文本编辑器插件Summernote (转)

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

随机推荐

  1. 201871010113-刘兴瑞《面向对象程序设计(java)》第十三周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>http ...

  2. 重装windows后如何恢复mysql服务

    如果重装系统后之前的mysql还在的话,可又直接恢复,不需要安装: 注意my.ini文件的位置,应该与bin目录同级: 进入cmd,然后进入你的mysql的bin目录,输入命令:mysqld inst ...

  3. python中copy()和deepcopy()详解

    **首先直接上结论: —–我们寻常意义的复制就是深复制,即将被复制对象完全再复制一遍作为独立的新个体单独存在.所以改变原有被复制对象不会对已经复制出来的新对象产生影响.—–而浅复制并不会产生一个独立的 ...

  4. Hybrid App: 对比UIWebView和WebKit实现JavaScript与Native交互

    一.简介 在前面一篇文章中讲到过实现JavaScript与Native交互的方式有一种就是使用原生内嵌webView.在iOS8之前,开发者只能使用苹果提供的UIWebView类来加载URL或者HTM ...

  5. angular ng-bind-html异常Attempting to use an unsafe value in a safe context处理

    在angular中使用ng-data-html渲染dom时,遇到了一个Attempting to use an unsafe value in a safe context错误,官方给出的理由是‘试图 ...

  6. Python之基本运算符

    基本运算符 1.算符运算符 运算符 描述 例子 + 两个对象相加 a+b - 两个对象相减 a-b * 两个数相乘或返回一个被重复若干次的字符串 a*b / 两个数相除 a/b % 取模,返回除法的余 ...

  7. pandas 学习 第7篇:DataFrame - 数据处理(应用、操作索引、重命名、合并)

    DataFrame的这些操作和Series很相似,这里简单介绍一下. 一,应用和应用映射 apply()函数对每个轴应用一个函数,applymap()函数对每个元素应用一个函数: DataFrame. ...

  8. Redisson实现分布式锁(2)—RedissonLock

    Redisson实现分布式锁(2)-RedissonLock 有关Redisson实现分布式锁上一篇博客讲了分布式的锁原理:Redisson实现分布式锁---原理 这篇主要讲RedissonLock和 ...

  9. ReSharper激活方法

    激活方式选择License Keys. 激活码: MTW881U3Z5-eyJsaWNlbnNlSWQiOiJNVFc4ODFVM1o1IiwibGljZW5zZWVOYW1lIjoiTnNzIElt ...

  10. 使用dapper遇到的问题及解决方法

    在使用dapper进行数据查询时遇到的一个问题,今天进行问题重现做一个记录,免得忘记以后又犯同样的错误. 自己要实现的是:select * from tablename where id in(1,2 ...