jQuery结尾和bootstrap部分

昨日内容回顾
节点操作
创建标签

var imgEle = document.createElement('img')
			imgEle.src = '图片地址'
			imgEle.setAttribute('username','jason')
			imgEle.setAttribute({'username':'jason',
								'password':'123'
			})
			var divEle = document.getElementById('d1');
			divEle.appendChild(imgEle)
			divEle.insertBefore(imgEle,pEle)

给标签添加文本值

		innerText  获取标签内部所有的文本值包括子标签的
		innerText = ''  给标签文本设置值
			
			innerHTML  获取标签内部所有的标签及文本
			innerHTML = ''  

两者的区别就在于下面的可以识别标签

操作标签类属性

var divEle = document.getElementById('d1');
divEle.classList
divEle.classList.add()
divEle.classList.remove()
divEle.classList.contains()
divEle.classList.toggle()  有的时候删除，没有的时候添加

样式操作

		var divEle = document.getElementById('d1');
		divEle.style.color = 'red'

绑定事件

onclick
onfocus
onblur
onchange
	
	input获取焦点失去焦点

定时器:
1.单纯的获取当前时间，展示到input框中
2.页面上定义一个按钮 点击时间走动(setInterval)
3.再定义一个按钮停止时间走动(clearInterval)
4.定义了一个全局变量指代定时器并且判断这个变量只能指代一次
5.在清除定时器的时候将全局变量置为空(false)

省市联动:
1.定义多个select标签
2.先循环获取自定义对象的键(省)
3.动态创建option标签并为其添加文本值
4.将创建好的标签添加到标识省的select框中(appendChild)
5.给标识省的select标签绑定onchange事件，当用户选择不同的省的时候
自动触发,在该事件内部能够动态获取到用户选择的省的信息
6.根据用户选择的省获取到对应的市的数组信息，循环遍历改数组内每一个
市的信息，动态创建option标签并为其添加文本值
7.将创建好的标签添加到标识市的select框中(appendChild)
8.在动态修改市相关select框之前先清空改select框内的文本及标签(innerHTML)

jQuery

支持链式操作
$(‘选择器’).action(‘具体操作’)

选择器
基本选择器
id
class
tag
ps:jquery对于原生js对象的区别与联系
两者之间转换:

	jquery对象  >>>		原生js       (索引取值 $('div')[0])
	原生js  	>>>     jquery对象	 ($(原生的js对象))

表单筛选器

	$(':text')	>>>  $('input[type="text"]')
	$(':password')	>>>  
		
		$(':checked')  >>>  $('input[checked="checked"]')
		
		$('input:checked')

筛选器方法

	.first()
	.last()
	.eq()
	.odd()
	.even()
	.gt()
	.lt()
	.has()
	.not()

样式操作

$('div').css({'color':'red','font-size':'24px'})
$('div').hasClass()
$('div').addClass()
$('div').removeClass()
$('div').toggleClass()

开关灯示例

回到顶部

$(window).scrollTop()

尺寸

Height()
innerHeight()
outerHeight()
width()
innerwidth()
outerwidth()

获取标签内部文本或标签

	$('div').text() 
	$('div').text('')
	$('div').html()
	$('div').html('')

获取用户输入的标签的文本值

$('input').val()
$('input').val('')

今日内容
jQuery事件
jQuery动画效果
补充语法

Bootstrap前端框架
	特点:教你如何复制粘贴
	ps:虽然是复制粘贴，但是你们可能连复制粘贴都不会!!!

取消标签自带的事件
return false

$('button').on('click',function () {
    console.log(this)
})

this指代的是当前被操作对象(并且是原生的js对象)

$('button').on('click',function () {
    $(this).clone().insertAfter(this);
})

克隆标签:默认情况下只克隆标签的文本和样式不克隆事件

绑定事件的两种方式

第一种
	$('div').click(function(){
		事件代码
	})
第二种
	$('div').on('事件名',function(){
		事件代码
	})

hover:鼠标悬浮事件

取消标签自带的事件有两种方式

第一种:
		return false
	第二种:
		$('input').click(function (e) {
        alert(123);
        // 1.	return false
        // 2.	e.preventDefault();
		})

事件冒泡:
事件会一层层往上一级汇报
如何组织事件冒泡:
在你的事件函数内部加一句取消事件冒泡的代码
注意需要加上形参e

	$('p').click(function (e) {
		alert('p');
		e.stopPropagation()
	});

事件委托:
将触发的事件委托给内部某个标签去执行
无论改标签是初始化就有还是后期动态添加都可以执行

$('body').on('click','button',function () {
    	alert(123)
    })

