• jQuery学习笔记(一)


    l         JQuery简介:

    JQuery是JavaScript的封装类库

    优点:尺寸小,使用简单方便(支持链式编程,隐式迭代),跨浏览器兼容性好。插件丰富,开源,免费。

    何为链式编程:如:$(“#div1”).draggble.show().hide().fly(); 可以一直点下去

    何为隐式迭代:表示自动迭代方法调用。$(“div”).draggble表示所有的div都操作draggble方法

    用法:直接引用jquery-1.4.1.js,jquery-1.4.1-vsdoc.js放在同一目录下。Vsdoc(相当于js的说明库)与js放在一起就会有第三方js的自动提示的功能。

    简单的JQuery

     $(document).ready(function){

     alert(“加载完毕”);

    }); //注册事件的函数,和普通的dom不一样,不需要在元素上标记on**这样的事件。

    当页面Dom元素加载完毕时执行代码,可以简写为:

    $(function(){

     alert(“加载完毕”);

    })

    ready和onload类似,但是onload只能注册一次(window.onload=function()) 如 window.onload=function(alert(“函数1”);); window.onload=function(alert(“函数2”);); 程序运行时后注册的函数会覆盖前面注册的函数。因为JQuery没有类似C#的+=机制。而ready可以多次注册都可以执行。

    JQuery的ready和Dom的onload的区别:onload是所有Dom元素创建完毕,图片,CSS等都加载完毕后才会被触发,而ready则是Dom元素创建完毕就触发。这样的好处是可以提高网页的响应速度。在JQuery也可以使用$(window).load()来实现onload那种事件调用的机制。

    JQuery提供的函数

    l         $.map(array,fn)对数组array中的每一个元素调用fn函数进行逐个处理。最后将处理结果返回,得到一个新的数组。

      var arr1=[3,4,5,6];

      var arr2=$.map(arr1,function(item){return item*2;})

    l         $.map不善于处理Dictionary风格的数组。

    l         $.each(array,fn)对数组array每个元素调用fn函数进行处理。没有返回值

     如:var dic1 = { "xiaoshang": 20, "xiaoli": 23, "xiaoming": 22 };//此处为字典类型数据

            $.each(dic1, function (key, value) { alert(key + "的Ì?年¨º龄¢?是º?" + value); }); //$.each函数没有返回值

    如果是普通风格的数组,则key的值是序号。

     var varnumber = [1, 2, 3, 4];

            $.each(varnumber, function (key, value) { alert(key + "的Ì?值¦Ì是º?" + value); }); //key表示索引value表示值

     还可以省略function的参数,这时用this可以得到遍历的当前元素。

    var arr=[1,2,3,4];

    $.each(arr,function(){alert(this);});

    JQuery对象与DOM对象

    l         JQuery对象就是通过JQuery对象包装DOM对象后产生的对象。DOM对象要想通过JQuery对象操作必须要先转换为JQuery对象。

    l         $(“#div1”).html()等价于:document.getElementById(“div1”).innerHTML;

    l         $(“#div1”)得到的就是JQuery对象,JQuery对象只能调用JQuery对象封装的方法,不能调用DOM对象的方法。DOM对象也不能调用JQuery对象的方法。所以$(“#div1”).innHTML是错误的,因为innerHTML属性是DOM对象的属性。

    l         Array是JS语言本身的对象,不是DOM对象,因此不需要转换为JQuery对象就可以使用。

    l         将DOM对象转换为JQuery对象的方法是:$(dom对象);

    l         当调用JQuery对象没有封装的方法时,需要将JQuery对象转换为DOM对象。转化方法:var domobj=jqobj[0] 或者 var domobj=jqobj.get(0);

     示例:$(document).ready(
    function()
    {
    //jquery对象转化为dom对象
    var $temp=$("#el1");
    var dom=$temp[0];
    var dom2=$temp.get(0);
    alert(dom2.innerText);//=document.getElementById("el1").innerHTML;

    //dom对象转化为jquery对象
    var temp2=document.getElementById("el1");
    var $temp2=$(temp2);
    alert($temp2.text());
    }
    );

    l         JQuery修改样式:有参数表示设置,无参数表示获得。设置和获得都是调用JQuery的同一个方法。如:设置样式:$(“#div1”).css(“background”,”red”);获得样式:$(“#div1”).css(“background”);设置value值:$(“#un”).val(“abc”);获得value值:$(“#un”).val();类似的获取个设置 innerText、innerHTML用text()和html()方法。

    $(function () { $("#div1").css("background","red"); });//设置样式

           $(function () { alert($("#div1").css("background")); }); //获取样式

           $(function () { $("#txt1").val(new Date()); })

           $(function () { alert($("#txt1").val()); })

  • 相关阅读:
    go channel select如何屏蔽已关闭通道
    go err
    在OneNote中快速插入当前日期和时间
    如何查看Isilon节点的硬件信息?
    一个可用来记录Isilon各个节点的CPU,网络,磁盘性能的命令
    Linux中如何查看文件夹的大小
    如何同步两台Linux机器的时间?
    Linux中的硬链接(hard link)和符号连接(symbolic link)
    在Cygwin里,如何进入到C盘?
    Remote Desktop Session中如何触发Ctrl+Alt+Delete?
  • 原文地址:https://www.cnblogs.com/luodao1991/p/2824065.html
Copyright © 2020-2023  润新知