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