jQuery简介
What is jQuery?
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
jQuery
- jQuery由美国人John Resig于2006年创建
- jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
- 它的设计思想是write less.do more
初识jQuery
实现隔行变色效果，只需要一句关键代码
$("tr:even").css("backgroud-color","#e8f0f2");
jQuery能做什么
- 访问和操作DOM元素
- 控制页面样式
- 对页面事件进行处理
- 扩展新的jQuery插件
- 与Ajax技术完美结合
jQuery的优势
- 体积小，压缩后只有100KB左右
- 强大的选择器
- 出色的DOM封装
- 可靠的事件处理机制
- 出色的浏览器兼容型
- 使用隐式迭代简化程序
- 丰富的插件支持
获取jQuery
进入jQuery官网：https://jquery.com
jQuery库分开发版和发布版
jQuery基础语法
在页面中引入jQuery
<script src="js/jQuery-3.6.1.js"></script>
使用jQuery获取元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jQuery-3.6.1.js"></script>
</head>
<body>
<button class="an">按钮1</button>
<button class="niu">按钮2简写</button>
</body>
<script>
// $(document).ready(function(){
// var buttonEle = $('.an');
// console.log(buttonEle);
// var buttonEles = $('.niu');
// console.log(buttonEles);
// })
//简写
$(function(){
var buttonEle = $('.an');
console.log(buttonEle);
var buttonEles = $('.niu');
console.log(buttonEles);
})
</script>
</html>
$(document).ready()
$(document).ready()与window.onload类似，但也有区别
jQuery选择器
- jQuery语法
- jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作
- 基础语法是$(selector).action()
- 基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器
标签选择器
标签选择器根据给定的标签名匹配元素
类选择器
类选择器根据给定的class匹配元素
ID选择器
ID选择器根据给定的id匹配元素
并集选择器
并集选择器用来合并元素集合
全局选择器
全局选择器可以获取所有的元素
jQuery层次选择器
层次选择器通过DOM元素之间的层次关系来获取元素
后代选择器
后代选择器用来获取元素的后代元素
子选择器
子选择器用来获取元素的子元素
相邻选择器
相邻选择器用来选取紧邻目标元素的下一个元素
同辈选择器
同辈选择器用来选取目标元素之后的所有同辈元素
jQuery属性选择器
属性选择器通过HTML元素的属性来选择元素
根据属性名获取元素
属性选择器可以根据是否包含某属性来选取元素
- a标签带有class属性
根据属性值获取元素
属性选择器可以根据属性的值来选取元素
- class属性值为hot
$("#news a[class='hot']").css("background","#c9cbcb");
- class属性值不等于hot
$("#news a[class!='hot']").css("background","#c9cbcb");
根据属性值包含特定的值获取元素
属性选择器可以指定属性值以指定值开头的元素
- a标签href属性值以www开头
$("#news a[href^='www']").css("background","#c9cbcb");
- a标签href属性值以html结尾
$("#news a[href$='html']").css("background","#c9cbcb");
属性选择器可以指定属性值包含指定值的元素
- a标签href属性值包含"k2"的元素
$("#news a[href*='k2']").css("background","#c9cbcb");
过滤选择器
- 通过特定的过滤规则来筛选出所需的元素
- 主要分类
- 基本过滤选择器
- 可见性过滤选择器
- 表单对象过滤选择器
- 内容过滤选择器、子元素过滤选择器…
基本过滤选择器
可见性过滤选择器
- 通过元素显示状态来选取元素
$(“p:hidden”).show();
$(“p:visible”).hide();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jQuery-3.6.1.js"></script>
<style>
h2{
display: none;
}
</style>
</head>
<body>
<p>段落标签</p>
<h2>标题标签</h2>
<button id="test">隐藏段落标签</button>
<button id="demo">显示标题标签</button>
</body>
<script>
$(function(){
//获取id为test的button按钮，添加点击事件
$('#test').click(function(){
//选取可见的p标签,并将其隐藏
$('p:visible').hide();
});
//获取id为demo的button，并添加点击事件
$('#demo').click(function(){
$('h2:hidden').show();
});
});
</script>
</html>
jQuery选择器注意事项
- 特殊符号的转义
- 获取这两个元素的选择器
- 选择器中的空格
- 选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果
- 选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果