一、语法
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");
});