前端学习补充

前端部分

前端三大块

1、HTML：页面结构
2、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
3、JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能
HTML5标签：

JavaScript是运行在浏览器端的脚本语言，主要解决的是前端和后端交互的问题。

JavaScript嵌入页面的方式：
1、行间事件（主要用于事件）

<input type="button" name="" onclick="alert('ok！');">

2、页面script标签嵌入

<script type="text/javascript">        
    alert('ok！');
</script>

3、外部引入

<script type="text/javascript" src="js/index.js"></script>

变量、数据类型及基本语法规范

变量类型
5种基本数据类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null
1种复合类型：
object

获取元素方法

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，

定时器

定时器在JavaScript中的作用
1，定时调用函数
2，制作动画

定时器

setTimeout 只执行一次的定时器
clearTimeout 关闭只执行一次的定时器
setInterval 反复执行的定时器
clearInterval 关闭反复执行的定时器

jquery选择器

jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。
$(’#myId’) //选择id为myId的网页元素
$(’.myClass’) // 选择class为myClass的元素
$(‘li’) //选择所有的li元素
$(’#ul1 li span’) //选择id为为ul1元素下的所有li下的span元素
$(‘input[name=first]’) // 选择name属性等于first的input元素
对选择集进行过滤
$(‘div’).has(‘p’); // 选择包含p元素的div元素
$(‘div’).eq(5); //选择第6个div元素
选择集转移
$(’#box’).prev(); //选择id是box的元素前面紧挨的同辈元素
$(’#box’).prevAll(); //选择id是box的元素之前所有的同辈元素
$(’#box’).next(); //选择id是box的元素后面紧挨的同辈元素
$(’#box’).nextAll(); //选择id是box的元素后面所有的同辈元素
$(’#box’).parent(); //选择id是box的元素的父元素
$(’#box’).children(); //选择id是box的元素的所有子元素
$(’#box’).siblings(); //选择id是box的元素的同级元素
$(’#box’).find(’.myClass’); //选择id是box的元素内的class等于myClass的元素
判断是否选择到了元素
jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素。
var $div1 = $(’#div1’);
var $div2 = KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲div2'); alert(div1.length); // 弹出1
alert($div2.length); // 弹出0
…

这是一个div

绑定click事件
$(’#btn1’).click(function(){
// 内部的this指的是原生对象
// 使用jquery对象用 $(this)
})
jquery动画
通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值。动画执行完成后会执行一个函数。
/*
animate参数：
参数一：要改变的样式属性值，写成字典的形式
参数二：动画持续的时间，单位为毫秒，一般不写单位
参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动
参数四：动画回调函数，动画完成后执行的匿名函数

*/

$(’#div1’).animate({
width:300,
height:300
},1000,‘swing’,function(){
alert(‘done!’);
});
jquery特殊效果

$btn.click(function(){

    $('#div1').fadeIn(1000,'swing',function(){
        alert('done!');
    });

});

fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素
jquery事件
blur() 元素失去焦点
focus() 元素获得焦点
click() 鼠标单击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
submit() 用户递交表单

常用正则规则

//用户名验证：(数字字母或下划线6到20位)
var reUser = /^\w{6,20}KaTeX parse error: Expected 'EOF', got '\w' at position 44: …l = /^[a-z0-9][\̲w̲\.\-]*@[a-z0-9\…/i;
//密码验证：
var rePass = /^[\w!@# %^&*]{6,20} /;
//手机号码验证：
var rePhone = /^1[34578]\d{9}$/;
事件冒泡
什么是事件冒泡
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
事件冒泡的作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
阻止事件冒泡
事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止

html DOM实例

innerHTML 属性设置或返回表格行的开始和结束之间的html。

$.ajax使用方法

常用参数：
1.url 请求地址
2.type 请求方式，默认为’GET’,除外还有’POST’.
3.datatype 设置返回的数据格式，常用’json’格式、
4.data 设置发送给服务器的数据
5.success 设置请求成功后的回调函数
6.error 设置请求失败后的回调函数
7.async 设置是否异步，默认为true，表示异步。
$.ajax({
url: ‘/change_data’,
type: ‘GET’,
dataType: ‘json’,
data:{‘code’:300268}
})
.done(function(dat) {
alert(dat.name);
})
.fail(function() {
alert(‘服务器超时，请重试！’);
});

Vue.js

数据与方法

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。还可以在Vue实例中定义方法，通过方法来改变实例中data对象中的数据，数据改变了，视图中的数据也改变。

window.onload = function(){
var vm = new Vue({
el:’#app’,
data:{message:‘hello world!’},
methods:{
fnChangeMsg:function(){
this.message = ‘hello Vue.js!’;
}
}
});
}
…

{{ message }}