一、加载JQuery库
1、本地加载:
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
2、使用Google或者Microsoft的CDN(内容分发网络?)
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
</head>
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
</head>
二、一般格式:
书写JQuery一般使用document的ready函数,等页面加载完毕后再运行相应的js脚本,保证js脚本运行正确。
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
对这段代码解释如下:
1、$符号:类似document.getElementByTagName的功能,后面的括号参数可以有三种:
1)("p")含义:对应页面中所有的p元素
2)("#p1")含义:对应页面中第一个id=p1的元素
3)(".p2")含义:对应页面中class=p2的元素
4)延伸类推:$("p.test")含义:对应页面中class=test的p元素
2、$(document).ready(function(){...});
这段是实现上面说的,待页面document加载完毕ready后再执行后面的函数function内容。
3、$("button").click(function(){...});
这段是说页面中所有的按钮被点击click后就执行后面的函数function内容。
4、$("p").hide();
hide()这个函数是JQuery中实现隐藏功能的,这段会隐藏页面中的所有p标签。
三、JQuery选择器:
1)上面二.1说的就是选择器,不过只说了基础,选择操作对象的方法还可以更加复杂一些,以下是W3SCHOOL的原表:
语法 | 描述 |
---|---|
$(this) | 当前 HTML 元素 |
$("p") | 所有 <p> 元素 |
$("p.intro") | 所有 class="intro" 的 <p> 元素 |
$(".intro") | 所有 class="intro" 的元素 |
$("#intro") | id="intro" 的第一个元素 |
$("ul li:first") | 每个 <ul> 的第一个 <li> 元素 |
$("[href$='.jpg']") | 所有带有以 ".jpg" 结尾的属性值的 href 属性 |
$("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
如把所有 p 元素的背景颜色更改为红色:$("p").css("background-color","red");
四、JQuery事件:类似上面二.3的click事件还可以用dblclick(双击事件)、focus(焦点事件)、mouseover(鼠标悬停事件)等(还有很多= =!)。
未完待续……