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