1.jQuery:实质上是一个js类库,对常用的方法和对象进行封装,以方便调用。
2.jQuer调用:在javascript标签中,将src属性改为对应的jQuery源文件路径即可。
<script type="text/javascript" src="file:///C|/Users/lenovo/Desktop/webutil/jquery-2.0.2.min.js">
<script/>
3.获取jQuery对象:$("选择器"),或者$(dom对象)可以把dom对象转换为jQuery对象
A:基本选择器
$("#id值") $(".class值") $("标签名"),多个选择器之间可以用逗号隔开
B:层次选择器
a b:a的所有b后代
a>b:a的所有b孩子(不包括孙子)
a+b:a的下一个兄弟(大兄弟)
a~b:a的所有弟弟们
C:基本过滤选择器,使用时和基本选择器搭配,跟在基本选择器后 例子:$("button:eq(0)")
:frist 第一个
:last 最后一个
:odd 索引奇数
:even 索引偶数
:eq(index) 指定索引
:gt(index) >索引大于哪一个值
:lt(index) <索引小于哪一个值
一般使用基本选择去器和基本过滤选择器集合即可操作大部分标签
4.jQuery中常用方法:
window.οnlοad=function(){} 在页面加载完成后执行方法
$(selector).click(function(){...}); 单击所选标签时执行方法
$(selector).dblclick(function(){...}); 双击所选标签时执行方法
$(selector).mouseover(function(){}); 鼠标悬停时执行方法
$(selector).focus(function(){}); 获得焦点时执行方法
$(selector).blur(function(){}); 失去焦点时执行方法
jQuery应用实例:
<html>
<head>
<script type="text/javascript" src="jquery-2.0.2.min.js"></script>
</head>
<body>
<script type="text/javascript">
window.οnlοad=function(){
$("button:eq(0)").click(function(){
alert(123);
});//单击按钮,弹出窗口
$("div:eq(0)").mouseover(function(){
$("#d1").append($("<marquee>鼠标移入<marquee/>"));
});//鼠标移入,在div中插入marquee标签
$("#d1").mouseout(function(){
$("#d1").append($("<marquee>鼠标移出<marquee/>"));
});//鼠标移出,在div中插入marquee标签
};
</script>
This is my JSP page. <br>
<div style="width: 300px;height: 300px ;border-style: solid" id="d1">
long may the sun shine!
</div>
<button id="b1">click</button>
</body>
</html>