简介
目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装。
作用
访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合
选择器
基本选择器
名称 | 语法构成 | 描述 | 示列 |
---|---|---|---|
标签选择器 | element | 根据给定的标签名匹配元素 | $("h2" )选取所有h2元素 |
类选择器 | .class | 根据给定的class匹配元素 | $(" .title")选取所有class为title的元素 |
ID选择器 | #id | 根据给定的id匹配元素 | $(" #title")选取id为title的元素 |
并集选择器 | selector1,selector2,...,selectorN | 将每一个选择器匹配的元素合并后一起返回 | $("div,p,.title" )选取所有div、p和拥有class为title的元素 |
全局选择器 | * | 匹配所有元素 | $("*" )选取所有元素 |
层次选择器
名称 | 语法构成 | 描述 | 示例 |
---|---|---|---|
后代选择器 | ancestor descendant | 选取ancestor元素里的所有descendant(后代)元素 | $("#menu span" )选取#menu下的<span>元素 |
子选择器 | parent>child | 选取parent元素下的child(子)元素 | $(" #menu>span" )选取#menu的子元素<span> |
相邻元素选择器 | prev+next | 选取紧邻prev元素之后的next元素 | $(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl> |
同辈元素选择器 | prev~sibings | 选取prev元素之后的所有siblings元素 | $(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl> |
属性选择器
语法 | 描述 | 示列 |
---|---|---|
:first | 选取第一个元素 | $(" li:first" )选取所有<li>元素中的第一个<li>元素 |
:last | 选取最后一个元素 | $(" li:last" )选取所有<li>元素中的最后一个<li>元素 |
:not(selector) | 选取去除所有与给定选择器匹配的元素 | $(" li:not(.three)" )选取class不是three的元素 |
:even | 选取索引是偶数的所有元素(index从0开始) | $(" li:even" )**选取索引是偶数的所有<li>元素 |
:odd | 选取索引是奇数的所有元素(index从0开始) | $(" li:odd" )**选取索引是奇数的所有<li>元素 |
语法 | 描述 | 示列 |
---|---|---|
:eq(index) | 选取索引等于index的元素(index从0开始) | $("li:eq(1)" )选取索引等于1的<li>元素 |
:gt(index) | 选取索引大于index的元素(index从0开始) | $(" li:gt(1)" )选取索引大于1的<li>元素(注:大于1,不包括1) |
:lt(index) | 选取索引小于index的元素(index从0开始) | $(“li:lt(1)” )选取索引小于1的<li>元素(注:小于1,不包括1) |
:header | 选取所有标题元素,如h1~h6 | $(":header" )选取网页中所有标题元素 |
:focus | 选取当前获取焦点的元素 | $(":focus" )选取当前获取焦点的元素 |
:animated | 选择所有动画 | $(":animated" )选取当前所有动画元素 |
语法
语法 | 描述 | 示例 |
---|---|---|
:visible | 选取所有可见的元素 | $(":visible" ) 选取所有可见的元素 |
:hidden | 选取所有隐藏的元素 | $(":hidden" ) 选取所有隐藏的元素 |
样式操作
设置/获取样式
语法
css(name,value) ;
或
css({name:value, name:value,name:value…}) ;
设置属性
css(name)
举例
$(this).css("border","5px solid #f5f5f5");
或
$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});
$(this).css("border");
追加样式
语法
$(selector).addClass(class);
或 $(selector).addClass(class1 class2 … classN);
移除样式
语法
$(selector).removeClass("class") ;
或 $(selector).removeClass("class1 class2 … classN ") ;
举例
$("p").removeClass("text content");
切换样式
语法
$(selector).toggleClass(class) ;
举例
$("p").toggleClass("content border");
判断样式
语法
$(selector). hasClass(class);
举例
$("h2").mouseover(function() {
if(!$("p").hasClass("content ")){
$("p").addClass("content ");
}
});
内容及Value值操作
html()
举例
$("div.left").html();//获取
//或
$("div.left").html("<div class='content'>…</div>")//设置
text()
举例
$("div.left").text();//获取
//或
$("div.left").text("<div class='content'>…</div>");//设置
val()
举例
$(this).val();//获取
//或
$(this).val(value);//设置
节点及节点属性操作
创建节点
语法
$(selector):通过选择器获取节点
$(element):把DOM节点转化成jQuery节点
$(html):使用HTML字符串创建jQuery节点
举例
var $newNode=$("<li></li>");
var $newNode1=$("<li>你喜欢哪些冬季运动项目?</li>");
var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了!</li>");
插入节点
语法
append(content) //$(A).append(B)表示将B追加到A中
appendTo(content) //$(A).appendTo(B)表示把A追加到B中
prepend(content) //$(A). prepend (B)表示将B前置插入到A中
prependTo(content) //$(A). prependTo (B)表示将A前置插入到B中
after(content)
insertAfter(content)
before(content)
insertBefore(content)
举例
$("ul").append($("#dd"));
$("#dd").appendTo("ul");
$("ul"). prepend ($("#dd"));
$("#dd").prependTo ("ul");
$("ul").after($("#dd"));
$("#dd").insertAfter("ul");
$("ul").before($("#dd"));
$("#dd").insertBefore("ul");
删除节点
remove():删除整个节点
empty():清空节点内容
detach():删除整个节点,保留元素的绑定事件、附加的数据
举例
$("#dd").remove();
$("#dd").empty();
$("#dd").detach();
替换节点
replaceWith()
replaceAll()
举例
var $newNode1=$("<li>你喜欢哪些冬季运动项目?</li>");
$(".gameList li:eq(2)").replaceWith($newNode1);
$($newNode1).replaceAll(".gameList li:eq(2)");
replaceWith() 与replaceAll() 方法都可以实现元素节点的替换,二者最大的区别在 于替换字符的顺序,前者是用括号中的字符替换所选择的元素,后者是用字符串替换括号中 所选择的元素。同时,一旦完成替换,被替换元素中的全部事件都将消失.
复制节点
语法
$(selector).clone([includeEvents]) ;
举例
$(".gameList li:eq(1)").click(function(){
$(this).clone(true).appendTo(".gameList");
})
$(".gameList li:eq(2)").click(function(){
$(this).clone(false).appendTo(".gameList");
})
节点遍历
语法
$(selector).children();//遍历子元素
$(selector).next();//遍历同辈之后的
$(selector).prev();//遍历同辈之前的
$(selector).slibings();//遍历同辈前后的
$(selector).parent();//遍历父级
$(selector).parents();//遍历父级和以上的
$(selector).each( );//遍历每一个
属性操作
语法
$(selector).attr([name]) ;//获取
//或
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;//设置
$(selector).removeAttr(name) ;//删除
举例
$(".contain img").attr({width:"200",height:"80"})
$(".contain img").removeAttr("alt");
事件
方法 | 描述 | 执行时机 |
---|---|---|
click( ) | 触发或将函数绑定到指定元素的click事件 | 单击鼠标时 |
mouseover( ) | 触发或将函数绑定到指定元素的mouseover事件 | 鼠标指针移过时 |
mouseout( ) | 触发或将函数绑定到指定元素的mouseout事件 | 鼠标指针移出时 |
mouseenter( ) | 触发或将函数绑定到指定元素的mouseenter事件 | 鼠标指针进入时 |
mouseleave( ) | 触发或将函数绑定到指定元素的mouseleave事件 | 鼠标指针离开时 |
举例
$(".nav-ul a").mouseover(function(){
$(this).css("background-color","#f01e28");
});
$(".nav-ul a").mouseout(function(){
$(this).css("background-color","#ff2832");
});
方法 | 描述 | 执行时机 |
---|---|---|
keydown( ) | 触发或将函数绑定到指定元素的keydown事件 | 按下键盘时 |
keyup( ) | 触发或将函数绑定到指定元素的keyup事件 | 释放按键时 |
keypress( ) | 触发或将函数绑定到指定元素的keypress事件 | 产生可打印的字符时 |
举例
$("[type=password]").keyup(function () {
$("#events").append("keyup");
}).keydown(function (e) {
$("#events").append("keydown");
}).keypress(function () {
$("#events").append("keypress");
});
$(document).keydown(function (event) {
if (event.keyCode == "13") {
alert("确认要提交么?");
}
});
绑定事件
语法
bind(type,fn);
举例
$(document).ready(function(){
$(".on").bind("mouseover",function(){
$(".topDown").show();
});
});//一个
$(".top-m .on").bind({
mouseover:function(){
$(".topDown").show();
},
mouseout:function(){
$(".topDown").hide();
}
});//多个
移除事件
语法
unbind([type],[fn])
举例
$("#del").click(function(){
$("#nav li:first").unbind("click", content1)
});
复合事件
语法
hover(enter,leave)//hover()方法相当于mouseover与mouseout事件的组合
toggle(fn1,fn2,...,fnN);//toggle()方法用于模拟鼠标连续click事件
toggleClass(className);
举例
$(".top-m .on").hover(function(){
$(".topDown").show();
},
function(){
$(".topDown").hide();
}
);
$("input").toggle(
function(){$("body").css("background","#ff0000");},
function(){$("body").css("background","#00ff00");},
function(){$("body").css("background","#0000ff");}
)
//toggle()方法不带参数,与show( )和hide( )方法作用一样
$("input").click(function(){$("p").toggleClass("red");})
元素显现与隐藏
语法
$(selector).show([speed],[callback])
//speed:可选。表示速度,默认为“0”,可能值:毫秒(如1000)、slow、normal、fast
//callback:可选。show函数执行完之后,要执行的函数
$(selector).hide([speed],[callback])
$(selector).fadeIn([speed],[callback])
$(selector).fadeOut([speed],[callback])
$(selector).slideUp ([speed],[callback])
$(selector).slideDown ([speed],[callback]
动画
语法
$(selector). animate({params},speed,callback)
举例
$("#d1").animate({top:300},3000);
$("#d1").animate({top:300,left:300},3000);
$("#d1").animate({top:0,left:300},3000);
$("#d1").animate({top:0,left:0},3000);