在这里我总结了一些jQuery中一些常用的方法,来供大家学习使用。
$("#box").css("width",500)
这里的#box可以为id名class名标签名,还支持一些css3选择器。
基本选择器
$("div")//选择所有的div标签元素,返回div元素数组
$(".myClass")//选择使用myClass类的css的所有元素
$("*")//选择文档中的所有的元素
$("#myELement,div,.myclass")//可以运用多种的选择方式进行联合选择
层叠选择器:
$("form input")//选择所有的form元素中的input元素
$("#main > *")//选择id值为main的所有的子元素
$("label + input")//选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev ~ div")//同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
基本过滤选择器:
$("tr:first")//选择所有tr元素的第一个
$("tr:last")//选择所有tr元素的最后一个
$("input:not(:checked) + span")//过滤掉:checked的选择器的所有的input元素
$("tr:even")//选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)
$("tr:odd")//选择所有的tr元素的第1,3,5... ...个元素
$("td:eq(2)")// 选择所有的td元素中序号为2的那个td元素
$("td:gt(4)")//选择td元素中序号大于4的所有td元素
$("td:lt(4)")//选择td元素中序号小于4的所有的td元素
$(":header")//匹配如 h1, h2, h3之类的标题元素
$("div:animated")//匹配所有正在执行动画效果的div元素
内容过滤选择器:
$("div:contains('John')")//选择所有div中含有John文本的元素
$("td:empty")//选择所有的为空(也不包括文本节点)的td元素的数组
$("div:has(p)")//选择所有含有p标签的div元素
$("td:parent")//选择所有的以td为父节点的元素数组
可视化过滤选择器:
$("div:hidden")//选择所有的被hidden的div元素
$("div:visible")//选择所有的可视化的div元素
属性过滤选择器:
$("div[id]")//选择所有含有id属性的div元素
$("input[name='newsletter']")//选择所有的name属性等于'newsletter'的input元素
$("input[name!='newsletter']")//选择所有的name属性不等于'newsletter'的input元素
$("input[name^='news']")//选择所有的name属性以'news'开头的input元素
$("input[name$='news']")//选择所有的name属性以'news'结尾的input元素
$("input[name*='news']")//选择所有的name属性包含'news'的input元素
$("input[id][name$='man']")//可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且name属性以man结尾的input元素
子元素过滤选择器:
$("div span:first-child")// 返回所有的div元素的第一个子节点的数组
$("div span:last-child")//返回所有的div元素的最后一个节点的数组
$("div button:only-child")//返回所有的div中只有唯一一个子节点的所有子节点的数组
表单元素选择器:
$(":input")//选择所有的表单输入元素,包括input, textarea, select 和 button
$(":text")//选择所有的text input元素
$(":password")//选择所有的password input元素
$(":radio")//选择所有的radio input元素
$(":checkbox")//选择所有的checkbox input元素
$(":submit")//选择所有的submit input元素
$(":image")//选择所有的image input元素
$(":reset")//选择所有的reset input元素
$(":button")//选择所有的button input元素
$(":file")//选择所有的file input元素
$(":hidden")//选择所有类型为hidden的input元素或表单的隐藏域
表单元素过滤选择器:
$(":enabled")//选择所有的可操作的表单元素
$(":disabled")// 选择所有的不可操作的表单元素
$(":checked")//选择所有的被checked的表单元素
$("select option:selected")//选择所有的select 的子元素中被selected的元素
注意以上这些都必须加双引号。除了以下不加引号。
$(this)
$(document)
$(window)
jquery提供非常简短的代码便可实现动画效果(注意:对于同一物体只能在上一动画完成后才执行下一动画,不同物体的动画是同时进行的)。
1$("div").animate({"width":600},1000);
序与迭代
eq()方法
我们可以通过eq()方法来精确找到某个序列中的某个元素。
$(".box2 p").eq(1)//Class名为box2下的1号下标p元素
$("p").eq(5)//下标为5的p元素
index()方法
返回这个元素在亲兄弟中的排名,无视选择器怎么选。
1$(".teshu").click(function(){
2 alert($(this).index());
})//点击class名为teshu物体弹出他在亲兄弟中的排名。
each()
each()表示遍历节点,也叫作迭代符合条件的节点(好比for循环)。
1$("p").each(function(i){
2 $(this).animate({"width":50 * i},1000);
});//将p标签的宽度依次递增50px
length属性
一共有几个p
1$("p").length
get()方法
get()方法和eq()方法基本一致,eq()返回的是jQuery对象,get()返回的是原生JS对象。原生对象后面要跟着原生属性、方法:
$("p").eq(2).html("哈哈哈哈哈哈");
等价于:
$("p").get(2).innerHTML = "哈哈哈哈哈哈";
等价于:
$("p").eq(2)[0].innerHTML = "哈哈哈哈哈哈";
动画相关方法
show()显示、hide()隐藏、toggle()切换,
如果show()、hide()、toggle()里面有数值,将变为动画。
$("div").show([时间],[回调函数]);//语法
$("div").show();//让一个本身是display:none;元素显示
$("div").hide();//隐藏元素display:none;
$("div").toggle();//切换显示状态。自行带有判断,如果可见,就隐藏;否则显示。
slideDown()、slideUp()、slideToggle()方法
slideDown : 下滑展开
slideUp:上滑收回
slideToggle : 滑动切换
$("div").slideUp();
$("div").slideDown();
$("div").slideToggle();
fadeIn()、fadeOut()、fadeTo()、fadeToggle()方法
fadeIn()淡入
fadeOut()淡出
fadeTo() 淡到那个数
fadeToggle() 淡出入切换
$("div").fadeIn(5000);
$("div").fadeOut(5000);
$("div").fadeTo(1000,0.3);
$("div").fadeToggle(5000);
stop()
停止当前的animate动画,但是不清除队列,立即执行后面的animate动画:
$("div").stop();
停止当前的animate动画,并且清除队列,盒子留在了此时的位置:
$("div").stop(true);
瞬间完成当前的animate动画,并且清除队列:
$("div").stop(true,true);
瞬间完成当前的animate动画,但是不清楚队列,立即执行后面的动画:
$("div").stop(false,true);
finish()
finish()瞬间完成所有动画队列!
$("div").finish();
delay()
elay延迟,延迟指定秒数后执行。
$("div").delay(1000).animate({"left":500},1000);
$("div").delay(1000).slideUp();
$("div").delay(1000).hide(1);//必须写1,写1了就是运动
is(":animated")
is()方法表示身份探测,返回true、false。
is表示“是不是”,而不是“是”
$(this).is(".t")//判断p是不是有t这个类
is(":animated")//判断这个元素是否在运动中。
可以用该方法来防止动画的积累,判断div有动画就跳出函数不执行。
if($("div").is(":animated")){
return;
}