js中class多种函数的封装方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于class的多种函数封装</title>
<style>
body{
margin: 0;
}
li{
height: 20px;
}
</style>
</head>
<body>
<div class="box" >
<ul class="list">
<li class="in abc ab "></li>
<li class="in ac b "></li>
<li class="in a "></li>
<li class="in acb "></li>
<li class="in ba "></li>
<li class="abc"></li>
</ul>
</div>
<script>
//数组的indexOf方法封装
function indexOf(arr,value,start){
//如果不设置start,则默认start为0
if( == 2){
start = 0;
}
//如果数组中存在indexOf方法，则用原生的indexOf方法
if(){
return (value,start);
}
for( var i = 0; i < ; i++){
if(arr[i] === value){
return i;
}
}
return -1;
}
//数组去重方法封装
function noRepeat(arr){
var result = [];
for( var i = 0; i < ; i++){
if(indexOf(result,arr[i]) == -1){
(arr[i]);
}
}
return result;
}
//inArray方法封装
function inArray(arr,value){
for(var i = 0; i < ; i++){
if(arr[i] === value){
return true;
}
}
return false;
}
//去除首尾空格函数封装
function trim(arr){
var result = (/^\s+|\s+$/g,'');
return result;
}
//getElementsByClassName函数封装
function getElementsByClassName(parentObj,classStr){
var result = [];
var objs = ('*');
//如果classStr用空格分隔，则表示class必须同时满足才有效
var targetArr1 = noRepeat(trim(classStr).split(/\s+/));
//如果classStr用逗号分隔，则表示class只要有一个满足就有效
var targetArr2 = noRepeat(trim(classStr).split(/\s*,\s*/));
if((',') == -1 ){
//用空格分隔或者只有一个class
label: for(var i = 0; i < ; i++){
var arr = noRepeat(trim(objs[i].className).split(/\s+/));
for( var j = 0; j < ; j++){
if(!inArray(arr,targetArr1[j])){
continue label;
}
}
(objs[i]);
}
return result;
}else{
//用逗号分隔
label: for(var i = 0; i < ; i++){
var arr = noRepeat(trim(objs[i].className).split(/\s+/));
for( var j = 0; j < ; j++){
if(inArray(arr,targetArr2[j])){
(objs[i]);
continue label;
}
}
}
return result;
}
}
//addclass函数封装
function addClass(obj,classStr){
var array = noRepeat(trim().split('\s+'));
if(!inArray(array,classStr)){
(classStr);
}
= (' ');
return obj;
}
//removeclass函数封装
function removeClass(obj,classStr){
var array = noRepeat(trim().split('\s+'));
var index = indexOf(array,classStr);
if(index != -1){
(index,1);
= (' ');
}
return obj;
}
//toggleClass函数封装
function toggleClass(obj,classStr){
var array = noRepeat(trim().split('\s+'));
if(inArray(array,classStr)){
removeClass(obj,classStr);
}else{
addClass(obj,classStr);
}
}
</script>
</body>
</html>
js函数调用的四种方法
js的函数调用会免费奉送两个而外的参数就是 this 和 arguments 。arguments是参数组，他并不是一个真实的数组，但是可以使用.length方法获得长度。
书上有说4中调用方式：
- 方法调用模式
- 函数调用模式
- 构造器调用模式
- apply调用模式
下面我们来看看一些实例更好理解。
1：方法调用模式。
请注意this此时指向myobject。
/*方法调用模式*/
var myobject={
value:0,
inc:function(){
alert()
}
}
()
2：函数调用模式
请注意this此时指向window
/*函数调用模式*/
var add=function(a,b){
alert(this)//this被绑顶到window
return a+b;
}
var sum=add(3,4);
alert(sum)3：构造器调用模式
javascript语言精粹一书建议摒弃这中方式。因为有更好的方式。这里先不介绍。下次发表博文的时候贴出来。
会在这里加一个连接。
/*构造器调用模式 摒弃*/
var quo=function(string){
=string;
}
.get_status=function(){
return ;
}
var qq=new quo("aaa");
alert(qq.get_status());
4：apply调用模式
==我们可以来看一个更有用的apply实例。看最下面的代码。
/*apply*/
//注意使用了上面的sum函数
//与myobject
//这中调用方式的优点在于可以指向this指向的对象。
//apply的第一个参数就是this指针要指向的对象
var arr=[10,20];
var sum=(myobject,arr);
alert(sum);
看这个apply真正应用。bind这是一个绑定时间的函数
var bind=function(object,type,fn){
if(){//IE浏览器
("on"+type,(function(){
return function(event){
=true;//停止时间冒泡
=[(object)];//----这里我要讲的是这里
//在IE里用attachEvent添加一个时间绑定以后。
//this的指向不是到object对象本身所以。我们绑定的function里的是无法正常工作的。
//但是如果我们用(object)
//这里可以看出我们是把apply的第一个对象也就是this的指向变更给了object所以就变成了
// 可以正常工作了。
}
})(object),false);
}else if(){//其他浏览器
(type,function(event){
();//停止时间冒泡
(this)
});
}
}
bind(("aaa"),"click",function(){alert()}); 我喜欢的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
.box{
width: 400px;
height: 200px;
margin: 200px auto;
}
li{
float: left;
margin-left: 10px;
height: 20px;
width: 50px;
background: green;
list-style: none;
}
</style>
</head>
<body>
<botton >点击</botton>
<div class="box" >
<ul class="list">
<li>11</li>
<li>22</li>
<li33</li>
<li>44</li>
<li>55</li>
<li>66</li>
</ul>
</div>
<script type="text/javascript" src="/jquery-1.8."></script>
<script>
var myOpinion = myOpinion || {};
={
init:function(obj,i){
alert(obj+'hello');
},
closeWindow:function(obj,d){
(function(){
();
});
}
}
$(function(){
var my = ;
($("#box"),$(".list"));
($("#aa"),$(".list li"));
});
</script>
</body>
</html>
这里写的也不错：/xi_2130/article/details/50276025#comments