1. 导入jQuery库文件和jQuary的基本格式
JQuery库在任何地方载入都是可以的,通常可以在head中导入,在body后写javascript代码
<html>
<head>
/*下面两种选一种即可*/
/*1. 使用本地文件导入*/
<script src="jquery-1.10.2.min.js"></script>
/*2. 使用百度CDN引入,也可以使用其他网站的*/
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
<body>
//在此写网页内容
</body>
<script>
$(document).ready(function(){
//在此开始写jQuary代码
});
</script>
</html>
2. 入口函数
防止文档在完全加载之前运行 jQuery 代码,如果在文档没有完全加载之前就运行函数,操作可能失败
$(document).ready(function(){
// jQuery 代码
});
3. 选择器
选择元素名进行操作
在页面中选取所有 <p> 元素:
$(“p”)
实例
用户点击button后,所有<p> 元素都隐藏:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 是唯一的,所以在页面中选取唯一的元素需要通过 #id 选择器
实例
当用户点击按钮后,有 id=“test” 属性的元素将被隐藏:
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
jQuery 类选择器可以通过指定的 class 查找元素。
实例
用户点击按钮后所有带有 class=“test” 属性的元素都隐藏:
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});