jQuery基础笔记(3)
day55
参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-8-0
操作标签
样式操作
样式类
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。
示例:开关灯和模态框
实践:
01自定义模态框示例.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自定义模态框示例</title>
<style>
.cover {//全白色覆盖之前内容
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.4);
z-index: 998;
} .modal {//但是这部分在cover之前,通过z-index设置
height: 400px;
width: 600px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -200px;
z-index: 1000;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="b1">屠龙宝刀,点击就送!</button>
<div class="cover hide"></div>
<div class="modal hide">
<form>
<p>
<label>用户名:
<input type="text">
</label>
</p>
<p>
<label>密码:
<input type="password">
</label>
</p>
<p>
<input type="submit" value="登录">
<input id="cancel" type="button" value="取消">
</p>
</form>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
// 找到点击弹出模态框的按钮
$("#b1").click(function () { //点击后显示
// 把.cover和.modal显示出来(去除掉.hide)
$(".cover").removeClass("hide"); // 显示背景
$(".modal").removeClass("hide"); // 显示模态框
}); // 找到取消按钮,绑定事件
$("#cancel").click(function () {//点击取消
// 给背景和模态框都加上hide类
$(".cover").addClass("hide");
$(".modal").addClass("hide");
})
</script>
</body>
</html>
效果:
CSS
改变css样式
css("color","red")//DOM操作:tag.style.color="red"
示例:
$("p").css("color", "red"); //将所有p标签的字体设置为红色
实践:
02修改CSS样式.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>修改CSS样式</title>
</head>
<body> <p>乔小强</p>
<p>二哥</p>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("p").click(function () {
// 把当前点击的标签变绿
// 在处理事件的函数中用 this 表示 当前触发事件的标签
// $(this).css("color", "red");
// $(this).css("font-size", "24px");
//点击改变CSS
$(this).css({"color": "pink", "font-size": "48px"});
})
</script>
</body>
</html>
效果:
位置操作
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
.offset()
方法允许我们检索一个元素相对于文档(document)的当前位置。
和 .position()
的差别在于: .position()
是相对于相对于父级元素的位移。
04返回顶部示例.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>位置相关示例之返回顶部</title>
<style>
* {
margin: 0;
}
.c1 {
width: 100px;
height: 200px;
background-color: red;
} .c2 {
height: 50px;
width: 50px; position: fixed;
bottom: 15px;
right: 15px;
background-color: #2b669a;
}
.hide {
display: none;
}
.c3 {
height: 100px;
}
</style>
</head>
<body>
<button id="b1" class="btn btn-default">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div> <button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
//鼠标滚动,script应用此功能函数
$(window).scroll(function () { //转为jQuery对象
if ($(window).scrollTop() > 100) {//滚了100px,则显示
$("#b2").removeClass("hide");
}else {
$("#b2").addClass("hide");//小于100px,隐藏
}
});
$("#b2").click(function () { //回网页顶部
$(window).scrollTop(0);
})
</script>
</body>
</html>
一键回到顶部:
尺寸:

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

05尺寸示例.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>尺寸示例</title>
<style>
.c1 {
height: 100px;
width: 200px;
padding: 10px;
margin: 20px;
background-color: red;
border: 5px solid green;
}
</style>
</head>
<body> <div>
<div class="c1">div</div>
</div>
<script src="jquery-3.2.1.min.js"></script>
</body>
</html>
实践:
高度为100,加上上下内填充10,为120
jQuery基础笔记(3)的更多相关文章
- jQuery基础笔记(1)
day54 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html 1. 为什么要学jQuery? MySQL Python ...
- jquery基础 笔记一
一. 1. vsdoc: 在Visual Studio中需要引入此版本的jquery类库才能启用智能感知.如:jquery-1.3.2-vsdoc2.js<body> <div id ...
- jQuery基础笔记 each和data(7)
day56 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-11-0 each jQuery.each(collection, ...
- jQuery基础笔记 事件(6)
day56 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-6 事件 ***** 1. 目前为止学过的绑定 ...
- jQuery基础笔记(4)
day55 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-3 文本操作 HTML代码: html()// 取得第一个匹配 ...
- jQuery基础笔记(2)
day54 筛选器 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-7-5 筛选器方法 下一个元素: $("#id& ...
- jquery基础 笔记三
一. 操作"DOM属性" 在jQuery中没有包装操作"DOM属性"的函数, 因为使用javascript获取和设置"DOM属性"都很简单. ...
- jquery基础 笔记二
动态创建元素 关于使用HTML DOM创建元素本文不做详细介绍, 下面举一个简单的例子: //使用Dom标准创建元素 var select = document.createElement(" ...
- Jquery基础笔记
1.$(function(){ 等价于 window.onload=function(){ }) } 2 ...
随机推荐
- Restful API设计要点
1 Restful API时面向资源,不能面向动作: 2 充分利用http协议的GET, HEAD, OPTION, PUT, POST, DELETE几种方法: 3 GET方法用于获取资源,是幂等和 ...
- 七大排序的个人总结(二) 归并排序(Merge
七大排序的个人总结(二) 归并排序(Merge 归并排序(Merge Sort): 归并排序是一个相当“稳定”的算法对于其它排序算法,比如希尔排序,快速排序和堆排序而言,这些算法有所谓的最好与最 ...
- 数学整合 新(LUOGU)
1.卡特兰数(P2532) 递推式:h(n)=C(2n,n)/(n+1) (n=0,1,2,...) 前十项(从零开始):1, 1, 2, 5, 14, 42, 132, 429, 1430, 486 ...
- [Selenium]验证点了某个Button之后无反应
期望:点了某个Button,无反应 问题:怎么去验证无反应 WebElement webElement = page.getICORemove(); SeleniumUtil.hover(page.g ...
- div浮停在页面最上或最下
div{ position:fixed; bottom:0px; // top:0px; z-index:999; } bottom:0px 浮停在最下面,top:0px 浮停在最上面:z-index ...
- 2018.10.18 bzoj4105: [Thu Summer Camp 2015]平方运算(线段树)
传送门 线段树妙题. 显然平方几次就会循环(打表证明不解释). 然后所有环长度的lcmlcmlcm不大于70. 因此维护一下当前区间中的节点是否全部在环上. 不是直接暴力到叶子节点修改. 否则整体打标 ...
- 2018.09.23 关键网线(tarjan)
描述 给出一个无向连通图,即在任一个点对间存在路径.有的点提供服务a, 有的点提供服务b .同一个点可能有两种服务类型.每个点必须与提供2种服务的点连通.如果一个边断掉,就可能出现有些点不能被服务到, ...
- 2018.07.03 POJ 2318 TOYS(二分+简单计算几何)
TOYS Time Limit: 2000MS Memory Limit: 65536K Description Calculate the number of toys that land in e ...
- 2018.06.29 洛谷P1505 [国家集训队]旅游(树链剖分)
旅游 题目描述 Ray 乐忠于旅游,这次他来到了T 城.T 城是一个水上城市,一共有 N 个景点,有些景点之间会用一座桥连接.为了方便游客到达每个景点但又为了节约成本,T 城的任意两个景点之间有且只有 ...
- spring+hibernate 整合异常 Class 'org.apache.commons.dbcp.BasicDataSource' not found
解决方法 添加 commons-dbcp.jar和commons-pool.jar包