March15th

Reading time: 44 minutes and 10 seconds with 9719 words. 本文总阅读量

一、练习总结 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(””); 5.clone()是克隆的意思,如果添加了true表示克隆事件,如果不加true只克隆外形不克隆事件。 6.repalceWith(),replaceAll()2个repalce方法是替换,需要注意的,一旦替换,之前的元素会消失。 7.关于val()和text()区别。对于input这种单标签而言,val()就是他们的值,对于

  • 或者

    这种双标签而言就是用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.操作文本节点可以通过文本节点的父节点来操作。比如

    我爱你

    。通过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(”
  • 成都
  • ”); 这种形式。

    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.如果网页乱码,可以在之间加上: 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.如果网页乱码,可以在之间加上: 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;iBB 这一句代码中就包括了3个节点:文本节点BB 元素节点

  • 属性节点 id和name. 10.获取节点的方式有3种,byId,byTagName,byName。对于子节点有3种方式firstChildNode,lastChildNode,byTagName 11.对于以下代码:
      • 北京
    • 北京
    第一种的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” 是不是不懂的。

  • Avatar
    Ye Zhaoliang
    Engineer of offshore wind turbine technique research

    My research interests include distributed energy, wind turbine power generation technique , Computational fluid dynamic and programmable matter.

    Related

    本站访问量: