• jquery核心


    1.jquery核心函数

    1.1$()  空对象

    1.2 $(function(){})=$(document).ready(){}=window.onload

    1.3 $(标签),$(标签,在哪个范围找) 

    在文档的第一个表单中,查找所有的单选按钮(即: type 值为 radio 的 input 元素)。$("input:radio", document.forms[0])

    1.4 $(html,pros)

    根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 DOM 元素。同时设置一系列的属性、事件等。

    $("<div>", {
      "class": "test",
      text: "Click me!",
      click: function(){
        $(this).toggleClass("test");
      }
    }).appendTo("body");
    $("<input>", {
      type: "text",
      val: "Test",
      focusin: function() {
        $(this).addClass("active");
      },
      focusout: function() {
        $(this).removeClass("active");
      }
    }).appendTo("form");
    或者
    $("<div><p>Hello</p></div>").appendTo("body");
    2.jquery对象的访问
    2.1 get()和get(index)//无用

    取得其中一个匹配的元素。 num表示取得第几个匹配的元素。

    这能够让你选择一个实际的DOM 元素并且对他直接操作,而不是通过 jQuery 函数。$(this).get(0)与$(this)[0]等价。

     2.2 $("div").index($("#div"))获取某个节点的索引
    2.3 each(function(){})function里的参数可以有可以没有,有可以是一个或着两个
    2.4 length与size()相同,返回对象的数量
    3.数据缓存
    3.1 data 在一个标签上存储数据
    $("div").data("test", { first: 16, last: "pizza!" });
    $("div").data("test").first  //16;
    $("div").data("test").last  //pizza!;
    3.2 另一种写法
    jQuery.data(document.body, 'foo', 52);
    
    3.3 removeData(name)
    移出某个对象上的数据

    4 队列的控制
       4.1dequeue()
    $("button").click(function () {
          $("div").animate({left:'+=200px'}, 2000);
          $("div").animate({top:'0px'}, 600);
          $("div").queue(function () {
              $(this).toggleClass("red");
              $(this).dequeue();
          });
          $("div").animate({left:'10px', top:'30px'}, 700);
      });
    5 插件机制
    5.1 插件的扩展

    扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。

        $.fn.extend({functionName:function(){}......})
    $(标签).functionName
    5.2
    扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。
    jQuery.extend({
      min: function(a, b) { return a < b ? a : b; },
      max: function(a, b) { return a > b ? a : b; }
    });
    结果:
    jQuery.min(2,3); // => 2
    jQuery.max(4,5); // => 5
    6.多库共存,避免冲突
    6.1 jQuery.noConflict()
    // 使用 jQuery
    jQuery("div p").hide();
    // 使用其他库的 $()
    $("content").style.display = 'none';









  • 相关阅读:
    ubuntu 14.04+apache 反向代理设置
    ubuntu 14.04 使用apt-get出现如下问题解决办法
    ubuntu 出现 Unable to locate package update 解决办法
    在ubuntu 12.04 apache 限制IP访问的方法
    (原创)在ubuntu 14.04 中安装Apache2+modsecurity+awstats (新手教程)
    windows 10 的安装说明
    前端三大主流框架中文文档
    关于移动端影像配置了https之后拍出来的照片在android手机无法显示的问题
    ES5常用api
    promise循环调用异步函数(以图片上传为例)
  • 原文地址:https://www.cnblogs.com/wenyan/p/4449978.html
Copyright © 2020-2023  润新知