几个简单的jQuery使用方法
jQuery是JavaScript的一个集成库,语法简洁,它紧密集成了DOM,提供了方便的ajax的辅助方法、令人震撼的界面效果,以及可插拔的体系结构。
下面将介绍一些jQuery的关键特性:
一、jQuery的安装:
1.本地引入。在jQuery官网下载jquery.js,在自己的文件中添加:
<script src="jquery.js"></script>
2.CDN引入,在文件中添加一下代码:
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
二、jQuery的几个特性:
首先在创建一个html文档,有其基本框架,jquery.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//自身要写的jQuery代码
});
</script>
</head>
<body>
<a href="" class="button" id="check_un"></a>
<span id="title">nihao</span>
<img src="" class="cover">
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
<li>forth</li>
</ul>
</body>
</html>
(document).ready(function(){});可以确保在html没有加载到客户浏览器之前不会执行jQuery代码,因为不这样做,可能会导致意想不到的副作用,javascript可能会修改还未呈现的页面元素。 注意:之后的所有代码都是在(document).ready(function(){});中嵌套着的。
<script type="text/javascript">
$(document).ready(function(){
//自身要写的jQuery代码
});
</script>
1.响应事件。在JavaScript中,经常会用到 onclick=“javascript函数”,但是这个方法将页面的设计与逻辑过于紧密的耦合在一起,并不漂亮,可以用jQuery,如下:
$("#check_un").click(function(event){
alert("hello");
event.preventDefault();
});
2.将id为title处的内容显示出来
var title = $("#title").html();
alert(title);
3.得到与类关联的图像的src值
var title = $("#title").html();
alert(title);
4.统计项目符号的个数
var count = $("li").size();
alert(count);
5.循环处理符号项
$('li').each(function(){
alert($(this).html());
});
6.修改页面元素用html()方法
$("#title").html("the awesomest book title ever");