学习JQuery之前,先了解一下HTML、CSS、JavaScript。
JQuery是JavaScript的一个函数库
主要有:
1.HTML元素提取
2.HTML元素操作
3.CSS操作
4.JavaScript 特效和动画
5.HTML DOM 遍历和修改
6.AJAX
7.Utilities
一、如何在HTML中使用JQuery
在页面中head中加入script标签
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<script type="text/javascript" src="jquery.js"></script>
二、JQuery最鲜明的特点
$是作为JQuery做明显的特征之一。它的基本用法:$(selector).action()
(1)selector有点类似DOM解析.
(2)action则为响应事件.
三、JQuery选择器
(1)使用CSS来提取HTML元素
提取html中所有"p"的标签: $("p")
提取html中某个类中的"p"的标签:$("p.class")
提取html中id为demo的第一个为"p"的标签:#("p#demo")
(2)使用XPath来提取给定属性的元素
$("[href]") 选取所有带有 href 属性的元素。
$("[href=‘#‘]") 选取所有带有 href 值等于 "#" 的元素。
$("[href!=‘#‘]") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$=‘.jpg‘]") 选取所有 href 值以 ".jpg" 结尾的元素。
四、响应事件
$("标签").click(function() {...some code... } )
(1)在HTML中的head中
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
...some code...
});
});
</script>
</head>
(2)在单独的JS中
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
注意:JQuery名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。
五、事件函数
常见事件:隐藏、显示、切换、滑动 以及动画