网络书屋(Web Reading Room)

A blogging framework for hackers.

March15th

一、练习总结

    1.利用jq插入节点有4个一致性很强的: append,prepend,after,before。其中append和prepend都是对于子节点的添加。after和befor是对于兄弟节点的添加。
    2.ChildNode和Childen是不同的,因为ChildNode会把空格远算进去。那么Each遍历的是啥?
    3.对于“:”不要乱用。要明确到底有哪些!
    4.对于 :什么的,都是起到一个修饰作用。
    5. :even 是选择偶数  :odd是选择奇数  :eq(index)   :gt(index)   :lt(index)   关于gt理解是greate than 是大于,less than是小于。:not
    6.Jq的索引是从0开始的。
    7.子节点的事件会传递给父节点!?这个叫做事件冒泡.不懂。
    8.对于冒号修饰符的使用,可以重复多个配合一起使用:比如。$("table:first  tr:even").css("background", "#ffaacc");
    9.change是在文本域丢失焦点的时候才会触发的。
    10.关于 $("ul li") 和 $("ul>li")是不同的,前者的空格表示的是后台元素,而大于号表示的子代元素。后代元素是包括了子代孙元素的。而子代元素只有子代。
    11.空格不要乱打!空格表示的是后代,不要忽略这个问题了。

一、前端知识

    1.Javascript刷新页面的几种方法:
            1)  history.go(0) 
            2)  location.reload() 
            3)     location=location 
            4)     location.assign(location) 
            5)     document.execCommand('Refresh') 
            6)     window.navigate(location) 
            7)  location.replace(location) 
            8) document.URL=location.href 
            说明一下,jQuery没有发现刷新页面的方法。
    2.remove() detach()都有移除的作用,且他们返回值都是这个被移除的对象。如果重新将这个添加上去,remove绑定的事件会消失,而detach的不会消失。
    3.empty() 是清空所有的后台节点。
    4.warp()是包裹的:ex $("#city").wrap("<strong></strong>");
    5.clone()是克隆的意思,如果添加了true表示克隆事件,如果不加true只克隆外形不克隆事件。
    6.repalceWith(),replaceAll()2个repalce方法是替换,需要注意的,一旦替换,之前的元素会消失。
    7.关于val()和text()区别。对于input这种单标签而言,val()就是他们的值,对于<li>或者<p>这种双标签而言就是用text()。
            注意了input的文本框的值是value。
    8.对于focus和blur都是在刚触发事件的某一个时候触发的事件。
    9.next(),pre(),siblings(),三个都是获取同辈元素。next是之后的,pre是之前的,sibling()是获取所有的同辈元素。
    10.(selector).each(function(){     ....       });
    11.$(selector).children(".bb")这个就是选出selector子节点中符合要求:类名为bb的所有节点。
    12.window.onload 是在Dom加载完毕且关联元素加载完毕后才执行。而$(document).ready()是在DOM加载完毕后就执行,效率更高。
    13.window.onload只执行一次,$(document).ready()执行多次。
    14.JQ的事件比起JS来说,少了on这个2个前缀。
    15.这2个状态不能记忆混淆了  :hiden :visible  一个是隐藏,一个是可见。 hide()   visible()
    16.链式编程为同一个元素添加不同状态的方法可以分开写,也可以使用bind来把绑定不停形态下的方法,当然还有更简单的方法   
     $("#panel .head").mouseover(function () { }).mouseleave(function () { });  
    17.("selector").toggle(fun1,fun2,fun3,...);用于模拟在这个selector上的鼠标单击事件。表示的是这个对于这个selecor依次点击 会触发事件f1,f2,f3...触发完毕后会从头开始轮询。
    18.return false 比 event.stopPropagation() 和 event.preventDefault()更好用。可以代替这2个。
    19.事件冒泡是因为从小到大,都有某一个相同的事件被触发,会从里到外依次触发。
    20.事件捕获和事件冒泡是一个相反的过程,捕获是从外到内,冒泡是从内到外。

