jQuery简介、语法属性及常用选择器
引言：
本文主要分享了有关jQuery的相关知识，包括：jQuery的作用、优势、jQuery的安装、基础语法、常用的选择器（基本选择器、层次选择器、属性选择器、过滤选择器）、动态的效果展示以及若干案例；
1. jQuery简介
jQuery于2006年创建的，是一个快速、简洁的JavaScript代码库，封装了JavaScript中常用的功能代码；它的设计思想是WRITE LESS,DO MORE，轻量级的JS库(压缩后只有21k) ，兼容CSS3和各种浏览器，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。并且它的文档说明很全，各种应用也说得很详细，同时还有许多成熟的插件可供选择；
1.1 jQuery的作用
- 访问和操作DOM元素
- 控制页面样式
- 对页面事件进行处理
- 扩展新的jQuery插件
- 可以与AJAX完美结合
- jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率
1.2 jQuery的优势
- 体积小，压缩后只有100KB左右
- 强大的选择器
- 出色的DOM封装
- 可靠的事件处理机制
- 出色的浏览器兼容性
- 使用隐式迭代简化编程
- 丰富的插件支持
1.3 jQuery的安装
从jQuery官网中下载，放入服务器的js文件夹下，在页面中直接引用；
有两个版本：
- Production version- ：约91KB，经过工具压缩版本，主要用于发布的产品和项目；
- Development version- ：约268KB，完整的无压缩版本，主要用于测试、学习和开发；
jQuery下载地址：https://jquery.com/download/
1.4 在页面中引入jQuery
jQuery库是一个JavaScript文件，因此使用HTML的
<script src = "js/jquery-3.4.1.min.js" type = "text/javascript"></script>
2. jQuery基础语法
$(匿名函数)：是jQuery函数的简写，表示页面加载完毕后执行，比onload事件执行的早，可以写多个；
$(selector).action()；
工厂函数$()：将DOM对象转化为jQuery对象
选择器 selector：获取需要操作的DOM 元素
方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法
css(“属性”,“属性值”)：为元素设置CSS样式
addClass()：为元素添加类样式
next()：获得元素其后紧邻的同辈元素
2.1 弹出提示框问题
2.1.1 JS实现弹出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS实现跳转</title>
</head>
<!-- 在HTML页面引入外部js页面 -->
<script src = "js/jquery-3.4.1.min.js" type = "text/javascript"></script>
<!-- 自定义JS脚本 -->
<script>
/* js效果1 */
function aaa(){
alert("对话框");
}
window.onload = aaa;
</script>
<!-- js效果1 -->
<!-- <body onload = "aaa()"> -->
<body>
<p>这是一个纯粹的HTML页面</p>
<p>先加载页面，在弹出对话框</p>
<p>网页加载之后，jQuery才有效</p>
</body>
</html>
2.1.2 jQuery跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery跳转</title>
</head>
<!-- 在HTML页面引入外部js页面 -->
<script src = "js/jquery-3.4.1.min.js" type = "text/javascript"></script>
<!-- 自定义JS脚本 -->
<script>
/* $相当于jQuery */
$(document).ready(function(){
alert("对话框");
});
</script>
<body>
<p>这是一个纯粹的HTML页面</p>
<p>先加载页面，在弹出对话框</p>
<p>网页加载之后，jQuery才有效</p>
</body>
</html>
2.2 图片边框问题
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>给图片加边框</title>
</head>
<!-- 在HTML页面引入外部js页面 -->
<script src = "js/jquery-3.4.1.min.js" type = "text/javascript"></script>
<!-- 自定义JS脚本 -->
<script>
$(document).ready(function(){
//使用JS核心API获取元素节点对象1
var img = document.getElementById("img1");
img.border = "5cm solid red";
//在onload时加线2
$("#img1").css("border-bottom","0.3cm groove red");
//在点击之后加线
$("#img1").click(function(){
$(this).css("border-bottom","0.3cm groove black");
});
});
</script>
<body>
<p>这是一个纯粹的HTML页面</p>
<img id = "img1" src="img/111.jpg" width = "100px" height = "100px">
</body>
</html>
2.3 添加类样式（事件）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加类样式</title>
</head>
<!-- 在HTML页面引入外部js页面 -->
<script src = "js/jquery-3.4.1.min.js" type = "text/javascript"></script>
<!-- 自定义JS脚本 -->
<script>
$(document).ready(function(){
/* //只改变div2的样式（使用id选择器）
$("#div2").click(function(){
$(this).addClass("myClass2");
}); */
//点击那个div改变那个（使用标签选择器）
$("div").click(function(){
$(this).addClass("myClass2");
});
});
</script>
<style>
.myClass1{
top:10px;
left:20px;
width:200px;
height: 100px;
margin-top:50px;
background-color: #ccc;
}
.myClass2{
top:30px;
left:50px;
width:400px;
height: 200px;
margin-top:100px;
background-color: red;
}
</style>
<body>
<p>这是一个纯粹的HTML页面</p>
<div id = "div1" class = "myClass1" >
改变div样式
</div>
<div id = "div2" class = "myClass1" >
点击后改变div样式
</div>
</body>
</html>
2.4 综合改变样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery语法综合改变样式</title>
</head>
<!-- 在HTML页面引入外部js页面 -->
<script src = "js/jquery-3.4.1.min.js" type = "text/javascript"></script>
<!-- 自定义JS脚本 -->
<script>
$(document).ready(function(){
$("p").click(function(){
$("ul").css("display","block");
$("li:first").click(function(){
/* //通过jQuery对象的add方法改变样式
$(this).addClass("myClass"); */
var $obj = $("li:first");//得到jQuery选择器
var obj = $obj.get(0);//将jquery对象转为js对象
obj.className = "myClass";//获取名字
});
});
});
</script>
<style>
.myClass{
background-color: blue;
font-size: 30px;
font-style: "黑体";
color:white;
font-weight: bold;
}
</style>
<body>
<p>新手指南</p>
<div >
<ul style = "display:none">
<li>会员注册</li>
<li>会员注册</li>
<li>会员注册</li>
<li>会员注册</li>
</ul>
</div>
</body>
</html>
- 点击新手指南，展示4个li标签，点击第一个标签改变字体的样式；
3. jQuery常用选择器
jQuery选择器类似于CSS选择器，用来选取网页中的元素；
3.1 基本选择器
基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器；
- 标签选择器：根据给定的标签名匹配元素，$(“h3”)获取并设置所有的h3标签；
- 类选择器：根据给定的class匹配元素，$(".title")获取并设置所有class为title的元素；
- ID选择器：根据给定的id匹配元素，$("#box")获取并设置id为box的元素；
- 并集选择器：用来合并元素集合，$(“h2,dt,.title”)获取并设置所有h2 、dt 标签、class为title的元素；
- 交集选择器：对元素集合根据class或id再筛，$(“h2.title”)获取并设置所有class为title的h2标签的元素；
- 全局选择器：获取所有元素，$("*")，改变所有元素的属性；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
</head>
<!-- 在HTML页面引入外部js页面 -->
<script src = "js/jquery-3.4.1.min.js" type = "text/javascript"></script>
<!-- 自定义JS脚本 -->
<script>
$(document).ready(function(){
//并集选择器
$("p,#div2").css("background-color","#ccc");
//交集选择器
$("h2.my").css("background-color","green");
});
</script>
<style>
.my{
color:red;
}
</style>
<body>
<p>这是一个纯粹的HTML页面</p>
<div id = "div1">
<h1>一级标题</h1>
<h2 class = "my">二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</div>
<div id = "div2">
<span>这是span标签<strong>加粗</strong></span>
<p>这是p标签</p>
</div>
</body>
</html>
3.2 层次选择器
层次选择器通过DOM 元素之间的层次关系来获取元素
后代选择器：用来获取元素的后代元素，$("#menu span").css(“background-color”,"#09F")，获取并设置#menu下的span标签的元素背景颜色；
子选择器：用来获取元素的子元素、$("#menu>span")，获取并设置#menu下的子元素span标签的属性；
相邻选择器：用来选取紧邻目标元素的下一个元素，$(“h2+dl”)，获取并设置紧接在h2标签元素后的dl标签元素的属性；
同辈选择器：用来选取目标元素之后的所有同辈元素，$(“h2~dl”)，获取并设置h2标签元素之后的所有同辈元素dl标签的属性；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
</head>
<!-- 在html页面引入外部js文件 -->
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<!-- 自定义的js脚本 -->
<script>
$(document).ready(function(){
//后代选择器
//$("body h2").css("background-color","blue");//body里所有的h2属性
//子选择器
//$("#div1>h2").css("background-color","blue");//div1里面的h2
//紧邻选择器
//$("h1+h2").css("background-color","yellow");//靠近他的变色
//同辈选择器
$("h1~h2").css("background-color","yellow");//获取h1之后的所有h2的元素
});
</script>
<body>
<p>这是一个纯粹的HTML页面</p>
<div id = "div1">
<h1>一级标题</h1>
<h2 class = "my">二级标题</h2>
<h2>二级标题</h2>
<h4>四级标题</h4>
<h5 class = "my">五级标题</h5>
</div>
<div id = "div2">
<span>这是span标签<strong>加粗</strong></span>
<div>
<h2>二级标题</h2>
<h3>三级标题</h3>
<span>这是span标签</span>
</div>
<p>这是p标签</p>
</div>
</body>
</html>
3.2.1 后代选择器
3.2.2 子选择器
3.2.3 紧邻选择器
3.2.4 同辈选择器
3.3 属性选择器
属性选择器通过HTML元素的属性来选择元素
根据属性名获取元素：根据是否包含某属性来选取元素，$(“h2[title]”)，改变含有title属性的h2标签的属性；
根据属性值获取元素：根据属性的值来选取元素，$("[class=value]")，改变class属性的值为value的元素的属性；
多属性条件选择：支持多属性条件复合查找元素
$("li[class][title=value]")选取包含class属性，且title属性的值中含有value的li标签元素的属性；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
</head>
<!-- 在html页面引入外部js文件 -->
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<!-- 自定义的js脚本 -->
<script>
$(document).ready(function(){
//变蓝 ,把div2下的h2 改变
$("[href='#1']").click(function(){
$("#div2 h2").css("background-color","blue");
});
//变绿 ,把div1紧邻的div改变
$("[href='#2']").click(function(){
$("#div1+div").css("background-color","green");
});
//变红 ,把div2下的span改变
$("[href='#3']").click(function(){
$("#div2 span").css("background-color","red");
});
$(":focus").click(function(){
var str = $(this).val();
alert(str);
});
});
</script>
<style>
.my{
color:green;
}
</style>
<body>
<p>这是一个纯粹的HTML页面</p>
<a href="#1">变蓝</a><br/>
<a href="#2">变绿</a><br/>
<a href="#3">变红</a><br/>
<div id = "div1">
<h1>一级标题</h1>
<h2 class = "my">二级标题</h2>
<h2>二级标题</h2>
<h4>四级标题</h4>
<h5 class = "my">五级标题</h5>
</div>
<div id = "div2">
<span>这是span标签<strong>加粗</strong></span>
<div>
<h2>二级标题</h2>
<h3>三级标题</h3>
<span>这是span标签</span>
</div>
<p>这是p标签</p>
</div>
<div>
基本过滤选择器
<input type="text" name="xx" value="focus"/>
<input type="text" name="xx" value="focus"/>
<input type="text" name="xx" value="focus"/>
</div>
</body>
</html>
3.4 过滤选择器
过滤选择器通过特定的过滤规则来筛选元素
语法特点：
- 使用“:”，例使用$(“li:first”)来选取第一个li元素
- :first 、选取第一个元素，$(“li:first”)；
- :last 、选取最后一个元素，$(“li:last”)；
- :even、选取索引为偶数的li标签元素，$(“li:even”)；
- :odd、选取索引为奇数的元素，$(“li:odd”)；
- :eq(index)、选取索引值等于index的元素，$(“li:eq(index)”)；
- :gt(index)、选取索引值大于1的元素，$(“li:gt(1)”)；
- :lt(index)、选取索引值小于1的元素，$(“li:lt(1)”)；
- :not(selector)、选取去除所有与给定选择器匹配的元素，$(“li:not(.three)”)，选取class不是three的元素；
- :header、选取所有标题元素，$(":header")；
- :focus、选取获得焦点的元素，$(":focus")；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>过滤选择器</title>
</head>
<!-- 在html页面引入外部js文件 -->
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<!-- 自定义的js脚本 -->
<style>
body{
background-color: gray;
}
</style>
<script>
$(document).ready(function(){
$("li:first").css("background-color","red");
$("li:eq(2)").css("color","blue");
$("li:last").css("color","white");
$(":header").css("background-color","white")
});
</script>
<body>
<p>这是一个 纯粹的html页面 </p>
<div >
<ul>
<li>第一个li标签</li>
<li>第二个li标签</li>
<li>第三个li标签</li>
<li>第四个li标签</li>
<li>第五个li标签</li>
<h4>这是一个h4标签</h4>
<h3>这是一个h3标签</h3>
<h5>这是一个h5标签</h5>
</ul>
</div>
</body>
</html>
3.5 可见性过滤选择器
- :visible，选取所有可见元素，$(" p:hidden").show(); 获取隐藏的p标签元素，使其显示；
- :hidden，选取所有隐藏元素，$(" p:visible").hide(); 获取显示的p标签，使其隐藏；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>可见性过滤选择器</title>
</head>
<!-- 在html页面引入外部js文件 -->
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<!-- 自定义的js脚本 -->
<style>
body{
background-color: gray;
}
</style>
<script>
$(document).ready(function(){
$("[href = '#1']").click(function(){
$("h1:visible").hide(5000);
});
$("[href = '#2']").click(function(){
$("h1:hidden").show(5000);
});
});
</script>
<body>
<p>这是一个 纯粹的html页面 </p>
<a href = "#1">隐藏</a>
<a href = "#2">显示</a>
<h1>这是一个h1标签</h1>
</body>
</html>
3.6 选择器总结
基本选择器：
标签选择器、类选择器、ID选择器
并集选择器、交集选择器、全局选择器
层次选择器：
后代选择器、子选择器
相邻选择器、同辈选择器
属性选择器：
- 属性名过滤、属性值过滤、多属性条件过滤
基本过滤选择器：
- :first 、:last 、:even、:odd
- :eq(index)、:gt(index)、:lt(index)
- :not(selector)、:header、:focus
可见性过滤选择器：
- ：visible
- ：hidden
4. jQuery动态效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态效果</title>
</head>
<!-- 在html页面引入外部js文件 -->
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<!-- 自定义的js脚本 -->
<style>
body{
background-color: gray;
}
</style>
<script>
$(document).ready(function(){
$("[href = '#1']").click(function(){
$("img").fadeOut(5000);
});
$("[href = '#2']").click(function(){
$("img").fadeIn(5000);
});
$("[href = '#3']").click(function(){
$("img").slideUp(5000);
});
$("[href = '#4']").click(function(){
$("img").slideDown(5000);
});
});
</script>
<body>
<p>这是一个 纯粹的html页面 </p>
<a href = "#1">淡入</a>
<a href = "#2">淡出</a>
<a href = "#3">收起</a>
<a href = "#4">落下</a>
<img src="img/demo_09.jpg" width = "800" height="500">
</body>
</html>
扫一扫
744
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
