目录:1. JavaScript 2.Jquery 3.Bootstrapjavascript
JavaScriptcss
javascript是一种web前端的描述语言，也是一种基于对象(object)和事件驱动(Event Driven)的、安全性好的脚本语言html
它运行在客户端，从而减轻服务器的负担前端
特色：java
1.javascript 主要用来向html页面中添加交互行为python
2.javascript 是一种脚本语言，语法和c语言系列语言的语法相似，属于弱语言类型jquery
3.javascript 通常用来编写客户端脚本web
4.javascript 是一种解释型语言，边执行边解释，无需另外编译ajax
用途：正则表达式
解决网页交互和数据交互，最终目的是丰富客户端效果以及数据的有效传递
1.实现页面交互，提高用户体验实现页面特效，即javascript操做html的dom结构或操做样式
2.实现数据交互，客户端表单验证，即在数据送达服务端以前进行用户提交信息，及时有效的验证，减轻服务器压力
ECMAScript
是脚本程序设计语言的web标准
与javascript的关系：
ECMAScript是欧洲计算机制造商协会，基于美国网景通信公司的Netscape发明的javaScript
和Microsoft公司随后模仿javaScript推出的JScript脚本语言，制定了ECMAScript标
javascript由ECMAScript/DOM/BOM三部分组成
前端经常使用开发工具：sublime/ visual Studio Code/ HBuilder/ Webstorm
javascript实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.span1{
color:red;
}
</style>
<!--外链式-->
<!--<script src="./1.js"></script>-->
<head>
<body>
<!-- dom == document object model 行内式引入-->
<p id='p1' onclick="clickhandler()">123</p>
<body>
<!-- 内部式 建议 引入的时候要在body以后，咱们要等待全部的dom元素和图片资源加载完成后再去执行相应的js操做-->
<script type="text/javascript">
document.write('<span class="span1">233</span>') 向文档输入内容，不会覆盖原文档的内容
console.log('星儿今天很漂亮') 往控制台打印日志
console.error('错了') 向控制台抛出一个异常
console.dir(window) 输入一个对象的所有属性 console.clear()清除，通常用不到
var a = prompt('请输入你的名字'); 相似于input输入内容，有返回值
console.log(a);
function clickhandler() {
//弹出警告框
//都好好的好好的
/*
这是一个方法
一个很好的方法
*/
//window.alert(1); 弹出一个带有一条指定消息的信息
}
</script>
</html>
变量
即在程序运行过程当中它的值是容许改变的量，与之对应的是常量：即在程序运行过程当中它的值是不容许改变的量
定义关键字 var str = 'alex';
变量的声明与定义
1.先声明后定义
var dog;
// alert(dog) //undefined 未定义
// 定义
dog = '小黄';
2.声明马上定义
var dog_2 = '小红';
console.log(dog_2); //小红
变量名规范
1.严格区分大小写
2.能够用字母、数字、下划线、$，但不能数字开头，不能纯数字，不能包含关键字，像var 和 保留字，像alert
关键字例如var number,也尽可能不要使用top name
3.推荐驼峰命名法：有多个有意义的单词组成名称的时候，第一个单词的首字母小写，其他的单词首字母大写，这没写错
4.匈牙利命名：就是根据数据类型单词的首字符做为前缀
数据类型
基本数据类型和引用数据类型
基本数据类型指的是简单的数据段
引用数据类型指的是有多个值构成的对象
基本数据类型：
number
var a = 123;
// typeof 检查当前变量是什么数据类型
console.log(typeof a)
// 特殊状况
var a1 = 5/0;
console.log(a1) //结果是infinity 无限大 类型仍是number
string
var str = '123';
console.log(typeof str)
boolean
var b1 = false;
console.log(typeof b1)
空值null
var c1 = null;//空对象 object
console.log(typeof c1) 这个结果是object类型
空值undefined
var d1
//表示变量未定义
console.log(typeof d1)
引用数据类型
包含对象数据类型和函数数据类型
对象数据类型：数组array 对象object 正则regexp
函数数据类型：function
Function
Object
Arrray
String
Date
运算符
赋值运算符、算数运算符、比较运算符、特殊状况
1.赋值运算符
= += -= *= /= %=
2.算术运算符
+ - * / %(取余) ++(自增) --(自减)
c1=d++ d++是先赋值后++，此时查看c1就是d的值
c2=++d ++d是先++后赋值，此时查看c2就是d进行了自增操做后的值
3.比较运算符
浏览器会进行隐式转换
'5'==5就会是true
== ===(等同于，值和类型均相等) != !==(不等同与，值或类型有一个不相等或两个都不相等)
> < >= <=
4.特殊状况
能够进行字符串拼接，即:
var name = "alex";
var str = "my name is "+name+"li"；
字符串不能进行+运算
var a1 = "1";
var a2 = "2";
var str1 = a1 + a2 输出的是字符串格式的12，是进行了字符串的拼接，而不是运算获得3
可是能够进行减乘除等运算，隐式转换，浏览器会自动把字符串的数字解析成数字格式而后进行运算
5.逻辑运算符
&& and || or
&& 要两个都为真
|| 有一个为真就是真
数据类型转换
1.将数值类型转换成字符串类型
var n1 = 123;
var n2 = '123';
var n3 = n1+n2;
//隐式转换
console.log(typeof n3); string类型
//强制转换
var n4 = String(n1);
2.将字符串类型转换成数值类型
var stringNum = '789.123wadjhkd';
var num2= Number(stringNum)
console.log(num2)
//parseInt()能够解析一个字符串，并返回一个整数
console.log(parseInt(stringNum));
console.log(parseFloat(stringNum));能返回浮点数
3.任何数据类型均可以转换为boolean类型
var b1 = '123';
var b2 = 0;
var b3 = -123;
var b4 = Infinity;
var b5 = NaN; 这个东西是not a number 可是其实这个是个number数据类型
var b6;//undefined67
var b7 = null;
//非0 NaN即真
console.log(Boolean(b7))
流程控制
浏览器解析代码的顺序是从上往下的
if if-else 逻辑与&& 逻辑或|| switch while循环 do_while循环 for循环
1.if if-else
if:
var ji = 20;
if (ji >= 20){
console.log('恭喜你，吃鸡成功，大吉大利')
}
alert('alex');
if-else:
var ji = 20;
if(ji >= 20){
console.log('恭喜你，吃鸡成功，大吉大利')
}else{
console.log('很遗憾，下次继续努力')
}
if-else if-else:
if (true){
//执行操做
}else if(true){
//知足条件执行
}else if(true){
//知足条件执行
}else{
//知足条件执行
}
2.逻辑与&& 逻辑或||
逻辑与&& 两个条件都成立的时候才成立
if (sum>400 && math>90){
console.log('清华大学录入成功')
}else{
alert('高考失利')
}
逻辑或|| 只有有一个条件成立的时候才成立
if (sum>500 || english>85){
alert('复旦大学录入成功')
}else{
alert('高考失利')
}
3.switch
var gameScore = 'good1111';
switch(gameScore){
//case表示一个条件，知足这个条件就会走进来，遇到break跳出，break终止循环
//若是某个条件中不写break，那么直到该程序遇到下一个break中止
case 'good':
console.log('玩得很好')
//break表示退出
break;
case 'better':
console.log('玩的老牛逼了')
break;
case 'best':
console.log('恭喜你，吃鸡成功')
break;
default: 最后的条件，不作比较
console.log('很遗憾')
}
4.while循环
循环分三步走：
1.初始化循环变量
2.判断循环条件
3.更新循环变量
实例：
var i = 1; //初始化循环变量
while(i<=9){ //判断循环条件
console.log(i);
i = i+1; //更新循环条件
}
练习：将1-100全部是2倍数的在控制台打印，使用while循环
var i = 1;
while(i<101){
if (i%2===0){
console.log(i);
}i++;
}
5.do_while循环
//无论有没有知足while中的条件do里面的代码都会走一次
var i =3; //初始化循环变量
do{
console.log(i)
i++; //更新循环条件
}while (i<10) //判断循环条件
6.for循环,也是像上面同样三步走
for (var i = 1;i<=10;i++){
console.log(i)
}
练习：
1.1-100之间全部的偶数
for (var i = 1;i<=100;i++){
if(i%2==0){ //是偶数
console.log(i)
}
}
2.1-100之间全部数之和
var sum = 0;
for(var j =1;j<=100;j++){
sum = sum+j
}
console.log(sum)
3.打印6*6的星号
for(var i=1;i<7;i++){
for (var j=0;j<6;j++){
document.write('*');}
document.write('<br>');
}
4.输出六行的直角三角形
for(var i=1;i<7;i++){
for(var j=0;j<i;j++){
document.write('*');}
document.write('<br>');
}
5.输出等边三角形
for(var i=1;i<7;i++){
for(var s=i;s<6;s++){
document.write(' ')
}
for(var j=1;j<=2*i-1;j++){
document.write('*');
}
document.write('<br>');
}
经常使用内置对象
都是ECMAScript提供的
数组Array
1.数组的建立方式，感受跟python里面的list很像
1.1字面量方式建立，推荐使用
var colors = ['red','color','yellow'];
1.2使用构造函数的方式建立，使用new关键词对构造函数进行建立对象
var colors2 = new Array(); Array()是构造函数，括号内能够传值
2.数组的赋值
var arr = []; //经过下标进行一一赋值
arr[0] = 123;
arr[1] = '哈哈哈';
arr[2] = '嘿嘿嘿';
取值也能够经过下标来取
能够进行for循环遍历取到所有的值
for(var i=0;i<arr.length;i++){
console.log(arr[i])}
3.数组的经常使用方法
.concat() 把几个数组合并成一个数组
.join() 返回字符串，其中包含了链接到一块儿的数组中的全部元素，元素由指定的分隔符链接或分割
.toString() 直接转成字符串，每一个元素之间用逗号隔开
.indexOf() 查找下标，正向，若是查找的值不存在，返回-1
.lastIndexOf() 查找下标，反向找，可是跟正向查出来的结果是同样的，由于一个元素的下标是固定的
.pop() 移除数组的最后一个元素，并返回该元素
.shift() 移除数组的第一个元素，并返回这个元素
.unshift() 往数组的开头添加一个或多个元素，而且返回新的长度
.slice(start,end) 返回数组的一段
.push() 往数组的最后添加一个元素，并返回新的长度
.sort() 对数组进行排序，并会真正影响到该数组
.reverse() 对数组进行反转，并会真正影响到该数组
.length 它是一个属性，惟一一属性，获取数组的长度，能够结合for循环遍历操做
字符串String
.charAt() 返回指定索引的位置的字符
.concat() 返回字符串值，表示两个或多个字符串的拼接
.match() 返回正则表达式模式对字符串进行查找，并将查找结果做为结果返回
.replace(a,b) 字符串b替换了a
.search(stringObject) 指明是否存在相应匹配，若是找到一个匹配，返回一个整数值
这个整数值指明了匹配距离字符串开始的偏移位置，没有找到匹配返回-1
.slice(start,end) 返回start到end之间的字符串，顾头不顾尾，不包含end，索引从0开始
.split('a',1) 字符串拆分，以a拆分，第二参数是返回的数组的内容的个数，即其长度
.substring(start,end)截取字符串，顾头不顾尾
.length 返回字符串的长度
.toUpperCase() 返回一个新的字符串，字母所有大写，不会更改原字符串
.toLowerCase() 返回一个新的字符串，字母所有小写，不会更改原字符串
Number数字对象
var num = 132.32522;
var numStr = num.toString() //将number类型转成字符串类型
console.log(typeof numStr)
var newNum = num.toFixed(2) //四舍五入，括号中是指定保留的小数位数
console.log(newNum)
Date日期对象
建立日期对象，只有用构造函数一种方法，使用new关键字
var myDate = new Date();
经常使用方法：
.getDate() 根据本地时间返回指定日期对象的月份中的第几天(1-31)
Date() 根据本地时间返回当天的日期和时间,直接用Date()，不用使用myDate对象
.getMonth() 根据本地时间返回指定日期对象的月份(0-11)，因此用的时候要注意+1，0是1月！
.getFullYear() 根据本地时间返回指定日期对象的年份(四位数年份时返回四位数字)
.getDay() 根据本地时间返回指定日期对象是星期中的第几天(0-6),0是周日，必定要注意！
.getHours() 根据本地时间返回指定日期对象的小时(0-23)
.getMinutes() 根据本地时间返回指定日期对象的分钟(0-59)
.getSeconds() 根据本地时间返回指定日期对象的秒数(0-59)
Math内置对象
经常使用：
Math.floor() 向下取整，地板函数，有返回值，返回小于等于原值且与其最接近的值
Math.ceil() 向上取整，天花板函数，有返回值，返回值是大于等于原值且与其最接近的数
Math.max(a,b) 求a和b中的最大值，有返回值
Math.min(a,b) 求a和b中的最小值，有返回值
Math.random() 随机数，默认0-1之间的随机数
有个求多少值到多少值之间的数的公式
min+Math.random()*(max-min)
普通函数
在javascript中，函数是一个数据类型
函数的调用形式
一：
1.函数的声明 这个function必须小写
function add(){
alert('函数被调用了');
alert(this);//当前的this指向了window
//执行的一些操做
}
2.函数的执行
add();
二：
var add = function(){
alert('函数被调用了');
}
add()
三：声明函数式带形式参数
function add3(x,y){
return x+y;
}
var sum = add3(4,5)
alert(sum)
建立对象的几种经常使用方式
使用Object或对象字面量建立对象
工厂模式建立对象
构造函数模式建立对象
原型模式建立对象
1.使用Object或对象字面量建立对象，推荐使用字变量的方式建立
字变量的方式：
var stu={
name:'alex',
age:22,
fav:'鸡汤'
};
console.log(stu);
console.log(window);/*这个window是系统提供给咱们的一个对象*/
//点.语法，包括get方法和set方法
var name=stu.name;
console.log(name);
stu.age=34;
console.log(stu.age);
使用Object的方式
var obj=new Object();
obj.name='xiaomage';
console.log(obj);
2.工厂模式建立对象
JavaScript中没有类的概念
3.构造函数模式建立对象
构造函数与普通函数的区别：
3.1并不存在建立构造函数的特殊语法，构造函数与普通函数惟一的区别在于调用方法
对于任意函数，使用new操做符调用，那就是构造函数
3.2约定构造函数名以大写字母开头，普通函数以小写字母开头
构造函数不须要return，为对象添加成员变量：this.name='alex'
3.3使用new操做符调用构造函数，会经历以下四个阶段：
>> 建立一个新对象
>> 将构造函数做用域赋给新对象，使this指向该对象
>> 执行构造函数代码
>> 返回新对象
实例：
function Student(name,age){
this.name = name;
this.age = age;
this.alertName = alertName();
}
function alertName() {
alert(this.name);
}
var stu1 = new Student("easy1",20);
var stu2 = new Student("easy2",20);
推荐使用的构造函数方式
4.原型的模式建立对象，最好的方案，太难，看看就得了
实例：
function Student(){
this.name = 'easy';
this.age = 20;
}
Student.prototype.alertName = function(){
alert(this.name);
};
var stu1 = new Student();
var stu2 = new Student();
stu1.alertName;
stu2.alertName;
alert(stu1.alertName == stu2.alertName);
定时器
两种：setTimeout() setlnterval()
1.setTimeout()
只在指定时间后执行一次
function hello(){
alert("hello");
}
var t1 = window.setTimeout(hello,1000)
var t2 = window.setTimeout("hello()",3000) //使用字符串执行方法
window.clearTimeout(t1);//去掉定时器
2.setInterval()
在指定时间循环执行,执行函数有返回值，删除该定时器须要clearInterval(返回值)
setInterval('refreshQuery()',8000); //实时刷新时间单位为毫秒
function refreshQuery(){
console.log('每8秒调一次')
}
通常状况下，setTimeout用于延迟执行某方法或功能
setInterval用于刷新表单
正则表达式
https://www.processon.com/view/link/5add4ef9e4b04691064d5e37
/g 是整个字符串所有匹配一遍
DOM操做 document object module
树状结构
在JavaScript中，全部的事物都是节点，元素、文本都是节点
应用场景：能够经过节点进行DOM对象的增删改查
1.获取DOM节点的方法
经过id获取，惟一的
var oDiv = document.getElementById('box');
经过类名获取
var oDiv = document.getElementsByClassName('.box')[0];
经过标签名获取
var oDiv = document.getElementsByTageName('div')[0];
2.经常使用DOM节点
childNodes 获取全部子节点，包括元素、文本等
children 获取全部元素子节点
parentNode 获取父节点
previousSibling 获取上一个兄弟节点，包含文本
previousElementSibling 获取上一个兄弟元素节点，不包含文本
nextSibling 获取下一个兄弟节点，包含文本
nextElementSibling 获取下一个兄弟元素节点，不包含文本
firstChild 获取第一个子节点，包含文本
firstElementChild 获取第一个子节点，不包含文本
lashChild 获取最后一个子节点，包含文本
lastElementChild 获取父元素最后一个元素节点，不包含文本
3.节点的增删改查
<div>
<h3>路飞学城</h3>
</div>
<div id="box">
<p>alex</p>
<p>wusir</p>
<p>xiaomage</p>
<p>egon</p>
<a>luffy</a>
</div>
<div>
<h3>路飞学城2</h3>
</div>
// 1.建立元素节点
var oH2 = document.createElement('h2');
// 设置oH2的内容，p标签会被解析成p元素显示到HTML页面中
oH2.innerHTML = '<p>嘿 sariy</p>';
// 只设置元素内的文本内容，div标签将被当作文本元素
oH2.innerText = '<div>嘿嘿</div>'
// 2.将建立好的元素节点添加到指定元素全部内容的后面
oDiv.appendChild(oH2);
// 获取元素节点里的全部内容 包括标签和文本
console.log(oDiv.innerHTML);
// 表示元素节点的标签名大写
console.log(oDiv.tagName);
// 只获取元素内的文本内容，html标签将被忽略
console.log(oDiv.innerText);
// 设置元素id
oH2.id = 'luffy';
// 设置类名
oH2.className = 'wusir';
oH2.className = 'wusir2';
//获取标签属性
console.log(oH2.getAttribute('class'));//wusir2
// 设置标签属性
oA.setAttribute('href','https://www.luffycity.com');
// 删除元素上的属性
oA.removeAttribute('href');
// 删除建立的对象
// oDiv.removeChild(oH2);
//若是为true 克隆当前元素与元素的全部子节点
// console.log(oDiv.cloneNode(true));
// 父节点.replaceChild(新节点,子节点) 用新节点替换某个子节点
var op = document.createElement('p');
op.innerText = '我是一个段落';
oDiv.replaceChild(op,oA);
//style属性 ：css内联样式属性值
//通常状况下， css的样式属性中出现“-” 号，则对应的style属性 是：去掉“-”号，把“-”号 后面单词的第一字母大写。 若是没有“-”号，则二者 同样。
//例如:oDiv.css.backgroundColor = 'red';
BOM
1.BOM输出
所谓BOM指的是浏览器对象模型Browser Object Model，它的核心就是浏览器
全局对象window
四个经常使用方法:
alert(1);//弹出框 调式使用
console.log('路飞学城')；//用浏览器的调用 F12查看 通常用于浏览器的调试
prompt('message',defaultValue)
var pro = prompt('路飞学城','33333');第二个参数是默认值，这个会弹出一个输入框，有返回值
console.log(pro)
confirm() //有返回值，若是点击肯定，返回true，若是点击取消，返回false
var m=confirm('学习BOM')会有一个弹出框，有肯定跟取消两个选项
还有两个方法 print find
2.open和close方法，全局对象window的方法
open('https://www.baidu.com');//打开百度网页，window对象能够省略
//行间的js中window不能省略
<button onclick="window.open('https://www.luffycity.com')">路飞学城</button>
//打开空白页面，_self是在当前页面打开，_blank是在新的页面打开
open('about:blank',"_self")
//关闭当前页面
close();
//行间js中的window不能省略
<button onclick="window.close()">关闭</button>
3.其余BOM对象和方法
//返回浏览器的用户设备信息
console.log(window.navigator.userAgent)
//获取用户本地信息
console.log(window.location)
//常用的一个方法，跳转一个网址
window.location.href = 'https://www.luffycity.com';
//全局刷新，window.location.reload()，这个方法少用，后面会学习ajax来实现局部刷新操做，用那个
4.client系列
style：
top
left
right
bottom
client：
clientTop 内容区域到边框顶部的距离，就是border的宽度
clientLeft 内容区域到边框左部的距离，就是border的宽度
clientWidth 内容区域+左右padding 可视宽度
clientHeight 内容区域+ 上下padding 可视高度
5.屏幕的可视区域
window.onload = function(){ //window.onload事件会在页面加载完成后触发
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
window.onresize = function(){
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
}
}
6.offset系列
offsetTop: 若是盒子没有设置定位 到浏览器的顶部的距离
若是盒子设置定位，那么是以父盒子为基准的top值
offsetLeft: 若是盒子没有设置定位 到浏览器的左部的距离
若是盒子设置定位，那么是以父盒子为基准的left值
offsetWidth: 内容+padding+border
offsetHeight: 内容+padding+border
7.scroll系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scroll</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
</style>
</head>
<body style="width: 2000px;height: 2000px;">
<div style="height: 200px;"></div>
<div style="height: 200px;"></div>
<div style="height: 200px;"></div>
<div style="height: 200px;"></div>
<div style="height: 200px;"></div>
<div id = 'scroll' style="width: 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;">
<p>路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城
路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城路飞学城</p>
</div>
</body>
<script type="text/javascript">
window.onload = function () {
//实时监听滚动事件
// window.onscroll=function () {
// console.log('上'+document.documentElement.scrollTop);
// console.log("左"+document.documentElement.scrollLeft);
// console.log("宽"+document.documentElement.scrollWidth);
// console.log("高"+document.documentElement.scrollHeight);
//
// };
var s = document.getElementById('scroll');
s.onscroll = function(){
//scrollHeight : 内容的高度+padding 不包含边框
console.log('上'+s.scrollTop);
console.log('左'+s.scrollLeft);
console.log('宽'+s.scrollWidth);
console.log('高'+s.scrollHeight);
}
}
</script>
</html>
jQuery
与javascript的区别
js是一门编程语言，用来编写客户端浏览器脚本
jQuery是js的一个库，包含多个可重用的函数，用来简化js开发的
jQuery能作的js都能作，js能作的jQuery不必定能作
注意：通常状况下，是库的文件，该库中都会抛出来构造函数或对象
若是是构造函数，那么使用new关键字建立对象
若是是对象，那么直接调用属性和方法
DOM文档加载的步骤
1.解析HTML的结构
2.加载外部脚本和样式表文件
3.解析并执行脚本代码
4.DOM树建立完成
5.加载图片等外部文件
6.页面加载完毕
执行时间：
window.onload()必须等到页面内包括图片的全部元素加载完毕后才能执行，5跟6之间
若是不写window.onload() 代码就是从上往下执行的
$(document).ready()是DOM结构绘制完毕后就执行，没必要等到加载完毕，4跟5之间
编写个数：
window.onload()不能同时编写多个，若是有多个，只会执行一个，后面的覆盖前面的
$(document).ready()能够同时编写多个，而且均可以获得执行
简化写法：
window.onload()没有简化写法
$(document).ready(function(){})能够简写为$(function(){})
引入：
百度的jquery库：http://libs.baidu.com/jquery/2.0.0/jquery.min.js
jquery官方的库：https://code.jquery.com/jquery-3.3.1.js
先引入jquery，再写相应的jquery代码
//DOM元素加载完成以后就会调用
//程序执行须要入口，入口函数的方式：
$(document).ready(function(){
alert(1)})
ready是一个回调函数，等待document加载完成后，去执行reday括号里面的function
等价于:
$(function(){
alert(1);
$('#btn').click(function(){
$('div').show().html('个人内容')})})
选择器：
基础选择器
id选择器 标签选择器 类选择器 通配符选择器
层级选择器
子代选择器(>) 后代选择器( ) 毗邻选择器(+) 兄弟选择器(~)
基本过滤选择器
第一个$('li:first') 最后一个last 奇数的odd 偶数的even 索引值等于1的eq(1) 大于1 gt(1) 小于1 lt(1)
属性选择器
选取带有指定属性的元素，或选取带有指定属性和值的元素
li[id] li[class=what] input[name^=user]
筛选选择器
$('li').first()
$('li').last()
jquery对象和DOM对象转换，很重要
DOM对象转换成jquery对象
var box = document.getElementById('box');
console.log($(box)); 直接放到$里面就能够
jquery对象转成DOM对象
1.
$('button')[0]
2.
$('button').get(0)
jequry对象有click方法，
DOM对象是onclick方法
jquery的效果
show：
概念：显示隐藏的匹配元素
语法：show(speed,callback)
参数：
speed：预约速度，能够用字符串('slow','normal','fast')，能够用毫秒数
callback：在动画完成时执行的函数，每一个元素执行一次
hide
概念：隐藏显示的元素
语法：hide(speed,callback)
与show的使用方法相似，这两个方法用来动态的控制元素的显示与隐藏
toggle
是一个开关，只控制盒子显示隐藏时能够用这个，要附带文字时用show跟hide
若是元素是可见的就切换成隐藏的，若是元素是隐藏的就切换成可见的
slideDown
经过高度变化(向下增大)来动态地显示全部匹配的元素，在显示完成后触发一个回调函数
用法和参数与上面相似
slideUp
经过高度变化(向上减少)来动态地隐藏全部匹配的元素，在隐藏完成后可选的触发一个回调函数
用法和参数与上面相似
slideToggle
经过高度变化来切换全部匹配元素的可见性，并在切换完成后可选的触发一个回调函数
与toggle用法相似
fadeOut 没了
经过不透明度的变化来实现全部匹配元素的淡出效果，并在动画完成后可选的触发一个回调函数
这个动画只调整元素的不透明度，不改变其余
fadeIn 出来
经过不透明度的变化来实现全部匹配元素的淡入效果，并在动画完成后可选的触发一个回调函数
这个动画只调整元素的不透明度，不改变其余
fadeTo
把全部匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选的触发一个回调函数
同样的只会调整不透明度
fadeToggle
经过不透明度的变化来开关全部匹配元素的淡入淡出效果，并在动画完成后可选的触发一个回调函数
同样的只会调整不透明度，实现淡入淡出就是用该方法
animate
概念：用于建立自定义动画的函数
语法：animate(params,[speed],[fn])
参数：
params：一组包含做为动画属性和终值的样式属性和及其值的集合
speed：跟上面同样，用字符串或毫秒数来预约速度
fn：在动画完成时执行的函数，每一个元素执行一次
stop
概念：中止全部在指定元素上正在运行的动画
语法：stop([clearQueue],[jumpToEnd])
参数：
clearQueue：若是设置为true,则清空队列，能够当即结束动画
jumpToEnd/gotoEnd：让当前正在执行的动画当即完成，而且重设show和hide的原始样式，调用回调函数
delay
概念：用来作延迟的操做
语法：delay(1000)一秒后作后面的操做
jquery的属性操做
jquery对象有本身的属性和方法，属性分为四部分
html属性操做：是对html文档中的属性进行读取，设置和移除操做，好比attr() removeAttr()
DOM属性操做：是对DOM元素的属性进行读取，设置和移除操做，好比prop() removeProp()
类样式操做：是对DOM属性className进行添加，移除操做，好比addClass() removeClass() toggleClass()
值操做：是对DOM属性value进行读取和设置操做，好比html() text() val()
attr
概念：设置属性值或者返回被选元素的属性值
removeAttr
从每个匹配的元素中删除一个属性
prop
获取在匹配的元素集中的第一个元素的属性值，它是对当前匹配到的DOM对象设置属性
removeProp
用来删除.prop()方式设置的属性集
addClass
添加多个类名
为每一个匹配的元素添加指定的类名
$('div').addClass("box") 添加一个类名
$('div').addClass("box1 box2") 添加多个类名
removeClass
从匹配到的元素中删除所有或者指定的类
$('div').removeClass('box') 移除指定的类
$('div').removeClass() 移除所有的类
toggleClass
若是存在，就删除一个类，若是不存在，就添加一个类
toggleClass('box') 动态的切换类名为box
html
获取值：html()是获取标签元素中全部的内容
设置值：设置该元素的全部内容，会替换掉标签中原来的内容
text
获取值：text()获取匹配元素中包含的文本内容
设置值：设置该元素中全部的文本内容
注意：值为标签的时候，不会被渲染为标签元素，只会被当作值渲染到浏览器中
val
获取值：val()用于表单控件中获取值，好比input textarea select等
设置值：$('input').val('设置了表单控件中的值')
有一个change方法能够用于监控input表单值的变化，相似于click的写法
jquery的文档操做
插入操做
1.父元素.append(子元素) 追加，父元素中添加某个新元素
2.子元素.appendTo(父元素) 追加到，子元素添加到某个父元素中
3.prepend() 前置添加，添加到父元素的第一个位置
4.prependTo() 后置添加，第一个元素添加到父元素中
5.父.after(子)在匹配的元素以后插入内容，与 子.insertAfter(父)
6.父.before(子)在匹配的元素以前插入内容，与 子.insertBefore(父)
复制操做
clone()克隆匹配的DOM元素而且选中这些克隆的副本，括号里是默认布尔值false，副本不能再克隆
若是把布尔值设为true，那么副本就具备跟本体相同的克隆能力
替换操做
1.replaceWith() 将全部的匹配的元素替换成指定的HTML或DOM元素
2.replaceAll() 用匹配到的元素替换掉全部selector匹配到的元素
删除操做
1.remove() 删除节点后，事件也会被删除，简言之就是删除了整个标签
2.detach() 删除节点后，事件会被保留
3.empty() 清空元素中全部的后代节点
jquery的css
position
获取匹配元素相对父元素的偏移位置，有left和top两种属性
offset
获取匹配元素在当前视口的相对偏移，返回的对象包含两个整型属性：top和left
scrollTop
获取匹配元素相对滚动条顶部的偏移 文档被卷起的像素值
scrollLeft
获取匹配元素相对滚动条左侧的偏移 文档被卷起的像素值
innerHeight
获取第一个匹配元素内部区域高度(包括补白，不包括边框)
innerWidth
获取第一个匹配元素内部区域宽度(包括补白，不包括边框)
outerHeight
获取第一个匹配元素外部高度(默认包括补白和边框)
outerWeight
获取第一个匹配元素外部宽度(默认包括补白和边框)
weight
取得匹配元素当前计算的宽度值
height
取得匹配元素当前计算的高度值
jquery的筛选方法
eq：获取第N个元素 eq(index) $("p").eq(1)
first：获取第一个元素 first() $('li').first()
last：获取最后一个元素 last() $('li').last()
hasClass：检查当前的元素是否含有某个特定的类，若是有，则返回true hasClass(类名) $('li').hasClass('li1')
children：取得一个包含匹配的元素集合中每个元素的全部子元素的元素集合 children() $('div').children() 括号里能够加选择器
parent：取得一个包含着全部匹配元素的惟一父元素的元素集合 parent() $('p').parent()
prev：取得一个包含匹配的元素集合中每个元素紧邻的前一个同辈元素的元素集合 prev() $('p').prev()
preAll：查找当前元素以前全部的同辈元素 preAll() $('div:last').preAll().addClass('before')
siblings：筛选给定的同胞同类元素(不包括给定元素自己) siblings(元素) $('#leftBox li').eq(0).siblings('li').addClass('active')
js事件与事件流
HTML中与javascript的交互是经过事件驱动来实现的，会有一个事件监听器
事件流描述的是从页面中接收事件的顺序
DOM事件流
DOM2级事件规定的事件流包括三个阶段：
事件捕获阶段 处于目标阶段 事件冒泡阶段
document > html > body > 具体标签 > body > html > document
jquery的事件不支持事件捕获阶段，只支持事件冒泡阶段
jquery的经常使用事件
添加的事件不能发生在将来，动态生成的元素不能直接添加对象
事件对象的常见属性：
e.type 获取事件的类型
e.target 获取事件发生的DOM对象
e.pageX和e.pageY 获取到光标相对于页面的X的坐标和Y的坐标
事件冒泡：
jquery不支持事件捕获
阻止事件冒泡 e.stopPropagation() ,return false在jquery中既是阻止事件冒泡又是阻止默认行为
阻止默认行为 e.preventDefault()
合成事件：
hover事件
鼠标悬停事件.hover(handlerIn,handlerOut) 将两个处理程序绑定到匹配的元素，当鼠标指针进入和离开元素时执行
hover事件是鼠标的mouseenter和mouseleave事件的实现
jquery事件绑定
.bind(type,[data],fn)
第一个参数是事件类型，经常使用的click，blur，hover等
多个事件类型能够用空格分隔开
$("#foo").bind("mouseenter mouseleave",function(){
$(this).toggleClass("entered");})
第二个参数是可选参数，做为event.data属性值传递给事件对象的额外数据对象
第三个参数是用来绑定的处理函数
能够绑定自定义的事件，而后用trigger触发
事件代理在pycharm里，重要
移除事件：
.unbind(type,fn) 第一个参数是事件类型，若是不写，移除全部事件
第二个参数是将要移除的函数 $('#foo').unbind("click",function(){})
加载DOM：
.ready() 将函数绑定到文档的就绪事件(当文档完成加载时)
鼠标事件：
click鼠标单击触发事件
dblclick鼠标双击触发事件
mousedown/mouseup鼠标按下/弹起触发事件
mousemove鼠标移动事件
mouseover/mouseout鼠标移入/移出触发事件，鼠标指针穿过或离开被选元素或当前元素的子元素，会触发事件
mouseenter/mouseleave鼠标进入/离开触发事件，鼠标指针只在穿过/离开被选元素触发事件
focus/blur鼠标聚焦/失去焦点触发事件(不支持冒泡)
keydown/keyup键盘按键按下/弹起触发
表单事件：
change表单元素发生改变时触发事件
此事件仅限于input元素、textarea元素和select元素
对于选择框、复选框和单选按钮，当用户使用鼠标进行选择时，会当即触发事件但对于其余元素类型，事件将延迟到元素失去焦点
select文本元素发生改变时触发事件，此事件仅限于input type类型为text和textarea表单元素
submit表单元素发生改变时触发事件
form表单有默认的submit行为，当对input type=submit按钮点击的时候会触发form的默认action行为
此时能够调用jquery的submit行为经过e.preventDefault()来阻止默认事件，这样咱们就能动态的跟服务端发送数据了
AJAX
AJAX=异步的javascript和XML
简言之，在不重载整个网页的状况下，AJAX经过后台加载数据，并在页面上进行显示
最重要的就是局部刷新
Bootstrap
来自Twitter，是目前最受欢迎的前端框架，基于HTML CSS Javascript
用于开发响应式布局、移动设备有限的web项目
https://v3.bootcss.com/