JQuery

1.主要内容

2.Jquery对象

Jquery核心
$符号在jQuery 中代表对 jQuery对象的引用,"jQuery"是核心对象。通过该对象可以获取jQuery对象调用jQuery提供的方法等。只有jQuery对象才能调用力uery提供的方法。

2.1.Dom对象Jquery包装集对象

明确Dom对象和jQuery包装集的概念,将极大的加快我们的学习速度。原始的Dom对象只有DOM接口提供的方法和属性，通过js代码获取的对象都是dom对象;而通过jQuery获取的对象是jQuery包装集对象，简称jQuery对象，只有jQuery对象才能使用jQuery提供的方法。

2.1.1.Dom对象

javascript中获取Dom 对象，Dom对象只有有限的属性和方法:

var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

2.1.2.Jquery包装集对象

可以说是Dom对象的扩充.在jQuery的世界中将所有的对象，无论是一个还是一组,都封装成一个jQuery包装集,比如获取包含一个元素的jQuery包装集:

var jQueryobject = $("#testDiv");

2.1.3.Dom对象转Jquery对象

Dom对象转为jQuery对象，只需要利用$()方法进行包装即可

var domDiv = document.getElementById('mydiv');
//获取Dom对象
mydiv = $ (domDiv);

2.1.4.Jquery对象转Dom对象

jQuery对象转Dom对象，只需要取数组中的元素即可

//第一种方式获取jQuery对象
var jqueryDiv = jouery('#mydiv');
//第二种方式获取jQuery对象
jqueryDiv = $('#mydiv');
var dom = jqueryDiv[0];
//将以获取的jquery对象转为dom

通过遍历jQuery对象数组得到的对象是Dom对象，可以通过$()转为jQuery对象

$ ('#mydiv').each(function(){//遍历
var jquery = $(this);
});

3.Jquery选择器

和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的方式供我们查找|定位元素，称为jQuery选择器，选择器可以说是最考验一个人JQuery 功力的吧力，迪)台的开,sele.社R|器就是"一个表示特殊语意的字符串"。只要把选择器字符串传入上面的方法中就能够选择不同的Dom对象并且以jQuery包装集的形式返回。
jQuery选择器按照功能主要分为"选择"和"过滤"。并且是配合使用的，具体分类如下。基础选择器掌握即可，其他用到再查阅。

3.1.基础选择器

3.2.层次选择器

3.3.表单选择器

4.Jquery Dom操作

jQuery也提供了对HTML节点的操作，而且在原生js的基础之上进行了优化，使用起来更加方便。
常用的从几个方面来操作，查找元素(选择器已经实现) ;创建节点对象;访问和设置节点对象的值，以及属性;添加节点;删除节点;删除、添加、修改、设定节点的CSS样式等。注意:以下的操作方式只适用于jQuery对象。

4.1.操作元素的属性

4.1.1.获取属性

属性的分类

• 固有属性：元素本身就有的属性（id、name、class、style）
• 返回值是boolean的属性：check、selected、disable
• 自定义属性：用户自定义试属性
• 区别：
  1. 如果是固有属性，attr()和prop()方法均可获取
  2. 如果是自定义属性，attr()可获取，prop()不可获取
  3. 如果返回值是boolean类型的属性，若设置了属性，attr()返回具体的值，prop()返回true,若未设置属性，undefined，prop返回false
     

