一、jQuery能做什么
1) HTML 元素选取
2) HTML 元素操作
3) CSS 操作
4) HTML 事件函数
5) JavaScript 特效和动画
6) HTML DOM 遍历和修改
7) AJAX
8) Utilities
提示： 除此之外，Jquery还提供了大量的插件
二、jQuery的优势
1) 体积小，压缩后只有100KB左右
2) 强大的选择器
3) 出色的DOM封装
4) 可靠的事件处理机制
5) 出色的浏览器兼容性
6) 使用隐式迭代简化编程
7) 丰富的插件支持
1、获取jQuery
jQuery公式 : $(selector).action()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 在线cdn -->
<!-- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script> -->
<script src="js/jquery-3.5.1.min.js"></script>
<!-- jQuery公式 : $(selector).action() -->
</head>
<body>
<a href="" id="test_jquery">点我</a>
<script>
document.getElementById('id');
//选择器就是css的选择器
$('#test_jquery').click(function(){
alert("hello，jQuery");
});
</script>
</body>
</html>2、选择器
基本选择器包括标签选择器、类选择器、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的元素 |
| 全局选择器 | * | 匹配所有元素 | $("*" )选取所有元素 |
-
代码实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-1.12.4.js"></script> </head> <body> <section id="book"> <div class="imgLeft"><img src="img/store.jpg" alt="岛上书店"></div> <div class="textRight"> <h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1> <p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p> <p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译</p> <div class="price"> <div id="jdPrice">京东价： <span>￥24.10</span> [6.9折] <p>[定价：<span>￥35.00</span>]</p> (降价通知)</div> <p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p> <dl> <dt>以下促销可在购物车任选其一</dt> <dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd> <dd><span>满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd> </dl> <p id="ticket">领 券：<span>105-6</s pan> <span>200-16</span></p> </div> </div> </section> <script> $(function(){ $("dt").click(function(){ $("dd").css("display","none"); }) //获取并设置<h1>字体颜色位蓝色 $("h1").css("color","aqua") //活得并设置ID位author的元素字体颜色 $("#author").css("color","bisque") //获取并设置dt,dd,class为intro的元素的字体颜色 $(".intro,dt,dd").css("color","chartreuse") //设置所有的元素字体加粗显示 $("*").css("font-weight","bold"); }); </script> </body> </html>//id选择器 $('#id').click(function(){}); //类选择器 $('.class').click(function(){}); //标签选择器 $('p').click(function(){}); //全局选择器 $('*').click(function(){}); -
层次选择器
层次选择器通过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 lang="en"> <meta charset="UTF-8"> <title>图书简介</title> <link rel="stylesheet" href="css/bookStyle.css"> </head> <body> <section id="book"> <div class="imgLeft"><img src="img/store.jpg" alt="岛上书店"></div> <div class="textRight"> <h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1> <p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p> <p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译</p> <div class="price"> <div id="jdPrice">京东价： <span>￥24.10</span> [6.9折] <p>[定价：<span>￥35.00</span>]</p> (降价通知)</div> <p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p> <dl> <dt>以下促销可在购物车任选其一</dt> <dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd> <dd><span>满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd> </dl> <p id="ticket">领 券：<span>105-6</span> <span>200-16</span></p> </div> </div> </section> <script src="js/jquery-1.12.4.js"></script> <script> $(function(){ //后代选择器 // $(".textRight p").css("color","red"); //子选择器 // $(".textRight>p").css("color","red"); //相邻元素选择器 // text-decoration文本修饰-underline给元素加上下划线 // $("h1+p").css("text-decoration","underline"); //同辈元素选择器-与h1同辈的所有元素加上下划线 // $("h1~p").css("text-decoration","underline"); /* 1) “自营图书几十万……”一行字体颜色为红色 2) 京东价“￥24.10”字体为24px、红色加粗显示 3) “[定价：￥35.00]”字体颜色为#cccccc，价格中有中划线 4) <dl>标签中的字体颜色均为红色 5) 单击“以下促销….”显示隐藏的内容，此部分字体颜色均为红色 6) “加购价”、“满减”、“105-5”、“200-16”字体颜色为白色，背景颜色为红色，上下内边距为1px，左右内边距为5px，外右边距为5px */ $(".intro").css("color","red"); $("#jdPrice>span").css({"font-size":"24px","font-weight":"bold","color":"red"}) $("#jdPrice p span").css({"color":"#cccccc","text-decoration":"line-through"}) $("dl").css("color","#ff0000"); $("dt").click(function(){ $("dd").css("display","block"); }); }); </script> </body> </html>
3、事件
-
代码实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-3.5.1.min.js"></script> <style> #divMove{ width: 500px; height: 500px; border: 1px solid red; } </style> </head> <body> <!-- 要求：获取鼠标当前的一个坐标--> mouse:<span id="mouseMove"></span> <div id="divMove"> 在这里移动鼠标试试 </div> <script> //当前页面元素加载完毕之后，相应事件 $(function() { $('#divMove').mousemove(function (e) { $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY) }) }); </script> </body> </html>