一、JQ学习

    1.$(selector).bind(funName1,func1).bind(funName2,func2)... 这种写法不方便,JQ提供了一套简写的机制:$(selector).fucName1(func1).funName2(func2)
    2.可以为一个selector绑定多个事件。
    3.对于状态判定可以使用  $(selector).is(":visible")   注意了:visible 是可见的。
    4.在this的写方法,又犯了一个经典错误:   $(this) 才是正确的。但是 $("this")就是错误的。this的理解应该是触发这个事件的对象。
    5.JQ有2个合成事件,一个是hover一个是toggle,其中hover是鼠标的enter和leave,其写法为  $(selector).hover(enter,leave)
            还有一个是toggle(fun1,fun2...)这个是模拟鼠标点击事件。
    6.当某一个对象要解绑某个事件的时候,可以使用:  $(selector).unbind(funcName) 或者 $(selector).unbind() ,前者解绑某一个方法,后者解绑所有的方法。
    7.one(funcName,func) 用在触发一次的事件上。
    8.JQ中的动画有hide()和show(),要实现动画效果,括号中需要给毫秒为单位的值,就可以实现动画效果了。
    9.fadeIn()和fadeOut()可以改变不透明度。括号中同样可以给出参数,fadeIn是慢慢显示,fadeOut是慢慢消失。
    10.slideUp(),slideDown()分别是改变所选的宽度。
    11.   :checked 被选中和  checked="checked"是有区别的。个人理解:被选中不一定会有checked="checked" 但是一定可以通过状态 :checked 来获取。
    12.总结 :对于要获取处于某个状态的元素,可以使用  :状态   来获取。
    13.对于使用多个属性来取值,可以使用  $("selector[id=123][name=lcf]")
    14.JQ中支持在Childen(":checked")来选取子元素中被选取了的元素。
    15.JQ中,只有要括号,就可以在括号里面写筛选条件。
    16.对于利用Jq添加上去的东西,可以为其添加一个id获取class,方便进行处理。
    17.JQ中移除替换都会删除以前的元素。
    18.$(selector).toggle 用于切换状态,当前显示就变成隐藏,当前隐藏就是变成显示。
    19.$(selector).toggleClass("className")如果当前选择的有这个类就删除,没有就添加。



    1.思考:要想实现Jquery这样的“链式编程”那么每个方法的返回值就应该是调用者本身,即return  this.
    2.导入Jqeruy的时候,特别注意了,要有2个script,第一个script是利用src导入jquery的文件,不要在里面写jquery代码。第二个写script才开始写jquery代码。
    3.Jqeruy中是可以有多个 $(document).ready(function(){.....});
    4.如果某个函数在页面加载完了就执行了,考虑这个函数是不是没有放在括号里面的function(){写在这里};
    5.Jqeruy中的事件和JS中不一样:
            onClikc ---click
    6.Jquery中事件的函数是写在里面的,比如规范写法如下:
             $("#bj").click(function () {
            alert("HH");
        });
       这个时候如果写成这样:
        $("#bj").click(alert("HH"));
        表示的意思就不一样了,这个就是说函数执行到这个地方就开始执行。而且没有绑定函数。
    7.如果子元素为当前的this,那么next是父元素的下一个,而不是子元素的!?
    8.再次强调,this是Dom对象,在Jquery使用的时候,要转换为Jquery对象$(this)
    9.对于某个属性赋值或者获取值使用的是  attr("name","lcf")  或者 var myName=attr("name")
    10.判断2个字符串相等使用的是==,且支持三目运算符。
    11.JS中变量的类型:boolean 字符串  数值类型。

