Java学习之路-bootstrap框架

小白学Java
623 阅读4分钟
bootstrap框架

bootstrap：一个前端框架，可以使用bootstrap开发PC端页面，也可以开发移动端页面，目前 bootstrap框架设计移动优先；

对前端框架技术 ：css + js

  • 布局容器(container | container-fluid)
  • 栅格系统(一行默认分成12列，可以根据需要指定占的列数) --- 分栏
  • 全局样式 ：对html中的标签都做了样式设置，只需要找到对应标签的样式，通过class加载即可;
  • 组件：对html封装（标签+样式）
理解脚本

脚本(script)：在网页文档中嵌入的一段程序，此段程序代码称为脚本；脚本最初设计主要用在表单验证；脚本语言最初由网景公司为其浏览器--Netscape浏览器开发的；网景公司后来将脚本提交给ECMA,ECMA将网景提交的脚本语言命名为：ECMAScript;

ECMAScript 1.0 1997

ECMAScript2.0 1998

ECMAScript 3.0 1999

ECMAScript 4.0

ECMAScript 5.0 3.1版本 2009

ECMAScript 6.0 |ECMAScript 2015

完整的JS内容 ：ECMAScript + DOM + BOM

脚本入门
#伪脚本:直接将脚本写到标签中;
<a href="#" onclick="return confirm('确认删除')">删除</a>
#在文档的head标签中放脚本程序;
<script type="text/javascript">
    //在页面中嵌入的一段脚本程序;
    //document.write('hello,world');
    //console.log('hello,wrold');
    //alert('欢迎学习ES6');
</script>
#脚本放到一个独立文件中，再导入进来
<script src="js/1.js" type="text/javascript"></script>
窗体的onload事件

浏览器中标签的解析顺序：自上而下，如果想要通过脚本操作文档中的标签 ，需要等待文档加载完毕；当文档加载完毕后，会自动触发窗体的load事件,在此事件中再写访问标签的代码即可;

<script type="text/javascript">
 //找到文档的a标签，给标签注册一个click单击事件；
window.onload = function(){
    let aTag = document.querySelector('a');
    aTag.onclick = function(){
        alert('你单击了我');
    }
}
</script>

注：文档中只能有一个load事件，如果写多个load事件，最后一个有效;

ES6语法
1变量声明
 //声明变量
var name='张一'; //var声明的变量称为全局变量
//在ES6中，多了一个变量的声明语法; let
{
    var major="信科";
    let add="2栋101"; //局部变量
}
for(let i =0;i<10;i++){
}
//console.log('i -> ' + i); XXX

console.log('name:',name);
console.log('major',major);
//console.log('add',add); XXX

const PI =3.14; //定义常量;
//PI = 3.15;  XXX
console.log('PI -> ' + PI)
//const  : 一般可以将一个对象的给const声明的变量
class Student{

}
class Person{

}
const stu = new Student();
stu = new Person();//XXX

let [a,[b,c]] = [1,[2,3]];
console.log(a,b,c);

小结： 多了let ,const 声明的变量,多了变量的解构赋值;

2数据类型

null : 表示空对象

undefined :表示对象未赋值或者对象的属性不存在

//字符串;模板字符串
 let s1="张一";
let s2  ="world";
//let s3 = s1 + s2;
let s3 = `hello:${s1  },....${s2 }`;//反引号;ESC下的字符
console.log(s3)

对象：对象可以对应JAVA语言的类

3 JSON

JSON :JavaScript Object Notation

单个对象：{}表示 集合对象：[]表示

4 函数
函数
function funname([args1,args2,....,argsn]){
 	[return val]
}
匿名函数 -- 需要实现自调用;
(function(a,b,c){

})(v1,v2,v3);
let fn = function(a,b,c)(){ } #fn 本质是此匿名函数，就代表本函数，使用方式要按函数方式使用
箭头函数
let fn2 = (args1,args2,...,argsn) => { };
5 闭包
npm view jquery versions
npm install jquery

