写这个函数库,主要是为了能够通过写较少的代码来实现复杂的功能,类似于jQuery和jQuery插件的集合体。
技术能力有限,功能没有jQuery那么强大,不过在以后的学习过程中会继续完善版本。 下载地址:
http://download.csdn.net/download/wohuifude123/9756385
压缩包中有这个函数库调用的例子,是自己写函数时实验成功的例子,可以借鉴下。 功能说明如下: 功能:设置各种样式
调用方法
setStyle(head,{width:"200px",height:"70px",display:"block",backgroundColor:"red",color:'blue'}) 功能:ajax数据后台传到前台
调用方法$_a.ajax_L({
url:'cs001.php', //请求地址
type: "POST", //请求方式
data: { name: "super", age: 20 }, //请求参数
dataType: "json",
success: function (response, xml) {
// 此处放成功后执行的代码
document.getElementById("img01").innerHTML=response;
},
fail: function (status) {
// 此处放失败后执行的代码
}
});
说明:自定义属性的功能
举例
<div id="a1" data="bg|height|width">111</div>data("a1"); 说明:判断浏览器的种类
举例var userAgent = navigator.userAgent;
var browser;
var version;
var browserMatch = uaMatch(userAgent.toLowerCase());
if (browserMatch.browser){
browser = browserMatch.browser;
version = browserMatch.version;
}
alert(browser+version);
说明:自动创建表格
举例var table={
tr:3,td:5,
content:
[
{td:"王子1"},{td:"公主4"},{td:"公主7"},{td:"王子10"},{td:"王子13"},
{td:"王子2"},{td:"公主5"},{td:"公主8"},{td:"王子11"},{td:"王子14"},
{td:"王子3"},{td:"公主6"},{td:"公主9"},{td:"王子12"},{td:"王子15"}
],
border:2,
td_style:"red",
td_border:"solid"
}
autoTable("table",table);
说明:创建二级目录
举例<ul id="ca">
<li class="cc">111</li>
<li class="cc">222</li>
<li class="cc">333</li>
<li class="cc">444</li>
<li class="cc">555</li>
<li class="cc">666</li>
<li class="cc">777</li>
<li class="cc">888</li>
</ul> //数据层
var tree = {
"a0": {
"id": 0,
"name": "a0",
"children": {
"b1": {
"cname":"b0_1",
"href":"https://www.baidu.com/"
},
"b2": {
"cname":"b0_2",
"href":"https://www.youku.com/"
},
"b3": "b0_3"
}
},
"a1": {
"id": 1,
"name": "a1",
"children": {
"b1": "b1_1",
"b2": "b1_2",
"b3": "b1_3"
}
},
"a2": {
"id": 2,
"name": "a2",
"children": {}
},
"a3": {
"id": 3,
"name": "a3",
"children": {
"b1": "b3_1",
"b2": "b3_2",
"b3": "b3_3"
}
}
};
//视图层
create("cc",tree);
说明:清除空白节点
举例
cleanWhiteSpace(document.getElementById("ca")) 说明:获取字符位置
举例
var a ="cqcafsffnnfgf";
alert(sposition(a,"f"));
说明:去掉前后空格
举例
var str_cs = " aaaaaaaaaaaaaaaaaa "
alert(str_cs)
alert(str_cs.trim_l()); 说明:创建分页功能
举例<div id="aa"></div>
<ul style="width:350px; list-style:none">
<li style="float:left;width:100px;text-align:center"><input name="" type="button" value="上一页" onclick="prevPage('aa')"/></li>
<li style="float:left;width:50px;text-align:center"><a href="javascript:goPage('aa',1)">1</a></li>
<li style="float:left;width:50px;text-align:center"><a href="javascript:goPage('aa',2)">2</a></li>
<li style="float:left;width:50px;text-align:center"><a href="javascript:goPage('aa',3)">3</a></li>
<li style="float:left;width:100px;text-align:center"><input name="" type="button" value="下一页" onclick="nextPage('aa')"/></li>
</ul>
//数据层
var myA01 =
[
{"id":"cxh","tid":123456,"score":2000,"time":"2009-08-20"},
{"id":"zd1","tid":123356,"tscore":1500,"time":"2009-11-20"},
{"id":"zd2","tid":123456,"tscore":1500,"time":"2009-11-20"},
{"id":"zd3","tid":123456,"tscore":1500,"time":"2009-11-20"},
{"id":"zd4","tid":123456,"tscore":1500,"time":"2009-11-20"},
{"id":"zd5","tid":123456,"tscore":1500,"time":"2009-11-20"},
{"id":"zd6","tid":123456,"tscore":1500,"time":"2009-11-20"},
{"id":"zd7","tid":123456,"tscore":1500,"time":"2009-11-20"},
{"id":"zd8","tid":123456,"tscore":1500,"time":"2009-11-20"},
{"id":"zd9","tid":123456,"tscore":1500,"time":"2009-11-20"},
{"id":"zd0","tid":123456,"tscore":1500,"time":"2009-11-20"},
{"id":"zd111","tid":123456,"tscore":1500,"time":"2009-11-20"}
]; var myA02 =
[
{"id":"12h","tid":123456,"score":2000,"time":"2009-08-20"},
{"id":"121","tid":123456,"tscore":1500,"time":"2009-11-20"},
{"id":"122","tid":123456,"tscore":1500,"time":"2009-11-20"},
{"id":"123","tid":123456,"tscore":1500,"time":"2009-11-20"},
{"id":"124","tid":123456,"tscore":1500,"time":"2009-11-20"}
]; //视图层
pagination("aa",myA01)
//alert(myA01[0]["id"])
global.js主要用于设置CSS样式public.js实现页面动态效果connect文件夹的connect.php用于后台数据库的操作论坛中高手众多,小弟在此献丑了,不足之处还望多多指点
技术能力有限,功能没有jQuery那么强大,不过在以后的学习过程中会继续完善版本。 下载地址:
http://download.csdn.net/download/wohuifude123/9756385
压缩包中有这个函数库调用的例子,是自己写函数时实验成功的例子,可以借鉴下。 功能说明如下: 功能:设置各种样式
调用方法
setStyle(head,{width:"200px",height:"70px",display:"block",backgroundColor:"red",color:'blue'}) 功能:ajax数据后台传到前台
调用方法$_a.ajax_L({
url:'cs001.php', //请求地址
type: "POST", //请求方式
data: { name: "super", age: 20 }, //请求参数
dataType: "json",
success: function (response, xml) {
// 此处放成功后执行的代码
document.getElementById("img01").innerHTML=response;
},
fail: function (status) {
// 此处放失败后执行的代码
}
});
说明:自定义属性的功能
举例
<div id="a1" data="bg|height|width">111</div>data("a1"); 说明:判断浏览器的种类
举例var userAgent = navigator.userAgent;
var browser;
var version;
var browserMatch = uaMatch(userAgent.toLowerCase());
if (browserMatch.browser){
browser = browserMatch.browser;
version = browserMatch.version;
}
alert(browser+version);
说明:自动创建表格
举例var table={
tr:3,td:5,
content:
[
{td:"王子1"},{td:"公主4"},{td:"公主7"},{td:"王子10"},{td:"王子13"},
{td:"王子2"},{td:"公主5"},{td:"公主8"},{td:"王子11"},{td:"王子14"},
{td:"王子3"},{td:"公主6"},{td:"公主9"},{td:"王子12"},{td:"王子15"}
],
border:2,
td_style:"red",
td_border:"solid"
}
autoTable("table",table);
说明:创建二级目录
举例<ul id="ca">
<li class="cc">111</li>
<li class="cc">222</li>
<li class="cc">333</li>
<li class="cc">444</li>
<li class="cc">555</li>
<li class="cc">666</li>
<li class="cc">777</li>
<li class="cc">888</li>
</ul> //数据层
var tree = {
"a0": {
"id": 0,
"name": "a0",
"children": {
"b1": {
"cname":"b0_1",
"href":"https://www.baidu.com/"
},
"b2": {
"cname":"b0_2",
"href":"https://www.youku.com/"
},
"b3": "b0_3"
}
},
"a1": {
"id": 1,
"name": "a1",
"children": {
"b1": "b1_1",
"b2": "b1_2",
"b3": "b1_3"
}
},
"a2": {
"id": 2,
"name": "a2",
"children": {}
},
"a3": {
"id": 3,
"name": "a3",
"children": {
"b1": "b3_1",
"b2": "b3_2",
"b3": "b3_3"
}
}
};
//视图层
create("cc",tree);
说明:清除空白节点
举例
cleanWhiteSpace(document.getElementById("ca")) 说明:获取字符位置
举例
var a ="cqcafsffnnfgf";
alert(sposition(a,"f"));
说明:去掉前后空格
举例
var str_cs = " aaaaaaaaaaaaaaaaaa "
alert(str_cs)
alert(str_cs.trim_l()); 说明:创建分页功能
举例<div id="aa"></div>
<ul style="width:350px; list-style:none">
<li style="float:left;width:100px;text-align:center"><input name="" type="button" value="上一页" onclick="prevPage('aa')"/></li>
<li style="float:left;width:50px;text-align:center"><a href="javascript:goPage('aa',1)">1</a></li>
<li style="float:left;width:50px;text-align:center"><a href="javascript:goPage('aa',2)">2</a></li>
<li style="float:left;width:50px;text-align:center"><a href="javascript:goPage('aa',3)">3</a></li>
<li style="float:left;width:100px;text-align:center"><input name="" type="button" value="下一页" onclick="nextPage('aa')"/></li>
</ul>
//数据层
var myA01 =
[
{"id":"cxh","tid":123456,"score":2000,"time":"2009-08-20"},
{"id":"zd1","tid":123356,"tscore":1500,"time":"2009-11-20"},
{"id":"zd2","tid":123456,"tscore":1500,"time":"2009-11-20"},
{"id":"zd3","tid":123456,"tscore":1500,"time":"2009-11-20"},
{"id":"zd4","tid":123456,"tscore":1500,"time":"2009-11-20"},
{"id":"zd5","tid":123456,"tscore":1500,"time":"2009-11-20"},
{"id":"zd6","tid":123456,"tscore":1500,"time":"2009-11-20"},
{"id":"zd7","tid":123456,"tscore":1500,"time":"2009-11-20"},
{"id":"zd8","tid":123456,"tscore":1500,"time":"2009-11-20"},
{"id":"zd9","tid":123456,"tscore":1500,"time":"2009-11-20"},
{"id":"zd0","tid":123456,"tscore":1500,"time":"2009-11-20"},
{"id":"zd111","tid":123456,"tscore":1500,"time":"2009-11-20"}
]; var myA02 =
[
{"id":"12h","tid":123456,"score":2000,"time":"2009-08-20"},
{"id":"121","tid":123456,"tscore":1500,"time":"2009-11-20"},
{"id":"122","tid":123456,"tscore":1500,"time":"2009-11-20"},
{"id":"123","tid":123456,"tscore":1500,"time":"2009-11-20"},
{"id":"124","tid":123456,"tscore":1500,"time":"2009-11-20"}
]; //视图层
pagination("aa",myA01)
//alert(myA01[0]["id"])
global.js主要用于设置CSS样式public.js实现页面动态效果connect文件夹的connect.php用于后台数据库的操作论坛中高手众多,小弟在此献丑了,不足之处还望多多指点
解决方案 »
- zDialog在ie7,ie8下显示不正常
- 如何用javascript做一个滚动条控制器
- 各位有个问题需要大家帮忙?就是我想把点击弹出层改成打开网页就弹同,我有代码,不知道怎么往里套?
- 关于用javascript禁用IE浏览器的工具栏刷新按钮以及鼠标右键刷新变为不可用
- 如何让一个没有width属性的图片自适应宽度!
- 怎么用JAVASCRIPT控制网页刷新一次
- 这么简单的代码竟然出现脚本错误!
- iframe的老问题,动态调整,那位大虾有办法,求教(内详)
- 我想学习javascrpt,却又不知如何下手.急死人
- 在javascript中如何得到!鼠标的位置!谢谢了!
- easyUI datagrid 合计行扩展的问题
- 签名插件jsignature签字板怎么判断是否有没有签名。
<meta charset="utf-8">
<script>
$=function(b){return document.getElementById(b)};_=function(){var b,a,f,e={},d=arguments.length;for(var c=0;c<d;c++){b=arguments[c];for(a in b){e[a]=b[a]}}return e};_$=function(){var b,a,e=arguments[0],d=arguments.length;for(var c=1;c<d;c++){b=arguments[c];for(a in e){if(e[a]===undefined||b[a]===undefined)continue;(e[a]=b[a])}}return e};
</script>
</head>
<body>
</body>
<script>
/*
myfoo={
value:42,
method:function(){
alert("Foo");
return this;
},
};mybar=_(myfoo,{foo:'Hello World',});//对象从后往前做覆盖,生成新对象
test=_(mybar);
console.log(test.method());
console.log(test.value);
console.log(test.foo);
function Foo() {
this.value = 42;
}
Foo.prototype = {
method: function() {
alert("Foo");
}
};function Bar() {}// 设置Bar的prototype属性为Foo的实例对象
Bar.prototype = new Foo();
Bar.prototype.foo = 'Hello World';// 修正Bar.prototype.constructor为Bar本身
Bar.prototype.constructor = Bar;var test = new Bar() // 创建Bar的一个新实例
//alert(test.method());
//alert(test.value);
//alert(test.foo);
*//*
上面的例子中,test 对象从 Bar.prototype 和 Foo.prototype 继承下来;因此,它能访问 Foo 的原型方法 method。
同时,它也能够访问那个定义在原型上的 Foo 实例属性 value。需要注意的是 new Bar() 不会创造出一个新的 Foo 实例,而是重复使用它原型上的那个实例;
因此,所有的 Bar 实例都会共享相同的 value 属性。
*/
person={
name:0,
share:0,
printname:function(){
alert(this.name);
return this;
},
};
console.log(person)
person1=_(person,{name:'Byron',share:[],});
person2=_(person,{name:'Frank',share:[],});
console.log(person2);
person1.share.push(5);
person2.share.push(8);
console.log(person1.share);
console.log(person2.share);
var base = {
name : "base",
getInfo : function(){
return this.name;
},
};
var ext1 = _(base,{id:1,});
var ext2 = _(base,{id:9,});
console.log(ext1.id);
console.log(ext1.getInfo());
console.log(ext2.id);
console.log(ext2.getInfo());
// 字符串:String()
/* var str = "张三";
document.write(str.constructor+"<br/>");
document.writeln(str.constructor === String); // truefunction Person(name){
this.name=name;
}Person.prototype.share=[];Person.prototype.printName=function(){
alert(this.name);
}var person1=new Person('Byron');
var person2=new Person('Frank');person1.share.push(5);
person2.share.push(8);
//alert(person1.share[0]);
//person1.printName();
var base = {
name : "base",
getInfo : function(){
return this.name;
}
}
var ext1 = {
id : 0,
__proto__ : base
}
var ext2 = {
id : 9,
__proto__ : base
}
alert(ext1.id);
alert(ext1.getInfo());
alert(ext2.id);
alert(ext2.getInfo());
*/
/*
//两种定义函数方式
//aaa();
//这样调用就会出错
var aaa = function(){
alert("A");
}
aaa();
//这样就不会出错
//先调用后声明
bbb();
function bbb(){
alert("bb");
}
*//*
//原型使用方式1
var Calculator = function (decimalDigits, tax) {
this.decimalDigits = decimalDigits;
this.tax = tax;
};
Calculator.prototype = {
add: function (x, y) {
return x + y;
}, subtract: function (x, y) {
return x - y;
}
};
alert((new Calculator()).add(1, 5));
*/
var Calculator = {
decimalDigits:0,
tax :0,
add: function (x, y) {
return x + y;
},
subtract: function (x, y) {
return x - y;
},
};console.log(_(Calculator).add(1, 5));//原型使用方式2BaseCalculator = {
decimalDigits : 2,
innerHTML :"开始",
add: function(x, y) {
return x + y;
},
subtract: function(x, y) {
return x - y;
},
zo:function(){
return {a:'a1',b:'b1'};
}
};var Base=_(BaseCalculator);
console.log(_(BaseCalculator).decimalDigits);
console.log("Digits ="+Base.decimalDigits);
console.log(Base.add(5,1));
var zo = Base.zo();
console.log(Base.innerHTML);
console.log(zo.a);
zo.c="TEST";
console.log(zo.c);
zo["c"]="00123";
console.log(zo.c);
/*
var Calculator = function (decimalDigits, tax) {
this.decimalDigits = decimalDigits;
this.tax = tax;
};
Calculator.prototype = function () {
add = function (x, y) {
return x + y;
}, subtract = function (x, y) {
return x - y;
}
return {
add: add,
subtract: subtract
}
} ();alert((new Calculator()).add(9, 3));var BaseCalculator = function() {
this.decimalDigits = 2;
};BaseCalculator.prototype = {
innerHTML :"开始",
add: function(x, y) {
return x + y;
},
subtract: function(x, y) {
return x - y;
},
zo:function(){
return {a:'a1',b:'b1'};
}
};
var Base = new BaseCalculator();
//alert((new BaseCalculator()).decimalDigits);
//alert("Digits ="+Base.decimalDigits);
//alert(Base.add(5,1));
var zo = Base.zo();
alert(Base.innerHTML);
alert(zo.a);
zo.c="TEST";
alert(zo.c);
zo["c"]="00123";
alert(zo.c);
*/
</script>
</html>
第二没回答上原型是什么(虽然很早之前经常用),
第三没有说清楚怎么去除浮动没能回答上来,很是忏愧,以后要更加努力学习。原创框架0.02下载地址:
http://download.csdn.net/detail/wohuifude123/9774782更新如下:
创建修改JSON数据 var str001 = {"name": "apple", "sex": "21"};
// 修改属性 name 的值为 banana
alert(str001["name"]);
createJson(str001,"name", "banana");
alert(str001["name"]); // 添加属性 color 的值为 red
alert("颜色=="+str001["color"]);
createJson(str001,"color", "red");
alert("颜色=="+str001["color"]);
// 删除属性 sex
alert("性别=="+str001["sex"]);
createJson(str001,"sex");
alert("性别=="+str001["sex"]);判断浏览器的方法
var myBrowserVersion= myBrowser();
alert(myBrowserVersion);
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 2.编写个数不同 window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
$(document).ready()可以同时编写多个,并且都可以得到执行 3.简化写法 window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});在我以前的开发中,一般用到javascript,我都是采用jquery的模式,也就是大多数时候,第一行写的是:
$(document).ready(function(){});
这个时候,不一定要等所有的js和图片加载完毕,就可以执行一些方法,不过有些时候,
必须要等所有的元素都加载完毕,才可以执行一些方法的时候,
比如说,部分图片或者什么其他方面还没有加载好,
这个时候,点击某些按钮,会导致出现意外的情况,这个时候,就需要用到
$(window).load
(
function()
{
$("#btn-upload").click
(
function()
{
uploadPhotos();
}
);
}
);JS跨域如何解决1、document.domain + iframe(只有在主域相同的时候才能使用该方法)1)在www.a.com/a.html中document.domain = 'a.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://www.script.a.com/b.html';
ifr.display = none;
document.body.appendChild(ifr);
ifr.onload = function(){
var doc = ifr.contentDocument || ifr.contentWindow.document;
//在这里操作doc,也就是b.html
ifr.onload = null;
};
2)在www.script.a.com/b.html中:
document.domain = 'a.com';2、动态创建script
这个没什么好说的,因为script标签不受同源策略的限制。
function loadScript(url, func) {
var head = document.head || document.getElementByTagName('head')[0];
var script = document.createElement('script');
script.src = url; script.onload = script.onreadystatechange = function(){
if(!this.readyState || this.readyState=='loaded' || this.readyState=='complete'){
func();
script.onload = script.onreadystatechange = null;
}
}; head.insertBefore(script, 0);
}
window.baidu = {
sug: function(data){
console.log(data);
}
}
loadScript('http://suggestion.baidu.com/su?wd=w',function(){console.log('loaded')});
//我们请求的内容在哪里?
//我们可以在chorme调试面板的source中看到script引入的内容
3、 JSONPJSONP包含两部分:回调函数和数据。
回调函数是当响应到来时要放在当前页面被调用的函数。
数据就是传入回调函数中的json数据,也就是回调函数的参数了。
function handleResponse(response){
console.log('The responsed data is: '+response.data);
}
var script = document.createElement('script');
script.src = 'http://www.baidu.com/json/?callback=handleResponse';
document.body.insertBefore(script, document.body.firstChild);
/*handleResonse({"data": "zhe"})*/
//原理如下:
//当我们通过script标签请求时
//后台就会根据相应的参数(json,handleResponse)
//来生成相应的json数据(handleResponse({"data": "zhe"}))
//最后这个返回的json数据(代码)就会被放在当前js文件中被执行
//至此跨域通信完成
在这种情况下,容器的高度不能自动伸长以适应内容的高度,
使得内容溢出到容器外面而影响(甚至破坏)布局的现象。
这个现象叫浮动溢出,为了防止这个现象的出现而进行的CSS处理,就叫CSS清除浮动。引用W3C的例子,news容器没有包围浮动的元素。
.news {
background-color: gray;
border: solid 1px black;
}.news img {
float: left;
}.news p {
float: right;
}<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
清除浮动方法方法一:使用带clear属性的空元素在浮动元素后使用一个空元素如<div class="clear"></div>,
并在CSS中赋予.clear{clear:both;}属性即可清理浮动。
亦可使用<br class="clear" />或<hr class="clear" />来进行清理。
.news {
background-color: gray;
border: solid 1px black;
}.news img {
float: left;
}.news p {
float: right;
}.clear {
clear: both;
}<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>
优点:简单,代码少,浏览器兼容性好。缺点:需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。方法二:使用CSS的overflow属性给浮动元素的容器添加overflow:hidden;或overflow:auto;
可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,
例如为父元素设置容器宽高或设置 zoom:1。在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。
.news {
background-color: gray;
border: solid 1px black;
overflow: hidden;
*zoom: 1;
}.news img {
float: left;
}.news p {
float: right;
}<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
方法三:给浮动的元素的容器添加浮动给浮动元素的容器也添加上浮动属性即可清除内部浮动,但是这样会使其整体浮动,影响布局,不推荐使用。方法四:使用邻接元素处理什么都不做,给浮动元素后面的元素添加clear属性。
.news {
background-color: gray;
border: solid 1px black;
}.news img {
float: left;
}.news p {
float: right;
}.content{
clear:both;
}<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="content"></div>
</div>方法五:使用CSS的:after伪元素结合 :after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack ,
可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout。给浮动元素的容器添加一个clearfix的class,
然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。
.news {
background-color: gray;
border: solid 1px black;
}.news img {
float: left;
}.news p {
float: right;
}.clearfix:after{
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}.clearfix {
/* 触发 hasLayout */
zoom: 1;
}<div class="news clearfix">
<img src="news-pic.jpg" />
<p>some text</p>
</div>通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点".",并且赋予clear属性来清除浮动。
需要注意的是为了IE6和IE7浏览器,要给clearfix这个class添加一条zoom:1;触发haslayout。 总结通过上面的例子,我们不难发现清除浮动的方法可以分成两类:一是利用 clear 属性,包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素,
其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。二是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文),
使到该父元素可以包含浮动元素,关于这一点。 推荐在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式;
在小模块如ul里使用overflow:hidden;(留意可能产生的隐藏溢出元素问题);
如果本身就是浮动元素则可自动清除内部浮动,无需格外处理;
正文中使用邻接元素清理之前的浮动。最后可以使用相对完美的:after伪元素方法清理浮动,文档结构更加清晰。
{
var mc:MovieClip = MovieClip(e.target);
mc.stopDrag();
}
你举起你的拳头,一拳挥出去。
挥出去时的那个动作就是你发出的事件 ---- e:MouseEvent
那么,你挥出去的是什么呢?是你砂锅般大的拳头 ---- e.targetevent.target是发起事件的原始对象
event.currentTarget是事件在冒泡过程中的当前对象e.target 是目标对象
e.event 是目标所发生的事件
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css" rel="stylesheet">
#fa{
width: 100%;
height: 170px;
padding: 20px 0px;
background-color: cadetblue;
}
#son{
width: 100%;
height: 20px;
padding: 30px 0px;
background-color: black;
color: white;
text-align: center;
cursor: pointer;
}
</style>
</head><body>
<div id="fa" onmousedown="getEventTrigger(event)">
<p id="son" onmousedown="getEventTrigger(event)">点我试试</p>
</div>
<script type="text/javascript">
var fa = document.getElementById('fa');
var son = document.getElementById('son');
function getEventTrigger(event)
{
x=event.currentTarget;
y=event.target;
alert("currentTarget 指向: " + x.id + ", target指向:" + y.id);
}
</script>
</body>
</html>
下载地址:http://download.csdn.net/detail/wohuifude123/9801863github地址:https://github.com/wohuifude123/public.git新增功能如下:说明:返回或者设置属性
举例 alert($L("#input01").attr("value"));
$L("#input01").attr("value","无限");说明:避免window.onload赋值后会覆盖
举例
function a()
{
alert("a=a");
}
function b(){
alert("网=紫");
}
_addLoadEvent(a);
_addLoadEvent(b);
说明:显示文本内容
举例$L("#cs001").html("aaa");
alert($L("#cs001").html());
说明:避免滑动时间互相冲突
举例addEvent(window,'scroll',function(){
adleft.style.top = Toppx + adtop + (document.documentElement.scrollTop || document.body.scrollTop) +"px";
adright.style.top = Toppx + adtop + (document.documentElement.scrollTop || document.body.scrollTop) +"px"
});
说明:加载
举例document.ready(function(){
document.getElementById("myBtn").addEventListener("click", function()
{
document.getElementById("demo").innerHTML = "Hello World";
});
});
breakCall
函数体
function(v){alert(v);}
*/
Array.prototype.each = function(breakCall)
{
for (var i = 0; i < this.length; i++)
{
breakCall(this[i]);
}
}
Array.prototype.unique = function(){
var result = [];
this.each(function(v1){
//alert(v);
if(result.indexOf(v1) < 0){
result.push(v1);
}
});
return result;
}
var aay= [1,2,3,2,3];
alert("去重前=="+aay);
aay = aay.unique();
alert("去重后=="+aay);
/*
breakCall
函数体
function(v){alert(v);}
*/
function each(breakCall)
{
for (var i = 0; i < this.length; i++)
{
breakCall(this[i]);
}
}
Array.prototype.unique = function(){
var result = [];
each.call(this,function(v1){
//alert(v);
if(result.indexOf(v1) < 0){
result.push(v1);
}
});
return result;
}
var aay= [1,2,3,2,3];
alert("去重前=="+aay);
aay = aay.unique();
alert("去重后=="+aay);
在前两个星期 被问的 一道题
一个小div在另外一个大div中 垂直左右居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#parent{
position:relative;
width:1000px;
height:800px;
border:1px solid red;
}
#child{
position:absolute;
width:450px;
height:198px;
left:50%;
top:50%;
margin-left:-225px; /*设置为宽度(width:450px;)的一半*/
margin-top:-99px; /*设置为高度(height:198px;)的一半*/
background:#000;
}
</style>
</head><body>
<div id="parent">
<div id="child"></div>
</div></body>
</html>
当position被设置成absolute时
margin-left和margin-top属性还是有效的,虽然经常使用,
但是没有回答上来,记录一下,以后要更加的努力
JSON拼接成字符串function eachJson(jsonStr,breakCall) {
var a = '';
for(var v in jsonStr)
{
var b = breakCall(v+"="+jsonStr[v]+"&");
a = a + b;
}
return a;
}
var parseParam=function(param,key){
var paramStr="";
if(param instanceof String||param instanceof Number||param instanceof Boolean){
paramStr+="&"+key+"="+encodeURIComponent(param);
}
else{
paramStr = this.eachJson(param,function(i){
var k=key==null?i:key+(param instanceof Array?"["+i+"]":"."+i);
return k;
});
}
return paramStr.substr(0,paramStr.length-1);
// return paramStr;
}
var obj={name:'tom',class:'abc',classMates:'123'};
var ps = parseParam(obj);
alert(ps);
举例var aay= [1,2,3,2,3];
alert("去重前=="+aay);
aay = aay.unique();
alert("去重后=="+aay);说明:将JSON对象变成字符串
举例var obj={name:'tom',class:'abc',classMates:'123'};
var ps = parseParam(obj);
alert(ps);
function acv(callback){
alert("回家路上。。end");
callback("到家结果");
}
function test(){
acv(function (result){
alert(result);
});
}test();document.ready = function (callback)
{
//兼容FF GOOGLE
if (document.addEventListener)
{
document.addEventListener('DOMContentLoaded', function () {
document.removeEventListener('DOMContentLoaded', arguments.callee, false);
callback();
}, false)
}
//兼容IE
else if (document.attachEvent)
{
document.attachEvent('onreadystatechange', function (){
if (document.readyState == "complete")
{
document.detachEvent("onreadystatechange", arguments.callee);
callback();
}
})
}
else if (document.lastChild == document.body) {
callback();
}
}document.ready(
bb(123)
);
function bb()
{
alert("参数的长度=="+arguments.length);
for(var i=0; i<arguments.length; i++){
alert(arguments[i]);
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body><input type="button" value="去掉" onclick="kkk()" /><br/>
<textarea id="kkk" rows="50" cols="100"><script type="text/javascript">
$(function () {
try
{
var lib = eval("("+$("#lib").attr("value")+")");
var html = "";
if (lib.err == 0) {
$.each(lib.data, function (i) {
var obj = lib.data[i];
//html += '< img src="' + obj.logo + '"/>' + obj.name + " ";
html += ' <a href="' + obj.url + '" target="_blank">';
html += ' < img src="' + obj.logo + '">';
html += ' <em><b>' + obj.name + '</b></em>';
html += ' </a >';
});
if (html != "") {
setTimeout(function () {
$("#lib").html(html);
$("#embody").show();
}, 100);
}
}
} catch (err)
{ }
});
</script>
<div id="article_content" class="article_content tracking-ad" data-mod=popu_307 data-dsm = "post" >
<div class="down_views"><h1 id="为什么要搭建自己的dns服务器">为什么要搭建自己的DNS服务器?</h1>
<p>国内的DNS已经被严重污染了,很多的域名返回的都是错误的域名。要防止DNS的污染,就需要用一种加密的DNS协议。DNSCrypt 协议就能满足这种要求,DNSCrypt 是一种加密的DNS协议,有很多的DNS服务器都支持这种协议,支持 DNSCrypt 协议的服务器列表在<a href=" ">这里</a >。</p >
<h1 id="方案">方案</h1>
<p>最好的方案是国内的域名通过国内的DNS服务器(比如114或阿里DNS)查询,国外的通过 DNSCrypt 查询,这就需要dnsmasq的配合。dnsmasq是一个开源的,小巧的DNS服务器,支持很多的配置选项,最大的优点是能通过配置文件指定不同的域名通过不同的DNS服务器来查询。已经有人把这样的配置文件做好了,放在Github上了,叫做<a href="https://github.com/felixonmars/dnsmasq-china-list">dnsmasq-china-list">dnsmasq-china-list</a >,这是一个国内域名列表。</p >
<h1 id="安装和配置">安装和配置</h1>
<p>安装和配置参考<a href=" ">这篇文章</a >。 <br>
文章中讲的是编译安装的方式,也可以直接在软件源中安装(软件源中不一定有)。 <br>
安装dnscrypt-proxy之前必须安装libsodium,centros中,在安装libsodium之后要执行下面这两行命令,不然configure时会有错误:</p >
<pre class="prettyprint"><code class="language-bash hljs "><span class="hljs-comment"># echo /usr/local/lib > /etc/ld.so.conf.d/usr_local_lib.conf</span>
<span class="hljs-comment"># ldconfig</span></code></pre>
<p>dnscrypt-proxy 通过添加启动参数来配置的方式比较简单,可以通过下面这条命令来启动 dnscrypt-proxy 服务:</p ></textarea><input type="button" value="一键复制" onclick="copy()" /><script type="text/javascript">function kkk(){
var str = document.getElementById('kkk').value;
str = str.replace(/<script[\s\S]+<\/script>/,'');
str = str.replace(/<.+?>/g,'');
document.getElementById('kkk').value = str;
}
function copy(){
alert("IE复制开始了,火狐无效操作");
try {
var txt = document.getElementById("kkk").innerText;
window.clipboardData.setData('text', txt);
alert('Copy Done,use "Ctrl+V" to paste!');
} catch (e) {
alert('Your browser can not support clipboard, please copy the content by your self!');
}
}</script></body>
</html>