目录:
- jQuery的介绍
- jQuery的下载
- jQuery的使用
- jQuery选择器
- jQuery选择集过滤
- jQuery选择集转移
一、jQuery的介绍
- jQuery是对JavaScript的封装,它是免费、开源的JavaScript函数库,jQuery极大的简化了JavaScript编程
- jQuery和JavaScript的作用一样,都是负责网页行为操作,增加网页和用户的交互效果,简化了JavaScript编程,实现交互效果更简单
- jQuery兼容了现在主流的浏览器,增加了程序员的开发效率
二、jQuery的下载
下载jQuery1.x
点击之后会出现如下图,进入网址:
之后直接右键->另存为:
jQuery就下载完了,之后使用直接把它的路径放进去就可以了
三、jQuery的使用
1. jQuery的引入
<!-- 导入jquery对应的js文件 -->
<script src="../../jquery-1.12.4.min.js"></script>
2. jQuery的入口函数
js获取标签元素需要页面加载完成以后再获取,我们通过给onload事件属性设置了一个函数来获取标签元素,而jQuery提供了ready函数,保证获取标签元素没有问题,它的速度比原生的window.onload更快
入口函数完整代码示例:
<!-- 导入jquery对应的js文件 -->
<script src="../../jquery-1.12.4.min.js"></script>
<script>
// 原生js写法
window.onload = function(){
// 当前页面的标签和标签使用的资源数据都加载完成,onload事件才会触发
var oDiv = document.getElementById('div1');
alert(oDiv);
};
// $符号就是jquery的象征,其本质就是一个函数,只不过这个函数名叫$
$(document).ready(function(){
// 获取标签和css样式匹配标签的规则一样
// 以后使用jquery,变量名都要以$符号开头
var $div = $('#div1');
alert($div)
});
// ready 等待页面标签加载完成以后就执行ready事件,不会等待资源数据加载完成
// 所以ready比onload快
jQuery简写代码示例:
<!-- 导入jquery对应的js文件 -->
<script src="../../jquery-1.12.4.min.js"></script>
<script>
// 原生js写法
window.onload = function(){
// 当前页面的标签和标签使用的资源数据都加载完成,onload事件才会触发
var oDiv = document.getElementById('div1');
alert(oDiv);
};
// // $符号就是jquery的象征,其本质就是一个函数,只不过这个函数名叫$
// $(document).ready(function(){
// // 获取标签和css样式匹配标签的规则一样
// // 以后使用jquery,变量名都要以$符号开头
// var $div = $('#div1');
// alert($div)
// });
// ready 等待页面标签加载完成以后就执行ready事件,不会等待资源数据加载完成
// 所以ready比onload快
// jquery的简写方式
$(function(){
var $div = $('#div1');
alert($div);
});
</script>
四、jQuery选择器
jQuery选择器就是快速选择标签元素,获取标签的,选择规则和css样式一样,但它只是选择标签,不设置样式
1. jQuery选择器种类
- 标签选择器
- 类选择器
- id选择器
- 层级选择器
- 属性选择器(独有的)
选择器使用代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 通过标签名获取标签对象
var $p = $('p');
// 长度大于0就证明获取成功了
alert($p.length);
// 通过jquery设置标签样式
$p.css({'color': 'red'});
// 通过类名获取标签对象
var $div1 = $('.div1');
alert($div1.length);
// 通过id获取标签对象
var $div2 = $('#box1');
alert($div2.length);
// 通过层级获取标签对象
var $h1 = $('div h1');
alert($h1.length);
// 通过属性获取标签对象
var $input1 = $('input[type=text]');
alert($input1.length);
});
</script>
</head>
<body>
<p>哈哈</p>
<p>嘿嘿</p>
<div class="div1">加法is</div>
<div id="box1">开始工地</div>
<div>
<h1>吃饭</h1>
</div>
<input type="text">
<input type="button">
</body>
</html>
其中,length属性是用来判断是否选择成功,length大于0代表选择成功
五、选择集过滤
选择集过滤就是在选择标签的集合里面过滤出自己想要的标签
1. 选择集过滤的操作
- has(选择器名称)方法:表示选取包含指定选择器的标签
- eq(索引)方法:表示选取指定索引的标签
两种方法使用代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 通过jquery选择器获取标签
var $div1 = $('div');
// 获取含有指定选择器的父标签
$div1.has('p').css({'background': 'red'});
// 根据下标选择指定的标签的父标签
$div1.eq(1).css({'background': 'blue'});
// 选择集过滤就是在选中的集合标签里面,根据需要过滤出来自己想要的标签
});
</script>
</head>
<body>
<div>
<p>哈哈</p>
</div>
<div>
<input type="button" value="按钮">
</div>
</body>
</html>
结果:
六、选择集转移
选择集转移就是以选择集的标签为参照,然后获取转移后的标签
1. 转移集转移操作
var $div = $('#box1');
- $div.prev();表示选择$div元素的上一个同级元素
- $div.prevAll();表示选择$div元素的上面所有的同级元素
- $div.next();表示选择$div元素的下一个同级元素
- $div.nextAll();表示选择$div元素的下面所有的同级元素
- $div.parent();表示选择$div元素的父元素
- $div.children();表示选择$div元素的所有子元素
- $div.siblings();表示选择$div元素的其他同级元素
- $div.find(‘.sp1’);表示选择$div元素的class等于sp1的元素
选择集转移代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../jquery-1.12.4.min.js"></script>
<script>
$(function(){
// 获取div,并把div作为参照物,获取其他标签
var $div = $('#box1');
// css参数是一个js对象,而js对象和python里面的字典相似
// 属性名和css中的属性名保持一致
// 选择上一个同级标签
$div.prev().css({'color': 'red', 'font-size': '25px'});
// 选择上面所有的同级标签
$div.prevAll().css({'text-indent': '50px'});
// 选择下一个同级标签
$div.next().css({'color': 'green'});
// 选择下面所有的同级标签
$div.nextAll().css({'text-indent': '50px'});
// 选择同级的其他标签
$div.siblings().css({'text-decoration': 'underline'});
// 选择父标签
$div.parent().css({'background': 'gray'});
// 获取所有的子标签
$div.children().css({'color': 'red'});
// 查找指定的子标签
$div.find('.sp1').css({'color': 'green'});
})
</script>
</head>
<body>
<div>
<h3>三级标题</h3>
<p>哈哈</p>
<div id="box1"><span>我是</span>一个<span class="sp1">div</span>标签</div>
<h3>三级标题</h3>
<p>好好好</p>
</div>
</body>
</html>
结果: