1.jQuery如是说
jQuery由美国人John Resig（詹姆斯·卡勒格）于2006年建立jQuery是现阶段最盛行的JavaScript程式库，它是对JavaScript第一类和表达式的PCB它的结构设计价值观是write less,do more同时实现昂蒂变黑效用，JavaScript要循环式加推论，而jQuery只需句关键性标识符
$(“tr:even”).css(“background-color”,“#ccc”);
1.1 jQuery能做甚么?
出访和操作方式DOM原素掌控网页式样对网页该事件展开处置扩充捷伊jQuery应用程序与Ajax控制技术轻松结合jQuery能做的JavaScript也都能做，但采用jQuery能大幅提升合作开发工作效率
只不过，jQuery和JavaScript的间亲密关系，能认知为“典故”和“文言文”间的亲密关系。典故是对文言文的度填充，而jQuery也是对JavaScript的度填充库
1.2 jQuery的竞争优势
重量轻，填充后多于100KB以内强悍的示例出众的DOMPCB可信的阿提斯鲁夫尔谷监督机制出众的应用程序相容性1.3 jQuery浏览
步入jQuery官网：http://jQuery.com
他们采用填充版就能。表面积更小，文本早已透过演算法展开填充， 不能污染环境内部空间！
而合作开发版就特别针对修正jQuery源标识符的专精前端合作开发者的。
2 jQuery的采用
jQuery作为一个单独存在的js文件，并不能与其他的js文件发生冲突
在网页中采用传统引入js文件的方式引入即可。
<script src=“js/jquery-3.4.1.min.js”></script>
2.1 基本的语法如是说
<script>
$(selector).action();
</script>
说明：
工厂表达式 $() ：将DOM第一类转化为jQuery第一类
css一致 ）
方法 action()：jQuery中提供的方法，其中包括绑定阿提斯鲁夫尔谷的方法“$”等同于“ jQuery ”<body>
<p>hello</p>
</body>
<script src=“js/jquery-3.4.1.min.js”></script>
<script>
alert( $(“p”).text() );
</script>
2.2 jQuery第一类与DOM第一类
DOM第一类和jQuery对象分别拥有一套独立的方法，不能混用
$(“#title”).html();
// 等同于
document.getELementById(“title”).innerHTML;
想混用，要转换
DOM第一类转jQuery第一类var a = document.getElementById(“name”); // a是DOM第一类
var b = $(a); // b是jQuery第一类
jQuery第一类转DOM第一类var a = $(“#name”); // a是jQuery第一类
var b = jqObject.get(0); // b是DOM第一类
2.3 示例
2.3.1 基本示例
基本示例包括标签示例、类示例、ID示例、并集示例、交集示例和全局示例
<p>中国</p>
<p>武汉</p>
<p class=“jy”>加油</p>
<p id=“wan”>祖国万岁</p>
<h3 class=“jy”>祖国万岁</h3>
<script src=“js/jquery-3.4.1.min.js”></script>
<script>
//$(“p”).css(“color”,”red”); // 标签示例，获得所有的p
//$(“.jy”).css(“color”,”red”); //类示例 //$(“#wan”).css(“color”,”red”); //ID示例,更具备唯一性
//$(“.jy,#wan”).css(“color”,”red”); // 并集示例，.jy和#wan $(“h3.jy”).css(“color”,“red”); // 交集示例，既是h3标签，又拥有.jy的原素
</script>
2.3.2 层次示例
<h3>000</h3>
<div id=“x”>
111
<p>p1</p>
<div>
<p>p2</p>
</div>
</div>
<h3>222</h3>
<h3>333</h3>
<script src=“js/jquery-3.4.1.min.js”></script>
<script>
//$(“#x p”).css(“color”,”red”); // 后代示例，忽略层级
//$(“#x>p”).css(“color”,”red”); // 子代示例，只负责子级//$(“#x+h3”).css(“color”,”red”); // 相邻原素示例，下一个紧邻的兄弟h3
$(“#x~h3”).css(“color”,“red”); // 同辈原素示例，下面的所有兄弟h3
</script>
2.3.3 属性示例
<a href=“www.lagou.com”>拉勾招聘网</a>
<a href=“www.sina.com.cn”>新浪网</a>
<a href=“http://www.163.com”>网易</a>
<p href=“x”>哈哈1</p>
<p href=“x” title=“x”>哈哈2</p>
<script src=“js/jquery-3.4.1.min.js”></script>
<script>
//$(“[href]”).css(“color”,”red”); // 选取拥有href属性的原素
//$(“[href=x]”).css(“color”,”red”); // 选取拥有href=x的原素 //$(“a[href!=x]”).css(“color”,”red”); // 选取a标签中href不等于x的原素 //$(“[href^=www]”).css(“color”,”red”); // 选取href属性以www开头的原素
//$(“[href$=com]”).css(“color”,”red”); // 选取href属性以com结尾的原素 //$(“[href*=a]”).css(“color”,”red”); // 选取href属性包含a的原素
$(“p[href][title=x]”).css(“color”,“red”); // 选取拥有href属性和title属性，并且title=x的p原素
</script>
2.3.4 过滤示例
<h2 id=“h2#x”>修仙小说</h2>
<ul>
<li>凡人修仙传</li>
<li>遮天</li>
<li>神墓</li>
<li>残袍</li>
<li>大主宰</li>
</ul>
<script src=“js/jquery-3.4.1.min.js”></script>
<script>
//$(“li:first”).css(“color”,”red”); // 第一个li
//$(“li:last”).css(“color”,”red”); // 最后一个li //$(“li:even”).css(“color”,”red”); // 偶数行的li
//$(“li:odd”).css(“color”,”red”); // 奇数行的li
//$(“li:eq(2)”).css(“color”,”red”); // 下标为2的li //$(“li:gt(1)”).css(“color”,”red”); // 下标大于1的li
//$(“li:lt(2)”).css(“color”,”red”); // 下标小于2的li $(“#h2\\#x”).css(“color”,“red”); // 采用转义符
</script>
2.4 该事件
2.4.1 鼠标该事件
鼠标该事件是当用户在文档上移动或单击鼠标时而产生的该事件，常用鼠标该事件有：
<img src=“img/1.jpg” width=“300”>
<img src=“img/1.jpg” width=“300”>
<img src=“img/1.jpg” width=“300”>
<script src=“js/jquery-3.4.1.min.js”></script>
<script>
$(“img”).click( function(){
//点击一下，换照片
$(this).attr( “src”,“img/2.jpg” ); //this就是该事件触发的源头
} );
$(“img”).mouseover( function(){ //移动到原素上 $(this).css( “border”,“2px solid red” );
} );
$(“img”).mouseout( function(){ //离开原素
$(this).css( “border”,“2px solid white” );
} );
</script>
2.4.2 键盘该事件
用户每次按下或者释放键盘上的键时都会产生该事件，常用键盘该事件有：
<input>
<h3></h3>
<script src=“js/jquery-3.4.1.min.js”></script>
<script>
$(“input”).keyup( function(){
var str = $(this).val(); $(“h3”).text( str ); // 将h3原素中的文本文本更改为str
} );
</script>
2.4.3 表单该事件
当原素获得焦点时，会触发focus该事件，失去焦点时，会触发blur该事件，详见下表：
<form action=“”>
<p>帐号: <input id=“a” value=“请输入帐号…”> </p>
<p>电话: <input id=“b”> </p>
</form>
<script src=“js/jquery-3.4.1.min.js”></script>
<script>
//获得焦点（激活/点击一下）
$(“#a”).focus(function(){
$(this).val(“”);
});
//失去焦点（未激活/未点击） $(“#a”).blur(function(){
$(this).val(“请输入帐号…”);
});
</script>
2.4.4 鼠标悬停复合该事件
hover()方法相当于mouseover与mouseout该事件的组合 <img src=“img/3.jpg” width=“400”>
<script src=“js/jquery-3.4.1.min.js”></script>
<script>
$(“img”).hover(
function(){
$(this).css(“border”,“5px solid red”);
},
function(){
$(this).css(“border”,“5px solid white”);
}
);
</script>
2.4.5 连续点击复合该事件
toggle()能模拟鼠标的连续单击该事件<h2>修仙小说</h2>
<ul>
<li>凡人修仙传</li>
<li>遮天</li>
<li>神墓</li>
<li>残袍</li>
<li>大主宰</li>
</ul>
<script src=“js/jquery-3.4.1.min.js”></script>
<script>
$(“h2”).click(function(){
$(“ul”).toggle(); // 连续点击，ul的可见和隐藏展开切换
});
</script>
2.4.6 该事件的动态绑定
对dom原素绑定该事件的另一种写法绑定一个该事件$(“.del”).on(click, function() { alert(hello); })
绑定多个该事件$(“.del”).on(click mouseover, function() { alert(hello); })
2.5 原素的隐藏和显示
2.5.1 改变原素的宽和高（带动画效用）
show( speed )：显示hide( speed )：隐藏toggle( speed )等价于show+hide : 显示的隐藏，隐藏的显示可选的 speed 参数规定隐藏/显示的速度，能取以下值：”slow”、”fast” 或毫秒
<style>
div{
width: 200px;
height: 200px;
background-color: black;
}
</style>
<body>
<button id=“btn1”>显示</button>
<button id=“btn2”>隐藏</button>
<button id=“btn3”>切换</button>
<div></div>
<script src=“js/jquery-3.4.1.min.js”></script>
<script>
$(“#btn2”).click(function(){
//fast:快速的
//slow:缓慢的
//毫秒：自定义
$(“div”).hide(2000);
});
$(“#btn1”).click(function(){
$(“div”).show(slow);
});
$(“#btn3”).click(function(){
$(“div”).toggle(1000);
});
</script>
</body>
2.5.2 改变原素的高（拉伸效用）
slideDown( speed ) ：显示slideUp( speed )：隐藏slideToggle( speed )等价于slideDown+slideUp可选的 speed 参数规定隐藏/显示的速度，能取以下值：”slow”、”fast” 或毫秒
<script>
$(“#btn2”).click(function(){
$(“div”).slideUp(1000); //向上收缩
});
$(“#btn1”).click(function(){
$(“div”).slideDown(1000); //向下伸展
});
$(“#btn3”).click(function(){
$(“div”).slideToggle(1000); //切换
});
</script>
2.5.3 不改变原素的大小（淡入淡出效用）
fadeIn( speed ) 显示fadeOut( speed ) 隐藏fadeToggle( speed ) 等价于fadeIn+fadeOut动画fadeTo( speed , 透明度 ) 方法允许渐变为给定的不透明度（值介于 0 与 1 间）可选的 speed 参数规定隐藏/显示的速度，能取以下值：”slow”、”fast” 或毫秒
<script>
$(“#btn2”).click(function(){
$(“div”).fadeOut(1000); // 隐藏：淡出我的视线});
$(“#btn1”).click(function(){
$(“div”).fadeIn(1000); // 显示：映入眼帘
});
$(“#btn3”).click(function(){
$(“div”).fadeToggle(1000); // 切换
});
$(“#btn4”).click(function(){
$(“div”).fadeTo(1000,0.5); // 1秒内变成50%的透明度});
</script>
2.5.4 链
链是允许他们在同一个原素上在一条语句中运行多个jQuery方法，能把动作/方法链接在一起 ；
例如：点击一次按钮，让div完成4个指定动作背景变粉字体变绿收缩拉伸<style>
div{
width: 200px;
height: 200px;
background-color: black;
color:white;
font-size: 3em;
}
</style>
<body>
<button>试试</button>
<div>hello</div>
<script src=“js/jquery-3.4.1.min.js”></script>
<script>
$(“button”).click(function(){
$(“div”).css(“backgroundcolor”,“pink”).css(“color”,“green”).slideUp(1000).slideDown(1000);
});
</script>
</body>
2.6 DOM和CSS的操作方式
2.6.1 属性表达式
attr( “属性” ); 获得原素的属性值attr( “属性” , “新值” ); 修正原素的属性值attr( 式样参数 ) ：式样参数能写成json格式<body>
<button id=“btn1”>点我试试</button>
<hr>
<img src=“img/1.jpg” title=“美女大图” width=“300”>
<script src=“js/jquery-3.4.1.min.js”></script>
<script>
$(“#btn1”).click(function(){
$(“img”).attr(“src”,“img/2.jpg”);
$(“img”).attr(“title”,“高清无码”);
$(“img”).attr( {width:“200”,height:“200”} );
});
</script>
</body>
val() ; 获得表单原素中的value值 val(“x”) 修正表单原素中的value值html(); 获得原素中的文本（标签+文本）html(“x”) 修正原素中的文本（标签+文本）text(); 获得原素中的文本text(“x”) 修正原素中的文本<button>试试</button>
<hr>
<input id=“username”>
<div>
<h1><i>中国加油！</i></h1>
</div>
<script src=“js/jquery-3.4.1.min.js”></script>
<script>
$(“button”).click(function(){
//alert($(“input”).val()); //input框中的值
//$(“input”).val(“哈哈哈”); //修正input框中的值
//alert( $(“div”).html() ); //获得div中的文本（包含标签信息） //alert( $(“div”).text() ); //获得div中的文本（不包含标签信息，只包含文本文本）
$(“div”).text(“祖国万岁！”); //修正div中的文本（全部文本都覆盖）
});
</script>
2.6.2 式样表达式
css( “属性”); 获得该属性值css( “属性”,”值”); 设置属性的值css( { json} ); 设置多个属性的值<style>
div{
width: 150px;
height: 150px;
background-color: #000;
}
</style>
<body>
<button>试试</button>
<hr>
<div></div>
<script src=“js/jquery-3.4.1.min.js”></script>
<script>
$(“button”).click(function(){
//1.一个键值对
//$(“div”).css(“background-color”,”pink”); //2.链式编程
//$(“div”).css(“background-color”,”pink”).css(“borderradius”,”50%”);
//3.json为参数
$(“div”).css({
opacity:“0.4”,
background:“orange”,
borderRadius:“50%”
});
});
</script>
</body>
width(); 获得原素的宽度width( number ); 修正原素的宽度height(); 获得原素的度height( number ); 修正原素的度<style>
div{
width: 150px;
height: 150px;
background-color: #000;
}
</style>
<body>
<button>试试</button>
<hr>
<div></div>
<script src=“js/jquery-3.4.1.min.js”></script>
<script>
$(“button”).click(function(){
var w = $(“div”).width(); var h = $(“div”).height(); // alert(“宽:”+w+”px，高:”+h+”px”);
$(“div”).width(“300”); // （传参）修正宽度
$(“div”).height(“300”); //（传参）修正度
});
</script>
</body>
2.6.3 类式样表达式
addClass(); 为原素添加类式样removeClass(); 将原素的类式样移除toggleClass(); 式样的切换（有->无，无->有）<style>
div{
width: 100px;
height: 100px;
background-color: #000;
}
.a{
background: palevioletred;
border-radius: 50%;
}
.b{
border:5px dashed darkcyan;
opacity: 0.6;
}
.cn{
background: #000;
color:#FFF;
font-family: 字魂49号–逍遥行书;
}
</style>
<body>
<button id=“btn1”>试试</button>
<button id=“btn2”>取消透明度</button>
<button id=“btn3”>式样切换</button>
<hr>
<div></div>
<h1>中华人民共和国，万岁！</h1>
<script src=“js/jquery-3.4.1.min.js”></script>
<script>
$(“#btn1”).click(function(){
// $(“div”).addClass(“a”);
$(“div”).addClass(“a b”);
});
$(“#btn2”).click(function(){
$(“div”).removeClass(“b”);
});
$(“#btn3”).click(function(){
$(“h1”).toggleClass(“cn”);
});
</script>
</body>
2.6.4 节点操作方式
<input> <button id=“test”>测试</button>
<ul>
<li>金瓶梅</li>
<li>貂蝉往事</li>
<li>东京热不热</li>
</ul>
<script src=“js/jquery-3.4.1.min.js”></script>
<script>
$(“#test”).click(function(){
var bookname = $(“input”).val();
var newli = $(“<li>”+bookname+“</li>”); //透过工厂表达式，建立捷伊li节点
/*添加子节点*/
//$(“ul”).append(newli); // newli添加到ul后面
//newli.appendTo(“ul”); // newli添加到ul后面
//$(“ul”).prepend(newli); // newli添加到ul前面 //newli.prependTo(“ul”);
/*添加同辈节点*/
//$(“li:last”).after( newli ); // newli添加到最后的li的后面 //newli.insertAfter(“li:last”);
//$(“li:last”).before(newli); //newli添加到最后的li的前面
//newli.insertBefore(“li:last”); /*替换节点*/
//$(“li:eq(1)”).replaceWith(newli); // 将第二个li替换成newli
//newli.replaceAll( “li:eq(1)” ); /*复制节点*/
//$(“li:first”).clone().insertAfter(“li:last”); // 复制第一个li，并插入到最
后一个li的后面
/*删除节点*/
//$(“li:eq(1)”).empty(); // 清空了节点上的文本（节点并没有消失） $(“li:eq(1)”).remove(); //删除节点
});
</script>
2.7 遍历节点
2.7.1 祖先原素
用于向上遍历 DOM 树的方法parent() 返回被选原素的直接父原素，仅仅是上一级 （找爸爸）parents() 返回被选原素的所有祖先原素，它一路向上直到文档的根原素，能选择辈分<p><button>测试</button></p>
<ul>
<li>a</li>
<li>
<b>b</b>
</li>
<li>c</li>
</ul>
<script src=“js/jquery-3.4.1.min.js”></script>
<script>
$(“button”).click(function(){
//var x = $(“b”).parent().html(); // 找爸爸
//var x = $(“b”).parents(“ul”).html(); // 找祖宗 ul //var x = $(“b”).parents(“body”).html(); // 找祖宗 body
alert( x );
});
</script>
2.7.2 同辈原素
辈原素<button>测试</button>
<p>p1</p>
<ul>
<li>a</li>
<li>
<b>b</b>
</li>
<li>c</li>
</ul>
<p>p2</p>
<p id=“x”>p3</p>
<script src=“js/jquery-3.4.1.min.js”></script>
<script>
$(“button”).click(function(){
//var x = $(“ul”).next().text(); // 紧邻的下一个原素 //var x = $(“ul”).prev().text(); // 紧邻的上一个原素
//var x = $(“ul”).siblings(“#x”).text(); // 所有的兄弟中，id=x的 var arr = $(“ul”).siblings(); // ul的所有兄弟,1个button，3个p，2个script
for(var i = 0 ;i< arr.length ;i++){
alert(arr[i]);
}
});
</script>
2.7.3 后代原素
后代是子、孙、曾孙等等children( [selector] ) 方法返回被选原素的所有直接子元素，“孩子”<button>测试</button>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<script src=“js/jquery-3.4.1.min.js”></script>
<script>
$(“button”).click(function(){
//var x = $(“ul”).children().text(); //所有子节点：abc
var x = $(“ul”).children(“li:first”).text(); //ul中的第一个子节点
alert(x);
});
</script>
find( 示例 ) 方法返回被选原素的后代原素，一路向下直到最后一个后代。<button>测试</button>
<ul>
<li>盘古</li>
<li>蚩尤</li>
<li>刑天
<p>龚工</p>
</li>
<h3>祝融</h3>
</ul>
<script src=“js/jquery-3.4.1.min.js”></script>
<script>
$(“button”).click(function(){
//var x = $(“ul”).find(“p”).text(); //在ul中查找p原素，忽略层级 //var x = $(“ul”).find(“h3”).text(); //在ul中查找h3原素，忽略层级
var x = $(“ul”).find().text(); // 找甚么？不知道！
alert(x);
});
</script>
2.7.4 原素的过滤
first()：过滤第一个原素last()：过滤最后一个原素eq(index)：过滤到下标为index的原素not()：除了甚么之外的原素is()：返回布尔，推论是不是这种原素<button>测试</button>
<ul>
<li>盘古</li>
<li>蚩尤</li>
<li>刑天</li>
</ul>
<script src=“js/jquery-3.4.1.min.js”></script>
<script>
$(“button”).click(function(){
//var x = $(“li”).first().text(); // 第一个li //var x = $(“li”).last().text(); // 最后一个li
//var x = $(“li”).eq(1).text(); // 下标为1的li //var x = $(“li”).not(“li:eq(1)”).text(); // 除了下标为1的其余所有li
var x = $(“li”).parent().is(“ul”); // 返回布尔型，li的父节点是不是ul alert(x);
});
</script>
3 案例
3.1 手风琴特效
<style>
dd{
display: none; /*隐藏原素*/
}
</style>
<body>
<nav>
<header>招聘网</header>
<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.24小时在线辅导</dd>
</dl>
</li>
<li>
<dl>
<dt>3W创业</dt>
<dd>1.帮助小企业</dd>
<dd>2.头脑风暴</dd>
<dd>3.赚钱啦</dd>
</dl>
</li>
</ul>
</nav>
<script src=“js/jquery-3.4.1.min.js”></script>
<script>
$(“nav dt”).click(function(){
//所有的dd全部都闭合上，除了自己的兄弟
$(“dd”).not( $(this).siblings() ).slideUp(500);
// 自己的兄弟展开切换，显示闭合上，闭合的显示出来
$(this).siblings().slideToggle(500);
});
</script>
</body>
3.2 购物车结算
<style>
.jian,.jia{
border:1px solid #999;
display: inline–block; /*超链接a是行内原素，只能转换成行内块原素，才能改变宽和高*/
width: 20px;
height: 20px;
text-align: center;
text-decoration: none;
}
</style>
<body>
<table border=“1” cellspacing=“0” width=“400”>
<tr>
<td>商品编号</td>
<td>名称</td>
<td>单价</td>
<td>数量</td>
<td>总价</td>
</tr>
<tr>
<td>1</td>
<td>炸香肠</td>
<td>3</td>
<td>
<a href=“#” class=“jian”>–</a>
<span>1</span>
<a href=“#” class=“jia”>+</a>
</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>王八</td>
<td>10</td>
<td>
<a href=“#” class=“jian”>–</a>
<span>1</span>
<a href=“#” class=“jia”>+</a>
</td>
<td>10</td>
</tr>
<tr>
<td>3</td>
<td>恐龙</td>
<td>1000</td>
<td>
<a href=“#” class=“jian”>–</a>
<span>1</span>
<a href=“#” class=“jia”>+</a>
</td>
<td>1000</td>
</tr>
</table>
<p style=“width: 400px; text-align: right;”>
总价：<b style=“color:red;”>111</b> <button>提交订单</button>
</p>
</body>
car.js
$(“.jia”).click(function(){
var i = $(this).prev().text(); //获得原来的商品数量
i++;
$(this).prev().text(i); //现在的商品数量
var price = $(this).parent().prev().text(); //商品单价
var zong = i*price; //商品总价
$(this).parent().next().text( zong );// 现在商品的总价
getTotal();
});
$(“.jian”).click(function(){
var i = $(this).next().text();
i—;
if(i == 0){ //询问用户数量早已是0了，是否删除该商品
if( confirm(“是否删除该商品？”) ){
$(this).parents(“tr”).remove();
}
}else{
$(this).next().text(i);
var price = $(this).parent().prev().text(); //商品单价
var zong = i*price; //商品总价
$(this).parent().next().text( zong );// 现在商品的总价
}
getTotal();
});
//计算所有商品的总价
// function getTotal(){
// var sum = 0; // 总价钱
// var arr = $(“tr:not(tr:first)”).find(“td:last”);// for(var i = 0;i<arr.length ; i++){
// sum += Number(arr[i].innerHTML) ;
// }
// $(“b”).text(sum);// }
function getTotal(){
var sum = 0; // 总价钱
$(“tr:not(tr:first)”).find(“td:last”).each(function(){
sum += Number($(this).text());
});
$(“b”).text(sum);
}
