JQuery详解
一、jQuery介绍
- jQuery由美国人John Resig（约翰·莱西格）于2006年创建
- jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
- 它的设计思想是write less,do more
- 实现隔行变色效果，JavaScript要循环加判断，而jQuery只需一句关键代码
$("tr:even").css("background-color","#ccc");
1、jQuery能做什么？
- 访问和操作DOM元素
- 控制页面样式
- 对页面事件进行处理
- 扩展新的jQuery插件
- 与Ajax技术完美结合
jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率
其实，jQuery和JavaScript的之间关系，可以理解为“成语”和“白话文”之间的关系。成语是对白话文的高度压缩，而jQuery也是对JavaScript的高度压缩库
2、jQuery的优势
- 体积小，压缩后只有100KB左右
- 强大的选择器
- 出色的DOM封装
- 可靠的事件处理机制
- 出色的浏览器兼容性
二、jQuery的使用
jQuery作为一个单独存在的js文件，并不会与其他的js文件发生冲突
在页面中使用传统引入js文件的方式引入即可。
<script src="js/jquery-3.4.1.min.js"></script>
1、基本语法
<script>
$(selector).action();
</script>
说明：
- 工厂函数 $() ：将DOM对象转化为jQuery对象
- 选择器 selector：获取需要操作的DOM 元素（没错，用法基本上和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、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对象
<body>
<p id="title">学习</p>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
// js方式获取dom对象
//alert(document.getElementById("title").innerHTML);
// jQ方式获取dom对象
// alert($("p").html());
var jsDom = document.getElementById("title");
var jqDom = $("p");
// 用js对象调用jQuery的方法，必须进行对象的转换
jqDom = $(jsDom); // js对象转换为jq对象
//alert(jqDom.html());
jsDom = jqDom.get(0); // jq对象转换为js对象
alert(jsDom.innerHTML);
</script>
</body>
3、选择器
1.基本选择器
基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器
<body>
<div>
<p class="country">中国</p>
<p class="jy">武汉</p>
<p id="bj">北京</p>
<p class="city">南京</p>
<p class="city" id="bj">上海</p>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("p").css("color", "red"); // 标签选择器，获得所有的p
$(".jy").css("color", "blue"); // 类选择器，将类为jy的元素选中
$("#bj").css("color", "green"); // id选择器，将id为city的元素选中 更具备唯一性
$(".city,.country").css("color", "black"); // 并集选择器，将类为city和country的元素选中
$("p#bj").css("color", "orange"); // 交集选择器，将既是p又是id为bj的元素选中
</script>
</body>
2.层次选择器
<body>
<div id="x">
111
<p>p1</p>
<div>
<p>p2</p>
</div>
</div>
<h3>222</h2>
<h3>333</h3>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("#x p").css("color", "red"); // 后代选择器，忽略层级
$("#x>p").css("color", "blue"); // 子代选择器，只负责子级
$("#x+h3").css("color", "green"); // 相邻选择器，下一个紧邻的兄弟
$("#x~h3").css("color", "orange"); // 同辈元素选择器，下面所有的同辈兄弟
</script>
</body>
3.属性选择器
<body>
<a href="www.lagou.com">拉勾网</a>
<a href="www.sina.com.cn">新浪</a>
<a href="http://www.163.com">网易</a>
<p href="x">学习</p>
<p href="x" title="x">向上</p>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("[href]").css("color", "red"); // 选取拥有href属性的元素
$("[href='x']").css("color", "blue") // 选取拥有href属性等于x的元素
$("a[href!='x']").css("color", "green") // 选取拥有a标签中href属性不等于x的元素
$("[href^='www']").css("color", "orange") // 选取拥有href属性以"www"开头的元素
$("[href$='com']").css("color", "yellow") // 选取拥有href属性以"www"结尾的元素
$("[href*='a']").css("color", "green") // 选取拥有href属性包含"a"的元素
$("p[href][title='x']").css("color", "green") // 选取拥有href属性和title属性值为x的元素
</script>
</body>
4.过滤选择器
<body>
<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", "blue"); // 选择最后一个li元素
$("li:even").css("color", "green"); // 选择偶数行li元素
$("li:odd").css("color", "orange"); // 选择奇数行li元素
$("li:eq(2)").css("color", "red"); // 选择下标等于2的li元素
$("li:gt(1)").css("color", "blue"); // 选择下标大于1的li元素
$("li:lt(2)").css("color", "yellow"); // 选择下标小于2的li元素
// "#"作为特殊符号在选择器中使用时用双转义符
$("#h2\\#x").css("color", "red");
</script>
</body>
4、事件
1.鼠标事件
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：
<body>
<img src="img/小猫.gif" width="300px"/>
<img src="img/小猫.gif" width="300px"/>
<img src="img/小猫.gif" width="300px"/>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("img").click(function(){
// 点击一下，换照片
// this就是事件触发的源头
$(this).attr("src","img/皮卡丘.gif");
});
$("img").mouseover(function(){
$(this).css("border", "2px solid red");
});
$("img").mouseout(function(){
$(this).css("border", "2px solid white");
});
</script>
</body>
2.键盘事件
用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件有：
<body>
<input>
<h3></h3>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("input").keyup(function(){
var str = $(this).val(); // 获取框的中的值
$("h3").text(str);
});
</script>
</body>
3.表单事件
当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件，详见下表：
<body>
<form action="">
<p>账号：<input id="a" value="请输入账号...."></p>
<p>密码：<input id="b" value="请输入密码...."></p>
</form>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
// 获得焦点（激活或者点击一下）
$("#a").focus(function(){
$(this).val("");
});
// 失去焦点（未激活或者未点击）
$("#a").blur(function(){
$(this).val("请输入账号...");
});
</script>
</body>
4.鼠标悬停复合事件
hover()方法相当于mouseover与mouseout事件的组合
<img src="img/03.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>
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>
6.事件的动态绑定
对dom元素绑定事件的另一种写法
- 绑定一个事件
$(".del").on('click', function() {
alert('hello');
})
- 绑定多个事件
$(".del").on('click mouseover', function() {
alert('hello');
})
<body>
<h2>点我试试</h2>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
// 事件绑定
/* $("h2").on('click', function () {
alert('hello');
});
*/
// 绑定多个事件
$("h2").on('click mouseover', function () {
alert('hello');
})
</script>
</body>
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.改变与元素的高（拉伸效果）
- 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>
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>
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("background-
color","pink").css("color","green").slideUp(1000).slideDown(1000);
});
</script>
</body>
6、DOM和CSS的操作
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") 修改元素中的文本
<body>
<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("学习"); // 修改框中的值
//alert($("div").html()); // 获取div中的内容（包含标签）
//alert($("div").text()); // 获得div中的内容（不包含标签）
$("div").text("祖国万岁！") // 修改div的内容，所有全覆盖
});
</script>
</body>
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(){
//var w = $("div").css("width"); // 获取css属性，width的值
//1.一个键值对
//$("div").css("background-color","pink");
//2.链式编程
//$("div").css("background-color","pink").css("border-
radius","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>
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>
4.节点操作
- 创建节点
- 工厂函数$()用于获取或创建节点
- 插入节点
- 插入子节点
- 插入同辈节点
- 替换节点
- replaceWith()
- replaceAll()
- 复制节点
- clone()
- 删除节点
- remove()删除整个节点
- empty()清空节点内容
<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>
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.同辈元素
- next() 获取紧邻匹配元素之后的元素
- prev() 获取紧邻匹配元素之前的元素
- siblings( [selector] ) 获取位于匹配元素前面和后面的所有同辈元素
<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>
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>
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>
三、案例
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>
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>
本文来自博客园，作者：寒露凝珠，转载请注明原文链接：https://www.cnblogs.com/china-soldier/p/15115827.html
