jQuery 是一个优秀的 javascript 的轻量级框架之一,封装了 dom 操作、事件、页面动画、异步操作等功能。特别值得一提的是基于 jquery 的插件非常丰富,大多数前端业务场景都有其封装好的工具框架
Look for Less,Do More
一。jQuery概述
jQuery下载和版本介绍
官网地址:http://jquery.com
注意事项:如果公司使用的老版本插件,我们jq升级后,可能会让插件失效....
* jquery-x.js 开发版本:有良好的缩进格式和注释,方便开发者阅读
* jquery-x.min.js 生产版本:代码进行压缩,体积小方便网络传输
jq本质上就是js的一个类库文件,我们使用它时,进行引入,就可以简化代码*
3.自定义js框架:
框架(Framework)是完成某种功能的半成品,抽取重复繁琐的代码,提供简洁强大的方法实现。
abc.js
// 抽取获取id的方法
function jQuery(id) {
return document.getElementById(id);
}
// 简化名称方案
function $(id) {
return document.getElementById(id);
}
引入外部文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自定义js框架</title>
<script src="../js/abc.js"></script>
</head>
<body>
<div id="myDiv">世界上最遥远的距离不是生与死,而是你亲手制造的BUG就在你眼前,你却怎么都找不到她。</div>
<script>
// 通过js原生的方式
// document.getElementById('myDiv').innerHTML='我是js修改的内容';
// jQuery('myDiv').innerHTML='我是js修改的内容';
$('myDiv').innerHTML='哈哈我是自定义js文件';
</script>
</body>
</html>
二。jQuery语法
1.jQuery环境引入
jQuery(一个快速、简洁的JavaScript框架)
<script src="https://www.jq22.com/jquery/jquery-1.7.1.js"></script>
<script src="https://www.jq22.com/jquery/jquery-1.9.1.js"></script>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/jquery/jquery-2.1.1.js"></script>
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML引入Jquery</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="myDiv">世界上最远的距离,是我在if里你在else里,虽然经常一起出现,但却永不结伴执行。</div>
<script>
// 获得div标签的jq对象
$('#myDiv').html('我是jq修改的内容')
</script>
</body>
</html>
jQuery与js的区别
jQuery虽然本质上也是js,但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象而不是js对象。
通过js方式获取的是js对象,通过jQuery方式获取的是jQuery对象。两者的关系与区别总结如下:
1. jQuery对象与js对象相互转换
js --> jq
$(js对象) 或者 jQuery(js对象)
jq --> js
jq对象[索引] 或者 jq对象.get(索引)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jq与js对象相互转换</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="myDiv">通过不同方式获得文本内容</div>
<script>
// 通过js方式修改文本内容
let myDiv = document.getElementById('myDiv');
// myDiv.innerHTML='我是js方式修改的';
// 通过jq方式修改文本内容
let $myDiv = $('#myDiv');
// $myDiv.html('我是jq方式修改的')
// js对象和jq对象的:属性和方法不同通用
// myDiv.html('js操作jq函数');
// $myDiv.innerHTML='jq操作js属性';
// js -- 转换为 jq对象
// $(myDiv).html('js变成jq对象');
// jq 转换为 js对象 注意:jq对象本质上是数组,数组的每一个元素就是js原生对象
console.log($myDiv.length);
$myDiv[0].innerHTML='jq变成js对象';
</script>
</body>
</html>
2. 页面加载事件
js
window.onload=function(){}
jq
$(function(){})
区别
js:只能定义一次,如果定义多次,后加载会进行覆盖
jq:可以定义多次
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面加载事件</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<script>
// js页面加载事件
/* window.οnlοad=function () {
alert('js加载事件1');
}
window.οnlοad=function () {
alert('js加载事件2');
}*/
// jq页面加载事件
$(function () {
alert('jq加载事件1')
})
$(function () {
alert('jq加载事件2')
})
</script>
</body>
</html>
三.jQuery 选择器
1.基本选择器
1. 标签(元素)选择器
* 语法:$("html标签名") 获得所有匹配标签名称的元素
2. id选择器
* 语法:$("#id的属性值") 获得与指定id属性值匹配的元素
3. 类选择器
* 语法:$(".class的属性值") 获得与指定的class属性值匹配的元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<span class="female">力娜扎</span>
<span class="female">丽热巴</span>
<span class="female hero">寡妇</span>
<span class="male hero">铁侠</span>
<span class="male hero">人</span>
<span id="boss">灭霸</span>
<script>
// 1.获取span标签的jquery对象
console.log($('span'));
// 2.获取class有hero的jquery对象
console.log($('.hero'));
// 3.获得id="boss"的jquery对象
console.log($('#boss'));
</script>
</body>
</html>
2.层级关系选择器
1. 后代选择器
* 语法:$("A B") 选择A元素内部的所有B元素
2. 并集选择器
* 语法:$("选择器1,选择器2....") 获取多个选择器选中的所有元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>层级关系选择器</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="kangxi">
<span>儿子</span>
<p>
<span>孙子</span>
</p>
</div>
<div>牛顿</div>
<script>
// 1. 获取所有的p,div的文本
console.log($('p,div').text());
// 2. 获取div的后代span的文本
console.log($('#kangxi span').text());
</script>
</body>
</html>
3.属性选择器
1. 属性选择器
* 语法:$("A[属性名='值']") 包含指定属性等于指定值的选择器
2. 复合属性选择器
* 语法:$("A[属性名='值'][]...") 包含多个属性条件的选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="text" name="username" value="用户名"/><br/>
<input type="text" name="nickname" value="昵称"/><br/>
<script>
// 1.获取type='text'的input标签
console.log($('input[type="text"]'));
// 2.获取type='text' 且 name="nickname" 的input标签
console.log($('input[type="text"][name="nickname"]'));
</script>
</body>
</html>
4.过滤选择器
获得所有的li标签,在此基础上进行筛选过滤
1. 首元素选择器
* 语法: :first 获得选择的元素中的第一个元素
2. 尾元素选择器
* 语法: :last 获得选择的元素中的最后一个元素3. 偶数选择器
* 语法: :even 偶数,从 0 开始计数
4. 奇数选择器
* 语法: :odd 奇数,从 0 开始计数5. 指定索引选择器
* 语法: :eq(index) 指定索引元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>过滤选择器</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul>
<li>大娃</li>
<li>二娃</li>
<li>三娃</li>
<li>四娃</li>
<li>五娃</li>
<li>六娃</li>
<li>七娃</li>
</ul>
<script>
// 1.获取第一个元素
console.log($('li:first').text());
// 2.获取偶数索引元素
console.log($('li:even').text());
// 3.获取指定索引2的元素
console.log($('li:eq(2)').text());
</script>
</body>
</html>
5.对象的遍历
* 语法:
jq对象.each(function(index,element){})
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>08-对象遍历</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<!--
jquery对象的遍历
$.each() 用法示例
-->
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
</ul>
<script>
let lis = document.querySelectorAll('li');
// 普通for
for (let i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
// 增强for
for (let li of lis) {
console.log(li);
}
console.log('--------------------')
// jq的for循环
$('li').each(function (index, element) {
// console.log(index);
// console.log(element);
// console.log(element.innerHTML); // 遍历的元素是js对象
// console.log($(element).html()); // 升级为jq对象
// console.log(this); // 当前遍历的元素,相当于element 补充
})
</script>
</body>
</html>
四。jQuery的DOM操作
1.jQuery操作内容:
1. text(): 获取/设置元素的标签体纯文本内容
* 相当于js: innerText属性2. html(): 获取/设置元素的标签体超文本内容
* 相当于js: innerHTML属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>dom操作内容</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="myDiv"><p>天王盖地虎</p></div>
<script>
// 1.text()操作内容:innerText
// 1.1 获取纯文本内容
console.log($('#myDiv').text());
// 1.2 设置纯文本内容
$('#myDiv').text('<h1>小鸡炖蘑菇</h1>');
// 2.html()操作内容:innerHTML
// 2.1 获取超文本内容
console.log($('#myDiv').html());
// 2.2 设置超文本内容
$('#myDiv').html($('#myDiv').html()+ '<h1>宝塔镇河妖</h1>');
</script>
</body>
</html>
2.jQuery操作属性
1. val(): 获取/设置元素的value属性值
* 相当于:js对象.value
2. attr(): 获取/设置元素的属性
removeAttr() 删除属性
* 相当于:js对象.setAttribute() / js对象.getAttribute()
3. prop():获取/设置元素的属性
removeAttr() 删除属性
jq在1.6版本之后,提供另一组API prop 通常处理属性值为布尔类型操作
例如:checked selected等
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>dom操作属性</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<form action="#" method="get">
姓名 <input type="text" name="username" id="username" value="西亚"/> <br/>
爱好
<input id="hobby" type="checkbox" name="hobby" value="perm" checked>烫头<br/>
<input type="reset" value="清空按钮"/>
<input type="submit" value="提交按钮"/><br/>
</form>
<script>
// 1.获取文本框value属性
// 方式一:
/* console.log($('#username').attr('value')); // 查看
$('#username').attr('value','盖伦小王子'); // 新增 or 修改
$('#username').removeAttr('value'); // 删除*/
// 方式二: val() 只能给 value属性赋值
console.log($('#username').val()); // 查看
$('#username').val('人在塔在'); // 新增 or 修改
// 2.获取爱好的checked属性
/*
方式一:使用attr() 获取
选中返回:checked
未选中:undefined
*/
// console.log($('#hobby').attr('checked'));
/*
方式二:使用prop() 获取
jq在1.6之后,弥补了这个设计缺陷,如果该属性存在返回true,该属性不存在返回false
*/
console.log($('#hobby').prop('checked'));
</script>
</body>
</html>
3.jQuery操作样式
1. 直接修改jq对象样式属性
语法:
jq对象.css()
css(样式名) 获取
css(样式名,样式值) 设置
优点:支持css语法
举例:font-size
2. 添加/删除jq对象样式
语法:
jq对象.addClass()
jq对象.removeClass()
3. 切换jq对象样式
语法:
jq对象.toggleClass() 无添加,有删除
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>dom操作样式</title>
<script src="../js/jquery-3.2.1.min.js"></script>
<style>
#p1{ background-color: red;}
.mp {
color: green;
border: 2px double skyblue;
}
.mpp {
background-color: lightgray;
}
</style>
</head>
<body>
<p id="p1">1. 设置一个css样式</p>
<p id="p2">2. 批量设置css样式</p>
<p id="p3">3. 通过class设置样式</p>
<p id="p4">4. <button id="toggle">切换</button>class样式 </p>
<script>
let $p1 = $('#p1');//获取p1
let $p2 = $('#p2');//获取p2
let $p3 = $('#p3');//获取p3
let $p4 = $('#p4');//获取p4
// 0.获取第一个标签的背景色
console.log($p1.css('background-color'));
// 1. 设置一个css样式
$p1.css('background-color','gray');
// 2. 批量设置css样式
$p2.css({'border':'1px solid red','font-size':'20px'})
// 3. 通过class设置样式
$p3.addClass('mp mpp');
$p3.removeClass('mpp');
// 4. toggleClass() 切换一个class
$('#toggle').click(function () {
$p4.toggleClass('mp')
})
</script>
</body>
</html>
4.jQuery操作元素
1. $(标签) 创建一个标签
$('<li>xxx</li>')2. $.prepend() 在父标签中将子标签放在第一个位置
3. $.append() 在父标签中将子标签放在最后一个位置
4. $.empty() 清空子元素
5. $.remove() 删除自己
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>dom操作元素</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul id="star">
<!-- <li>马尔</li>-->
<li>古力</li>
<li>迪丽</li>
<!-- <li>萨瓦</li>-->
</ul>
<script>
let $star = $('#star'); // 无序列表
// 1.前面添加马尔
$('#star').prepend($('<li>马尔</li>'))
// 2.后面添加萨瓦
$('#star').append($('<li>萨瓦</li>'))
// 3.移出所有列表项
// $('#star').empty();
// 4.删除无序列表
$('#star').remove();
</script>
</body>
</html>
五。jQuery事件绑定
jQuery的事件与js的事件的功能和作用一样,只是在使用语法上稍微有些差异。
js对象.事件属性=function(){}
jq对象.事件函数(function(){})
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jq事件绑定</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="button" value="js方式" id="jsBtn"> <br>
<input type="button" value="jq方式" id="jqBtn"> <br>
<script>
// js事件绑定
document.getElementById('jsBtn').οnclick=function () {
alert('js事件绑定')
}
// jq事件绑定
$('#jqBtn').click(function () {
alert('jq事件绑定')
})
</script>
</body>
</html>
常见事件
1. 点击事件:
1. click():单击事件
2. dblclick():双击事件
2. 焦点事件
1. blur():失去焦点
2. focus():元素获得焦点。
3. 鼠标事件:
1. mousedown() 鼠标按钮被按下。
2. mouseup() 鼠标按键被松开。
3. mousemove() 鼠标被移动。
4. mouseover() 鼠标移到某元素之上。
5. mouseout() 鼠标从某元素移开。
4. 键盘事件:
1. keydown() 某个键盘按键被按下。
2. keyup() 某个键盘按键被松开。
3. keypress() 某个键盘按键被按下并松开。
5. 改变事件
1. change() 域的内容被改变。
6. 表单事件:
1. submit() 提交按钮被点击。
hover详解
六,案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>隔行换色</title>
<style>
div{
margin: 0 auto;
width: 800px;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr>
<th width="100px"><input type="checkbox" id="selectedAll">全/<input type="checkbox" id="selectedOrderAll">反选</th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>5</td>
<td>牛奶制品</td>
<td>牛奶制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>6</td>
<td>大豆制品</td>
<td>大豆制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>7</td>
<td>海参制品</td>
<td>海参制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>8</td>
<td>羊绒制品</td>
<td>羊绒制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>9</td>
<td>海洋产品</td>
<td>海洋产品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>10</td>
<td>奢侈用品</td>
<td>奢侈用品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
<script type="text/javascript">
// 奇数行
// $('tr:even').css('background-color','lightgray');
// 偶数行
// $('tr:odd').css('background-color','skyblue');
$("tr:first").css("backgroundColor","orange");
$("tr:odd").css("backgroundColor","red");
$("tr:even:gt(0)").css("backgroundColor","skyblue");
let oldcolor;
$("tr:gt(0)").each(function () {
$(this).mouseover(function () {
oldcolor = $(this).css(`backgroundColor`);
$(this).css(`backgroundColor`,`pink`);
}).mouseout(function () {
$(this).css(`backgroundColor`,oldcolor);
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>商品全选</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<!--
商品全选
1. 全选 点击全选按钮,所有复选框都被选中
2. 反选 点击反选按钮,所有复选框状态取反
-->
<button id="btn1">1. 全选</button>
<button id="btn2">2. 反选</button>
<br/>
<input type="checkbox">电脑
<input type="checkbox">手机
<input type="checkbox">汽车
<input type="checkbox">别墅
<input type="checkbox" checked="checked">笔记本
<script >
// 全选
$('#btn1').click(function () {
$('input[type="checkbox"]').prop('checked',true);
})
// 反选,必须遍历才能实现
$('#btn2').click(function () {
$('input[type="checkbox"]').each(function (index,element) { // 注意:element
// js方式 推荐
// element.checked = ! element.checked;
// jq方式 比较麻烦 了解
$(element).prop('checked',!$(element).prop('checked'))
})
})
let str = '哈哈'+1+"呵呵";
let str = '<p align="center"></p>'
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>QQ表情</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.emoji{margin:50px;}
ul{overflow: hidden;}
li{float: left;width: 48px;height: 48px;cursor: pointer;}
.emoji img{ cursor: pointer; }
</style>
<script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
</head>
<body>
<div class="emoji">
<ul>
<li><img src="./img/01.gif" height="20" width="20"/></li>
<li><img src="./img/02.gif" height="20" width="20" /></li>
<li><img src="./img/03.gif" height="20" width="20" /></li>
<li><img src="./img/04.gif" height="20" width="20" /></li>
<li><img src="./img/05.gif" height="20" width="20" /></li>
<li><img src="./img/06.gif" height="20" width="20" /></li>
<li><img src="./img/07.gif" height="20" width="20" /></li>
<li><img src="./img/08.gif" height="20" width="20" /></li>
<li><img src="./img/09.gif" height="20" width="20" /></li>
<li><img src="./img/10.gif" height="20" width="20" /></li>
<li><img src="./img/11.gif" height="20" width="20" /></li>
<li><img src="./img/12.gif" height="20" width="20" /></li>
</ul>
<p id="pleasespeak">
<strong>请发言:</strong>
<img src="./img/12.gif" height="20" width="20"/>
</p>
</div>
<script type="text/javascript">
$(".emoji img").click(function () {
$("#pleasespeak").append($(this).clone());
});
</script>
</body>
</html>
other---
1.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>选中输入项目</title>
<style type="text/css">
.content {
margin: 0 auto;
width: 600px;
}
.content div{
margin-top: 30px;
margin-left: 15px;
margin-bottom: 10px;
}
.content input[type="radio"]{
background-color: red;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<body>
<div>
<div class="content">
<div><label for="cityname">请输入城市:</label><input id="cityname" type="text"></div>
<div><label>城市复选框:</label>
<div>
<input type="radio" name="city" value="北京">北京
<input type="radio" name="city" value="南京">南京
<input type="radio" name="city" value="上海">上海
</div>
</div>
<div><button>判断</button></div>
</div>
</div>
<script type="text/javascript">
$("#cityname").blur(function () {
//获取输入框内容
let cityname = $(this).val();
$("input:radio").each(function () {
//比较两个
if ($(this).val()==cityname){
$(this).prop("checked","true");
}
});
});
$("button").click(function () {
//获取输入框内容
let cityname = $(this).val();
$("input:radio").each(function () {
//比较两个
if ($(this).val()==cityname){
$(this).prop("checked","true");
}
});
});
</script>
</body>
</html>
2.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>禁用控件</title>
<style type="text/css">
#lookxieyi{
margin: 20px;
height: 36px;
width: 160px;
background-color: lightgray;
border: black solid 1px;
}
#agreexieyi{
margin: 20px;
height: 36px;
width: 100px;
background-color: lightgray;
border: black solid 1px;
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<body>
<div>
<button id="lookxieyi" disabled="disabled">
请仔细阅读协议(5)
</button>
<br>
<button id="agreexieyi">
同意注册
</button>
</div>
<script type="text/javascript">
$(function () {
let j=5;
let interval = setInterval(function () {
j--
if (j > 0) {
$("#lookxieyi").text(`请仔细阅读协议(${j})`)
}else{
clearInterval(interval);
$("#lookxieyi").text(`请仔细阅读协议`);
$("#lookxieyi").removeAttr("disabled");
$("#agreexieyi").show();
}
},1000);
});
</script>
</body>
</html>
3
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>显示隐藏</title>
<style type="text/css">
.content {
margin: 0 auto;
width: 600px;
}
.content button{
width: 600px;
height: 50px;
}
.content>div{
width: 600px;
height: 320px;
border: gray solid 1px;
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<body>
<div>
<div class="content">
<button>移入显示移出隐藏</button>
<div>
<p style="display: none">鼠标划入不仅显示而且变色</p>
</div>
</div>
</div>
<script type="text/javascript">
$("button").mouseover(function () {
$("p").show(1000,function () {
$(".content>div").css("backgroundColor","red");
});
}).mouseout(function () {
$("p").hide(1000,function () {
$(".content>div").css("backgroundColor","white");
});
});
</script>
</body>
</html>
4
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>发帖功能</title>
<style type="text/css">
#content{
margin-top: 15px;
margin-bottom: 20px;
border: red solid 1px;
}
.fabugongju {
}
</style>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<body>
<div>
<div id="content">
</div>
<div class="fabugongju">
<div>张三 <input type="text"></div>
<textarea name="textcontent" id="textcon" cols="10" rows="10"></textarea><br>
<button>评论</button>
</div>
</div>
<script type="text/javascript">
$("button").click(function () {
let name = $("input").val();
let content = $("#textcon").val();
console.log(name);
console.log(content);
// let con = $("content").html();
// $("content").html(`${con}${name}:${content}<br>`)
$("#content").append(`${name}:${content}<br>`);
});
</script>
</body>
</html>
参考资料:
以下地址引均调用了第三方cdn公共库,第三方库
- jQuery
- jquery-migrate
- jQuery UI
- bootstrap
- reset.css
- font-awesome
- three
- html5.js
- angular
- animate
- vue
- ECharts
- React
- D3.js