目录
jQuery简介
jQuery由美国人John Resig于2006年创建
jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
它的设计思想是write less,do more
学会jQuery能够： 制作网页特效、实现表单验证、实现酷炫动画
jQuery能做什么
访问和操作DOM元素
控制页面样式
对页面事件进行处理
扩展新的jQuery插件
与Ajax技术完美结合
jQuery的优势
体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持
获取jQuery
进入jQuery官网：http://jquery.com
jQuery库文件
jQuery库分开发版和发布版
| 名称 | 大小 | 说 明 |
| jquery-3.版本号.js（开发版） | 约286KB | 完整无压缩版本，主要用于测试、学习和开发 |
| jquery-3.版本号.min.js（发布版） | 约94.8KB | 经过工具压缩或经过服务器开启Gzip压缩， 主要应用于发布的产品和项目 |
在页面中引入jQuery
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
jQuery的使用方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.1.min.js"></script>
</head>
<body>
</body>
<script>
$(document).ready(function(){
//编写JavaScript代码或者jQuery代码
});
//上面代码的简写方式
$(function(){
//编写JavaScript代码或者jQuery代码
});
</script>
</html>$(document).ready()
$(document).ready()与window.onload类似，但也有区别
| window.onload | $(document).ready() | |
| 执行时机 | 必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行 | 网页中所有DOM文档结构绘制完毕后即刻执行， 可能与DOM元素关联的内容（ 图片、flash、视频等）并没有加载完 |
| 编写个数 | 同一页面不能同时编写多个 | 同一页面能同时编写多个 |
| 简化写法 | 无 | $(function(){ //执行代码 }) ; |
jQuery选择器
jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作
基础语法是：$(selector).action()
jQuery基本选择器
基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器
| 名称 | 语法构成 | 描述 | 示例 |
| 标签选择器 | element | 根据给定的标签名匹配元素 | $("h2" )选取所有h2元素 |
| 类选择器 | .class | 根据给定的class匹配元素 | $(" .title")选取所有class 为title的元素 |
| ID选择器 | #id | 根据给定的id匹配元素 | $(" #title")选取id为title 的元素 |
| 并集选择器 | selector1,selector2,...,selectorN | 将每一个选择器匹配的元素合并后一起返回 | $("div,p,.title" )选取所有div、 p和拥有class为title的元素 |
| 全局选择器 | * | 匹配所有元素 | $("*" )选取所有元素 |
标签选择器根据给定的标签名匹配元素
类选择器根据给定的class匹配元素
ID选择器根据给定的id匹配元素
并集选择器用来合并元素集合
全局选择器可以获取所有元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.1.min.js"></script>
</head>
<body>
<h2>我是2级标题标签</h2>
<h3 class="demo">我是3级标题标签</h3>
<ul>
<li id="test">列表<项第1项/li>
<li>列表<项第2项/li>
<li class="demo">列表<项第3项/li>
<li>列表<项第4项/li>
<li>列表<项第5项/li>
</ul>
<p class="demo">我是段落标签</p>
</body>
<script>
$(function(){
//jQuery的语法： $(选择器).函数()
//标签选择器：通过标签名称获取元素，获取的元素可能有一个或者多个，都存储在一个类似数组的集合中
var h2Eles=$('h2');
console.log(h2Eles);
var liEles = $('li');
console.log(liEles);
//class选择器:class属性可以被不同的标签重复使用，所以获取的元素可能是一个或者多个，存储在类似数组的集合中
// $('.demo').css('color','#f00');
//id选择器
// $('#test').css('color','#f00');
//并集选择器:同时选择多个不同的元素
// $('li#test,p.demo').css('color','#f00');
//全局选择器：选择所有的元素
$('*').css('color','#f00');
});
</script>
</html>jQuery层次选择器
层次选择器通过DOM 元素之间的层次关系来获取元素
| 名称 | 语法构成 | 描述 | 示例 |
| 后代选择器 | ancestor descendant | 选取ancestor元素里的所有descendant（后代）元素 | $("#menu span" )选取#menu 下的<span>元素 |
| 子选择器 | parent>child | 选取parent元素下的child（子）元素 | $(" #menu>span" )选取#menu 的子元素<span> |
| 相邻元素选择器 | prev+next | 选取紧邻prev元素之后的next元素 | $(" h2+dl " )选取紧邻<h2>元素 之后的同辈元素<dl> |
| 同辈元素选择器 | prev~sibings | 选取prev元素之后的所有siblings元素 | $(" h2~dl " )选取<h2>元素 之后所有的同辈元素<dl> |
后代选择器用来获取元素的后代元素
子选择器用来获取元素的子元素
相邻选择器用来选取紧邻目标元素的下一个元素
同辈选择器用来选取目标元素之后的所有同辈元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.1.min.js"></script>
<style>
ul,p{
border: 1px solid #f00;
}
</style>
</head>
<body>
<p>0</p>
<p class="demo">1</p>
<p>2</p>
<ul>
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
</ul>
<p>3</p>
</body>
<script>
$(function(){
//后代选择器 E F
// $('body p').css('background-color','#ccc');
// $('ul p').css('background-color','#ccc');
//子代选择器 E>F
// $('body>p').css('background-color','#ccc');
//相邻兄弟选择器 E+F :选择紧跟在E元素后面的那一个兄弟元素
// $('.demo+p').css('background-color','#ccc');
//通用兄弟选择器E~F：选择跟在E后面的所有兄弟元素F
$('.demo~p').css('background-color','#ccc');
});
</script>
</html>jQuery属性选择器
属性选择器通过HTML元素的属性来选择元素
| 语法构成 | 描述 | 示例 |
| [attribute^=value] | 选取给定属性是以某些特定值开始的元素 | $(" [href^='en']" )选取href属性值 以en开头的元素 |
| [attribute$=value] | 选取给定属性是以某些特定值结尾的元素 | $(" [href$='.jpg']" )选取href属性值 以.jpg结尾的元素 |
| [attribute*=value] | 选取给定属性是以包含某些值的元素 | $(" [href* ='txt']" )选取href属性值中 含有txt的元素 |
根据属性值包含特定的值获取元素：
属性选择器可以根据是否包含某属性来选取元素
属性选择器可以根据属性的值来选取元素
属性选择器可以指定选取不等于属性是某个特定值的元素
属性选择器可以指定属性值以指定值开头的元素
属性选择器可以指定属性值以指定值结尾的元素
属性选择器可以指定属性值包含指定值的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*此段代码只是让结构更美观，后续会详细讲解*/
.demo a {
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
text-align: center;
background: #aac;
color: blue;
font: bold 20px/50px Arial;
margin-right: 5px;
text-decoration: none;
margin: 5px;
}
</style>
<script src="js/jquery-3.6.1.min.js"></script>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="inks active item" title="test website" target="_blank">2</a>
<a href="httpsites/file/test.html" class="links item">3</a>
<a href="sites/file/test.png" class="links item"> 4</a>
<a href="sites/file/image.jpghttp" class="links item">5</a>
<a href="efc" class="inks itemlinks" title="website link">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="link item">8</a>
<a href="abcdef.doc" class="links item">9</a>
<a href="abd.doc" class="itemlinksitem last" id="last">10</a>
</p>
</body>
<script>
$(document).ready(function(){
//选择具有id属性的a标签
//$('a[id]').css('background-color','#f00');
//选择具有id属性并且id属性值为first的a标签
// $('a[id=first]').css('background-color','#f00');
//选择具有class属性并且class属性值是以inks开头的a标签
// $('a[class^=inks]').css('background-color','#f00');
//选择具有href属性并且href属性值是以pdf结尾的a标签
// $('a[href$=pdf]').css('background-color','#f00');
//选择具有class属性并且class属性值中包含links的a标签
// $('a[class*=links]').css('background-color','#f00');
//选择具有class属性并且属性值不是links item的a标签
$('a[class!="links item"]').css('background-color','#f00');
});
</script>
</html>过滤选择器
通过特定的过滤规则来筛选出所需的元素
主要分类
基本过滤选择器
可见性过滤选择器
表单对象过滤选择器
内容过滤选择器、子元素过滤选择器……
基本过滤选择器
| 语法 | 描述 | 示例 |
| :first | 选取第一个元素 | $(" li:first" )选取所有<li>元素中的 第一个<li>元素 |
| :last | 选取最后一个元素 | $(" li:last" )选取所有<li>元素中的 最后一个<li>元素 |
| :not(selector) | 选取去除所有与给定选择器匹配的元素 | $(" li:not(.three)" )选取class 不是three的元素 |
| :even | 选取索引是偶数的所有元素（index从0开始） | $(" li:even" )选取索引是偶数的 所有<li>元素 |
| :odd | 选取索引是奇数的所有元素（index从0开始） | $(" li:odd" )选取索引是奇数的 所有<li>元素 |
| 语法 | 描述 | 示例 |
| :eq(index) | 选取索引等于index的元素（index从0开始） | $("li:eq(1)" )选取索引等于1的<li>元素 |
| :gt(index) | 选取索引大于index的元素（index从0开始） | $(" li:gt(1)" )选取索引大于1的<li>元素 （注：大于1，不包括1） |
| :lt(index) | 选取索引小于index的元素（index从0开始） | $(“li:lt(1)” )选取索引小于1的<li>元素 （注：小于1，不包括1） |
| :header | 选取所有标题元素，如h1~h6 | $(":header" )选取网页中所有标题元素 |
| :focus | 选取当前获取焦点的元素 | $(":focus" )选取当前获取焦点的元素 |
| :animated | 选择所有动画 | $(":animated" )选取当前所有动画元素 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.1.min.js"></script>
</head>
<body>
<ul>
<li>大湖名城创新高地1</li>
<li>大湖名城创新高地2</li>
<li>大湖名城创新高地3</li>
<li>大湖名城创新高地4</li>
<li>大湖名城创新高地5</li>
<li>大湖名城创新高地6</li>
<li>大湖名城创新高地7</li>
<li>大湖名城创新高地8</li>
<li>大湖名城创新高地9</li>
<li>大湖名城创新高地10</li>
</ul>
</body>
<script>
$(document).ready(function(){
//获取第3个li元素并设置样式
$('li:eq(2)').css('color','#f00');
//获取最后的5个li元素，并设置文本颜色为#00f
// var liEles = document.querySelectorAll('li');
// for(var i = 0;i<liEles.length;i++){
// if(i>4){
// liEles[i].style.color = '#00f';
// }
// }
$('li:gt(4)').css('color','#00f');
//获取前面2个里元素，并设置文本颜色为#ff0
$('li:lt(2)').css('color','#ff0');
//获取下标值为偶数的li元素，设置其背景色为#ccc
$('li:even').css('background-color','#ccc');
});
</script>
</html>可见性过滤选择器
通过元素显示状态来选取元素
| 语法 | 描述 | 示例 |
| :visible | 选取所有可见的元素 | $(":visible" )选取所有可见的元素 |
| :hidden | 选取所有隐藏的元素 | $(":hidden" ) 选取所有隐藏的元素 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.6.1.min.js"></script>
</head>
<body>
<p>我是段落标签</p>
<button id="btn">隐藏段落元素</button>
<button id="btn2">显示隐藏的段落元素</button>
</body>
<script type="text/javascript">
$(function(){
//获取button元素，并添加点击事件
$('#btn').click(function(){
//获取p标签，并将其隐藏
$('p:visible').hide();
});
//获取第二个button元素，并添加点击事件
$('#btn2').click(function(){
$('p:hidden').show();
});
});
</script>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
