• 初学jquery之自学笔记(5)


    111.用匹配的元素替换掉所有 selector匹配到的元素。
    $("<b>Paragraph. </b>").replaceAll("p");
    112.将所有匹配的元素替换成指定的HTML或DOM元素。
    $("p").replaceWith("<b>Paragraph. </b>");
    113.删除匹配的元素集合中所有的子节点。
    $("p").empty();
    114.从DOM中删除所有匹配的元素。
    这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。
    $("p").remove();
    $("p").remove(".hello");
    115.克隆匹配的DOM元素并且选中这些克隆的副本。
    在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
    $("b").clone().prependTo("p");
    116.元素以及其所有的事件处理并且选中这些克隆的副本
    在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
    $("button").click(function(){
      $(this).clone(true).insertAfter(this);
    });
    117.访问第一个匹配元素的样式属性。
    $("p").css("color");
    118.在所有匹配的元素中,设置一个样式属性的值。数字将自动转化为像素值
    $("p").css("color","red");
    119.把一个“名/值对”对象设置为所有匹配元素的样式属性。
    这是一种在所有匹配的元素上设置大量样式属性的最佳方式。

    $("p").css({ color: "#ff0011", background: "blue" });
    $("p").css({ "margin-left": "10px", "background-color": "blue" });
    120.获取匹配元素在当前视口的相对偏移。
    返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。

    var p = $("p:last");
    var offset = p.offset();
    p.html( "left: " + offset.left + ", top: " + offset.top );
    121.取得第一个匹配元素当前计算的高度值(px)。
    在 jQuery 1.2 以后可以用来获取 window 和 document 的高
    $("p").height();
    $(document).height();
    122.为每个匹配的元素设置CSS高度(height)属性的值。如果没有明确指定单位(如:em或%),使用px。
    如果没有明确指定单位(如:em或%),使用px。

    $("p").height(20);
    123.取得第一个匹配元素当前计算的宽度值(px)。在 jQuery 1.2 以后可以用来获取 window 和document 的宽
    $("p").width();
    $(window).width();
    124.为每个匹配的元素设置CSS宽度(width)属性的值。如果没有明确指定单位(如:em或%),使用px。
    $("p").width(20);
    125.当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
    $(document).ready(function(){
      // 在这里写你的代码...
    });
    126.为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。
    $("p").bind("click", function(){
      alert( $(this).text() );
    });
    $("form").bind("submit", function() { return false; }) ;
    $("form").bind("submit", function(event){
      event.preventDefault();
    });
    $("form").bind("submit", function(event){
      event.stopPropagation();
    });
    127.为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。
    $("p").one("click", function(){
      alert( $(this).text() );
    });
    128.在每一个匹配的元素上触发某类事件。
    $("form:first").trigger("submit");
    $("p").click( function (event, a, b) {
      // 一个普通的点击事件时,a和b是undefined类型
      // 如果用下面的语句触发,那么a指向"foo",而b指向"bar"

    } ).trigger("click", ["foo", "bar"]);

    //下面的代码可以显示一个"Hello World"
    $("p").bind("myEvent", function (event, message1, message2) {
      alert(message1 + ' ' + message2);
    });
    $("p").trigger("myEvent", ["Hello","World!"]);

    //如果你对一个focus事件执行了 .triggerHandler() ,浏览器默认动作将不会被触发,只会触发你绑定的动作。
    $("#old").click(function(){
      $("input").trigger("focus");
    });
    $("#new").click(function(){
      $("input").triggerHandler("focus");
    });
    $("input").focus(function(){$("<span>Focused!</span>").appendTo("body").fadeOut(1000); });
    129.bind()的反向操作,从每一个匹配的元素中删除绑定的事件。
    $("p").unbind();
    $("p").unbind( "click" );

    //删除特定函数的绑定,将函数作为第二个参数传入
    var foo = function () {
      // 处理某个事件的代码
    };

    $("p").bind("click", foo); // ... 当点击段落的时候会触发 foo

    $("p").unbind("click", foo); // ... 再也不会被触发 foo 
    130.鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。
    //鼠标悬停的表格加上特定的类
    $("td").hover(
      function () {
        $(this).addClass("hover");
      },
      function () {
        $(this).removeClass("hover");
      }
    );
    131.如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数,如果有更多函数,则再次触发,直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。
    //对表格的切换一个类
    $("td").toggle(
      function () {
        $(this).addClass("selected");
      },
      function () {
        $(this).removeClass("selected");
      }
    );

    //对列表的切换样式
    $("li").toggle(
          function () {
            $(this).css({"list-style-type":"disc", "color":"blue"});
          },
          function () {
            $(this).css({"list-style-type":"disc", "color":"red"});
          },
          function () {
            $(this).css({"list-style-type":"", "color":""});
          }
        );

  • 相关阅读:
    11,Django组件分页器
    10,Django于ajax
    阿里云安装Nexus搭建Maven私有仓库
    maven 自动部署到tomcat
    linux 7.2 下安装maven
    小程序防止遮罩层穿透
    Linux 下安装JDK
    Linux 命令未自动提示补全
    nginx 、tomcat 集群配置、shiro Session 共享
    nginx负载均衡配置
  • 原文地址:https://www.cnblogs.com/timy/p/1760354.html
Copyright © 2020-2023  润新知