jQuery提供的小方法

时间:2021-11-25 13:58:05
jQuery提供的小方法:

1、选择器 + 事件 + 函数 = 复杂的交互

2、循环处理与选择器匹配的各个元素:each()
$("#").each(function(){
    $(this).unblind('click');
});
3、隐藏:hide();显示:show();
4、向上滑动并消失:slideUp();     slideDown();
     slideToggle();为动作指示“如果原来朝上,就向下滑动;如果原来朝下,就向上滑动”;
5、淡出:fadeOut();淡入fadeIn();    可以在括号内放入一个值来制定以多快的的速度淡入或淡出,一般单位为(ms)
    $('#my_id').fadeOut();此方法是讲css id的元素淡出,直到不可见  
6、append 和 appendTo
        调用append方法的选择器是容器,内容将插到这个容器中;
        appendTo则不同,内容写在这个方法前面,而不是作为一个选择器表达式或者作为动态创建的HTML标记,他讲插入到目标容器。
7、添加监听事件的一种方法:bind();
    $("#").bind('click'),function(){  }
   删除监听事件的方法: $("#").ubind("事件");
    添加一个触发事件:trigger();
    $('#').trigger('click');    click为点击事件
8、为元素制定或删除指定的css类:
    $("#").addClass("Css类");
    $("#").removeClass("Css类");
9、$contains方法:
        jQuery库的一个静态方法,有两个参数。这个方法会检查第一个参数的所有子元素,查看其中是否包含第二个参数,然后返回一个true或者false
        $contains ( document.body,  document.getElementById("header") ) 的结果是true;
        $contains ( document.getElementById("header"), document.body ) 会返回false;
10、删除:deach 和 remove 都可以从DOM删除元素
        remove方法从DOM完全删除元素;
        detach方法将选择的元素取出,不过还会维护这些元素,以后还可以从新关联
11、更特定的选择器:$("button#vegon").click(function(){    })
12、得到此元素父节元素 parent:$(".fish").parent();
        得到此元素的子元素 children:$(".fish").children();
        得到此元素左边紧邻的兄弟元素 prev:$(".fish").prev();
        得到此元素右边紧邻的兄弟元素 next:$(".fish").next();
    可重复使用,例:得到父结点的父结点$(".fish").parent().parent();
13、替换元素replaceWith:$("#").replaceWith("要替换的内容,包括标签和css类");
14、在DOM中插入html内容
        将新内容插入到选择的元素前面before:$("选定元素").before("需要替换的元素");
        将新内容插入到选择的元素后面after :$("选定元素").after("需要替换的元素");
15、过滤器:
        first:除了所选元素中第一个元素之外,first方法会过滤掉所有其他元素
        eq:除了所选元素中索引号等于考号中内容的元素之外,eq方法或过滤掉所有其他元素
        last:除了所选元素中,左后一个元素之外,last方法会过滤掉所有其它方元素
        slice:除了索引介于括号中指定索引号之间的元素之外,slice方法会过滤掉所有的元素
            $("#").children().slice(1, 3);
        filter:除了与括号中指定选择器匹配的元素外,filter方法会过滤掉所有其他元素
        not:not方法或过滤掉与括号中指定选择器匹配的所有元素。
16、讲一个元素包裹在另一个元素中:
        例:将一个ID为oreilly的图像包在一个锚元素中:
            $("img#oreilly").wrap("<a href='http://www.oreilly.com'></a>")
17、在数组中查找是否存在某个元素inArray(); 例如:
        var arr = new Array();   var value = Math.random();(random只取0和1两个数)
        $.inArray(name, arr);
18、定时器:setTimeout()和clearTimeout、setInterval()和clearInterval()、delay().
         setTimeout():等待一个特定的时间之后才运行一个函数,
                setTimeout(myFunction(达到超时时间时要调用的函数), 4000(延时时间/ms));
                clearTimeout(myFunction);清除定时器。
         setInterval():适用于希望函数反复运行的情况,运用方法同上。
        delay():对于派对效果很合适,但是没有提供反复运行的机制,slideDown().delay(5000).slideUp();(中间停顿5秒)。
19、window对象的各个属性、事件处理程序或相应方法。
        window.name————————可以用来访问或者设置窗口名;
        window.history————————可以用来访问一段时间以来窗口加载的不同URL;
        window.document——————指示所加载文档的主要内容;
        window.onfocus————————检测窗口何时接收到一个点击、键盘输入或其它类型的输入;
        window.setTimeout()——————用于设置调用一个函数或其它语句之前所等待的时间;
        window.clearTimeout()—————用于取消需要等待的时间;
        window.setInterval()———————用于重复函数调用或其它语句之间需要等待的时间;
        window.clearInterval()——————用于设置重复函数调用或其他语句之间需要等待的时间;
        window.onblur——————————检测窗口何时失去焦点。
        例:window.onfocus = focusResponse;(focusResponse为引用的函数)。
20、在使用ajax向服务器发送信息之前,要先将数据串行化为一个对象,让它采用ajax调用就可以把它作为一个数据包而且服务器可以理解的一种格式向服务器发送——serialize 和 serializeArray.
        serialize :会把所有表单输入连接起来构成一个键/值对组成的串,各个键/值对之间用&号分隔。
        serializeArray:此方法将创建一个键/值对关联数组。这仍是一个对象,但是与简单的serialize方法的结果相比,结构更为清晰。
21、正则表达式匹配函数:preg_math(' 此处为正则表达式 ', 此处为要验证的信息)
22、采用对数据库安全的格式转换一些特殊的HTML实体:htmlspecialchars($_POST['a']);
24、jQuery部分插件类型
        Puff————————————效果插件:让一个元素看起来像烟雾一样扩散并消散至透明;
        Autocomplete————————部件插件:用户在一个输入域中键入时,提供一组可取值的列表;
        Droppable——————————交互插件:使一个DOM元素作为可拖放元素的目标;
        Explode————————————效果插件:使元素看起来像破碎成片,四处分散;
        Sortable——————————交互插件:使元素可以通过拖动进行排序;
        Progressbar——————————部件插件:显示某个事件当前完成的百分比;
        Resizable——————————交互插件:为元素提供一个可拖动的手柄,从而允许用户扩展这个元素;
        Blind————————————效果插件:使元素看起来向窗户一样上滑或者下滑;
        Accordion——————————部件插件:创建折叠区来组织Web内容。
25、页面事件类型之 error
        window.onerror = function(message){            //捕获浏览器错误行为
             alert("错误原因:"+ arguments[0] + "\n 错误 URL:" + arguments[1] + "\n 错误行号:" + arguments[2]);
             return true;                                                    //禁止浏览器显示标准出错信息
        }    
        cc.innerHTML = "";                                            //制造错误机会