文档加载
三种方式:

			第一种(了解):
				$(document).ready(function(){
					// 在这里写你的JS代码...
					})
			第二种(了解):
				$(function(){
				// 你在这里写你的代码
				})
			第三种:
				直接在body内部最下方书写代码

将标签当做自己的临时小仓库
可以让任何标签帮你存储数据

整个前端
HTML
CSS
JS
jQuery

就差一个搭建前端页面的精髓

Bootstrap它是基于jQuery，也就意味着你在用bootstrap要先导入jQuery文件！！！

建议使用3.X版本，不要轻易使用最新版

修改页面样式其实就是修改类属性

布局容器
<div class="container "></div>  左右有固定留白
<div class="container-fluid c1"></div>  全屏展示



栅格系统
一个row就表示一行(这一行默认给你均分成了12份,每一份你还可以均分成12份)

首先使用bootstrap先写一个布局容器

<div class="container">
	<div class="row">  一行
		<div class="col-md-6 c1"></div>  控制你占当前行的多少列

列偏移

col-md-offset-3

浮动

pull-left
pull-right

表格

<table class="table table-hover table-bordered table-striped">

按钮

		<button class="btn btn-success">button</button>
        <button class="btn btn-info">button</button>
        <button class="btn btn-warning">button</button>
        <button class="btn btn-danger">button</button>
        <button class="btn btn-primary">button</button>
		<a href="http://www.xiaohuar.com" class="btn btn-primary">Link</a>
		
		
		btn-block 占父标签100%
		
导航

作业1:
注册示例提示信息显隐

Bootstrap框架

生产环境下载

CDN简介(内容分发网络)

bootstrap文件划分

• js

  只需要留一个bootstrap.min.js即可

• css

  只需要一个bootstrap.min.css即可

• fonts

  都是必须的，不需要我们手动导入，js文件会自动查找导入对于的fonts文件

注意

bootstrap中的js文件依赖于jQuery，所以使用bootstrap需要先导入jQuery

实例精选

实际网站示例

Normalize.css(不同浏览器样式一致性)

布局容器

• container与container-fluid

栅格系统

• row(行)
• col(列)

<style>
        .red {
            background-color: red;
            border: 3px solid green;
            height: 100px;
        }
</style>
<div class="container">
    <div class="row">
        <div class="col-md-6 red"></div>
        <div class="col-md-6 red"></div>
    </div>
</div>
<!--
        6，6
        2，10
        1～12
        再次理解class里面写的属性值到底是干啥的
-->
<!--借助谷歌浏览器自动切换手机或电脑屏幕，只需要加一个col-xs-6生成对应的布局-->

媒体查询

<style>
				.c1 {
            background-color: red;
        }
        @media screen and (max-width: 600px){
            .c1 {
                background-color: green;
            }
        }
</style>				
<div class="col-md-6 red c1"></div>

响应式列重置

<style>
				.c2 {
            background-color: red;
        }
        .c3 {
            height: 60px;
        }
</style>
<div class="container">
    <div class="row">
  <div class="col-xs-6 col-sm-3 c3 c2">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3 c2">.col-xs-6 .col-sm-3</div>
  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-3 c2">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3 c2">.col-xs-6 .col-sm-3</div>
</div>
</div>

列偏移

<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>

排版

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<p class="lead">...</p>
<mark>highlight</mark>
<!--两者效果一样，但是语义不一样-->
<del>This line of text is meant to be treated as deleted text.</del>
<s>This line of text is meant to be treated as no longer accurate.</s>

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>


<!--列表组-->
<ul class="list-unstyled">
  <li>...</li>
</ul>

<ul class="list-inline">
  <li>...</li>
</ul>

表格标签

<table class="table table-bordered table-hover table-striped"></table>
<tr class="active">...</tr>

表单

• 登陆示例

• input框提示信息显影

按钮

<button class='btn-success/btn-info/btn-primary/btn-danger/btn-warning'>
  按钮
</button>

快速浮动

<div class="pull-left">...</div>
<div class="pull-right">...</div>

组件

<!--字体图标 意味着操作它跟操作普通文本一样   爱心图标举例-->
<!--图标大小可以通过调span标签所在的父标签调节-->

Font-Awesome简介

• css
• fonts

标签页

• 实际应用场景 >>> 购物网站物品各类信息(JS插件标签页)

JS插件

模态框

• data参数绑定

  <button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
  

• 自定义代码

$('#myModal').modal('show/hide')

sweetalert插件

https://lipis.github.io/bootstrap-sweetalert/

下载只需要用dist文件夹

swal('标题')
swal('标题','文本')
swal('标题','文本'，'success')
swal('标题','文本','warning')
swal('标题','文本','info')
swal('标题','文本','error')