jQuery
一、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>
-