您的位置：首页 > Web前端 > JQuery

几个简单的jQuery使用方法

2016-08-07 17:58 363 查看

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");

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery javascript

相关文章推荐

新的分享

章节导航