默认情况下，jQuery使用$作为自身的快捷方式。
如果有别的js库的时候，可以调用jQuery.noConfict()
也可以再自定义一个jquery的快捷方式：
Var $j = jQuery.noConfict();
汉译：Confict：冲突，加上no就是no冲突
jQuery事件
（1）ready()：在文档加载后激活函数
当DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。 由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。
例子：$(document).ready(function(){
$(".btn1").click(function(){
$("p").slideToggle();
});
}); slideToggle()：是jquery显示和隐藏的一个动画特效，无聊可以尝试
和下面方法一样：
$(function(){
$(".btn1").click(function(){
$("p").slideToggle();
});
})
（2）unbind() ：方法用于移除被选元素的事件
语法：$(selector).unbind(event,function)
Event：可选。规定删除元素的一个或多个事件，由空格分隔多个事件值。如果只规定了该参数，则会删除绑定到指定事件的所有函数。读法：“一问特” 不一定对，我是这么读的
Function：可选。规定从元素的指定事件取消绑定的函数名。
例子：移除所有
元素上的 click 事件：
$("p").unbind("click");
如果不填参数，将删除p元素全部的事件处理 有最新版的为off（3）on()：方法在被选元素及子元素上添加一个或多个事件处理程序。
语法：$(selector).on(event,childSelector,data,function,map)Event：必需。规定要从被选元素移除的一个或多个事件或命名空间。
由空格分隔多个事件值。必须是有效的事件。读法：“一问特” 不一定对，我是这么读的
childSelector：可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的delegate()方法）。
data ：可选。规定传递到函数的额外数据。
Function：可选。规定当事件发生时运行的函数。
Map：规定事件映射({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。例子：向
元素添加 click 事件处理程序：$("p").on("click",function(){
alert("The paragraph was clicked.");
});使用on()代替了之前版本中的bind()、delegate()和live()（4）off()：方法用于移除被选元素的事件
语法：$(selector).off(event,selector,function(eventObj),map)event：必需。规定要从被选元素移除的一个或多个事件或命名空间。
由空格分隔多个事件值。必须是有效的事件。
Selector：可选。规定添加事件处理程序时最初传递给on()方法的选择器。
function(eventObj)：可选。规定当事件发生时运行的函数。
Map：规定事件映射({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。
例子：移除所有
元素上的 click 事件：
$("button").click(function(){
$("p").off("click");
});如果不填参数，将删除p元素全部的事件处理 使用off()替代了之前版本的的unbind()、undelegate()和die()
（5）mouseover()：当鼠标指针位于元素上方时，会发生mouseover事件。
语法：$(selector).mouseover(function)
例子：当鼠标指针位于元素上方时时，改变元素的背景色： $("p").mouseover(function(){
$("p").css("background-color","yellow");
});（6）mouseout()：当鼠标指针从元素上移开时，发生mouseout事件。
语法：$(selector).mouseout(function)
例子：当鼠标从元素上移开时，改变元素的背景色： $("p").mouseout(function(){
$("p").css("background-color","#E9E9E4");
});
（7）mousemove()：当鼠标指针在指定的元素中移动时，就会发生mousemove事件。
语法：$(selector).mousemove()
例子：获得鼠标指针在页面中的位置： $(document).mousemove(function(e){
$("span").text(e.pageX + ", " + e.pageY);
});//小e是window.event
（8）load()：当指定的元素（及子元素）加载完成时，会发生load()事件。语法：$(selector).load(function)例子：当图像加载时，改变div元素的文本： $("img").load(function(){
$("div").text("Image loaded");
});注：还存在一个名为load()的 jQuery Ajax 方法，和这个是两码事，根据不同的参数而选择执行哪个。
jQuery遍历
（1）children()
语法：.children(selector)
selector:字符串值，包含匹配元素的选择器表达式。（就是各种条件）
例子：$("div").children(".selected").css("color", "blue");
找到类名为"selected"的所有 div 的子元素(不包含孙子元素)，并将其设置为蓝色;
如果.children()里参数为空，则将div的所有子元素设置为蓝色
例子：找到类名为"selected"的所有 div 的子元素，并将其设置为蓝色：
$("div").children(".selected").css("color", "blue");children()方法只考虑子元素而不考虑其它后代元素
（2）find()：获得当前元素集合中每个元素的后代
语法：.find(selector)
例子：$("p").find("span").css('color','red');
搜索所有段落p中的后代 span 元素并将其颜色设置为红色
（3）next()：获得匹配元素集合中每个元素后面的同胞元素
语法：.next(selector)
例子：$(".one").next("div").css("background", "#bbffaa");
改变class为one的下一个同级div元素的背景色为#bbffaa，如果.next()里没有参数，则改变.one的下一个同级元素（4）prev()：获得匹配元素前面紧邻的的同胞元素
语法：.prev(selector)
例子：$(".one").prev("div").css("background", "#bbffaa");
改变class为one的前一个同级div元素的背景色为#bbffaa，如果.prev()里没有参数，则改变.pre的前一个同级元素
（5）nextAll()：获得匹配元素集合中每个元素的所有跟随的同胞元素
语法：.nextAll(selector)
例子：$("#two").nextAll("div").css("background", "#bbffaa");
改变id为two的元素后面所有同级div元素的背景色为#bbffaa，如果.nextAll()里无参，则改变全部
（6）siblings() ：获得匹配集合中每个元素的同胞
语法：.siblings(selector)
例子：$("p").siblings(".selected").css("background", "yellow");
查找全部p元素的所有类名为selected的同级元素将它们的背景色改为黄色
如果不写参数，就是将所有p的同级元素背景色改为黄色$(this).addClass(“current”)//给当前元素添加current样式 .next().show() //下一个元素显示 .parent().siblings().children(“a”).removeClass(“current”)//父元素的兄弟元素的子元素移除current样式
.next().hide() //它们的下一个元素隐藏（7）parent()：获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。
语法：.parent(selector)只往上寻找一级父元素
例子：查找class为item-a的父元素修改它们的背景色：
$('.item-a').parent().css('background-color', 'red');
（8）filter()：方法返回符合一定条件的元素
语法：.filter(selector)
例子：$("div").css("background", "#c8ebcc").filter(".middle")
.css("border-color", "red");
改变所有div的颜色，然后向类名为 "middle" 的类添加边框
（9）is()：根据选择器、元素或jQuery对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true。
语法：.is(selector)
例子：if (.test.is(":hidden")) {}
如果class为test的元素有隐藏不可见的，执行if语句块里面的
jQuery属性操作
（1）Attr(attribute,value)：方法设置或返回被选元素的属性值
语法：$(selector).attr(attribute,value)
Attribute:规定属性的名称
Value :规定属性的值
参数是一个时，是查询属性的值，二个时，则是设置该属性例子：改变图像的width属性：$("button").click(function(){
$("img").attr("width","180");
});一次设置多个属性：$(“p”).attr({“title”:“123”，“class”：“test”});（2）removeAttr()：方法从被选元素中移除属性。语法：$(selector).removeAttr(attribute)例子：从任何p元素中移除 id 属性：$("button").click(function(){
$("p").removeAttr("id");
});
（3）addClass()：方法向被选元素添加一个或多个类。如果要移除样式，可以使用与它相反的removeClass()
语法：$(selector).addClass(class)
class：必需。规定一个或多个 class 名称。
例子：当点击按钮时，向第一个p元素添加一个类
$("button").click(function(){
$("p:first").addClass("类名a");
});
执行之前：
执行之后：
.类名a{
font-size:120%;
color:red;
}
（3）removeClass()：方法向被选元素删除一个或多个类。
语法：$(selector).removeClass(class)
例子：移除所有
的 "intro" 类： $("button").click(function(){
$("p").removeClass("intro");
});
（4）hasClass()：方法检查被选元素是否包含指定的class。语法：$(selector).hasClass(class)例子：检查第一个
元素是否包含 "intro" 类： $("button").click(function(){
alert($("p:first").hasClass("intro"));
});jQuery CSS操作
（1）scrollTop()：方法返回或设置匹配元素的滚动条的垂直位置。
如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。
例子：将div的滚动条位置设置到上边距100px那里
$(".btn1").click(function(){
$("div").scrollTop(100);
});
（2）offset()方法：方法返回或设置匹配元素相对于文档的偏移（位置）。
offset()方法返回或设置匹配元素相对于文档的偏移（位置）。
例子： 获取元素P的位置，在span1显示元素p的左边距，span2显示p的上边距
$(document).ready(function(){
$("button").click(function(){
x=$("p").offset();
$("#span1").text(x.left);
$("#span2").text(x.top);
});
});
将p的位置设置在上边距100及左边距100那里
x=$("p").offset({top:100,left:100});（单位是px，测试得知：如果加上px，会变的无效）
jQuery文档操作
（1）prepend()：方法在被选元素的开头（仍位于内部）插入指定内容。（创建节点）
Selector:选择器
Content:内容、目录
语法：$(selector).prepend(content) content必填
例子：在每个p元素的开头插入内容
$("button").click(function(){
$("p").prepend("Hello world! ");
});
效果：
Hello world!你好
新加的仍然在
标签里
（2）append()：方法在被选元素的结尾（仍然在内部）插入指定内容。还有appendTo()
语法：$(selector).append(content)
例子：在每个p元素的结尾插入内容
$("button").click(function(){
$("p").append(" Hello world!");
});效果：
你好Hello world!
新加的仍然在
标签里
（3）after()：方法在被选元素后插入指定的内容。
语法：$(selector).after(content)
例子：在每个p元素的结尾插入内容
$("p").after("Hello world!");
效果：
你好
Hello world!新加的没在标签里
（4）before：方法在被选元素前插入指定的内容。语法：$(selector).before(content)
例子：在每个p元素的前面插入内容
$("p").before("Hello world!");
效果：Hello world!
你好
新加的没在标签里
（5）remove()：方法移除被选元素，包括所有文本和子节点。（删除节点）
语法：$(selector).remove()
例子：移除所有
元素：
$("button").click(function(){
$("p").remove();
});
（6）detach()：detach()方法移除被选元素，包括所有文本和子节点。
这个方法会保留jQuery对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。（只移除了Dom对象里所选择的元素，并没有移除jquery对象里的）
语法：$(selector).detach()
例子：移除所有
元素：
$("button").click(function(){
$("p").detach();
});
（7）empty()：方法从被选元素移除所有内容，包括所有文本和子节点。
保留了元素节点（
语法：$(selector).empty()
例子：移除所有
元素的内容： $(".btn1").click(function(){
$("
1234
").empty();});效果：
（8）clone()：方法生成被选元素的副本，包含子节点、文本和属性。（复制节点）语法：$(selector).clone(是否复制元素的事件处理（Boolean）)
例子：克隆并追加一个p元素：$("button").click(function(){
$("body").append($("p").clone());
});（9）replaceWith()：方法用指定的HTML内容或元素替换被选元素。（替换、修改节点）语法：$(selector).replaceWith(content)例子：用粗体文本替换每个段落：$(".btn1").click(function(){
$("p").replaceWith("Hello world!");
});//也可以使用函数来替换元素（10）replaceAll()：方法用指定的HTML内容或元素替换被选元素。语法：$(content).replaceAll(selector)例子：用粗体文本替换每个段落：$(".btn1").click(function(){
$("p").replaceAll("Hello world!");
});提示：replaceAll()与 replaceWith() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceWith() 能够使用函数进行替换。（11）wrap()：方法把每个被选元素放置在指定的HTML内容或元素中。(包裹节点)语法：$(selector).wrap(wrapper)wrapper：HTML代码 - 比如 ("
") 新元素-比如 (document.createElement("div"))已存在的元素-比如 ($(".div1"))例子：将每个
段落分别包裹在
里：$(".btn1").click(function(){$("p").wrap("
");});效果：
Hello world! Hello world! //可以用函数代替（12）wrapAll()：在指定的HTML内容或元素中放置所有被选的元素。语法：$(selector).wrapAll(wrapper)例子：在中包裹所有段落：$(".btn1").click(function(){$("p").wrapAll("
");});效果：
Hello world! Hello world! （12）wrapInner()：方法使用指定的HTML内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)。这里只包裹内容语法：$(selector).wrap(wrapper)例子：在每个p元素的内容上包围 b 元素：$(".btn1").click(function(){$("p").wrapInner("");
});效果：
Hello Word!
jquery效果
（1）淡入淡出：
fadeOut()：使用淡出效果来隐藏一个
元素：
$(".btn1").click(function(){
$("p").fadeOut();
});
$(selector).fadeOut(规定元素从可见到隐藏的速度填毫秒可选，fadeOut函数执行完之后要执行的函数)
fadeIn()：使用淡入效果来显示一个隐藏的
元素：
$(".btn2").click(function(){
$("p").fadeIn();
});
语法：$(selector).fadeIn(规定元素从隐藏到可见的速度填毫秒可选，fadeIn函数执行完之后要执行的函数)
（2）slideToggle()：使用滑动效果，在显示和隐藏状态之间切换
例子：通过使用滑动效果，在显示和隐藏状态之间切换
元素：$("p").slideToggle();
（3）show()：如果被选元素是隐藏的，则显示这些元素
语法：$(selector).show(规定元素从隐藏到完全可见的速度 填毫秒可选,show函数执行完之后，要执行的函数)
提示：如果元素已经是完全可见，则该效果不产生任何变化，除非规定了显示完成之后的函数
例子：显示隐藏的p元素
$("p").show();
（4）hide()：如果被选元素是显示的，则隐藏这些元素
语法：$(selector).hide(规定元素从隐藏到完全可见的速度 填毫秒可选,hide函数执行完之后，要执行的函数)
提示：如果元素已经是完全可见，则该效果不产生任何变化，除非规定了隐藏之后函数。
例子：隐藏p元素
$("p").hide();
网友评论