四、练习总结二

    1.Jquery中属性可以通过[ name=bb]  来匹配,也可以通过  .attr("bb") 来获取,同时 .attr("bb","love")来赋值;。
    2.操作文本节点可以通过文本节点的父节点来操作。比如<p id="mm">我爱你</p>。通过id为mm获取到p然后text()就可以了。
    3.在html中标签就是元素,元素就是标签,完全可以这么理解。
    4.对于属性的操作可以使用attr来,如果要取值使用    $("#bb").attr("value") 可以获取id为bb的value值。如果要赋值  $("#bb").attr("value","我爱你");
    5.对于value更有更简单的操作就是 val()。上面的等价于  $("#bb").val("123")这个赋值                 $("#bb").val();这个取值。
    6.append是在被选定节点的内部添加上XXX,prepend是在某个元素前(仍然在内部)添加子节点。
    7.after和append添加方式和6的append和prepend相同,但是这2个添加的是兄弟节点。
    8.关于6和7,如果我们要添加一个东西就直接写就是了,比如:   $("#bj").after("<li>成都</li>"); 这种形式。

1.对于JS来说,在Web中,最重要的应用之一就是DOM。

    2.Dom是针对HTML和XML操作的一个API。
    3.Dom将一个文档表示为一颗家族树(父,兄,子 节点)
    4.几个常用的API。
            getElementById 只能用document来使用,通过id查找一个节点。
            getElementsByTagName  返回的是一个数组,通过指定的标签名去寻找,不必作用于整个文档。
            hasChildNodes 调用的节点是否含有子节点。
    5.Dom中的节点有文本节点(Text),属性节点(Attribute),元素节点(Element)。
    6.以上3类节点中,都有如下属性:
            nodeName:只读,标识的是给定节点的名字,该节点为只读属性。对于文本节点返回的是 #text 的字符串。
            noteType:只读,返回值为int,标识节点的类型。元素节点 1,属性节点 2,文本节点 3。(从小到大的记忆顺序)
            nodeValue: 可读,可写。返回当前节点的值,属性节点返回属性的值,文本节点返回文本的值,元素节点啥都没有。
    7.Dom中常用方法:
            replaceChild():返回值是一个指向新的或者旧的节点。(?)作用是吧一个父元素中的子节点替换为另外一个子节点。
                    ex:        var reference = element.replaceChild(newChild,oldChild);
            getAttribute(): 返回的是指定元素的给凌属性的值。
                    ex:        var attributeValue = element.getAttribute(attributeName);
            setAttribute(key,value):为指定的元素添加某个属性,如果此属性已经存在就刷新,如果不存在就添加。
                    ex:      var para = document.createElement(“p”);           para.setAttribute(“id”,”fineprint”);
            createElement(eleName):通过指定的标签名字来创建一个元素节点。这个新创建的节点没实际添加到某个节点上。
                    ex:        var oP = document.createElement("p");
            createTextNode():创建一个包含指定文本的文本节点。返回值为一个指向新建文本节点的指针。
                    ex: var oText=document.createTextNode("HEllo world");
            appendChild():为指定的元素添加一个节点到最后一个节点后。
            insertBefore():在指定的节点前面添加。
                    ex:        var reference = element.insertBefore(newNode,targetNode);
                    注:Dom没有提供insertAfter()方法:就是在插入节点的下一个节点之前添加,就是在指定节点的前面添加。
            removeChild():在指定节点中的子节点删除一个节点。
                    注:一定要是父节点去调用然后括号里面是自己点。
                    ex: var message = document.getElementById(“fineprint”);
                                    var container = message.parentNode;
                                    container.removeChild(message);
    8.Dom中常用属性
            ChildNodes:返回的是指定父节点的所有子节点。
                    注:文本节点和属性节点,肯定不含有子节点了,如果调用这个属性,会返回空数组。
            firstChild:返回的是指定元素的第一个子节点。
                    ex:node.ChileNodes[0]和firstChild 是相同的。
            lastChild:和first想法,最后一个。
            nextSibling:指定节点的下一个子节点。
            previousSibling:指定节点的上一个子节点。
            parentNode:返回的是指定节点的父节点。

