jQuery学习ing
jQuery初学
jQuery 是一个便利的JavaScript库,j为JavaScript,Query为查询;
作用:封装了JavaScript常用的功能代码,优化了DOM操作、事件处理、动画设计和Ajax交互。
优点:
- 轻量级,不影响页面加载速度;
- 跨浏览器兼容;
- 链式编程、隐式迭代;
- 对事件、样式、动画支持,大大简化了DOM操作;
- 支持插件拓展开发,有丰富的第三方插件;
- 免费、开源。
入口函数
- 等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery帮我们完成了封装。
- 相当于原生JS中的DOMContentLoaded。
- 不同于原生JS中的load事件是等页面文档、外部的JS文件、CSS文件、 图片加载完毕才执行内部代码。
顶级对象 $
$ 是jQuery的别称,在代码中可以使用jQuery代替 $ ,通常直接使用 $ 。
$ 是jQuery的顶级对象,相当于原生JavaScript中的 window。把元素利用 $ 包装成jQuery对象,就可以调用jQuery的方法。
<html> <!-- ex.html -->
<head>
<meta charset="UTF-8">
<title>JavaScript_Exercise</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<script src="JS/fastclick.js"></script>
<script src="JS/jQuery.min.js"></script><!-- 引入jQuery -->
<style>
div {
width: 100px;
height: 100px;
background: blanchedalmond;
}
</style>
</head>
<body>
<script>
// answer one
$(function() {
$('div').hide();
})
// answer two
$(document).ready(function() {
$('div').hide();
})
</script>
<div></div>
</body>
</html>
jQuery对象和DOM对象
区别
- 用原生JS获取来的对象就是DOM对象,只能使用原生的JavaScript属性和方法;
- jQuery方法获取的元素就是jQuery对象,只能使用jQuery方法。
- jQuery对象本质是:利用 $ 对DOM对象包装后产生的对象(伪数组形式存储)。
<html> <!-- ex.html -->
<head>
<meta charset="UTF-8">
<title>JavaScript_Exercise</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<script src="JS/fastclick.js"></script>
<script src="JS/jQuery.min.js"></script><!-- 引入jQuery -->
<style>
div {
width: 100px;
height: 100px;
background: blanchedalmond;
}
</style>
</head>
<body>
<div></div>
<script>
// DOM对象
let div = document.querySelector('div');
console.dir(div);
div.style.display = 'none';
// jQuery对象
console.log($('div'));
$('div').hide();
</script>
</body>
</html>
转换
DOM对象与jQuery对象之间是可以相互转换的。
因为原生js比jQuery更大,原生的一些属性和方法jQuery没有给我们封装,要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
- DOM对象转换为jQuery对象:$(DOM对象)
$('div');
- jQuery对象转换为DOM对象
$('div')[index]; // 法 1
$('div').get(index); // 法 2
// index是索引号
<html> <!-- ex.html -->
<head>
<meta charset="UTF-8">
<title>JavaScript_Exercise</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<script src="JS/fastclick.js"></script>
<script src="JS/jQuery.min.js"></script> <!-- 引入jQuery -->
<style>
video {
width: 400px;
height: 500px;
}
</style>
</head>
<body>
<video src="imag/lovely.mp4" muted></video> <!-- muted静音播放 -->
<script>
// 1.DOM对象 转换为 jQuery 对象
let _video = document.querySelector('video'); // DOM对象
_video.play();
$('_video'); // jQuery对象
// 2. jQuery对象 转换为 DOM对象
$('video')[0].play();
$('video').get(0).play();
</script>
</body>
</html>
选择器 + 迭代
原生JS获取元素方式很繁杂,而且兼容性情况不一致,因此jQuery给我们做了封装,使获取元素统标准。
基本选择器
$('选择器'); //里面选择器直接写CSS选择器即可,但是要加引号
层级选择器
隐式迭代
遍历内部DOM元素(伪数组形式存储)的过程,叫做隐式迭代。给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。
筛选选择器
<html> <!-- ex.html -->
<head>
<meta charset="UTF-8">
<title>JavaScript_Exercise</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<script src="JS/fastclick.js"></script>
<script src="JS/jQuery.min.js"></script><!-- 引入jQuery -->
<style>
</style>
</head>
<body>
<div>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</div>
<ol>
<li>one</li>
<li class="item">two</li>
<li>three</li>
<li>four</li>
</ol>
<script>
$(function() {
console.log($('.item').parent()); // 查找亲父级
$("div li").css('color', 'red'); // 选择div下的所有孩子,隐式迭代
$('ol .item').siblings('li').css({
"color":"red","font-size":"22px"});
let index = 3;
$('div li:eq(3)').css('color', 'green');
$('ol li').eq(index).css('color', 'green');
})
</script>
</body>
</html>
链式编程
<html> <!-- ex.html -->
<head>
<meta charset="UTF-8">
<title>JavaScript_Exercise</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<script src="JS/fastclick.js"></script>
<script src="JS/jQuery.min.js"></script><!-- 引入jQuery -->
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<script>
$(function() {
$('button').click(function() {
// 隐式迭代
$(this).css('background', 'yellow');
$(this).siblings('button').css('background', '');
// 链式编程
$(this).css('background', 'yellow').siblings('