2018-8-28 18:25:27

jQuery 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html

2018-8-28 19:53:19

还是讲的jQuery !

有点点枯燥!但是很好理解!

这几天想多看看书!电脑玩的太多!需要精心看书!

扎克伯格 说过 有时候有状态学多点,没状态就干点其他的!

越努力,越幸运!

<!DOCTYPE html>
<html>
<head>
<title>位置相关方法</title>
<meta charset="utf-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.c1{
height: 100px;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="c1">我是div</div>
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>自定义模态框</title>
<meta charset="utf-8">
<style type="text/css">
.cover{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.4);
z-index: 998;
} .modal{
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 action="">
<p>
<label>用户名:
<input type="text" name="">
</label>
</p>
<p>
<label>密码:
<input type="text" name="">
</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 type="text/javascript">
// 找到点击弹出模态框的按钮
$("#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>
<!DOCTYPE html>
<html>
<head>
<title>修改css样式</title>
<meta charset="utf-8">
</head>
<body>
<p>小强</p>
<p>二哥</p>
<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$("p").click(function(){
//把当前点击的标签变绿
// 在处理事件的函数中用this 表示 当前触发事件的标签
$(this).css("color","red");
$(this).css("font-size","24px");
}) </script>
</body>
</html>

8.28 jQuery的更多相关文章

  1. jQuery 2.0.3 源码分析Sizzle引擎 - 高效查询

    为什么Sizzle很高效? 首先,从处理流程上理解,它总是先使用最高效的原生方法来做处理 HTML文档一共有这么四个API: getElementById 上下文只能是HTML文档 浏览器支持情况:I ...

  2. 50 个最棒的 jQuery 日历插件,很齐全了!(转)

    http://www.php100.com/html/it/qianduan/2015/0326/8856.html 什么介绍都没有,直接上酸菜! 1. Even Touch Calendar 2.  ...

  3. 2014年50个程序员最适用的免费JQuery插件

    有用的jQuery库是设计师和开发者之间一个非常熟悉的短语.这是现在互联网中最流行的JavaScript函数库之一.每个设计师和开发人员都应该知道它的重要性,而且熟悉它的功能和特点. jQuery几乎 ...

  4. jQuery慢慢啃之工具(十)

    1.jQuery.support//一组用于展示不同浏览器各自特性和bug的属性集合 2.jQuery.browser//浏览器内核标识.依据 navigator.userAgent 判断. 可用值: ...

  5. js,jquery备忘录

    1.var s = str.charCodeAt();转ASCII码 2.String.fromCharCode(65);转字母 3.es6 ... (扩展运算符),将一个数组转化成由逗号分割的队列. ...

  6. jQuery数组($.grep,$.each,$.inArray,$.map)处理函数详解

    1.jQuery.grep( array, function(elementOfArray, indexInArray) [, invert ] ) 描述: 查找满足过滤函数的数组元素.原始数组不受影 ...

  7. JSON和JS对象之间的互转

    1. jQuery插件支持的转换方式 $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 2. 浏览器支持的 ...

  8. CSharp 相关知识点小结

    1.JS获取iframe下面的内容document.getElementById('IFRAME1').contentDocument; 2.dialog 弹出层,定位:postion:'bottom ...

  9. 黄聪: 50 个 Bootstrap 插件

    Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 本文向你 ...

随机推荐

  1. Salience Model

    Who is a stakeholder? Simply anyone with a stake in the project either direct or indirect. PMBOK say ...

  2. Spring Cloud Sleuth 使用教程

    Spring Cloud Sleuth 使用案例 Span术语(Terminology) Span:基本工作单元,例如,在一个新建的span中发送一个RPC等同于发送一个回应请求给RPC,span通过 ...

  3. 8 -- 深入使用Spring -- 1...2 Bean后处理器的用处

    8.1.2 Bean后处理器的用处 Spring提供的两个常用的后处理器: ⊙ BeanNameAutoProxyCreator : 根据Bean实例的name属性,创建Bean实例的代理. ⊙ De ...

  4. 初试WebSocket构建聊天程序

    上一篇文章中使用了Ajax long polling实现了一个简单的聊天程序,对于web实时通信,今天就来试用一下基于WebSocket的长连接方式. WebSocket简介 为了增强web通信的功能 ...

  5. 【ArcGIS】ArcGIS Enterprise部署

    单机部署 多层部署 高可用性部署

  6. RF变量列表类型@{}和${}列表类型的关系

    总结:@{}列表类型和${}列表类型都可以表示list类型,均可以通过 set variable 和 create list 创建,区别主要是展示格式和引用格式: @{}类型可以通过 set vari ...

  7. Perl操作Oracle

    一. perl连接Oracle数据库 [oracle@oracle11gR2 perl_script]$ more connect.pl #!/usr/bin/perl #perl script us ...

  8. Oracle的闪回技术--闪回已删除的表

    注意闪回技术只能保护非系统表决空间中的表,而且表空间必须本地管理, 外键将不可以被恢复, 索引和约束的名字将会被命名为以BIN开头,由系统生成的名字 查看是否开启闪回: SQL> show pa ...

  9. Jar命令

    JAR包是Java中所特有一种压缩文档,其实大家就可以把它理解为.zip包;当然也是有区别的,JAR包中有一个META-INF\MANIFEST.MF文件,当你打成JAR包时,它会自动生成. 一.ja ...

  10. linux 开机自启转载

    设置开机启动示例: # touch /etc/init.d/rc.local 设置为可执行: # chmod +x /etc/init.d/rc.local 用 update-rc.d 设置启动级别: ...