二、JavaScript练习总结

    1.window.onload=function(){...}表示的是在页面加载完成后便开始运行。
    2.node.insertBefor(new node,null)。这样调用就可以在指定的前面添加了!
    3.如果网页乱码,可以在<head></head>之间加上:  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    4.特别说明:insertBefor这个方法。3个参数:  paraentNode.insertBefor(newNode,childNodeInParaNode);
            就是说哪个Node来调用insertBefore方法就是在那个Node的子节点中插入,其中第一个参数是要插入的节点,第二个参数是自己点中要在哪个指定的子元素前面。
            注:第二个节点可是是null,就表示在最后添加,同AppendChild。特别注意了。
    5.getElementByTagName("标签"),这个里面输入的是HTML的标签。
    6.对于元素节点的nodeName,其返回值永远是大小的标签。
    7.忘记nodeValue吧,使用value就够了,前面的需要区分下。
    8.value这个属性可读可写。
    9.对于使用firstChild和lastChild不是我们所见的第一个。这个特别注意了。
    10.通常来说firstNode和lastNode获取的是文本节点。
    11.对于文本节点,如果要设置他的值,需要使用nodeValue而不是value。比如说firstChild和lastChild获取的都是属于文本节点。
    12.为某一个节点添加 可以使用innderHtml也可以使用 创建一个TextNode然后添加到某个节点上去。
    13.对于replaceChild,parentNode.replaceChild(newChild,childInParane).这个方法的作用是父节点调用替换某个子节点,第一个节点一般都是新的节点,第二个节点
    14.几个不加括号的地方:
            window.onload=function myFunc(){...}
    15.在JS中,方法带了括号表示运行。

1.Jquery是对JavaScript进行封装后的库,其主旨是“写的少,做的多”
    2.在Jquery中Jquery是一个顶级对象,所有的方法都在这个对象下,且 $ 是这个方法的别名。
    3.Dom对象和Jqeruy对象是不同的,只有Jquery对象才能调用Jquery的方法,Dom对象不可以。
    4.Jquery的对象在形式上用 $开头比如   var   $node=$("button");
    5.Jqeruy对象转Dom对象一般通过下标来获取,比如   var  firstNode=$node[0];或者  var  secodNode=$node.get[0];
    6.Dom对象转Jquery对象  就是在Dom对象前面加上$就行了,比如说:   var  $node =$(document.getElementById("ok"));
    7.this永远是Dom对象而$(this)
    8.Jqery的选择器:
            id选择器  #id         ${"#idName"}
            class选择器  .class        ${".className"}
            所有元素选择器  ${elementName}    ${"p"}
    8.选择器是Jquery的基础,以下为基本的选择器 #为id选择器  .为类选择器  $("div") 是所有的名为div的选择器, $("*")是选择的所有。
    9.层次选择器:        
            $("body   div"):选取的是body里面的div,包括子元素中的子元素。
            $("body > div"): 选取的是body子元素中的div        特别注意:这个选取的才是子元素,而且子元素中所有的。
            $(".one + div"):选取的是class为one的兄弟节点中下一个div。
            $(".one ~ div"): 选取的是class为one后面的所有的div   推荐写法                  $(".one").next("div")  
            注:对于第一个 选取的是body下面的所有div就是依次遍历所有的div。而第二是选取的body下面的第一层子元素的div。
    10.基本过滤器中有3个很重要:
            $("div:first"):div中第一个节点。
            $("div:last"):div中最后一个节点。
            $(":focus"):当前正在focus的。
            $(":animate"):当前正在运行的。
    11.几个内容过滤器:
            $("div:contains(txt)"):div下内容包含txt的所有,不仅仅是第一个。
            $("div:empty"):div下内容为empty的
    12.属性过滤器
            $(div[tille=bb]):选取div下有属性名为title,值为bb的元素。
            $(div[title]):选取含有title属性的元素。
            $(div[title]*=bb):选取div下属性值title中带有bb的元素。
            $(div[title]^=bb):选取div下属性为title以bb开头的元素。
            $(div[title]$=bb):选取div下title属性以bb结尾的元素。