jQuery = function( selector, context ) {
		// The jQuery object is actually just the init constructor 'enhanced'
		return new jQuery.fn.init( selector, context, rootjQuery );
}
window.jQuery = window.$ = jQuery;

6 类(class)

js中类的思想与java基本一致
class A{
	#成员属性
	#属性名  --- 私有的;
	#成员构造方法
	constructor(){
	
	}
	#成员方法
	
}
class B extends A{

}
7 异常操作
promise 
async
await

8 模块化设计

export {obj1,obj2,obj3,.....}
#import * as 别名 from './js/calc.js'
import {PI,sum,avg} from './js/calc.js'

小结：关于后期JS编程涉及主要语法：

let var const 解构赋值
箭头函数
module语法 (export | import)
Promise | async | await
DOM

HTML,XML　－－－ HTML DOM | XML DOM

对HTML DOM来说，加载HTML时，也得到文档对象 ----- document,文档中的每一元素（节点）都是一个对象

如果元素有属性，直接通过对象.属性就能拿到;标签 如果包裹信息，通过标签对象的innerHTML得到；通过innerText也能得到（去标签） ---- （表单中的标签除外，表单中的控件有一套独立的 ）

DOM

1、查找标签
#根据标签的id找(id唯一的)
doucment.getElementById('id')
#根据标签名找，返回的是一个集合;
document.getElementsByTagName('tagName');
#根据标签的name属性查找;
document.getElementsByName('name')
#根据css的选择器查找
document.querySelector(css选择器写法) --- 单个对象
document.querySelectorAll(css选择器) --- 集合对象
2、全选|光棒效果
window.onload =function(){
    let chk = document.querySelector('#chk');
    chk.addEventListener('click',()=>{
        let chks = document.querySelectorAll('table input[type="checkbox"]');
        chks.forEach(item => item.checked = chk.checked);
    })
// document.querySelectorAll('table tr').forEach(item=>{
    //    item.addEventListener('mouseover',()=> item.style.background='gray' ); 
    //     item.addEventListener('mouseout',()=> item.style.background='white');
    // });
    document.querySelectorAll('table tr').forEach(item =>{
        item.onmouseover =()=>item.style.background='gray';
        item.onmouseout =()=>item.style.background='white';
    });
    
}
3、改标签样式
tagObj.className ='类选择器名称';
tagObje.style.样式属性 ='样式值';
4、联动菜单

联动实现：主要使用JS,数据可以来自服务器传过来的动态数据（ajax）

option标签

属性说明
text标签 显示的文本
value标签value属性的值

select标签

属性说明
options下拉选择项的集合
selectedIndex选择项的索引（从0开始）
5、TAB选项卡
window.onload =function(){
            tab();
        }
        function tab(){
            const lis = document.querySelectorAll('.tab .tab-header ul li');
            const divs= document.querySelectorAll('.tab .tab-body div');
            lis.forEach((item,index)=>{
                item.addEventListener('click',()=>{
                    //取消原hot li;
                    //lis.forEach(item=>item.className='');
                    document.querySelector('.tab .tab-header ul li.hot').className='';
                   //需要激活当前li;
                   item.className='hot';

                    //让tab-body中对应的div显示
                    divs.forEach(item=>item.className='hidden');
                    divs[index].className='';
                });
            });
        }
6.、伦播图
let defaultIndex = 0;
        let timer;
        window.onload =function(){
            carousel();
        }
        function carousel(){
            const imgs = document.querySelectorAll('.carousel .carousel-img img');
            const spans = document.querySelectorAll('.carousel .carousel-circle span');
            imgs.forEach((item,index)=>{
                item.className='hidden';
                if(index==defaultIndex){
                    item.className='';
                    //取消原焦点
                    document.querySelector('.carousel .carousel-circle span.hot').className='';
                    //设置焦点;
                    spans[index].className ='hot';
                }
            });
            //切换;
            defaultIndex++;
            if(defaultIndex>3){
                defaultIndex=0;
            }
            //给span注册一个click事件
            spans.forEach((item,index)=>{
                item.addEventListener('click',()=>{
                    window.clearTimeout(timer);//清空定时器;
                    defaultIndex = index;
                    carousel();
                })
            })
            //需要一个定时器;
            timer = window.setTimeout(carousel,3000);
        }
