《jquery入门》

1、jquery:

1.介绍
	js的框架
	封装的底层js

	
2.特点
	轻量级:	
		大小较小（angularjs）
	强大的选择器：
		document.getElementById()
		$("#one")
		和css类似，比css更加丰富

	出色的dom封装和可靠的事件处理机制:
		jquery对象-》jquery方法

		attachEvent:


	不污染顶级变量:
		浏览器：
			window:{}
		linux：
			global:{}

	完善的ajax:
		getData(url,handler){}

		getData();

	链式操作方式:
		Array.prototype.slice.call(lis).forEach()

		function say(){}

		say().forEach()


		返回值均为jquery对象
		$("#one").each(function(){});


	出色的浏览器兼容性:
		dom
		bom


3.安装/使用
	jquerycdn:
	1.cdn
	2.下载
		页面引入


4.jquery函数的调用及参数
	jQuery();
	jQuery.prototype:

	类数组对象

	简写：
		jQuery-->$


	1.参数为选择器	
		字符串类型-》选择器
		jQuery("#one");
		-->
		$("#one")
		
	2.参数为dom对象
		将dom转换为jquery对象
		jQuery(dom)
		->
		$(dom)
		

		var result=$(".one");
		result[0]-->dom

	3.参数为html文本字符串
		$("<p>hello</p>"):
			1.创建dom对象
			2.将dom转换为jquery
		
	4.匿名函数
		$(function(){}):
			当文档结构加载完毕后再执行函数
			优点：效率更高

		-->
		window.onload:
			当文档加载完毕后再执行函数
		
5.选择器
6.事件绑定
	bind(type,handler)
	unbind()


	on(type,[selector],handler)
	off(type,[],handler)

	简写：
		事件类型为函数名称
		click(function(event){
		});
		submit(funtion(){});


	.one():事件处理程序只绑定一次
	.trigger();



7.dom操作
	a.append(b):将b追加到a之后
	a.appendTo(b):将a追加到b之后
8.属性方法

9.静态方法
	数组及对象操作：each、map、toArray、merge
		each->forEach
		map->map
		toArray()
		merge:数组合并

	测试操作：
		type、isEmptyObject、、
	字符串操作：param、trim、

	isPlainObject:判断参数是否为纯object类型对象
	isNumeric：判断参数是否为number类型

	$.param(obj)
	$.parseJSON(str);


	$.each()
10.动画
	
11.ajax
	http://47.106.244.1:8099/manager/category/findAllCategory

2、addClass

$("div"):
	{1,2,3,4}.get(0)
	{1,2,3,4}.click();


1.获取的对象dom/jquery
2.当前方法是dom/jquery



key
key=key
key=''
key=true


function getData(url,handler){
	//1.
	//2.
	//3.
	//4.
	//5.
		//6.data->
		if(){
			handler(data);
		}else{
			alert("");
		}
		

}


getData(url,function(data){

});


$.get(url,function(data){
	conosle.log(data);
});

3、load:

jquery
	jquery.js
load.html

	首页.html
	student.html
	teacher.html

contentType: “application/json; charset=utf-8”

“Authorization”

4、画布：

canvas

在页面上规划出一块空间，canvas标签，通过javascript控制画布完成绘制



1.获取画布
	var canvas=document.getElementById("");
2.获取上下文对象 （获取画笔）
	var cx=canvas.getContext("2d");

3.设置画笔样式
	cx.fillStyle='red';
	cx.strokeStyle='blue';

4.开始绘制

5、绘制图形

1.矩形
	fillRect(x,y,w,h);:实心填充元素
	strokeRect(x,y,w,h);：描边
		x,y:当前矩形开始绘制的位置坐标
		w,h:当前矩形的宽高

2.绘制圆形
	cx.beginPath();
	cx.arc(x,y,r,begin,end,c);//设置圆
		x,y:圆的圆心坐标
		r：圆的半径
		begin，end：开始角度和结束角度；Math.PI=180 
					Math.PI/180=1度
		c：是否按照逆时针进行绘制
			true：按照逆时针
			false：顺时针
	cx.closePath();


	cx.fill();//实心填充
	cx.stroke();//描边


3.绘制线段
	moveTo(x,y):
		x,y:线段的起点坐标
	lineTo(x,y)
		x,y:线段的终点坐标

	cx.stroke();
	//fill():不能使用

	lineWidth=number;

4.绘制渐变图形
	线性渐变：
		var g=createLinearGradient(bx,by,ex,ey):
			bx,by:渐变的开始位置坐标
			ex,ey:渐变结束位置的坐标

		g.addColorStop(offset,color);
			offset:0-1之间的偏移量
			color：设置的颜色值
			当前方法至少调用两次

		cx.fillStyle=g;
		//绘制图形

	径向渐变：
		createRadialGradient(bx,by,br,ex,ey,er)
		bx,by:开始圆的圆心位置
		br:开始圆的半径
		ex,ey:结束圆的圆心位置
		er：结束圆的半径
5.变形
	1.平移
		translate(x,y):
			x,y:将坐标原点平移单位
	2.扩大
		scale(x,y):
			x:代表的是水平方向上的放大倍数
			y：代表的是垂直方向上的放大倍数（如果想要缩小，参数设置为0-1之间的值）

		放大坐标

	3.旋转
		rotate(angle):
			angle:旋转角度，旋转的中心点就是坐标轴的原点
				默认按照顺时针进行旋转，想要进行逆时针旋转，角度设置为负数即可
	4.保存和回滚

		[save1,save2,save3]
		save():将当前的绘画状态进行保存并存入状态栈
		restore():该方法每次调用只会回滚到上一次save的状态

	6.图形组合
			globalCompositeOperation=type;
			type:图形组合的方式
			该属性一定要用在两个图形之间
		
			type:string
				source-over:将新图形覆盖在原图形之上
				destination-over:在原图形之下绘制新图形
		
				source-in:新图形和原油图形做in计算，只显示新图形中和原油图形重叠的部分，其他部分均变为透明
				destination-in:新图形和原油图形做in计算，只显示原有图形中和新图形重叠的部分，其他部分均变为透明
		
				source-out:新图形和原油图形做out计算，只显示新图形中和原油图形不重叠的部分，其他部分均变为透明
				destination-out:新图形和原油图形做out计算，只显示原有图形中和新图形不重叠的部分，其他部分均变为透明
	
	
			source-atop:绘制新图形中与原有图形重叠部分并且保留原有图形未重叠部分；新图形其他部分变为透明
			destination-atop:绘制新图形中与原图形重叠部分并且保留新图形未重叠部分；原有图形其他部分变为透明
	
			lighter：
				原图形和新图形均进行绘制，重叠部分进行加色处理
			xor：
				绘制新图形和原图形不重叠部分，重叠部分变为透明
			copy：
				只绘制新图形，原图形中不与新图形重叠的部分变为透明
	7.绘制文本

		cx.font='16px blod';
	
		fillText(str,x,y,px);
		strokeText(str,x,y,px);
		str:绘制文本字符串
		x,y:文本的显示坐标
		px：可选参数，文本的最大的像素宽度