多个时间段的笔记,未整理,周末抽空整理! 一、复习DOM

    1.对于JS来说,在Web中,最重要的应用之一就是DOM。
    2.Dom是针对HTML和XML操作的一个API。
    3.Dom将一个文档表示为一颗家族树(父,兄,子 节点)
    4.几个常用的API。
            getElementById 只能用document来使用,通过id查找一个节点。
            getElementsByTagName  返回的是一个数组,通过指定的标签名去寻找,不必作用于整个文档。
            hasChildNodes 调用的节点是否含有子节点。
    5.Dom中的节点有文本节点(Text),属性节点(Attribute),元素节点(Element)。
    6.以上3类节点中,都有如下属性:
            nodeName:只读,标识的是给定节点的名字,该节点为只读属性。对于文本节点返回的是 #text 的字符串。
            noteType:只读,返回值为int,标识节点的类型。元素节点 1,属性节点 2,文本节点 3。(从小到大的记忆顺序)
            nodeValue: 可读,可写。返回当前节点的值,属性节点返回属性的值,文本节点返回文本的值,元素节点啥都没有。
    7.Dom中常用方法:
            replaceChild():返回值是一个指向新的或者旧的节点。(?)作用是吧一个父元素中的子节点替换为另外一个子节点。
                    ex:        var reference = element.replaceChild(newChild,oldChild);
            getAttribute(): 返回的是指定元素的给凌属性的值。
                    ex:        var attributeValue = element.getAttribute(attributeName);
            setAttribute(key,value):为指定的元素添加某个属性,如果此属性已经存在就刷新,如果不存在就添加。
                    ex:      var para = document.createElement(“p”);           para.setAttribute(“id”,”fineprint”);
            createElement(eleName):通过指定的标签名字来创建一个元素节点。这个新创建的节点没实际添加到某个节点上。
                    ex:        var oP = document.createElement("p");
            createTextNode():创建一个包含指定文本的文本节点。返回值为一个指向新建文本节点的指针。
                    ex: var oText=document.createTextNode("HEllo world");
            appendChild():为指定的元素添加一个节点到最后一个节点后。
            insertBefore():在指定的节点前面添加。
                    ex:        var reference = element.insertBefore(newNode,targetNode);
                    注:Dom没有提供insertAfter()方法:就是在插入节点的下一个节点之前添加,就是在指定节点的前面添加。
            removeChild():在指定节点中的子节点删除一个节点。
                    注:一定要是父节点去调用然后括号里面是自己点。
                    ex: var message = document.getElementById(“fineprint”);
                                    var container = message.parentNode;
                                    container.removeChild(message);
    8.Dom中常用属性
            ChildNodes:返回的是指定父节点的所有子节点。
                    注:文本节点和属性节点,肯定不含有子节点了,如果调用这个属性,会返回空数组。
            firstChild:返回的是指定元素的第一个子节点。
                    ex:node.ChileNodes[0]和firstChild 是相同的。
            lastChild:和first想法,最后一个。
            nextSibling:指定节点的下一个子节点。
            previousSibling:指定节点的上一个子节点。
            parentNode:返回的是指定节点的父节点。

二、JavaScript练习总结

    1.window.onload=function(){...}表示的是在页面加载完成后便开始运行。
    2.node.insertBefor(new node,null)。这样调用就可以在指定的前面添加了!
    3.如果网页乱码,可以在<head></head>之间加上:  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    4.特别说明:insertBefor这个方法。3个参数:  paraentNode.insertBefor(newNode,childNodeInParaNode);
            就是说哪个Node来调用insertBefore方法就是在那个Node的子节点中插入,其中第一个参数是要插入的节点,第二个参数是自己点中要在哪个指定的子元素前面。
            注:第二个节点可是是null,就表示在最后添加,同AppendChild。特别注意了。
    5.getElementByTagName("标签"),这个里面输入的是HTML的标签。
    6.对于元素节点的nodeName,其返回值永远是大小的标签。
    7.忘记nodeValue吧,使用value就够了,前面的需要区分下。
    8.value这个属性可读可写。
    9.对于使用firstChild和lastChild不是我们所见的第一个。这个特别注意了。
    10.通常来说firstNode和lastNode获取的是文本节点。
    11.对于文本节点,如果要设置他的值,需要使用nodeValue而不是value。比如说firstChild和lastChild获取的都是属于文本节点。
    12.为某一个节点添加 可以使用innderHtml也可以使用 创建一个TextNode然后添加到某个节点上去。
    13.对于replaceChild,parentNode.replaceChild(newChild,childInParane).这个方法的作用是父节点调用替换某个子节点,第一个节点一般都是新的节点,第二个节点
    14.几个不加括号的地方:
            window.onload=function myFunc(){...}
    15.在JS中,方法带了括号表示运行。

