jQuery

ⅩⅡ.jQuery

①选择器

基本选择器	用法	解释
#id	$("#myDiv");	用于搜索的，通过元素的 id 属性中给定的值
element	$(“div”);	根据给定的元素名匹配所有元素
.class	$(".myClass");	查找所有类是 “myClass” 的元素.
*	$("*")	匹配所有元素，多用于结合上下文来搜索。
selector1，selector2	$(“div,span,p.myClass”)	将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

层次选择器	用法	解释
ancestor descendant	$(“form input”)	用以匹配元素的选择器，并且它是第一个选择器的后代元素
parent >child	$(“form > input”)	用以匹配元素的选择器，并且它是第一个选择器的子元素
prev+next	$(“label + input”)	一个有效选择器并且紧接着第一个选择器
prev ~siblings	$(“form ~ input”)	一个选择器，并且它作为第一个选择器的同辈

基本选择器	用法	解释
first()	$(‘li’).first()	获取匹配的第一个元素
last()	$(‘li’).last()	获取匹配的最后个元素
:not	$(“input:not(:checked)”)	去除所有与给定选择器匹配的元素
:even	$(“tr:even”)	匹配所有索引值为偶数的元素，从 0 开始计数
:odd	$(“tr:odd”)	匹配所有索引值为奇数的元素，从 0 开始计数
:eq	$(“tr:eq(1)”)	匹配一个给定索引值的元素
:gt	$(“tr:gt(0)”)	匹配所有大于给定索引值的元素
:lt	$(“tr:lt(2)”)	匹配所有小于给定索引值的元素
:header	$(":header").css(“background”, “#EEE”);	匹配如 h1, h2, h3之类的标题元素
:animated	$(“div:animated”).	匹配所有正在执行动画效果的元素

内容选择器	用法	解释
:contains	$(“div:contains(‘John’)”)	匹配包含给定文本的元素
:empty	$(“td:empty”)	匹配所有不包含子元素或者文本的空元素
:has	$(“div:has§”).addClass(“test”);	匹配含有选择器所匹配的元素的元素
:parent	$(“td:parent”)	匹配含有子元素或者文本的元素

②常用事件

$(document).ready()	//网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完，同一页面能同时编写多个
$("#title").html( );	//等同于document.getElementById("title").innerHTML; 
$("#current").addClass("current");  	//为元素添加class
$("h2").css("background-color","#CCFFFF") //为元素添加CSS样式
$("h2").next().css("display","block");		//为元素的下一个同级元素添加CSS样式
$(".text").each()		//循环class==text的元素  取时用this
attr(key, value)		// 为所有匹配的元素设置一个属性值。

方法	描述	执行时机
click( )	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover( )	触发或将函数绑定到指定元素的mouse over事件	鼠标移过时
mouseout( )	触发或将函数绑定到指定元素的mouse out事件	鼠标移出时
keydown( )	触发或将函数绑定到指定元素的keydown事件	按下键盘时
keyup( )	触发或将函数绑定到指定元素的keyup事件	释放按键时
keypress( )	触发或将函数绑定到指定元素的keypress事件	产生可打印的字符时
focus( )	触发或将函数绑定到指定元素的focus事件	获得焦点
blur( )	触发或将函数绑定到指定元素的blur事件	失去焦点

绑定多个事件
bind()方法还可以同时为多个事件绑定方法

$("input[name=event_1]").bind({
mouseover: function () {
	$("ul").css("display", "none");
},
ouseout: function () {
	$("ul").css("display", "block");
}
});

移除事件使用unbind()方法，其语法如下：

参数	含义	描述
[type]	事件类型	主要包括：blur、focus、click、mouseout等基础事件，此外，还可以是自定义事件
[fn]	处理函数	用来绑定的处理函数

当unbind()不带参数时，表示移除所绑定的全部事件

鼠标光标悬停事件hover光标移入时触发,光标移出时触发
hover()方法相当于mouseover与mouseout事件的组合

$("#myaccound").hover(function(){
    $("#menu_1").css("display","block");
 },
 function(){
    $("#menu_1").css("display","none");
 }
);

鼠标连续click事件toggle

$("body").toggle(
function () { },
function () { },
function () { }
);

显示及隐藏元素show
show() 在显示元素时，能定义显示元素时的效果，如显示速度

$(".tipsbox").show("slow");		//以较慢的速度显示元素

显示速度可以取如下值：毫秒（如1000）、slow、normal、fast
toggle()除了可以模拟鼠标的连续单击事件外，还能用于切换元素的可见状态

$("li:gt(5):not(:last)").toggle();

淡入淡出效果fadeIn

fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果
$("input[name=fadein_btn]").click(function(){
    $("img").fadeIn("slow");
});
$("input[name=fadeout_btn]").click(function(){
    $("img").fadeOut(1000);
});

改变元素的高度
slideDown() 可以使元素逐步延伸显示，slideUp()则使元素逐步缩短直至隐藏

$("h2").click(function(){
    $(".txt").slideUp("slow");
    $(".txt").slideDown("slow");
});

​

even //偶数行
odd //奇数行
DOM对象转jQuery对象
$(DOM对象)jQuery对象命名一般约定以$开头
在事件中经常使用$(this)，this是触发该事件的对象

jQuery对象转DOM对象

var $txtName =$ ("#txtName");      //jQuery对象
var txtName =$txtName[0];            //DOM对象

jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象

var $txtName =$("#txtName");        //jQuery对象
var txtName =$txtName.get(0);       //DOM对象

通过get(index)方法得到相应的DOM对象