jQuery入门-1.0

一、语法

jquery语法就是通过选取HTML元素，并对选取的元素执行某些操作。

文档就绪事件

$(document).ready(function(){
   // 开始写 jQuery 代码...
});

特点：

1.以$符号开头，定义为jQuery;

2.该语法的目的是：等待文档加载完毕之后在进行执行下面的代码，原因就是，jQuery就是用来操作dom的。

还有一种写法

$(function(){
	//要执行的jQuery代码...
});

二、选择器

元素选择器：

$("p")  //在页面中选取所有的<p>元素

id选择器：

$("#test");//id选择器通过html元素的id属性选取执行元素

.class选择器：

$(".test");  //选取dom中指定的class元素

其他的选择器：

$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$("p.intro")	选取 class 为 intro 的 元素
$("p:first")	选取第一个 元素
$("ul li:first")	选取第一个 元素的第一个 元素
$("ul li:first-child"	选取每个 元素的第一个 元素
$("[href]")	选取带有 href 属性的元素
$(“a[target=’_blank’]”)	选取所有 target 属性值等于 “_blank” 的 元素
$(":button")	选取所有 type=“button” 的 元素 和 元素
$("tr:even/odd")	选取偶数/奇数位置的

元素

三、事件

常见几大DOM事件有：鼠标事件，键盘事件，表单事件，文档/窗口事件

事件语法：

//单击事件
$("p").click(function(){
	//为p元素绑定点击事件，触发事件后执行的函数
})

//双击事件
$("p").dbclick(function(){
	//表示双击p元素后，该元素隐藏
	//$(this)表示触发事件的元素
    //.hide()方法表示隐藏元素
	$(this).hide();
})

//鼠标指针穿过元素时，繁盛的事件
$("#p1").mouseenter(function(){
    alert("您的鼠标移到了id=p1的元素上");
})

//鼠标指针离开元素时，会发生mouseleave事件
$("#p1").mouseleave(function(){
    alsert("您的鼠标离开了该元素");
})

//当鼠标指针移动到元素上方，并按下鼠标按键时会发生mousedown事件
$("#p1").mousedown(function(){
    alert("鼠标按下r去了");
})

//当在元素上松开鼠标按钮时，会发生mouseup事件
$("#p1").mouseup(function(){
    alert("鼠标松开了");
})

//hover用于模仿光标悬停事件
$("#p1").hover(
	function(){
        alert("你进入了p1");
    }
    function(){
    alert("你出去了p1");
}
)

//当元素获得焦点时，发生 focus 事件
$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

//当元素失去焦点时，发生 blur 事件。
$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});