jQuery 重新温习 遗忘知识点

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

 
 
原文地址:https://www.cnblogs.com/Leo_wl/p/3229370.html