jQuery
jQuery 是2006年美国约翰.莱西格创建的，是JavaScript对象和函数的封装，是目前最流行的JavaScript程序库，能够访问和操作DOM元素，控制页面样式，对页面事件进行处理，扩展新的jQuery插件，结合Ajax技术大幅提高开发效率，write less do more。
jQuery体积小，有强大的选择器，出色的DOM封装，可靠的事件处理机制，出色的浏览器兼容性，被广泛引用,作为一个单独存在的js文件，不会与其他的js文件冲突，
<script src="js/jquery-3.4.1.min.js"></script>
- js与jQuery文件的转换， js--jquery $(js名) ; jQuery--js jquery名.get(0)k
- 选择器
- 基本选择器：标签、类、ID、交集、并集选择器
| 名称 | 语法构成 | 描述 | 示例 |
| 标签选择器 | element | 根据给定的标签名匹配元素 | $("h2" )选取所有h2元素 |
| 类选择器 | .class | 根据给定的配元素 class匹 | $(" .title 为title的元素 ")选取有class |
| ID选择器 | #id | 根据给定的元素 id匹配 | $(" #title 元素 ")选取id为title的 |
| 并集选择器 | selector1,selector2,...,selectorN | 将每一个选择器匹配的元素合并后一起返回 | $("div,p,.title" )选取所有div、p和拥有class为title的元素 |
| 交集选择器 | element.class或element#id | 匹配指定class或id的某元素或元素集合 | $("h2.title")选取所有拥有class为title的h2元素 |
-
- 层次选择器
| 名称 | 语法构成 | 描述 | 示例 |
| 后代选择器 | ancestor descendant |
选取ancestor元素里的所有、descendant（后代）元素 | $("#menu span" )选取、#menu下的元素 |
| 子选择器 | parent>child | 选取 、元素parent元素下的child（子） | $(" #menu>span #menu子元素 " )选取 |
| 相邻元素选择器 | prev+next | 选取紧邻prev元素之后的next元、素 | $(" h2+dl " )选取紧邻、元素之后的同辈元素 |
| 同辈元素选择器 | prev~sibings | 选取prev元素之后的所有siblings、元素 | $(" h2~dl " )选取元素之后所有的同辈元素 |
-
- 属性选择器
| 名称 | 语法构成 | 描述 |
| [attribute] | 选取包含给定属性的元素 | $(" [href]" )选取含有href属性的元素 |
| [attribute=value] | 选取等于给定属性是某个特定值的元素 | $(" [href ='#']" )选取href属性值为“#”的元素 |
| [attribute !=value] | 选取不等于给定属性是某个特定值的元素 | $(" [href !='#']" )选取href属性值不为“#”的元素 |
| [attribute^=value] | 选取给定属性是以某些特定值开始的元素 | $(" [href^='en']" )选取href属性值以en开头的元素 |
| [attribute$=value] | 选取给定属性是以某些特定值结尾的元素 | $(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素 |
| [attribute*=value] | 选取给定属性是以包含某些值的元素 | $(" [href* ='txt']" )选取href属性值中含有txt的元素 |
| [s1] [s2] [sN] | 选取满足多个条件的复合属性的元素 | $("li[id][title=新闻]" )选取含有id和title属性为新闻的<li>元 |
-
- 过滤选择器
| 语法构成 | 描述 | 示例 |
| :first | 选取第一个元素 | $(" li:first" )选取所有元素中的第一个元素 |
| :last | 选取最后一个元素 | $(" li:last" )选取所有元素中的最后一个元素 |
| :even | 选取索引是偶数的所有元素（index从0开始） | $(" li:even" )选取索引是偶数的所有元素 |
| :odd | 选取索引是奇数的所有元素（index从0开始） | $(" li:odd" )选取索引是奇数的所有元素 |
| :eq(index) | 选取索引等于index的元素（index从0开始） | $("li:eq(1)" )选取索引等于1的元素 |
| :gt(index) | 选取索引大于index的元素（index从0开始） | $(" li:gt(1)" )选取索引大于1的元素（注：大于1，不包括1） |
| :lt(index) | 选取索引小于index的元素（index从0开始） | $(“li:lt(1)” )选取索引小于1的元素（注：小于1，不包括1） |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!--1. 基本选择器--> <h1>hello</h1> <h1>guys</h1> <h3 class="love">i love you </h3> <h3 id='love'>i love him </h3> <h1 class="love">you love me </h1> <!--2.层次选择器--> <div id='father'> <p>f1</p> 111 <p>f2</p> <div id='son'> 222 <p>s1</p> <p>s2</p> <div id='baby'>333</div> </div> <p>f3</p> <p>f4</p> </div> <!--3.属性选择器--> <a href="www.sina.com">新浪网</a> <a href="www.baidu.com" id='baidu'>百度网</a> <a href="x">x</a> <a href="www.lagou.com">拉勾网</a> <!--4.过滤选择器--> <ul> <li>l1</li> <li>l2</li> <li>l3</li> <li>l4</li> <li>l5</li> <li>l6</li> <li>l7</li> </ul> <script src="js/jquery-3.4.1.min.js"></script> <script> //1.基本选择器 //标签选择器 $("h1").css("color","red"); //类选择器 $(".love").css("color","yellow"); //id选择器 $("#love").css("color","green"); //交集选择器 $("#love,.love").css("color",'purple'); //并集选择器 $("h1.love").css("color",'pink'); //2.层次选择器 //后代选择器，father容器下的所有p标签都改变样式 $('#father p').css("color",'pink'); //子代选择器 $('#father>p').css("color",'red'); //相邻元素,下一个相邻标签 $('#son+p').css("color",'green'); //同辈元素，下面的标签 $('#son~p').css("color",'blue'); //3.属性选择器 $('[href]').css("color",'pink'); $('[href="x"]').css("color",'green'); $('a[href!="x"]').css("color",'blue'); $('[href^="www"]').css("color",'purple'); $('[href$="com"]').css("color",'orange'); $('[href*="a"]').css("color",'red'); $('a[href][id="baidu"]').css("color",'yellow'); //4.过滤选择器 $('li:first').css("color",'yellow'); $('li:last').css("color",'red'); $('li:eq(3)').css("color",'yellow'); $('li:even').css("color",'blue'); //偶数 $('li:odd').css("color",'pink'); $('li:gt(3)').css("color",'purple'); //l4以后不包括l4 $('li:lt(3)').css("color",'orange'); //l4以前不包括l4 </script> </body> </html>
- 事件
- 鼠标事件
| 方法 | 描述 | 执行时机 |
| click( ) | 触发或将函数绑定到指定元素的click事件 | 单击鼠标时 |
| mouseover( ) | 触发或将函数绑定到指定元素的mouse over事件 | 鼠标移过时 |
| mouseout( ) | 触发或将函数绑定到指定元素的mouse out事件 | 鼠标移出时 |
-
- 键盘事件
| 方法 | 描述 | 执行时机 |
| keydown( ) | 触发或将函数绑定到指定元素的keydown事件 | 按下键盘时 |
| keyup( ) | 触发或将函数绑定到指定元素的keyup事件 | 释放按键时 |
-
- 表单事件
| 方法 | 描述 | 执行时机 |
| focus( ) | 触发或将函数绑定到指定元素的focus事件 | 获得焦点 |
| blur( ) | 触发或将函数绑定到指定元素的blur事件 | 失去焦点 |
-
- 复合事件
- 鼠标悬停复合事件hover（function（），function（）），当于mouseover与mouseout事件的组合
- 连续点击复合事件toggle（）实现标签的可见和隐藏切换
- 鼠标悬停复合事件hover（function（），function（）），当于mouseover与mouseout事件的组合
- 事件的动态绑定 on(事件名称，动作)，可以绑定多种事件
- 复合事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <img src="img/1.jpg" width="200px"> <input type="text"> <h1></h1> <ul id='b' > hello <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <h2>hello</h2> <form action=""> <p>账号<input type="text" value="请输入账号..." id='a'></p> <p>密码<input type="text" ></p> </form> <img src="img/2.jpg" width="200px" id='b'> <script src="js/jquery-3.4.1.min.js"></script> <script> //鼠标事件 //1.单击鼠标时 $('img').click(function(){ $(this).attr("src",'img/2.jpg'); }) //2.鼠标移过时 $('img').mouseover(function(){ $(this).css("border","2px solid red"); }) //3.鼠标移出时 $('img').mouseout(function(){ $(this).css("border","none"); }) //键盘事件 //1.按下键盘时.keydown //$("input").keydown(function(){ // var str=$(this).val(); //$("h1").text(str); //}) //2.释放按键时 $("input").keyup(function(){ var str=$(this).val(); $("h1").text(str); }) //表单事件 //1.获得焦点 $('#a').focus(function(){ $(this).val(''); }) //2.失去焦点 $('#a').blur(function(){ $(this).val('请输入账号...'); }) //复合事件 //1.hover（function（），function（）），当于mouseover与mouseout事件的组合 $('#b').hover(function(){ $(this).css("border","2px solid red"); },function(){ $(this).css("border","none"); }) //2.连续点击复合事件toggle（）实现标签的可见和隐藏切换 $('#b').click(function(){ $('li').toggle(); }) //事件的动态绑定 //1.on(事件名称，动作) ，可以绑定多种事件 $('h2').on("click mouseover",function(){ alert('hello'); }) </script> </body> </html>
- 元素的显示和隐藏
- 带动画效果：speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒
- show( speed )：显示
- hide( speed )：隐藏
- toggle( speed )等价于show+hide : 显示的隐藏，隐藏的显示
- 带动画效果：speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒
<script> $('#btn1').click(function(){ $('div').show('fast'); }) $('#btn2').click(function(){ $('div').hide('low'); }) $('#btn3').click(function(){ $('div').toggle('1000'); }) </script>
-
- 拉伸效果
- slideDown( speed ) ：显示
- slideUp( speed )：隐藏
- slideToggle( speed )等价于slideDown+slideUp
- 拉伸效果
<script> $('#btn1').click(function(){ $('div').slideDown('fast'); }) $('#btn2').click(function(){ $('div').slideUp('2000'); }) $('#btn3').click(function(){ $('div').slideToggle('1000'); }) </script>
-
- 淡入淡出
- fadeIn( speed ) 显示
- fadeOut( speed ) 隐藏
- fadeToggle( speed ) 等价于fadeIn+fadeOut动画
- fadeTo( speed , 透明度 ) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
- 淡入淡出
<body>
<button id='btn1'>显示</button>
<button id='btn2'>隐藏</button>
<button id='btn3'>切换</button>
<button id='btn4'>透明</button>
<div><img src="img/2.jpg"></div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$('#btn1').click(function(){
$('div').fadeIn('fast');
})
$('#btn2').click(function(){
$('div').fadeOut('low');
})
$('#btn3').click(function(){
$('div').fadeToggle(2000);
})
$('#btn4').click(function(){
$('div').fadeTo(1000,0.5);
})
</script>
</body>
-
- 链：允许我们在同一个元素上在一条语句中运行多个jQuery方法，可以把动作/方法链接在一起
- 点击一次按钮，让div完成4个指定动作：背景变粉，字体变绿，收缩，拉伸
- 链：允许我们在同一个元素上在一条语句中运行多个jQuery方法，可以把动作/方法链接在一起
<body>
<button id='btn'>点我</button>
<div width=400px height='300px'><h1>hello</h1></div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
//点击一次按钮，让div完成4个指定动作：背景变粉，字体变绿，收缩，拉伸
$("#btn").click(function(){
$("div").css("background-color","pink").css("color","green").slideUp(1000).slideDown(2000);
})
</script>
</body>
- 函数
- 属性函数
- attr( "属性" ); 获得元素的属性值
- attr( "属性" , "新值" ); 修改元素的属性值
- attr( 样式参数 ) ：样式参数可以写成json格式
- val() ; 获得表单元素中的value值
- val("x") 修改表单元素中的value值
- html(); 获得元素中的内容（标签+文本）
- html("x") 修改元素中的内容（标签+文本）
- text(); 获得元素中的文本
- text("x") 修改元素中的文本
- attr( "属性" ); 获得元素的属性值
- 属性函数
<script> $("#btn").click(function () { //attr( "属性" ); 获得元素的属性值 var font=$("img").attr("src"); alert(font); //attr("属性", "新值"); 修改元素的属性值 $("img").attr("src","img/1.jpg"); //attr(样式参数) ：样式参数可以写成json格式 $("img").attr({"width":"200px","height":"200px"}); //val(); 获得表单元素中的value值 alert($('#name').val()); //val("x") 修改表单元素中的value值 $('#name').val("hello"); //html(); 获得元素中的内容（标签 + 文本） var html=$("div").html(); alert(html); //html("x") 修改元素中的内容（标签 + 文本） $("div").html("hellomoto"); //text(); 获得元素中的文本 var text=$("div").text(); alert(text); //text("x") 修改元素中的文本 $("div").html("i love you "); }) </script>
-
- CSS样式
- css( "属性"); 获得该属性值
- css( "属性","值"); 设置属性的值
- css( { json} ); 设置多个属性的值
- width(); 获得元素的宽度
- width( number ); 修改元素的宽度
- height(); 获得元素的高度
- height( number ); 修改元素的高度
- css( "属性"); 获得该属性值
- CSS样式
<body>
<button id='btn'>点我</button>
<div></div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("#btn").click(function () {
//css( "属性"); 获得该属性值
var color=$("div").css("background-color");
alert(color);
//css( "属性","值"); 设置属性的值
$("div").css("border","2px solid red");
//css( { json} ); 设置多个属性的值
$("div").css({"opacity":"0.5","border-radius":"50%"});
//width(); 获得元素的宽度
var width=$("div").width();
//width( number ); 修改元素的宽度
$("div").width("300px");
//height(); 获得元素的高度
var height=$("div").height();
alert("width:"+width+",height:"+height);
//height( number ); 修改元素的高度
$("div").height("200px");
})
</script>
-
- 类样式函数
- addClass(); 为元素添加类样式
- removeClass(); 将元素的类样式移除
- toggleClass(); 样式的切换（有->无，无->有）
- 类样式函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
div{
width:200px;
height: 200px;
background: black;
}
.a{
background-color: red;
border-radius: 50%;
}
.b{
opacity:0.5;
border: 5px green dashed;
}
</style>
<body>
<button id='btn1'>添加</button>
<button id='btn2'>移除</button>
<button id='btn3'>切换</button>
<div>
</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("#btn1").click(function(){
$("div").addClass("a b");
})
$("#btn2").click(function(){
$("div").removeClass("b");
})
$("#btn3").click(function(){
$("div").toggleClass("a b");
})
</script>
</html>
- 节点操作
- 插入
| 语法 | 功能 |
| append(content) | $(A).append(B)表示将B追加到A中，如：$("ul").append($newNode1); |
| appendTo(content) | $(A).appendTo(B)表示把A追加到B中，如： $newNode1.appendTo("ul"); |
| prepend(content) | $(A). prepend (B)表示将B前置插入到A中，如：$("ul"). prepend ($newNode1); |
| prependTo(content) | $(A). prependTo (B)表示将A前置插入到B中，如：$newNode1. prependTo ("ul"); |
| after(content) | $(A).after (B)表示将B插入到A之后，如：$("ul").after($newNode1); |
| insertAfter(content) | $(A). insertAfter (B)表示将A插入到B之后，如： $newNode1.insertAfter("ul"); |
| before(content) | $(A). before (B)表示将B插入至A之前，如： $("ul").before($newNode1); |
| insertBefore(content) | $(A). insertBefore (B)表示将A插入到B之前，如： $newNode1.insertBefore("ul"); |
-
- 替换：replaceWith()/replaceAll()
- 复制：clone()
- 删除：remove()删除整个节点/empty()清空节点内容
<body>
<input type="text">
<button id='btn'>操作</button>
<ul>
<li>双城记</li>
<li>三国演义</li>
<li>水浒传</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("#btn").click(function(){
var str=$("input").val();
var newli=$("<li>"+str+"</li>");
//添加节点
//$("ul").append(newli);//在父级节点中添加子节点，放后面
//newli.appendTo("ul");
//$("ul").prepend(newli); //在父级节点中添加子节点，放前面
//newli.prependTo("ul");
//添加同辈节点
//$("li:last").after(newli); //在同级节点后
//newli.insertAfter("li:last");
//$("li:first").before(newli); //在同级节点前
//newli.insertBefore("li:first");
//替换节点
//$("li:eq(1)").replaceWith(newli);
//newli.replaceAll("li:eq(1)");
//复制节点
//$("li:eq(2)").clone().appendTo("ul");
//删除节点
//$("li:last").remove(); //删除节点
$("li:lt(2)").empty(); //只清除内容
})
</script>
</body>
- 遍历
- 祖先元素：parent() 返回被选元素的直接父元素，仅仅是上一级；parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分
- 同辈元素：next() 获取紧邻匹配元素之后的元素，prev() 获取紧邻匹配元素之前的元素，siblings( [selector] ) 获取位于匹配元素前面和后面的所有同辈元素
- 后代元素：children( [selector] ) 方法返回被选元素的所有直接子元素； find( 选择器 ) 方法返回被选元素的后代元素，一路向下直到最后一个后代。
- 过滤： first()：过滤第一个元素；last()：过滤最后一个元素；eq(index)：过滤到下标为index的元素；not()：除了什么之外的元素；is()：返回布尔，判断是不是这种元素
- 祖先元素：parent() 返回被选元素的直接父元素，仅仅是上一级；parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分
<body>
<button>测试</button>
<div id="father">
<p>p1</p>
<p>p2</p>
<div id='son'>
<p>s1</p>
<p>s2</p>
<div id='child'>
<p id='pc1'>c1</p>
</div>
<p>s3</p>
<p>s4</p>
</div>
<div>hello</div>
<p>p3</p>
<p>p4</p>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("button").click(function () {
//祖先元素
//parent() 返回被选元素的直接父元素，仅仅是上一级；
//alert($("#child").parent().html());
//parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分
//alert($("#child").parents("#father").html());
//同辈元素
//next() 获取紧邻匹配元素之后的元素
//alert($("#son").next().html());
//prev() 获取紧邻匹配元素之前的元素
//alert($("#son").prev().html());
//siblings( [selector] ) 获取位于匹配元素前面和后面的所有同辈元素
//alert($("#son").siblings().text());
//alert($("#son").siblings("p").text());
//后代元素
//children( [selector] ) 方法返回被选元素的所有直接子元素
//alert($("#son").children().text());
//alert($("#son").children("p").text());
//find( 选择器 ) 方法返回被选元素的后代元素，一路向下直到最后一个后代。
//alert($("#son").find("#child").text()); //必须加选择器
//过滤
//first()：过滤第一个元素
alert($("p").first().text());
//last()：过滤最后一个元素；
alert($("p").last().text());
//eq(index)：过滤到下标为index的元素；
alert($("p").eq(3).text());
//not()：除了什么之外的元素；
alert($("p").not("p:eq(3)").text());
//is()：返回布尔，判断是不是这种元素
alert($("#pc1").parent().is("#son")); //false
})
</script>
</body>
手风琴特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
dd{
display: none;
}
</style>
<body>
<ul>
<li>
<dl>
<dt>求职</dt>
<dd>1.简历</dd>
<dd>2.面试</dd>
<dd>3.入职</dd>
</dl>
</li>
<li>
<dl>
<dt>教育</dt>
<dd>1.做作业</dd>
<dd>2.培训班</dd>
<dd>3.看视频</dd>
</dl>
</li>
<li>
<dl>
<dt>创业</dt>
<dd>1.个体户</dd>
<dd>2.互联网</dd>
<dd>3.农产品</dd>
</dl>
</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("dt").click(function(){
$("dd").not( $(this).siblings()).slideUp(500);
//同辈兄弟进行切换
$(this).siblings().slideToggle(500);
})
</script>
</body>
</html>
购物车结算
$(".sub").click(function () {
var num = $(this).next().text();
num--;
if (num == 0) {
if (confirm("是否删除该栏")) {
$(this).parents("tr").remove();
}}
else {
$(this).next().text(num);
var danjia = $(this).parent().prev().text();
var zong = danjia * num;
$(this).parent().next().text(zong);
}
Total();
})
$(".add").click(function () {
var num = $(this).prev().text();
num++;
$(this).prev().text(num);
var danjia = $(this).parent().prev().text();
var zong = danjia * num;
$(this).parent().next().text(zong);
Total();
})
function Total(){
//var arr=$("tr:not(tr:first)").find("td:last");
//for (var i=0;i<arr.length;i++){
//sum+=Number(arr[i].innerHTML);
//}
var sum=0;
$("tr:not(tr:first)").find("td:last").each(function(){
sum+=Number($(this).text());
})
$("b").text(sum);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
table {
width: 400px;
text-align: center;
}
.sub,.add {
border: 1px solid #999999;
display: inline-block;
width: 20px;
color: gray;
text-align: center;
text-decoration: none;
}
</style>
<body>
<table cellspacing='0' border='1' align='center'>
<tr>
<td>商品编号</td>
<td>名称</td>
<td>单价</td>
<td>数量</td>
<td>总价</td>
</tr>
<tr>
<td>1001</td>
<td>炸香肠</td>
<td>3</td>
<td>
<a href="#" class="sub">-</a>
<span>1</span>
<a href="#" class='add'>+</a>
</td>
<td>3</td>
</tr>
<tr>
<td>1002</td>
<td>王八</td>
<td>8.8</td>
<td>
<a href="#" class="sub">-</a>
<span>1</span>
<a href="#" class='add'>+</a>
</td>
<td>8.8</td>
</tr>
<tr>
<td>1003</td>
<td>恐龙</td>
<td>1000</td>
<td>
<a href="#" class="sub">-</a>
<span>1</span>
<a href="#" class='add'>+</a>
</td>
<td>1000</td>
</tr>
</table>
<p style="width:900px; text-align:right">总价： <b style="color:red">xxx</b> <button>提交订单</button></p>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/13 oper.js"></script>
</html>
find( 选择器 ) 方法返回被选元素的后代元素，一路向下直到最后一个后代。
浙公网安备 33010602011771号