一、JS基础细节

    1.JS如果写在内部,通常推荐写在head的title下面。
    2.window.onload=function(){...}是在整个文档DOM树加载完毕后触发的函数。
    3.获取元素而言,最常用的3个方式 byId,byTagName,byName。前两者最常用。
    4.通常来说,找节点,常用的方法是 firstChild或者lastChild和byTagName3个方法,其他的方法比如ChildNodes不常用。
    5.(重点)对于一个方法,后面没有加括号的方法,被调用是只可能是情况允许了,被触发了。一个方法一旦加了括号表示的就是马上调用这个方法。
    6.对于for循环为每一个节点赋值的情况,这样的东西没有反应解释:
            for(i=0;i<nodes.length;i++){
                    nodes[i].onclick=function(){
                            alert(nodes[i].nodeValue);    //改成  alert(this.nodeValue);
                    }
            }
            结合第5点来理解,先是赋值然后才是应用。对于这个方法alert()而言,中间的过程是OK的,但是到了最后i在不停的增加,知道i等于了length。alert的成了这个不存在的最大的value了,就错了。
            先是指向,然后点击了才会触发。
    7.整个项目的window.onload只能有一个。Jquery没有这个限制。
    8.每一个节点都有3个属性,nodeName,nodeType,nodeValue。
    9.说明: 对于 <li name="myName" id="nameId">BB</li> 这一句代码中就包括了3个节点:文本节点BB 元素节点<li> 属性节点 id和name.
    10.获取节点的方式有3种,byId,byTagName,byName。对于子节点有3种方式firstChildNode,lastChildNode,byTagName
    11.对于以下代码:
            <ul id="city">                                                                                                                                                                     <ul id="city2"><li>北京</li></ul>
                    <li>北京</li>
            </ul>
            第一种的firstChild获取到的是一个文本节点,而且这个文本节点是空的。第二获取到的就是元素节点就是li这个节点。所以对于HTML来说换行与否还是很有必要的。
    12.(重要。)文本节点一定是元素节点的子节点。
    13.对于文本节点的赋值使用nodeValue。nodeType,元素为1,属性为2,文本节点为3.
    14.value通常对于属性节点而言,他的值。而nodeValue对于文本节点的值。
    15.常用的JS事件,onclick、onchange

一、复习JS

    1.对于HTML 的DOM而言,最上面的Document文档节点,最上层节点。Text文本节点,Element元素节点,Attribute属性节点。
    2.文本节点一定是元素的子节点。
    3.再次理解:对于匿名函数,如果要马上执行,是需要在后面写上一个括号的。对于非匿名函数,比如说对于一个button的onclick="Run"和onclick="Run()"意思是不同的,前者是说在onclick这个事件触发后,将要执行的动作指向Run这个方法。后者是说在onclick事件触发后运行Run这个方法。
    4.css在前,javascript在后,尽量不阻塞!因为浏览器解析是从上到下依次加载的,一旦遇到script标签,就会停止加载后面的,先对JavaScript脚本文件进行加载和运行。
    5.return false 可以阻断JS代码的运行,return也是可以的。(?区别?)
    6.关于事件冒泡不懂。。。
    7.关于createTextNode()然后Xnode.append进去和Xnode.innerHtml="XX" 是不是不懂的。