每日记载内容总结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")
