一、jQuery概述
jQuery：js的框架，兼容css3和各大浏览器，封装了JS常见的操作，用来简化JS的使用(特别是dom)。
-
JS对象：document.getElemxxx() 获得的都是JS对象 大部分都是属性 js对象只能操作js对象自己的属性和方法 -
jQuery对象：使用jQuery的选择器获取的对象，通常$开头作为标示 jQuery对象只能操作jQuery对象自己的属性和方法
JQ对象与JS对象的相互转换
<body>
<input type="text" id="ipt" value="张三">
<script>
var ipt = document.getElementById("ipt");
var $ipt = $("#ipt");
var val = $ipt.val();
var ipt1 = $ipt[0];
var val1 = ipt1.value();
</script>
</body>
二、jQuery操作DOM
1. 选择器
1.1 基本选择器
| 选择器名称 | 语法 | 解释 |
|---|
| 标签选择器（元素选择器） | $(“html标签名”) | 获得所有匹配标签名称的元素 | | id选择器 | $("#id的属性值") | 获得与指定id属性值匹配的元素 | | 类选择器 | $(".class的属性值") | 获得与指定的class属性值匹配的元素 |
<body>
<div id="d1">div1</div>
<div class="c1">div2</div>
<span class="c1">span1</span>
<span class="c1">span2</span>
<script>
console.log($("#d1"))
console.log($(".c1"))
console.log($("span"))
</script>
</body>
1.2 层级选择器
| 选择器名称 | 语法 | 解释 |
|---|
| 后代选择器 | $("A B ") | 选择A元素内部的所有B元素 | | 子选择器 | $(“A > B”) | 选择A元素内部的所有B子元素 | | 兄弟选择器 | $(“A + B”) | 获得A元素同级的下一个B元素 | | 兄弟选择器 | $(“A ~ B”) | 获得A元素同级的所有B元素 |
<body>
<input onclick="fn1()" type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色" id="b1"/>
<input onclick="fn2()" type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色" id="b2"/>
<input onclick="fn3()" type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 红色" id="b3"/>
<input onclick="fn4()" type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 红色" id="b4"/>
</body>
<script>
function fn1() {
$("body div").css("background-color","red")
}
function fn2() {
$("body>div").css("background-color","red")
}
function fn3() {
$("#one+div").css("background-color","red")
}
function fn4() {
$("#two~div").css("background-color","red")
}
</script>
1.3 属性选择器
| 选择器名称 | 语法 | 解释 |
|---|
| 属性选择器 | $(“A[属性名]”) | 包含指定属性的选择器 | | 属性选择器 | $(“A[属性名=值]”) | 包含指定属性等于指定值的选择器 |
<body>
<input id="ipt1" type="text" value="张三">
<input type="password" value="123456">
<script>
$("input[id]").css("background-color","red")
$("input[type='password']").css("background-color","red")
</script>
</body>
1.4 基本过滤选择器
| 选择器名称 | 语法 | 解释 |
|---|
| 首元素选择器 | :first | 获得选择的元素中的第一个元素 | | 尾元素选择器 | :last | 获得选择的元素中的最后一个元素 | | 非元素选择器 | :not(selecter) | 不包括指定内容的元素 | | 偶数选择器 | :even | 偶数，从 0 开始计数 | | 奇数选择器 | :odd | 奇数，从 0 开始计数 | | 等于索引选择器 | :eq(index) | 指定索引元素 | | 大于索引选择器 | :gt(index) | 大于指定索引元素 | | 小于索引选择器 | :lt(index) | 小于指定索引元素 |
<script>
$("tr:first").css("background-color","red")
$("tr:last").css("background-color","blue")
$("tr:odd").css("background-color","green")
$("tr:even").css("background-color","yellow")
$("tr:eq(3)").css("background-color","pink")
$("tr:lt(3)").css("background-color","gray")
$("tr:gt(3)").css("background-color","#ffc900")
</script>
1.5 表单属性过滤选择器
| 选择器名称 | 语法 | 解释 |
|---|
| 可用元素选择器 | :enabled | 获得可用元素 | | 不可用元素选择器 | :disabled | 获得不可用元素 | | 选中选择器 | :checked | 获得单选/复选框选中的元素 | | 选中选择器 | :selected | 获得下拉框选中的元素 |
<script type="text/javascript">
function fn1() {
$(":text:enabled").css("background-color","red")
}
function fn2() {
$(":text:disabled").css("background-color","red")
}
function fn3() {
alert($(":checkbox:checked").length)
}
function fn4() {
alert($(":selected").length)
}
</script>
2. 操作标签
2.1 操作标签样式
| API方法 | 解释 |
|---|
| css(name) 使用很少 | 获取CSS样式 | | css(name,value) | 设置CSS样式 | | addClass(类名) | 给标签添加类名 | | removeClass(类名) | 删除标签的类名 |
鼠标移入输入框时背景色为红色，移出输入框时背景色为蓝色
<head>
<meta charset="UTF-8">
<title>jQuery操作标签的样式</title>
<script src="../../js/jquery-3.3.1.js"></script>
<style>
.redStyle{
background-color: red;
width: 600px;
height: 60px;
}
.blueStyle{
background-color: blue;
width: 800px;
height: 80px;
}
</style>
</head>
<body>
<input id="ipt" type="text" onmouseover="fn1()" onmouseout="fn2()">
<script>
function fn1() {
$("#ipt").css("background-color","red")
$("#ipt").addClass("redStyle")
$("#ipt").removeClass("blueStyle")
}
function fn2() {
$("#ipt").css("background-color","blue")
$("#ipt").addClass("blueStyle")
$("#ipt").removeClass("redStyle")
}
</script>
</body>
2.2 操作标签属性
| API方法 | 解释 |
|---|
| attr(name,[value]) | 获得/设置属性的值 | | prop(name,[value]) | 获得/设置属性的值(checked，selected) |
attr与prop的注意问题：
- attr方法可以操作标签的一切属性,而prop方法只能操作标签内置有的属性
- boolean类型的属性例如checked 和 selected 建议 使用prop操作，其他使用attr获取
<body>
<input type="text" name="username" aa="bb"><br>
<script>
$("input").attr("name","nickname")
$("input").prop("name","nickname")
$("input").attr("aa","cc")
$("input").prop("aa","cc")
</script>
</body>
2.3 操作标签内容
| API方法 | 解释 |
|---|
| val([value]) | 获得/设置表单项标签里面value属性相应的值 | | text([value]) | 获得/设置标签体的文本内容 | | html([value]) | 获得/设置标签体的内容 |
<body>
<input type="text" id="ipt" value="张三"/>
<div id="city"><h1>北京</h1></div>
<script>
console.log($("#ipt").val())
$("#ipt").val("李四")
console.log($("#city").text())
console.log($("#city").html())
$("#city").text("<h1>深圳</h1>")
$("#city").html("<h1>深圳</h1>")
</script>
</body>
2.4 标签创建、插入
| API方法 | 解释 |
|---|
| $(“A”) | 创建A元素对象 | | append(element) | 添加成最后一个子元素，两者之间是父子关系 | | prepend(element) | 添加成第一个子元素，两者之间是父子关系 | | appendTo(element) | 添加到父元素的内部最后面 | | prependTo(element) | 添加到父元素的内部最前面 | | before(element) | 添加到当前元素的前面，两者之间是兄弟关系 | | after(element) | 添加到当前元素的后面，两者之间是兄弟关系 |
点击添加按钮的时候，往城市列表中添加"长沙"
点击删除按钮的时候，删除"上海"
点击清空城市列表按钮的时候，删除所有的城市，但是要保留列表ul
<body>
<ul id="city">
<li id="bj">北京</li>
<li id="sh">上海</li>
<li id="sz">深圳</li>
<li id="gz">广州</li>
</ul>
<input type="button" value="添加" onclick="addCity()"><br>
<input type="button" value="删除" onclick="removeCity()"><br>
<input type="button" value="清空城市列表" onclick="removeAllCity()">
<script>
function addCity() {
$("#city").append($("<li id='cs'>长沙</li>"))
$("<li id='cs'>长沙</li>").appendTo($("#city"))
$("#city").prepend($("<li id='cs'>长沙</li>"))
$("#sz").before($("<li id='cs'>长沙</li>"))
$("#sz").after($("<li id='cs'>长沙</li>"))
}
function removeCity() {
$("#sh").remove()
}
function removeAllCity() {
$("#city").empty()
}
</script>
</body>
2.5 标签删除、清空
| API方法 | 解释 |
|---|
| remove() | 删除指定元素(自己移除自己) | | empty() | 清空指定元素的所有子元素 |
<body>
<ul id="city">
<li id="bj">北京</li>
<li id="sh">上海</li>
<li id="sz">深圳</li>
<li id="gz">广州</li>
</ul>
<input type="button" value="添加" onclick="addCity()"><br>
<input type="button" value="删除" onclick="removeCity()"><br>
<input type="button" value="清空城市列表" onclick="removeAllCity()">
<script>
function removeCity() {
$("#sh").remove()
}
function removeAllCity() {
$("#city").empty()
}
</script>
</body>
三、jQuery其他操作
1. 操作事件
1.1 绑定事件
JQ匿名函数方式绑定
<body>
<input type="button" value="按钮" id="btn">
<script>
$("#btn").click(function () {
alert("点击了...")
})
</script>
</body>
JQ on()方法绑定
<body>
<input type="button" value="按钮" id="btn">
<script>
$("#btn").on("click",function () {
console.log("点击了....")
})
</script>
</body>
1.2 解绑事件
jquery的off()方法可以解绑事件，但是它只能解绑jQuery绑定事件off()方法，如果传入参数，表示解绑某种事件；off()方法没如果不传入参数，表示解绑所有事件
<body>
<input type="button" value="按钮" id="btn">
<script>
$("#btn").off("click");
$("#btn").off();
</script>
</body>
1.3 事件切换
<script type="text/javascript">
$(function() {
$("#myDiv").mouseover(function() {
console.log("鼠标移入了...")
});
$("#myDiv").mouseout(function() {
console.log("鼠标移出了...")
});
});
</script>
<script type="text/javascript">
$(function() {
$("#myDiv").mouseover(function() {
console.log("鼠标移入了...")
}).mouseout(function() {
console.log("鼠标移出了...")
});
});
</script>
<script>
$("#ipt").hover(function () {
console.log("鼠标移入了...")
},function () {
console.log("鼠标移出了...")
})
</script>
2. 操作遍历
JS中for循环遍历
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
<li>广州</li>
</ul>
<script>
var elements = document.getElementsByTagName("li");
for(var i=0;i<elements.length;i++){
console.log(elements[i].innerHTML)
}
</script>
</body>
JQ对象each()方法遍历
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
<li>广州</li>
</ul>
<script>
$("li").each(function (index,element) {
console.log(index+":"+element.innerHTML)
})
</script>
</body>
JQ全局each()方法遍历
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
<li>广州</li>
</ul>
<script>
//jquery的全局each()方法进行遍历, jQuery的全局方法就是使用$调用的方法，不需要某个jQuery对象调用, 既可以遍历jQuery对象又可以遍历js对象
$.each($("li"),function (index,element) {
console.log(index+":"+element.innerHTML)
})
for…of语句遍历
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
<li>广州</li>
</ul>
<script>
for(element of $("li")){
console.log(element.innerText)
}
</script>
</body>
3. 操作动画
3.1 基本效果
| 方法名称 | 解释 |
|---|
| show([speed],[fn]]) | 显示元素方法 | | hide([speed,[fn]]) | 隐藏元素方法 | | toggle([speed],[fn]) | 切换元素方法，显示的使之隐藏，隐藏的使之显示 |
3.2 滑动效果
| 方法名称 | 解释 |
|---|
| slideDown([speed,[fn]]) | 向下滑动方法 | | slideUp([speed,[fn]]) | 向上滑动方法 | | slideToggle([speed],[fn]) | 切换元素方法，显示的使之隐藏，隐藏的使之显示 |
3.3 淡入淡出效果
| 方法名称 | 解释 |
|---|
| fadeIn([speed,[easing],[fn]]) | 淡入显示方法 | | fadeOut([speed,[easing],[fn]]) | 淡出隐藏方法 | | fadeToggle([speed],[easing],[fn]) | 切换元素方法，显示的使之隐藏，隐藏的使之显示 |
| 参数名称 | 解释 |
|---|
| speed | 三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) | | fn | 在动画执行完毕的时候会调用的函数，每个元素执行一次 |
3.4 实例
<body>
<img src="../img/mm.jpg" width="409" height="292"><br>
<input type="button" οnclick="showImg()" value="显示">
<input type="button" οnclick="hideImg()" value="隐藏">
<input type="button" οnclick="toggleImg()" value="切换">
<script>
//显示图片的方法
function showImg() {
//jQuery对象.show(动画执行的速度,动画执行完毕的那瞬间调用的函数)
$("img").show(2000,function () {
alert("显示完毕")
})
//jQuery对象.slideDown(动画执行的速度,动画执行完毕的那瞬间调用的函数)
$("img").slideDown(2000)
//jQuery对象.fadeIn(动画执行的速度,动画执行完毕的那瞬间调用的函数)
//淡入效果: 透明度从0-1
$("img").fadeIn(2000)
}
//隐藏图片的方法
function hideImg() {
//jQuery对象.hide(动画执行的速度,动画执行完毕的那瞬间调用的函数)
$("img").hide(2000,function () {
alert("隐藏完毕")
})
//jQuery对象.slideUp(动画执行的速度,动画执行完毕的那瞬间调用的函数)
$("img").slideUp(2000)
//jQuery对象.fadeOut(动画执行的速度,动画执行完毕的那瞬间调用的函数)
//淡出效果: 透明度从1-0
$("img").fadeOut(2000)
}
//切换图片显示和隐藏的方法
function toggleImg() {
//jQuery对象.toggle(动画执行的速度,动画执行完毕的那瞬间调用的函数)
$("img").toggle(2000)
//jQuery对象.slideToggle(动画执行的速度,动画执行完毕的那瞬间调用的函数)
$("img").slideToggle(2000)
//jQuery对象.fadeToggle(动画执行的速度,动画执行完毕的那瞬间调用的函数)
$("img").fadeToggle(2000)
}
</script>
</body>
四、实例
- 定时弹广告
<body>
<div id="ad" style="display: none">
<img src="../img/ad.jpg" width="100%" height="200">
</div>
<h1>主题页面的内容</h1>
<script>
function showAd(){
$("#ad").slideDown(3000,function () {
setTimeout(hideAd,3000)
})
}
function hideAd(){
$("#ad").slideUp(3000)
}
setTimeout("showAd()",3000)
</script>
</body>
- 隔行换色
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.js"></script>
<style>
.greenStyle{
background-color: lawngreen;
}
.blueStyle{
background-color: lightskyblue;
}
.redStyle{
background-color: red;
}
</style>
</head>
<body>
<table id="tab1" border="1" width="800" align="center" >
<tr>
<td colspan="5"><input type="button" value="删除"></td>
</tr>
<tr>
<th><input type="checkbox"></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
<script>
$("tr:odd").addClass("greenStyle")
$("tr:even").addClass("blueStyle")
$("tr").mouseover(function () {
$(this).addClass("redStyle")
})
$("tr").mouseout(function () {
$(this).removeClass("redStyle")
})
</script>
- 全选案例
<body>
<table id="tab1" border="1" width="800" align="center" >
<tr>
<td colspan="5">
<input type="button" value="反选" onclick="reverseSelect()">
</td>
</tr>
<tr>
<th>
<input type="checkbox" id="all" onclick="selectAll(this)" >
</th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
<script>
function selectAll(obj) {
$(".itemSelect").prop("checked",obj.checked)
}
function reverseSelect() {
$(".itemSelect").each(function (index,element) {
element.checked = !element.checked
})
$(".itemSelect").click()
}
$(".itemSelect").click(function () {
var flag = true
$(".itemSelect").each(function (index,element) {
if (!element.checked) {
flag = false
}
})
$("#all").prop("checked",flag)
$("#all").prop("checked",$(".itemSelect").length == $(".itemSelect:checked").length)
})
</script>
- 二级联动案例
<body>
<select id="provinceSelect" onchange="changeProvince(this.value)">
<option value="0">请选择省份</option>
<option value="1">广东省</option>
<option value="2">湖南省</option>
<option value="3">湖北省</option>
</select>
<select id="citySelect">
<option>请选择城市</option>
</select>
<script>
var cities = [
[],
["广州","深圳","惠州","东莞"],
["长沙","岳阳","常德","衡阳"],
["武汉","黄冈","宜昌","荆州"]
]
function changeProvince(value){
var items = cities[value];
$("#citySelect").html("<option>请选择城市</option>")
$.each(items,function (index,element) {
$("#citySelect").append($("<option>"+element+"</option>"))
})
}
</script>
</body>
- 电子时钟案例
<head>
<meta charset="UTF-8">
<title>电子时钟案例</title>
<style>
div{
font-size: 30px;
color: green;
}
</style>
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<div id="time">
</div>
<input type="button" value="开始" onclick="startTime()">
<input type="button" value="暂停" onclick="pauseTime()">
<script>
var id = null
function startTime() {
var time = new Date().toLocaleString();
$("#time").html(time)
if (id != null) {
clearInterval(id)
}
id = setInterval(function () {
var time = new Date().toLocaleString();
$("#time").html(time)
},1000);
}
function pauseTime() {
clearInterval(id)
}
</script>
</body>
|