jQuery综述

jQuery是一个轻量级JavaScript库

它可以进行如下操作：

选取HTML元素
对HTML元素进行操作
对CSS进行操作
编写HTML事件函数
JavaScript特效
HTML DOM
AJAX
添加jQuery库的方式很简单,在head中添加包含了所有jQuery函数的js文件即可。该文件需要从jQuery.com下载。

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

或者使用CDN

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.8.0/jquery.min.js"></script>
</head>

HTML5中可以省略type="text/javascript"

建议使用CDN的方式，页面加载速度会比较快

jQurey语法

$(selector).action()

selector用来查找HTML元素

action用来执行对元素的操作

e.g

<html>
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>

<body>
<h2>hi</h2>
<p>hello</p>
<button type="button">Click me</button>
</body>
</html>

点击后，

为了保证在文档加载完全之后运行jQuery部分的代码

需要将jQuery函数置于$(document).ready(function(){
});中

jQuery选择元素

$("p") --选取<p>元素

$("#demo") --选取id为demo的元素

$(".demo") --选取class为demo的元素

这几种方式可以组合使用

e.g $("div#demo.head") -- id=demo的元素中class=head的元素

jQuery选择属性

$("[href]") --带href属性的元素

$("[href='x']") --选取所有带有 href 值等于 "x" 的元素。

$("[href!='x']") -- 选取所有带有 href 值不等于 "x" 的元素。

$("[href$='.png']") -- 选取所有 href 值以 ".png" 结尾的元素。

CSS选择

$("p").css("font-size");

猜你喜欢