每日记载内容总结14

1.一些jquery和js的知识：

(1)toggle 是模拟连续点击事件，点一次执行体内第一个函数，点第二次执行体内第二个函数，依次进行，等到全部点完，又重复进行。

还有一个用法是作为函数用来切换元素可见状态的的，如果可见，在切换为隐藏，反之。

测试代码：

 <script type="text/javascript">
 $(function(){
  $("button").toggle(function(){
    $("body").css("background-color","green");},
    function(){
    $("body").css("background-color","red");},
    function(){
    $("body").css("background-color","yellow");}
  );
</script>

$("#f").click(
function(){
$(this).toggle(  ).show(5000);
    }
)
注意toggle(  )可以带参数，true和false，如果是false则是隐藏，反之。

(2)判断某个元素是否有某个样式，element.hasClass(className)方法，如果有就返回true。

(3)注意$(document)这个里头不需要双引号，而取body的话，$("body")里头必须要加双引号。document比较特殊.

(4)$(document).ready(  )是把dom结构加载完就可以操作，于是很多图片还没加载完，这个时候如果有对图片取width等这样的操作就会失效，还是要用window.onload。jquery中window.onload的等价方法是$(window).load(  )。

(5)bind(  )绑定事件，感觉很像addEventListener(  ),如：

bind("click",function(  ){alert(1)}  ); 因此利用此方法，可以绑定多个事件

$("#f").bind("click",function(  ){
alert(1);
}).bind("click",function(  ){
alert(2);
}).bind("click",function(  ){
alert(3);
})
三个一次执行，alert出 1 2 3 

//这里可能会觉得没函数名怎么办，其实可以临时赋值，改成：
$("#f").bind("click",function(  ){
alert(1);
}).bind("click",fun2=function(  ){           
alert(2);
}).bind("click",function(  ){
alert(3);
})
 // 临时赋了个变量名“fun2”，最后表达式为：$("#f").unbind("click",fun2)，这里就只删除第2个事件

(6)trigger()不用实际有点击行为，就可以实现点击事件后的效果。将事件放于括号内，带双引号。

$("#f").bind("click",function(  ){
alert(1);
}).bind("click",function(  ){
alert(2);
})
$("#f").trigger("click");

注意，如果自己定义的事件名就叫focus，则.trigger("focus")不仅会触发自己定义的focus事件，还会触法浏览器的默认事件focus里的行为，即获取焦点，如果不希望触法默认的事件，可以用triggerHandler("focus")。

(7)fadeIn(),fadeOut()与show(  )，hide(  )的区别在于，前者只改变透明度（消失后不在文档流中占位），后者还改变高度，宽度效果（消失后，占位也消失啦）

(8)animate()方法可以模拟动态效果，

$("#f").animate({"left":"500px","top":"400px"},3000 )，第一个参数需要大括号引用，即使只有一个参数，同时left,top等参数有无双引号都可以,$("#f").animate({"left":"+=500px","top":"400px"},3000 )，表示累加，再点击的时候会再向右移动500px（这里注册个事件就可以）

代码实现滑动后又回来的效果：

$("#f").click(function( ){
$("#f").animate({"left":"500px","opacity":0.5},3000 );           //顺便改改透明度
$("#f").animate({"left":"0px","opacity":1},3000 );
});

animate(  )的第三个参数可以加回调函数，但动画结束时就会执行该函数，如：

$("#f").animate({"left":"0px","opacity":1},3000 ,function( ){
$(this).css("color","red");    });

综合animate和toggle ：

$("#f").toggle( function(  ){
$(this).animate({left:"500px"},2000);
},function(  ){
$(this).stop(  );
})

$("#eee").toggle(function(){
    $("#eee").animate({"left":"500px","opacity":0.5},3000);},//顺便改改透明度
    function(){
    $(this).stop(  );
    },
    function(){
    $("#eee").animate({"left":"0px","opacity":1},3000 );}
);

(9)slideToggle()收起后再展开，一般用于旁边的元素

$("#f").click(
function(){
$(this).next().slideToggle(  );  // 注意不能在自己身上写这个表达式，因为收起后，没法展开，收起后就没法点击啦。。一般都是写给next(  )。
}
)

(10)$("#f").height(  )是个返回值，会返回元素高度，不可被赋值。$("#f").height(500),里头如果有参数，则是直接设置元素的高度行为。

(11)切换元素的class的名字

$("#fs").click( // toggleClass也起到点击就更替类名的作用
function(  ){
$(this).toggleClass("v");

    }
)

(12)jquery有直接修改多个标签的功能：

$("p").css("color","red")，虽然jquery有直接遍历注册的功能
 等价于： 
 $("p").each(
  function(){
      $(this).css("color","red");
  }
  )

(13)获取元素的节点类型：

<a>我们都是好孩子</a>
$("#f").click(
    function(e){
      alert(e.target.nodeName) ;  // 会返回一个大写的A。  
    }
)
//如果是input标签，会返回INPUT

(14)bind()方法与unbind()方法：

A：双绑定事件：两个事件放在同一个大括号内，方法与方法用分号分开，方法名与方法体用冒号连接

  $("#f").bind( {click:function(  ){
   alert(1);
       },
   mouseover:function(  ){
       alert(2); }
   })

B：通过bind方法传参数：

 function GetCode(event) { 
    alert(event.data.foo)     // 接收bind传过来的参数，用event.data的形式，然后后接json传统调法
  }
$(document).ready(function(  ){
     $("#s").bind("click", {"foo":'abc'} ,GetCode);     // bind第二个参数是给事件对象event传参数，用json格式形式
});

unbind()是移除事件，有三种情况：

1  unbind(  )，不带任何参数，是移除任何事件，无论什么类型。

2  unbind(click)，带一个事件类型参数，是只移除上面的click事件。

3  unbind(click，A)，带事件类型参数还带函数名，是当click事件底下有多个函数体的时候，移除其中一个。比如ul li都注册了click，但每一个li的click具体到各自内容又有所不同。

(15)show(  )，slideUp(  )，fadeIn(  )这些都不仅仅可带时间参数，还可以带回调参数，等动画完成的时候执行

("#f").click( // 点f，让s显示并且显示完后加个边框。
    function(  ){
        $("#s").show(3000,function( ){ // 注意到show里带的回调函数，等显示完后才触发
            $(this).css("border","1px solid red");
        } )
})

2.ie不支持getElementsByClassName,所以要自己实现获取类名为className的所有元素。(转)

<script type="text/javascript">

window.onload = function()
{   var topMenus = getClass('li','topMenu');
    for(var i=0;i < topMenus.length; i++)
    {
        alert(topMenus[i].innerHTML);        
    }

}

function getClass(tagName,className) //获得标签名为tagName,类名className的元素
{
    if(document.getElementsByClassName) //支持这个函数
    {        return document.getElementsByClassName(className);
    }
    else
    {       var tags=document.getElementsByTagName(tagName);//获取标签
        var tagArr=[];//用于返回类名为className的元素
        for(var i=0;i < tags.length; i++)
        {
            if(tags[i].class == className)
            {
                tagArr[tagArr.length] = tags[i];//保存满足条件的元素
            }
        }
        return tagArr;
    }

}



</script>

3.js中关于父节点和子节点：

先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比。

JS的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行也当最DOM元素

<div id="test">

<div></div>

<div></div>

</div>

原生的JS获取ID为test的元素下的子元素。可以用：

var a = docuemnt.getElementById("test").getElementsByTagName("div");  这样是没有问题的

此时a.length=2；

但是如果我们换另一种方法

var b =document.getElementById("test").childNodes;  

此时b.length 在IE浏览器中没问题，其依旧等于2，但是在FF浏览器中则会使4，是因为FF把换行也当做一个元素了。

所以，在此，我们就要做处理了，需遍历这些元素，把元素类型为空格而且是文本都删除。

function del_ff(elem){

var elem_child = elem.childNodes;

for(var i=0; i<elem_child.length;i++){

if(elem_child[i].nodeName == "#text" && !/\s/.test(elem_child.nodeValue))

{elem.removeChild(elem_child)

}

}

}

上述函数遍历子元素，当元素里面有节点类型是文本并且文本类型节点的节点值是空的。就把他删除。

nodeNames可以得到一个节点的节点类型，/\s/是非空字符在JS里的正则表达式。前面加！,则表示是空字符

test() 方法用于检测一个字符串是否匹配某个模式.语法是： RegExpObject.test(string)

如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。

nodeValue表示得到这个节点里的值。

removeChild则是删除元素的子元素。

之后，在调用子，父，兄，这些属性之前，调用上面的函数把空格清理一下就可以了

<div id="test">

<div></div>

<div></div>

</div>

<script>

function dom() {

var s= document.getElementById("test");

del_ff(s);    //清理空格

var chils= s.childNodes;  //得到s的全部子节点

var par=s.parentNode;   //得到s的父节点

var ns=s.nextSbiling;   //获得s的下一个兄弟节点

var ps=s.previousSbiling;  //得到s的上一个兄弟节点

var fc=s.firstChild;   //获得s的第一个子节点

var lc=s.lastChile;   //获得s的最后一个子节点

}

</script>

下面介绍JQUERY的父，子，兄弟节点查找方法

jQuery.parent(expr)  找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")

jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素

jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点

jQuery.contents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个

jQuery对象返回，children()则只会返回节点

jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点

jQuery.prevAll()，返回所有之前的兄弟节点

jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点

jQuery.nextAll()，返回所有之后的兄弟节点

jQuery.siblings(),返回兄弟姐妹节点，不分前后

jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()

的返回结果，不会有初始集合中的内容，比如$("p"),find("span"),是从<p>元素开始找<span>,等同于$("p span")