7、表单验证
查看bootstrap版本： npm view bootstrap versions
项目初使化：npm init -y  -------得到一个项目的配制文件(package.json)

正则表达式

7、表格操作

脚本语言为表格标签单独设计了一套独立API，对表格标签的操作可以使用DOM（实现对表格添加|删除|修改）,但不态方便（相对为表格独立设计的一套API）

Table
  --deleteRow
  --insertRow
TableRow
  --insertCell
  --rowIndex
TableCell
  --innerHTML
BOM

BOM :Browse Object Model

window
	--setInterval(fn,time);
	--setTimeOut(fn,time);
	--open();
	--close();
	--alert('msg')
	--confirm(msg);
	--prompt(msg,defaultvalue);
  --document
  	--getElementById
  	--getElementsByTagName
  	--getELmenetsByName
  	--querySelector
  	--querySelectAll
  	--createElement
  	--......
  --location
  	--href
  	--host
  	--port
  	--....
	--获取经纬度 +  百度地图 --- 地理定位(js);
  --history
   --forward() | go(1)
   --back()| go(-1);
  --navigator
    --appCodeName
	--appName
	--appVersion
	--userAgent
  --screen
   --width
   --height
  --frames
jQuery
1 jQuery简介
https://jquery.com/
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

npm view jquery versions
下载：npm install jquery@1.12.4

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        console.log('hello,world');
    })
</script>
2 jQuery ready事件

总体上ready事件与原生js中的窗体对象的load是一样的，但ready执行效率（时机）要早于load;

一个页面中可以有多个ready,原生的js只能有一个load事件有效;

$(document).ready(function(){
    //jquery code;
    console.log('hello,world');
});
$(function(){
    console.log('hello,world')
});
3 jQuery对象与原生js对象转换

原则：jquery对象与原生js对象的API是不能互用的,在写js时，要么基于jQuery框架写，要么使用原生js写;

jQuery选择器得到是一个集合对象;

原生js对象就是对象本身

将jQUery对象转为原生的js对象 --- 可以使用原生的js api
//let div1 = $div.get(0); //得到原生的js对象;
let div1 = $div[0];
div1.innerHTML ='<font color="blue">hello:div1</font>'

将原生的js对象转为jquery对象 --- 可以使用jquery api;
div = document.querySelect('div');
let $div2 = $(div);
$div2.html('<h1>this is $div2 content</h1>');
console.log($div2)

在写jquery 脚本时，推荐jQuery的变量命名加$,以标识此对象为jQuery对象

4 jQuery选择器

写jQuery程序2步：第1步：选择，第2步：do something;

原生JS中查找文档标签

document.querySelector(选择器语法) document.querySelectorAll(选择器语法)；

选择器语法：css选择器的语法;

5 jQuery事件注册
原生js事件注册
document.querySelector('#div1').addEventListener('事件名',fn);
document.querySelector('#div1').on事件名 = fn;

在jQuery框架，注册事件采用jQuery方式
$('父标签').on('事件名','子标签选择器',fn);
$('选择器').click(fn);
6 jQuery样式操作
原生JS改样式 
document.querySelector('选择器').style.样式属性='样式值';
doucment.querySelector('选择器').className='新的类选择器名';
jQUery样式API
$('选择器').css({样式属性1:样式值1，样式属性2:样式值2,...,样式属性n:样式值n});
$('选择器').addClass('类选择器名'); | $('选择器').removeClass('类选择器名')
$('选择器').attr(name|properties|key,value|fn)

整个jQuery框架以：jQuery([selector,[context]])工厂函数为核心; 工厂函数jQuery(）有三个主要版本

jQuery([selector,[context]]) :查询文档标签 ;

jQuery(callback) : $(document).ready(fn)的简写

jQuery([html,[ownerDocument]]) :创建一个jQuery对象（标签对象） --- 添加文档中 ;

avatar
文章
阅读
粉丝