zoukankan      html  css  js  c++  java
  • jQuery 重新温习 遗忘知识点

    解决jQuery和其他库的冲突

    当把jQuery和其他JavaScript库(例如Prototype、MooTools或YUI)一起使用时

    <script>

            jQuery.noConflict();//将变量$的控制权让渡给prototype.js

            jQuery(function ($) {//使用jQuery设定页面加载时执行的函数

                $("p").click(function () {//在函数内部继续使用$()方法

                    alert($(this).text());

                });

            });

     </script>

    $("form :input").size()获取所有<input>,<textarea>,<select>和<button>元素

    $("form input").size()只获取input标签的元素

    $("input[name='check']:checked")获取name='check'选中的元素

    属性选择器中包含”#”和“.”等特殊字符,需要使用转义符转义。

    比如id=”id#b” $(“#id\#b”)

    id=”id[1]”  $(“#id\[1\]”)

    查找元素

    <div id="divP">

        <p>1</p>

         <p>12</p>

         <p>3</p>

        <p>42</p>

    </div>

    $("#divP p").filter(":contains('2')").size()  2个

    $("#divP p").filter(":contains('1'),:contains('2')")

    detach()方法

    var $li = $(“ul li:eq(1)”).detach();//删除元素

    $li.appendTo(“ul”);//重新追加此元素,发现它之前绑定的事件还在,如果使用remove()方法删除元素的话,那么它之前绑定的事件将失效。

    $(“ul li”).click(function(){

             $(this).clone().appendTo(“ul”);//复制当前单击的节点,并将它追加到<ul>元素中

    });

    $(this).clone(true).appendTo(“ul”);//加true表示也同时复制元素中所绑定的事件。

    让checkbox选中特定的值

    $(“:checkbox”).val([“check2”,”check3”]);

    Radio:

    $(“:radio”).val([“radio2”]);

    closest()

    该方法用于取得最近的匹配元素。首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,逐级向上直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。

    比如,给点击的目标元素的最近的li元素添加颜色,可以使用如下代码:

    $(document).bind(“click”,function(e){

             $(e.target).closest(“li”).css(“color”,”red”);

    });

    offset()方法

    var offset = $("p").offset();

                var left = offset.left;//获取左偏移

                var top = offset.top;//获取右偏移

    position()方法

    它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移,与offset()一样,它返回的对象也包括两个属性,即top和left。

    var position = $("p").position();

                var left = position.left;//获取左偏移

                var top = position.top;//获取右偏移

    scrollTop()方法和scrollLeft()

    var $p = $("p");

                var scrollTop = $p.scrollTop();//获取元素的滚动条距顶端的距离

                var scrollLeft = $p.scrollLeft();//获取元素的滚动条距左侧的距离

     

                $("textarea").scrollTop(300);//元素的垂直滚动条滚动到指定的位置

                $("textarea").scrollLeft(300);//元素的横向滚动条滚动到指定的位置

    load()方法会在元素onload事件中绑定一个处理函数。如果处理函数绑定给window对象,则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。

    $(window).load(function () {

                    alert("aa");

                });

    等价于

    Window.onload=function(){

       

    }

    判断元素是否显示还是隐藏

    $("#divP").is(":visible")

    获取所按的键

    $("input").keyup(function (e) {

                    alert(e.which);

                });

    判断元素是否处于动画状态

    $("#divP").is(":animated")

    load()方法使用

    $(“#div”).load(“test.html”)

    筛选载入的html文档

    $(“#div”).load(“test.html .para”)只加载class为“para”的内容

    没有参数传递,则采用GET方式传递,反之,则会自动转换为post方式。

    $(“#div”).load(“test.html”,function(responsetText,textStatus,XMLHttpRequest){

        // responsetText:请求返回的内容

        // textStatus:请求状态:success、error、notmodified、timeout

        // XMLHttpRequest:XMLHttpRequest对象

    })

    load()方法通常用来从Web服务器上获取静态的数据文件。

    合理利用HTML5 data属性

    <div id=”d1” data-role=”page” data-last-value=”43” data-options=’{“name”:”John”}’></div>

    读取数据

    $(“#d1”).data(“role”);

    $(“#d1”).data(“lastValue”);

    $(“#d1”).data(“options”).name

  • 相关阅读:
    什么是DMI,SMBIOS,符合SMBIOS规范的计算机的系统信息获取方法
    Android init.rc执行顺序
    JVM-类的四种载入方式
    Intellij-创建Maven项目速度慢
    Intellij-工程目录下隐藏不想显示的文件和文件夹
    JVM-类加载机制(Java类的生命周期)
    Git-远程仓库的使用
    JavaSE-反射-获取类或者对象的四种方法
    工厂模式(Factory Pattern)
    Redis-配置认证密码
  • 原文地址:https://www.cnblogs.com/yxlblogs/p/3229019.html
Copyright © 2011-2022 走看看