前面已经介绍HTML、CSS和javaScript,这三个前端语言,俗称前端三剑客。下面来学习一个javaScript简化并封装好的库——jQuery库。
前端必须学习的jQuery库。
jQuery是对JavaScript的封装,它是免费、开源的JavaScript函数库,jQuery 极大地简化了 JavaScript 编程。
jQuery和JavaScript它们的作用一样,都是负责网页行为操作,增加网页和用户的交互效果的,只不过jQuery简化了JavaScript编程,jQuery实现交互效果更简单。
说明:
jQuery本身是对javascript的封装,所以使用它,就引入的文件也就是.js文件。如:
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
我们知道使用js获取标签元素,需要页面加载完成以后再获取,我们通过给onload事件属性设置了一个函数来获取标签元素,而jquery提供了ready函数来解决这个问题,保证获取标签元素没有问题,它的速度比原生的 window.onload 更快。
入口函数示例代码:
<script src="js/jquery-1.12.4.min.js"></script>
<script>
window.onload = function(){
var oDiv = document.getElementById('div01');
alert('原生就是获取的div:' + oDiv);
};
$(document).ready(function(){
var $div = $('#div01');
alert('jquery获取的div:' + $div);
});
</script>
<div id="div01">这是一个div</div>
入口函数的简写示例代码:
<script src="js/jquery-1.12.4.min.js"></script>
<script>
window.onload = function(){
var oDiv = document.getElementById('div01');
alert('原生就是获取的div:' + oDiv);
};
/*
$(document).ready(function(){
var $div = $('#div01');
alert('jquery获取的div:' + $div);
});
*/
// 上面ready的写法可以简写成下面的形式:
$(function(){
var $div = $('#div01');
alert('jquery获取的div:' + $div);
});
</script>
<div id="div01">这是一个div</div>
说明:
// 完整写法
$(document).ready(function(){
...
});
// 简化写法
$(function(){
...
});
我们在讲CSS的时候讲过选择器,CSS中选择器介绍了6种,标签、层级、类、id、组和伪类选择器。选择器就是通过标签和标签的属性来定位到标签,以选择所需标签来操作标签的属性值。而jQuery也是有选择器的,下面介绍jQuery选择器的使用。
jquery选择器就是快速选择标签元素,获取标签的,选择规则和css样式一样。
示例代码:
$('#myId') //选择id为myId的标签
$('.myClass') // 选择class为myClass的标签
$('li') //选择所有的li标签
$('#ul1 li span') //选择id为ul1标签下的所有li标签下的span标签
$('input[name=first]') // 选择name属性等于first的input标签
<div id="div1" class='myClass'>这是一个div元素</div>
<input type="text" name="first" id="input1" value="20px">
<a href="#" id="myId" class="sty01">这是一个链接</a>
说明: 可以使用length属性来判断标签是否选择成功, 如果length大于0表示选择成功,否则选择失败。
$(function(){
result = $("div").length;
alert(result);
});
备注:
本节介绍了jQuery的定义、引入,以及选择器的使用。
1、jQuery是对javascript的封装,简化了javascript的编程
2、通过<script></script>标签中src属性来引用
3、jQuery同CSS一样拥有选择器,可以通过选择器来操作标签的属性及属性值,一共介绍5种选择器: 1.标签选择器 2.类选择器 3.id选择器 4.层级选择器 5.属性选择器
工欲善其事,必先利其器!