首页 > 代码库 > 工作笔记(2017/02/15)

工作笔记(2017/02/15)

北京时间:2017-02-15 20:58:17 农历正月十九 地点:北京市顺义区李桥镇头二营云海天公寓


今天遇到的技术难点记录如下:

1、js的splice()方法。

2、JQuery的find()方法和attr()方法。

3、Window.parent.docunment跨域问题。

4、JQuery的get()方法。

5、JQuery的toggleClass()方法。

6、MVVM模型的相关概念。

7、JavaScript的深层框架结构解析。


1、js的splice()方法。

是一个很强的数据方法,有多种用法。主要的用途就是向数组的中部插入项

删除——可以删除数组的中的任意数量的项,需指定两个参数  splice(index,howmany);

插入——可以向指定的位置插入任意数量的项,需要指定三个或三个以上的参数splice(index,num,item1,item2,,,,);在删除指定的项的位置上进行插入item1....。

替换——可以指向指定位置插入任意的项同时删除任意的项。指定的三个参数,splice(起始位置,要删除的项数,要插入的任意项)。

splice()方法最终返回一个数组,该数组中包含从元素数组中删除的项(如果没有删除项,则返回一个空值)。

script>
            var arr=Array();
            arr[0]=‘Liming‘;
            arr[1]=‘Wnaghua‘;
            arr[2]=‘Zhaosi‘;
            arr[3]=‘Liuneng‘;
            arr[4]=‘KongKing‘;
            document.write(arr+‘<br>‘);
            //向其中添加一个元素
            arr.splice(2,0,‘Jiangzeming‘);
            document.write(arr+‘<br>‘);
            //删除位与index为2的元素并替换删除的元素
            arr.splice(2,1,‘HEHE‘);
            document.write(arr+‘<br>‘);
            //删除index开始的三个元素并添加一个元素
            arr.splice(1,4,‘Dongtentkeji‘);
            document.write(arr+‘<br>‘);        
        </script>

2、JQuery的find()方法和attr()方法。

一、find()函数用于选取每个匹配元素符合指定表达式的后代元素,并以JQuery的对象形式进行返回。

find中的参数表达式可以是选择器、DOM元素、JQuery对象。

find()函数将在当前jQuery对象每个匹配元素的所有后代元素中筛选符合指定表达式的元素。

如果expr参数为字符串,则将其视作jQuery选择器,用以表示该选择器所匹配的元素。

二、attr()函数用于设置或返回当前JQuery对象所匹配的元素节点的属性值。

attr()函数的返回值是任意类型,返回值的类型取决于当前attr()函数执行的是"设置属性"操作还是"读取属性"操作。

<html>
    <head>
        <meta charset="UTF-8">
        <title>JQuery的find方法练习</title>
        <script src="http://www.mamicode.com/js/jquery-3.1.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(function(){
            var pp1=$("#p1").text();
            alert(pp1);
            var pp2=$("#p2").find(‘span‘).text();
            alert(pp2);
            var pp3=$("#p3").find(‘span‘).find(‘a‘).attr(‘class‘);
            alert(pp3);
            var pp4=$("#p4").find(‘a‘).attr(‘style‘,function(index,col){
                col:‘red‘;
            });
        });
        
        </script>
    </head>
    <body>
        <p id="p1">JavaScript的find方法</p>
        <p id="p2"><span id="sp1">要素选择</span></p>
        <p id="p3"><span><a id="a1" class="haha">我是a</a></span></p>
        <p id="p4"><a style="color:green;">我是红色</a></p>
    </body>
</html>

3、Window.parent.docunment跨域问题。

在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法打开当前窗口的那个窗口。

window.self

功能:是对当前窗口自身的引用。它和window属性是等价的。

语法:window.self

注:window、self、window.self是等价的。

window.top

功能:返回顶层窗口,即浏览器窗口。

语法:window.top

注:如果窗口本身就是顶层窗口,top属性返回的是对自身的引用。

window.parent

功能:返回父窗口。

语法:window.parent

注:如果窗口本身是顶层窗口,parent属性返回的是对自身的引用。

在框架网页中,一般父窗口就是顶层窗口,但如果框架中还有框架,父窗口和顶层窗口就不一定相同了。

判断当前窗口是否在一个框架中:

<script type="text/JavaScript"> var b = window.top!=window.self; document.write( "当前窗口是否在一个框架中:"+b ); </script>

你应当将框架视为窗口中的不同区域,框架是浏览器窗口中特定的部分。一个浏览器窗口可以根据你的需要分成任意多的框架,一个单个的框架也可以分成其它多个框架,即所谓的嵌套框架。


4、JQuery的get()方法。

get方法用于获取当前JQuery对象匹配的DOM元素。


5、JQuery的toggleClass()方法。

toggleClass()函数用于切换当前jQuery对象所匹配的每一个元素上指定的css类名

所谓"切换",就是如果该元素上已存在指定的类名,则移除掉;如果不存在,则添加该类名。

该函数属于jQuery对象(实例)。

jQueryObject.toggleClass( classNames [, switch ] )

参数描述
classNames String/Function类型指定的css类名,字符串可以通过空格分隔的方式来添加多个css类名。或者为返回css类名的函数。
switch Boolean类型一个布尔值,用于指定是添加还是移除css类名。true表示添加,false表示移除。

 

 

 


6、MVVM模型的相关概念。

 

工作笔记(2017/02/15)