手风琴效果2
参考文章:http://blog.csdn.net/libin_1/article/details/52489724
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
p {
height: 200px;
background: green;
line-height: 200px;
color: red;
font-size: 100px;
display: none;
}
</style>
<script>
$(document).ready(function() {
$("h1").click(function() {
$("p").eq($(this).index('.main')).slideToggle();
});
});
</script>
</head>
<body>
<h1 class="main">Coffee</h1>
<p>哈哈哈哈哈哈哈</p>
<h1 class="main">Milk</h1>
<p>哈哈哈哈哈哈哈</p>
<h1 class="main">Soda</h1>
<p>哈哈哈哈哈哈哈</p>
</body>
</html>
手风琴效果1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
</style>
<script type="text/javascript">
$(function() {
$("p").click(function() {
$("div").slideToggle(1000);
});
$("ul").click(function() {
$("h1").slideToggle(1000);
})
})
</script>
</head>
<body>
<p style="padding: 10px 15px;background: #1685D3;cursor: pointer;">jquery 手风琴</p>
<div style="width: 300px;height: 300px;border: 1px solid red;"></div>
<ul style="padding: 10px 15px;background: #1685D3;cursor: pointer;">jquery 手风琴</ul>
<h1 style="width: 300px;height: 300px;border: 1px solid red;">
</h1>
</body>
</html>
解决sea.js引用jQuery提示$ is not a function的问题
在使用sea.js的如下写法引用jQuery文件时,
//main.js
define(function(require,exports,module){
var $ = require('jquery-3.1.0.min');
$('#name').html('helloworld');
})
会报错,提示$ is not a function;
原因在于jQuery是默认支持AMD规范的,而sea.js是遵循CMD规范进行加载;这两种规范对外提供模块时的定义方法不一样:
复制代码
// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ...
})
// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
// ...
})
复制代码
jQuery对外提供模块时默认支持的是AMD规范,其写法为:
if ( typeof define === "function" && define.amd ) {
define( "jquery", [], function() {
return jQuery;
} );
}
因此,如果想让jQuery支持CMD规范,则将以上代码修改为如下代码即可:
if ( typeof define === "function") {
define(function(require,exports,module){
return jQuery;
});
}
其区别就在于define方法支持规范的判断,以及参数类型的不同。
判断页面滚动方向(上下)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
height:1000px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
function scroll(fn) {
var beforeScrollTop = document.body.scrollTop,
fn = fn || function() {};
window.addEventListener("scroll", function() {
var afterScrollTop = document.body.scrollTop,
delta = afterScrollTop - beforeScrollTop;
if(delta === 0) return false;
fn(delta > 0 ? "down" : "up");
beforeScrollTop = afterScrollTop;
}, false);
}
scroll(function(direction) {
if(direction == "down") {
console.log("向下滚");
} else {
console.log("向上滚");
}
});
});
</script>
</body>
</html>
深入理解javascript 回调指针
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript">
window.onload = function() {
var i=0;
function test() {
document.getElementById('main').innerHTML=i++;
}
setInterval(test, 1000);//注意此处是test,不是test();
}
</script>
</head>
<body>
<p id="main"></p>
</body>
</html>
去掉字符串中所有空格
1、 去掉字符串前后所有空格:
代码如下:
function Trim(str)
{
return str.replace(/(^\s*)|(\s*$)/g, "");
}
说明:
如果使用jQuery直接使用$.trim(str)方法即可,str表示要去掉前后所有空格的字符串。
2、 去掉字符串中所有空格(包括中间空格,需要设置第2个参数为:g)
代码如下:
function Trim(str,is_global)
{
var result;
result = str.replace(/(^\s+)|(\s+$)/g,"");
if(is_global.toLowerCase()=="g")
{
result = result.replace(/\s/g,"");
}
return result;
}
JS获取div距离浏览器窗口的高度(重要)
制作图片懒加载:http://www.cnblogs.com/libin-1/p/5851872.html
http://www.cnblogs.com/vajoy/p/4263291.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
#main {
height: 2000px;
background: red;
}
#java {
height: 300px;
background: blue;
}
#js{
height: 300px;
background: green;
}
#haha{
height: 300px;
background: yellow;
}
</style>
<script type="text/javascript">
$(function() {
console.log('$("#java").offset().top : '+$("#java").offset().top);
$("#java").offset({
top: 200
});
console.log('document.getElementById("js").getBoundingClientRect().top : '+document.getElementById('js').getBoundingClientRect().top);
console.log('document.getElementById("js").getBoundingClientRect().bottom : '+document.getElementById('js').getBoundingClientRect().bottom);
})
</script>
</head>
<body>
<div id="main">
</div>
<div id="java">
</div>
<div id="js">
</div>
<div id="haha">
</div>
</body>
</html>
点击div外面该div消失
http://www.cnblogs.com/libin-1/p/5746167.html
自定义a标签悬浮title样式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
#tooltip {
border: 1px solid red;
background: #FF6;
position: absolute;
padding: 1px;
color: #333;
display: none;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="link">
<p>
<a href="#" class="tooltip" title="这是我的超链接提示1">提示1</a>
</p>
<p>
<a href="#" class="tooltip" title="这是我的超链接提示2">提示2</a>
</p>
<p>
<a href="#" title="这是我的超链接提示1">自带提示1</a>
</p>
<p>
<a href="#" title="这是我的超链接提示2">自带提示2</a>
</p>
</div>
<script type="text/javascript">
$(function() {
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e) {
this.myTitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>"; //创建DIV元素
$("#link").append(tooltip); //追加到文档中
$("#tooltip").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show(); //设置X Y坐标, 并且显示
}).mouseout(function() {
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e) {
$("#tooltip").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
});
})
})
</script>
</body>
</html>
回调函数是什么鬼?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function test(a, b, c) {
setInterval(function() {
b(a);
}, c)
}
test(10, function(i) {
console.log(i);
}, 2000);
</script>
</head>
<body>
</body>
</html>
js如何实现继承
http://blog.csdn.net/james521314/article/details/8645815
JS原型链简单图解
http://www.cnblogs.com/libin-1/p/5820550.html
http://blog.csdn.net/libin_1/article/details/52366524
http://www.cnblogs.com/myqianlan/p/4421950.html
http://www.cnblogs.com/shuiyi/p/5343399.html
http://www.cnblogs.com/shuiyi/p/5305435.html
this,都快忘了你了
参考:http://blog.csdn.net/libin_1/article/details/52337576
http://www.cnblogs.com/libin-1/p/5814792.html
http://www.cnblogs.com/beyond-succeed/p/5808290.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var name = "window1",
lzh = {
name: "lzh",
sayName: function() {
function innerFunction() {
console.log(_this.name);
}
var _this=this;
innerFunction();
return function() {
console.log(_this.name);
}
}
}
lzh.sayName()();
</script>
<script type="text/javascript">
var name1 = "window2",
lzh1 = {
name: "lzh",
sayName: function() {
function innerFunction() {
console.log(this.name);
}
innerFunction();
return function() {
console.log(this.name);
}
}
}
lzh1.sayName()();
</script>
</head>
<body>
</body>
</html>
prototype,都快忘了你了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function LIBIN(a, b) {
this.a = a;
this.b = b;
this.fun = function() {
alert('真是日了dog了');
sb();
}
sb = function() {
alert("卧槽!");
}
}
LIBIN.prototype = {
dianzan: function() {
alert("点赞");
},
budianzan: function() {
alert("拒绝点赞");
}
}
var libin = new LIBIN('小明', 18);
libin.dianzan();
alert(libin.a + ":" + libin.b);
libin.fun();
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function LIBIN(a, b) {
this.a = a;
this.b = b;
this.fun = function() {
alert('真是日了dog了');
sb();
}
sb = function() {
alert("卧槽!");
}
};
LIBIN.prototype = {
sb:"是你",
dianzan: function() {
alert("点赞");
},
budianzan: function() {
alert("拒绝点赞");
}
};
LIBIN.prototype.x="zhangsan";
LIBIN.prototype.saycao=function(){
alert("卧槽");
}
var libin = new LIBIN('小明', 18);
libin.dianzan();
alert(libin.a + ":" + libin.b+":"+libin.x+":"+libin.sb);
libin.fun();
libin.saycao();
</script>
</head>
<body>
</body>
</html>
JavaScript和jQuery的类型判断
参考:http://www.cnblogs.com/likeFlyingFish/p/5840496.html
“`
对于类型的判断,JavaScript用typeof来进行。
栗子:
复制代码
console.log(typeof null); //object
console.log(typeof []); //object
console.log(typeof {}); //object
console.log(typeof new Date()); //object
console.log(typeof new Object); //object
console.log(typeof function(){}); //function
console.log(typeof alert); //function
console.log(typeof 1); //number
console.log(typeof “abc”); //string
console.log(typeof true); //boolean
复制代码
可以看到,typeof并不能够准确的判断出每一种数据类型,比如null和数组等都是object类型。因此,JavaScript判断数据类型不推荐使用typeof。
那么要如何具体判断呢??看一下语法<( ̄3 ̄)> !
{}.toString.call(obj);
栗子:
复制代码
console.log({}.toString.call(null)); //[object Null]
console.log({}.toString.call([])); //[object Array]
console.log({}.toString.call({})); //[object Object]
console.log({}.toString.call(new Date())); //[object Date]
console.log({}.toString.call(function(){})); //[object Function]
console.log({}.toString.call(new Object)); //[object Object]
console.log({}.toString.call(alert)); //[object Function]
console.log({}.toString.call(1)); //[object Number]
console.log({}.toString.call(‘abc’)); //[object String]
console.log({}.toString.call(true)); //[object Boolean]
复制代码
哈哈,是不是一目了然呀!!
那如果你用的是jQuery,就不用这么麻烦喽,可以直接用工具方法$.type(),进行判断
栗子:
console.log(
.type(nudl))1F;2520
,�154cW�F\9<ɪf<135”<,�kp��
7B@ (D�)��#B%2���:5v<)6t3w
���Q61��p
’p06j;�|(�ﻰ6q6”��6��4rt�
}�, ����