1.jquery 8大选择器:基本、属性选择器,层级、子元素选择器,内容、可见性选择器,表单、表单属性选择器
2.jquery dom元素操作(对象访问)
each() $("img").each(function{alert("test each()";});
size() $("img").size();计算dom元素的个数
length $("img").length; 同上
get() $("img").get(); 获取dom元素的集合
get(index) $("img").get(0);获取某一个dom元素
index(subject) $("li").index($("#bar")) 获取索引值
3.属性操作:
attr(name,val);
removeAttr(name)
html() //获取 html("append"); 负值
text() 同上
val()取当前值
4.css相关操作
css:
css(name,val);
位置:
offset() $("p:last").offset({top:30,left:20});
设置匹配元素相对于document对象的坐标 postion() var postion = $("p:first").postion();
获取匹配元素相对父元素的偏移坐标
scrollTop() $("p:last").scrollTop();
获取匹配元素相对滚动条顶部的偏移 scrollLeft $("p:last").scrollLeft;
获取匹配元素相对滚动条左侧的偏移 尺寸:
width();
height();
innerWidth();innerHeight();
outerWidth();outerHeight();
5.文档处理
内部插入:
append();在匹配元素中插入
appendTo();被插入
prepend();
prependTo()
外部插入:
after(); $("p").after("<b>ss</b>"); 放到匹配元素后面
insertAfter(); 把匹配元素放到后面
before();
insertBefor()
包裹:
wrap(html,elem,fn); 作用与内部插入appendTo()差不多
unwrap(); 移除父元素
wrapInner(html,elem,fn); 作用与wrap相反,在匹配元素内部包裹
替换: replaceWith(); replaceAll();
删除:
empty(); 清空匹配元素的所有子元素
remove(); 只清空匹配元素,不清空匹配元素内容
复制:clone();clone(true);
6.筛选
过滤:
eq(index); 取得index处的值
first();
last();
filter(); $("p").filter(".myClass,:first");
is(); $("input[type='checkbox']").parent.is("form");是form,则返回true,否则返回false
has(); $("li").has("ul").css("background-color","red");
not(); $("p").not($("#id")[0]); 删除匹配的元素
slice(start,end); <p>hello</p><p>ni hao</p><p>hoo</p> 选取第一个P,$("p").slice(0,1);
查找:
find(expr) $("p").find("span"); expr 可以像是.selected .myClass
children(expr) 不带expr时是不带查找条件所有子结点元素
parent(expr) 查找匹配元素的唯一父元素,最后还包括匹配元素
prev(expr) 取得前一个紧邻元素
next(expr) 取得后一个紧邻元素
subling(expr) 取得同级其它子元素集合
7.事件
bind(type,[data],fn);
$('#bar').bind('click', {msg: message}, function(event) {
alert(event.data.msg);
});
one(type,[data],fn);一次性事件绑定 ,只要第一次
$("p").one("click", function(){
alert( $(this).text() );
});
trigger(type,[data]);在匹配元素上触发事件
$("form:first").trigger("submit") 不用submit提交第一个表单
//给事件传递一个参数
$("p").click( function (event, a, b) {
// 一个普通的点击事件时,a和b是undefined类型
// 如果用下面的语句触发,那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);
//显示Hello World!
$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);
unbind([type],[data]); 去除绑定
hover(overFn,outFn); 鼠标悬停时事件,不是点击
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
toggle(fn1,fn2,fn3....) 鼠标点击依次事件
$("li").toggle(
function () {
$(this).css({"list-style-type":"disc", "color":"blue"});
},
function () {
$(this).css({"list-style-type":"disc", "color":"red"});
},
function () {
$(this).css({"list-style-type":", "color":"});
}
);
8.效果
基本:
show(); 也可带参数show(speed,callback)
hidden();也可带参数hidden(speed,callback)
toggle();也可带参数toggle(speed,callback);
滑动:
slideDown(speed,[callback]);
slideUp(speed,[callback]);
slideToggle(speed,[callback]);
淡入淡出:
fadeIn(speed,[callback]);
fadeOut(speed,[callback]);
fadeTo(speed,opacity,[fn]); //opacity,
不透明度值(0到1之间的数字 动画效果:
animate(parames,[duration],[easing],[callback])
paramsOptions
一组包含作为动画属性和终值的样式属性和及其值的集合
duration (可选)String,Number
三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing (可选)String
要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
callback (可选)Function
在动画完成时执行的函数
// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});
9.数组对象操作
$.each(Array or Object,[callback]); // 遍历数组或对象
//例遍对象,同时使用成员名称和变量内容。
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});
$.grep(array,callback,[invert]) //
过滤数组元素//过滤数组中大于 0 的元素
$.grep( [0,1,2], function(n,i){
return n > 0;
});
结果:[1,2]
$.map(array,callbak)// 对数组内元素操作,得到新的数组
//将原数组中每个元素加 4 转换为一个新数组。
$.map( [0,1,2], function(n){
return n + 4;
});
//原数组中大于 0 的元素加 1 ,否则删除
$.map( [0,1,2], function(n){
return n > 0 ? n + 1 : null;
});
$.makeArray(obj) //将类数组对象转换为数组对象
<div>First</div><div>Second</div><div>Third</div><div>Fourth</div>
var arr = jQuery.makeArray(document.getElementsByTagName("div"));
arr.reverse(); // 使用数组翻转函数
Fourth
Third
Second
First
$.inArray(val,array) //
确定第一个参数在数组中的位置(索引值) ,没有则返回-1
$.toArray(); //将多个DOM元素转变成一个数组
$.merge(arr1,arr2);//合并两个数组
$.unique(array);//删除重复元素,但是只对dom元素的数组好使,对数字或字符串数组不好使
10.判断操作
$.contains(container,contained) //
一个DOM节点是否包含另一个DOM节点 $.isEmptyObject(obj) //判断是否为空对象,即不包含任何属性
$.trim(str) 去首尾空格