开发工具与关键技术：DW/浏览器 ；简单使用jquery。
作者：刘佳明
撰写时间：2019年1月 24 日
前端基础–jquery
本篇章内容主要是简单介绍以下Jquery;一个由JavaScript封装的函数库；
jQuery 的功能概括：
html 的元素选取
html的元素操作
html dom遍历和修改
js特效和动画效果
css操作
html事件操作
ajax异步请求方式
在这里，我事先已经准备好了一个网页的样式：效果如下
网页的组成分为三个部分；两个包裹着p标签的盒子，和最下方四个除内部文本不同；其他完全相同的button按钮；
Button按钮的样式是根据bootstrap 中的css样式而引入的；
Bootstrap系列是现网上流行的网页编辑插件；百度可下载使用
网页HTML部分代码;
<div clss="contain">
<div class="cos">
<div class="left" id="left">
<p id="p">p 标签1</p>
<p>p 标签2</p>
<p>p 标签3</p>
<p>p 标签4</p>
<p>p 标签5</p>
</div>
<div class="right" id="right">
<p class="p">p 标签6</p>
<p class="p">p 标签7</p>
</div>
</div>
<button class="btn btn-primary btn-lg btn-block" id="one">Block level button 01</button>
<button class="btn btn-primary btn-lg btn-block" id="two">Block level button 02</button>
<button class="btn btn-primary btn-lg btn-block" id="fruo">Block level button 03</button>
<button class="btn btn-primary btn-lg btn-block" id="si">Block level button 04</button>
</div>
CSS样式所需要的代码：
<style>
.cos{
width:80%;
background:#eee;
height:300px;
display:flex;
justify-content:space-between;
margin:10px auto;
}
.left,.right{
width:49.5%;
height:100%;
background:#3995da;
overflow:hidden;
}
.left p,.right p{
width:100%;
height:30px;
color:#eee;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
line-height:30px;
/*background:#958f8f;*/
background:#cccccc;
text-align:center;
}
.backRed {
background-color: #ea4823;
}
.backBlue {
background-color: #5985d3;
}
</style>
接下来就是对于按钮事件上的触发；
jQuery中的函数的是由一个封装好的JavaScript插件提供；所以在运行jquery时需要将这个插件引入到HTML 中
例：
<script src="bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js">
第一个按钮单击的代码；
$("#one").click(function () {
$("#left").empty();
//empty 所有的子元素都删除
});
点击效果如下；
第二个按钮单击的代码；
$("#two").click(function () {
$("#left").css("background", "yellow");
$("#right").css({ 'width': 800, 'height': 300 });
$("p").remove();
});
对id为left的大盒子内部改变CSS样式； 对id为right的大盒子内部改变CSS样式；
删除全部p标签
点击效果如下；
第三个按钮单击的代码；
$("#fruo").click(function () {
//$("p").remove(":contains(2)");
//$("p").remove(":odd");
$("#right").remove(":odd");
$("#right").addClass("backRed");
//odd:奇数； even：偶数
});
.remove表示删除
删除id为right盒子中p标签的奇数个；并且给id为right的盒子添加一个类名为backred,这个类的css样式为：背景颜色为棕色；
备注掉的jQuery代码，也可以去app上进行用观看
点击效果如下；
第四个按钮单击的代码；
$("#si").click(function () {
//$("#left:root").css("backgroud-color", "#000")
$("p:first").css("color", "red");
$("#left").toggleClass("backRed");
//$("#left").addClass("backRed");
//console.log($("#left").attr("class"));
});
$(“p:first”).css(“color”, “red”); 对第一个p 标签css样式进行修改；把字体颜色改为红色；
$("#left").toggleClass(“backRed”);
表示给id为left的盒子添加一个类名为backred,这个类的css样式为：背景颜色为棕色；
点击效果如下；
但鼠标移入或移出id为left的盒子时；
$("#left").hover(//hover 同DW中不同
//hover 方法中不可多同时进行函数，当hover 中函数个别>=2时，实现函数效果时，
//所有函数都会进行，第二次及其之后便知只进行一个函数；
function as(){
$("p").slideDown("fast");//向下滑动
},
function bs() {
$("p").slideUp("fast");//向上滑动
}
);
鼠标移入id为left的盒子外时；效果如下；
P标签全部消失，且是以一个向上滑动的动画效果消失；
鼠标移出id为left的盒子外时；效果如下；
P标签全部出现，且是以一个向下滑动的动画效果出现；
另外，我在本jqurey部分添加了别的函数；在代码中已注释；下面为具体代码；把注释去除；可具体查看效果；
<script>
$("#one").click(function () {
$("#left").empty();
//empty 所有的子元素都删除
});
$("#two").click(function () {
$("#left").css("background", "yellow");
$("#right").css({ 'width': 800, 'height': 300 });
$("p").remove();
});
$("#fruo").click(function () {
//$("p").remove(":contains(2)");
//$("p").remove(":odd");
$("#right").remove(":odd");
$("#right").addClass("backRed");
//odd:奇数； even：偶数
});
$("#si").click(function () {
//$("#left:root").css("backgroud-color", "#000")
$("p:first").css("color", "red");
$("#left").toggleClass("backRed");
//$("#left").addClass("backRed");
//console.log($("#left").attr("class"));
});
//$(document).ready(function () {
// $("p").css('backgroud', 'red');
//});
// append&&appendto 追加标签&&转移标签
// $("#right").append("<P>在该div后面加一个p 标签</P>")
// $("<P>在该div后面加一个p 标签</P>").appendTo("#right");
//关于在追加标签时 两者的父子顺序的关系：
//appendto 选定div 为父级
//apppend 选定div 为子级
//prepend &&prependto 转移标签
$("#right").prepend("<P>在该div后面加一个p 标签</P>");//添加类别标签<P>在该div后面加一个p 标签</P>
//$("<P>在该div后面加一个p 标签</P>").prependTo("#right");
//prependto 和 prepend的不同之处在于：添加标签的父子顺序的关系；
//prependto 选定div 为父级
//prepend 选定div 为子级
$("#left").hover(//hover 同DW中不同
//hover 方法中不可多同时进行函数，当hover 中函数个别>=2时，实现函数效果时，
//所有函数都会进行，第二次及其之后便知只进行一个函数；
function as(){
//$("#right").addClass("backRed");//添加类别
// $("#right").prepend("<P>在该div后面加一个p 标签</P>")
// $("#right").prepend("<p></p>")
//$("p").hide("slow");//隐藏显示
//$("p").fadeToggle("slow", "linear");//淡入
$("p").slideDown("fast");//向下滑动
// $("p").hide(3000).delay(5000).fadeToggle(2000);
/* setTimeout(as, 3000);*///间隔性计时器
},
function bs() {
// $("#right").removeClass("backRed");//在有id为right的标签中删除类别
//$("p").detach(".p");
//$("p").detach();
//$("#left>p").detach();
// remove 和 detachd 的用法相同之处是：都可以用于删除选定的标签
//$("p").show("slow");//显示隐藏
//$("p").fadeOut("slow");//淡出
$("p").slideUp("fast");//向上滑动
//$("p").slideToggle("fast", function () {
// console.log($("#left").attr("class"));
//});
/*setTimeout(bs, 3000);*/ //间隔性计时器
}
);
</script>