不想让所有人调试你页面的方式
测试环境：
Windows7 pro
Chrome：v79.0.3945.88
Firefox：v71.0
思路是：在网页加载完毕后，当打开“开发者工具”时，立刻执行启动debugger模式（关键字”debugger”），同时别忘记加上每隔一秒执行一次；
我用匿名自调用函数无法在Firefo[……]
Continue reading分类： Web
给div绑定点击事件三个方法
基础代码
[html]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
div {
font-size: 2em;
width: 250px;
cursor: pointer /*变成手型*/
}
.clickme {
background-color: #2aabd2;
}
</style>
<script src="//libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<!–代码位置–>
</body>
</html>
[/html]
[……]
Continue readingjsonp学习汇总
为什么要使用jsonp？
为了解决在不同域名下，即跨域（参考JavaScript同源策略）获取数据的问题。
这是同域请求
[javascript]
<script src=’//libs.baidu.com/jquery/2.0.0/jquery.min.js’></script>
<script type="text/javascript">
$.ajax({
url: ‘http://127.0.0.1/a.json’,
dataType: "json",
success: function (data) {
console.log(data);
}
});
</script>
[/javascript]
a.json
[xml]
{
"name": "sun",
"age": 10
}
[/xml]
如果换成跨域？
[javascript]
<script src=’//libs.baidu.com/jquery/2.0.0/jquery.min.js’></script>
<script type="text/javascript">
$.ajax({
url: ‘http://www.sun.cn/a.json’,
dataType: "json",
success: function (data) {
console.log(data);
}
});
</script>
[/javascript]
提示跨域了，现在就需要jsonp出马。
[……]
CSS学习笔记之长度单位（七）
长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。
1、像素
像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单[……]
CSS学习笔记之代码简写（六）
盒模型代码简写
还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下：
[css]
margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/
[/css]
通常有下面三种缩写方法:
1、如果top、right、bottom、left的值相同，如下面代码：
[css]
margin:10px 10px 10px 10px;
[/css]
可缩写为：
[css]
margin:10px;
[/css]
[……]
CSS学习笔记之布局模型（五）
清楚了CSS 盒模型的基本概念、 盒模型类型， 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。
CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
[……]
CSS学习笔记之盒模型（四）
盒模型–边框
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：
[css]
div{
border:2px solid red;
}
[/css]
上面是 border 代码的缩写形式，可以分开写：
[css]
div{
border-width:2px;
border-style:solid;
border-color:red;
}
[/css]
[……]
CSS学习笔记之元素分类（三）
在介绍CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：
[html]
<div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
[/html]
常用的内联元素有：
[html]
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
[/html]
常用的内联块状元素有：
[html]
<img>、<input>
[/html]
[……]