昨日内容回顾
节点操作
创建标签
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')