jQuery(JQ)
你将了解
- JQ是什么
- JQ怎么环境搭建
- 第一个helloword
- jQuery对象与DOM对象的区别
- jQuery对象DOM对象怎么相互转换
- jQuery选择器有哪些,具体用法是怎么样的。
一、JQ简介
JQ就是JavaScript库,不仅兼容了CSS3还兼容各种浏览器
优点:
- 容易上手
- 强大的选择器
- 解决浏览器的兼容
- 完善的事件机制
- 出色的Ajax封装
- 丰富的UI
特有的特性、工具方法
- 链式操作
- 回调函数
- 迭代器
- 延迟对象
- 队列
。。。。。。
二、JQ环境搭建
官网最新版本 http://jquery.com/download/ ,
注意 jQuery 分 2 个版本 1.x 与 2.x,区别在于 2.x 不再兼容 IE6、7、8浏览器,目的是为了兼容移动端开发。
由于减少了一些代码,使得该版本比 jQuery 1.x 更小、更快。
若开发者比较在意老版本 IE 用户,只能使用 jQuery 1.9 及之前的版本了。
我们这里为了兼容性问题,使用的是 1.9 版本。
jQuery 每一个系列版本分为:压缩版(compressed) 与 开发版(development),我们在开发过程中使用开发版(开发版本便于代码修改及调试),项目上线发布使用压缩版(因为压缩版本体积更小,效率更快)。
jQuery是一个JavaScript脚本库,不需要特别的安装,只需要我们在页面 <head>
标签内中,通过 script 标签引入 jQuery 库即可
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<title>环境搭建</title>
</head>
<body>
<script type="text/javascript"> alert($) </script>
</body>
</html>
alert 弹出以下信息,说明环境已经搭建成功了
三、第一个helloword
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>第一个简单的jQuery程序</title>
<style type="text/css">
div{
padding:8px 0px;
font-size:12px;
text-align:center;
border:solid 1px #888;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
//$(document).ready的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码
//因为我们执行代码得到时候可能会依赖页面的某个元素,我们要确保这个元素真正的被加载完毕后才能正确使用
$(document).ready(function() {
$("div").html("您好!我在学习JQ老");
});
</script>
</head>
<body>
<div></div>
</body>
</html>
浏览器中央出现
四、jQuery对象与DOM对象的区别
我们用代码来解释
首先我们要实现如下效果
我们获取id为imooc的P元素,然后给这个文本节点增加一段文字,并改色
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<!-- 使用JS原生语法 -->
<script type="text/javascript">
window.onload = function(){
// 通过原生JS语法获取id为imooc1的元素p
var p = document.getElementById('imooc1');
// 将元素p在html中内容改变
p.innerHTML = 'P1:您好!我叫大锅饭';
// 将元素p的内容颜色改为红色
p.style.color = 'blue';
}
</script>
<!-- 使用jQuery语法 -->
<script type="text/javascript">
$(document).ready(function() {
/**
* 通过jQuery语法获取id为imooc2的元素获得一个jQuery对象
* 调用该对象的html()方法进行更改内容
* 调用该对象的css()方法进行更改颜色样式
*/
//$p 是一个类数组对象这个对象里包含了DOM对象的信息,然后封装了很多操作方法
//调用自己的方法html与css,得到的效果与标准的JavaScript处理结果是一致的。
var $p = $('#imooc2');
$p.html('P2:我叫大锅饭').css('color','red');
});
</script>
</head>
<body>
<p id="imooc1"></p>
<p id="imooc2"></p>
</body>
</html>
总结:
- 通过jQuery方法包装后的对象,是一个类数组对象。它与DOM对象完全不同,唯一相似的是它们都能操作DOM
- 通过jQuery处理DOM的操作,可以让开发者更专注业务逻辑的开发,而不需要我们具体知道哪个DOM节点有那些方法,也不需要关心不同浏览器的兼容性问题,我们通过jQuery提供的API进行开发,代码也会更加精短。
五、jQuery对象DOM对象相互转换
jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。我们使用jQuery的同时也能混合JavaScript原生代码一起使用。在很多场景中,我们需要jQuery与DOM能够相互的转换,它们都是可以操作的DOM元素,jQuery是一个类数组对象,而DOM对象就是一个单独的DOM元素。
jQuery对象转DOM对象
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
<!--通过jQuery找到所有div元素(这里3个)-->
<script type="text/javascript">
var $div = $('div'); //jQuery对象(数组结构)
//var div = $div[1] //通过数组下标转化成DOM对象
var div = $div.get(0)//通过get方法,转化成DOM对象
div.style.color = 'red'; //操作dom对象的属性
</script>
</body>
</html>
元素一字变红。
DOM对象转jQuery对象
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
<!--如果传递给$(DOM)函数的参数是一个DOM对象,jQuery方法会把这个DOM对象给包装成一个新的jQuery对象-->
<script type="text/javascript">
//获取到所有div节点的元素结果是一个dom合集对象数组合集
var div = document.getElementsByTagName('div');
//将dom节点div转化为$div的jquery对象
var $div = $(div) ;
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色
</script>
</body>
</html>
六、jQuery选择器
1、id选择器
通过id来获取节点
语法:
$( "#id" )
jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取
注意
- id唯一,每个id在页面中只能使用一次,如果多个元素分配了相同的id,将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的
列子
效果图
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
div {
width: 100px;
height: 90px;
float: left;
padding: 5px;
margin: 5px;
background-color: #EEEEEE;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div id="aaron">
<p>id="aaron"</p>
<p>选中</p>
</div>
<div id="imooc">
<p>id="imooc"</p>
<p>jQuery选中</p>
</div>
<div id="imooc">
<p>id="imooc"</p>
<p>jQuery未选中</p>
</div>
<script type="text/javascript">
//通过原生方法处理
var div = document.getElementById('aaron');
div.style.border = "3px solid blue";
</script>
<script type="text/javascript">
//通过jQuery直接传入id
//id的唯一,只选择到了第一个匹配的id为imooc的div节点
$("#imooc").css("border", "18px solid red");
</script>
</body>
</html>
2、类选择器
通过类名来获取节点,相对id选择器来说效率相对要低一点。,但可以多选
同样的jQuery在实现上,对于类选择器,如果浏览器支持,jQuery使用JavaScript的原生getElementsByClassName()函数来实现的
语法
$(".class")
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
div {
width: 100px;
height: 90px;
float: left;
padding: 5px;
margin: 5px;
background-color: #EEEEEE;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="aaron">
<p>class="aaron"</p>
<p>选中</p>
</div>
<div class="aaron">
<p>class="aaron"</p>
<p>选中</p>
</div>
<div class="imooc">
<p>class="imooc"</p>
<p>jQuery选中</p>
</div>
<div class="imooc">
<p>class="imooc"</p>
<p>jQuery选中</p>
</div>
<script type="text/javascript">
//通过原生方法处理
//样式是可以多选的,所以得到的是一个合集
//需要通过循环给合集中每一个元素修改样式
var divs = document.getElementsByClassName('aaron');
for (var i = 0; i < divs.length; i++) {
divs[i].style.border = "3px solid blue";
}
</script>
<!--jQuery除了选择上的简单,而且没有再次使用循环处理-->
<script type="text/javascript">
//通过jQuery直接传入class
//class选择器可以选择多个元素
$(".imooc").css("border", "3px solid red");
</script>
</body>
</html>