jQuery基础

一、安装jQuery
使用jQuery库。
在< script>标签里引用
< script src = “”>< /script>

二、jQuery语法
jQuery语法是为HTML元素取编制的：操作的是HTML元素
基础语法：$(selector).action()
$:代表jQuery
selector:表示html元素
action：表示对元素的操作

三、jQuery选择器
jQuery选择器允许对DOM元素组或单个DOM节点进行操作

1.元素选择器：
$(“p”):选取所有的p元素—>数组
2.id选择器
$("#id"):选取id为id的元素
3.class选择器
$(".class"):选取class相同的元素—>数组
4.name属性选择器

//选择所有name为'aa'的p标签元素--->数组
$("p[name = 'aa']")

四、jQuery事件
加载事件，绑定事件的方法：

	
	$(function(){
		//绑定点击事件 第一个写法
		$("#one").click(function(){
			alert(1);
		})
		//第二种写法
		$("#one").bind("click",function(){
			alert(2);
		})
	})	
	//jquery文档加载事件 第二种写法
	$(document).ready(function(){
		
	})

在jQuery中，大多数DOM事件都有等效的jQuery方法。
方法名都得去掉on

1.点击事件

$("p").click(function(){
	方法体

});
2.

$(document).ready()
允许我们在文档加载完后执行函数

3.双击事件
dblclick();
双击触发事件。

4.mouseenter();鼠标滑到事件
5.mouseleave();鼠标离开事件
hover（）；将事件4.5合并。

6.mousedown()；鼠标按下事件
7.mouseup鼠标松开事件

8.focus焦点事件
9.blur失去焦点

jQuery隐藏/显示
例子

//隐藏
$("p").click(function(){
	$("p").hide(speed,callback);
})
//显示
$("p").click(function(){
	$("p").show(speed,callback);
})
//切换隐藏和显示
toggle();

jQuery淡入淡出
$(“p”).fadeIn(speed,callback);
$(“p”).fadeOut(speed,callback);
fadetoggle()

jQuery滑动
$(“div”).slideup(speed,callback);
$(“div”).slidedown(speed,callback);
slidetoggle()
相当于隐藏了这个div

五、jQuery获取和设置内容和属性
1.获得内容：
text()-设置或返回所选元素的文本内容
html()-设置或返回所选元素的内容(包括html标签)
val（）-设置或返回表单字段的值

2.获取属性
attr()–

1.
$("img").attr("src");
获取img的src值
2.$("img").attr("src","xx");
将img的src值该为xx

prop()—也是获取属性

区别：
html的固有属性的处理：prop（）
自定义的html的属性的处理用 attr（）；
一般来说我们使用表单多选的时候使用prop（）来处理。

jQuery删除和添加元素
添加元素：
append()-在被选中的元素的结尾插入内容
prepend-在被选中的元素开头插入内容
删除元素
remove()-删除被选中的元素（以及子元素）
empty()-删除被选元素的子元素

jQuery CSS方法
css()方法设置或返回被选元素的一个或多个样式属性
css设置多个样式

设置div多个CSS属性的方法
$("div").css({"font-size":"80px","color":"wheat"});

jQuery遍历
parent()–返回被选元素的直接父元素
children()–返回所选元素的所有直接子元素
find（“子类标签”）返回被选中元素的后代元素，直到最后一个
siblings()返回被选中元素的所有同胞元素
next()返回被选中元素的下一个同胞元素
first（）返被选中元素的首个元素
last() 返回选中元素的首个元素

jQuery动画
animate（）用于创建自定义动画
语法：

$(selector).animate({params},speed,callback);
params：定义形成动画的CSS属性

注意：若使用animate方法必须给出该标签的position属性

如：

/*animate 使用这个方法，要动画的元素设置定位属性*/
			$("div").animate({left:"100px"},1000,function(){
				alert("动画执行完毕");
			});