一、安装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("动画执行完毕");
});