语法:
操作HTML元素
$(selector).action();
$("#choose").hide();
文档就绪事件:等DOM结构加载完成后就执行jQuery代码。一个页面可以写多个ready()。【window.onload一个页面只可以写一个,要等到所有的内容包括图片加载完毕才可以执行onload(),不能简写】
$(document).ready(function(){
…
})
简写:
$(funtion() {…});
注意,若是需要在JS或者图片都加载完毕才能进行操作的话,建议用window.onload。
选择器
$(“p”) //元素选择器
$("#txt") //ID选择器
$(this) //获取当前HTML元素
$(“p:first”) //选取第一个p元素
$("[href]") //选取带href属性的元素
$(“ul li:first-child”) //选取每个<ul> 元素的第一个 <li> 元素
$(“ul li:first”) //选取第一个 <ul> 元素的第一个 <li> 元素
事件
hover触发mouseenter和mouseleave方法
$("p").hover(
function(){ alert("进入了p")},
function(){ alert("离开了p")};
);
隐藏显示
----hide()、show()、toggle()切换hide和show方法
----fadeIn()淡入,fadeOut()淡出、fadeToggle()、fadeTo()渐变效果(0-1)
动画
animate()
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
animate()属性名用驼峰命名法,paddingLeft、marginRight.
清除动画
$(selector).stop(stopAll, goToEnd);
stop():当有多个动画时,stop用于停止当前正在进行的动画。
stopAll为true时会 停止所有的动画。默认值是false。
GoToEnd: 是否立即完成当前动画,默认是false。
jQuery链
在一个元素上链接多个动作
$("#p1").css(“color”,“red”).slideUp(2000).slideDown(2000);
添加元素
append(): 在被选元素结尾插入内容
prepend():在被选元素开头插入内容,都是在元素内部嵌入
after()、before()在元素外面追加
jQuery获取元素的盒子尺寸
width() /height()返回或者设置元素的内容盒子的宽/高,不包括内边距、边框或外边距
innerWidth().innerHeight()返回或设置元素包括内边距的宽/高。
outerWidth()/outerHeight()返回或设置元素包括内边距和边框的宽/高。
outerWidth(true)/outerHeight(true)返回或设置元素包括内边距、边框、外边距(如果有的话)的宽/高。
遍历
parent():返回被选元素的直接父元素,无参数
parents():返回被选元素的所有祖先元素,一直到根元素,无参数
parentsUtil():返回在两个给定元素之间的所有祖先元素,有参数。
若是选择器和参数为同一个,会变成返回该元素的所有祖先元素。
若是选择器是参数的父元素,那么返回的是选择器的所有祖先元素。
若是选择器是参数的子元素,那么会返回选择器的在参数元素以内的父元素。结果不会包含参数元素。
$(document).ready(function() {
$('span').parentsUtil('div'); //返回在span和div之间的所有祖先元素
})
遍历后代
children():返回被选元素的所有直接子元素(不包括子孙元素),参数如果存在则有点条件筛选的意思。
find():返回被选元素的所有子元素包括子孙元素。
遍历兄弟元素
siblings():被选元素的所有同胞元素。不包括同胞元素中的子元素
next():被选元素的下一个相邻同胞元素。没有参数
nextAll():被选元素的所有跟随同胞元素,往下找。没有参数
nextUtil():给定两个被选元素之间的同胞元素。有参数
若是选择器元素在参数之前,返回两者之间的同胞元素。
若是选择器在参数元素之后,则会返回选择器的相邻下代同胞元素。
prev(),prevAll(),prevUtil(),与上述类似,但是是向前查找