4.1.2.设置属性

	attr(”属性名","属性值")
	prop("属性名”,"属性值")

4.1.3.移除属性

	removeAttr() 

总结:
如果属性的类型是boolean（checked、selected、disabled)，则使用prop()方法;否则使用attr()方法。

4.2.操作元素的样式

对于元素的样式，也是一种属性，由于样式用得特别多，所以对于样式除了当做属性处理外还可以有专门的方法进行处理。

增加元素的具体样式，格式:

1) css({‘样式名':'样式值’，'样式名2’:'样式值2'})
例: css({ "background-color" : "red" , "color" : "#fff"});
2) css(“样式名”,"样式值”)
例: css( ' color' , 'white ')

4.3.操作元素的内容

对于元素还可以操作其中的内容，例如文本，值，甚至是html。

表单元素
文本框text、密码框password、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉框select
非表单元素
div、span、h1-h6、table、tr、td、li、p等

4.4.创建元素

在jQuery中创建元素很简单，直接使用核心函数即可

$(‘元素内容’);

$('<p>this is a paragraph! ! !</p>');

4.5.添加元素

注:
在添加元素时，如果元素本身不存在（新建的元素)，此时会将元素追加到指定位置

4.6.删除元素

remove()

	删除元素及其对应的子元素，标签和内容一起删除
	指定元素.remove();

empty()

	清空元素内容，保留标签
	指定元素.empty();

4.7.遍历元素

each()

	$( selector).each(function(index, element))·:遍历元素
		参数function为遍历时的回调函数，
		index为遍历元素的序列号，从0开始
		element是当前的元素，此时是dom元素。

5.Jquery事件

5.1.ready加载事件

• ready()类似于onLoad()事件
• ready()可以写多个，按顺序执行
• $(document).ready(function())等价于$(function())

5.2.bind()绑定事件

为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

$(selector).bind( eventType [，eventData]，handler(eventobject));

eventType:是一个字符串类型的事件类型，就是你所需要绑定的事件。

• 这类类型可以包括如下:
  blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick
  mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter
  mouseleave,change, select, submit, keydown, keypress, keyup, error

[, eventData]:传递的参数，格式:{名:值名2:值2}
handler(eventObject):该事件触发执行的函数

5.2.1.简单的bind()事件

绑定单个事件

	bind绑定
		$(“元素").bind("事件类型" , fucntion(){
		});
	直接绑定
		$("元素").事件名(function(){
		});

绑定多个事件

	bind绑定
	1．同时为多个事件绑定同一个函数
		指定元素. bind("事件类型1事件类型1 .." ,function( ){
		});
	2．为元素绑定多个事件，并设置对应的函数指定元素.bind
			("事件类型", function(){
			})
			.bind("事件类型", function(){
	});
	3．为元素绑定多个事件，并设置对应的函数指定元素. bind({
			"事件类型":function(){
			},
			“事件类型":function(){
			}
	});
	直接绑定
		指定元素.事件名(function( ){
			}).事件名(function(){
		});

6.Jquery Ajax(异步无刷新)

6.1.$.ajax

iquery调用ajax方法:

• 格式: $.ajax({});
  参数:
  type:请求方式GET/POSTurl:请求地址url
  async:是否异步，默认是true表示异步data:发送到服务器的数据
  dataType:预期服务器返回的数据类型contentType:设置请求头
  success:请求成功时调用此函数error:请求失败时调用此函数

$.ajax({
	type : "get",//请求方式
	url: "js/data.txt"//请求地址
	data:{//请求数据，json对象
		uname : " zhangsan"//如果没有参数，则不需要设置
	}，
	//请求成功时调用的函数
	success:function(data){// data是形参名，代表的是返回的数据
		console.log(data); //字符串
		//将字符串转换成json对象
		var obj = JSON . parse(data);
		console.log(obj);
	}
}
$.ajax({
	type: "get",//请求方式
	url : "js/data.txt",//请求地址
	data:{ //请求数据，json对象
	//uname : "zhangsan"//如果没有参数，则不需要设置
	},
	dataType: "json"，//预期返回的数据类型，如果是json格式，在接收到返回值时会自动封装成json对象
	//请求成功时调用的函数
	success:function(data){// data是形参名，代表的是返回的数据
	console.log(data);//字符串
	//将字符串转换成json对象
	// var obj = JSON .parse(data);l / console.log(obj);
	// Dom操作
	//创建ul
	var ul =$("<ul></ul>");
	//遍历返回的数据数组
	for(var i = 0; i < data.length; i++) {
	//得到数组中的每一个元素
	var user = data[i];
	//创建li元素
	var li ="<li>"+user.userName+"</li>"
	//将li元素设置到ul元素中
	ul.append(li);
	}
	console.log(ul);
});

6.2.$.get

这是一个简单的GET请求功能以取代复杂$.ajax。
请求成功时可调用回调函数。如果需要在出错时执行函数，请使用$.ajax。

//1.请求json文件，忽略返回值
$.get('js/cuisine_area.json ' );
//2.请求json文件，传递参数，忽略返回值
$.get( 'js/cuisine_area.json ' ,iname : "tom" , age : 1003);
// 3.请求json文件,拿到返回值,请求成功后可拿到返回值
$.get( 'js/cuisine_area.json ',function(data){
	console.log(data) ;
});
//4.请求json文件,传递参数,拿到返回值
$.get('js/cuisine_area.json ', {name : "tom " , age: 1003 , function(data){
console.log(data);
});

6.3.$.post

这是一个简单的POST请求功能以取代复杂$.ajax。