jquery总结

一、 初识JQuery

jQuery 是一个 JavaScript 库。
写的更少，做的更多

1、引入方式

或者加载CDN文件（内容分发网络），必须要在有网络的情况下 ##### 2、入口小函数

$(document).ready(function(){
			jquery函数
})
// 或者
$(function(){
		jquery函数
})

3、入口小函数与window.onload的区别

与window.onload的区别
1、时机不同
window.onload
必须等待网页全部加载完毕（包括 图片等），然后再执行包裹代码
$(document).ready()
只需要等待网页中的DOM结构 加载完毕，就能执行包裹的代码
2、执行次数不同
window.onload只能执行一次，如果第二次，那么 第一次的执行会被覆盖
$(document).ready()可以执行多次，第N次都不会被上 一次覆盖

4、jq对象与dom对象的转换

dom对象转换成jq对象 ——————-$(dom对象)
jq对象转化成dom对象
方法一：jq对象[索引号]
方法二：jq对象.get(索引号)

二、jquery选择器

1、基本选择器

id选择器：$("#id名")

类选择器：$(" .类名" )

标签选择器：$("标签名")

包含选择器：$("E F")

$("E").find("F")      直接子集 $("E>F")

分组选择器 $("E,F,H.....")

兄弟选择器   $("E+F")紧跟着E元素的第一个F     jq语法是：$("E").next("F")

$("E~F")E后面的所有F元素

$("E").nextAll("F")

$("E").prev("F")  E上面的第一个F元素

$("E").prevAll("F")  E上面的所有F元素

2、过滤选择器

$("p:first") 	

$("p").first()       第一个 <p> 元素

$("p:first-child")   p标签下的第一个元素出现可能不止一次

last用法同上
$("ul li:eq(1)")

$("ul li").eq(1)    索引号为1的li 出现一次

$("ul li:even") 索引号为偶数的li  0 2 4 6

$("ul li:odd")   索引号为奇数的li  135

$("ul li:nth-child(even)") ul里的第偶数个li

$("ul li:nth-child(odd)")  ul里的第奇数个li

$("li:gt(3)")  索引号大于3的li

$("li:lt(3)")  索引号小于3的li

sibilings()  除了本身的所有

3、内容过滤选择器

:contains("文字")

选取包含指定字符串的元素。
该字符串可以是直接包含在元素中的文本，或者被包含于子元素中。

$(“div:contains(‘我’)”)
选择内容里包含我的所有div

:empty
选取空的元素。
空元素指的是不包含子元素或文本的元素。

$(“div:empty”)选择不包含子元素（含文本）的所有div元素

$("div").empty() 代表清空div内部的内容

:has(E1)
选择包含有(E1选择器匹配的元素)的所有元素

$(“div:has(p)”)选择含有p元素的所有div元素
:parent
选择含有子元素或文本的元素
$(“div:parent”)选择拥有子元素（包含文本）的所有div元素

4、表单选择器

$(":input")
:input 选择器选取表单元素。
该选择器同样适用于 <button> 元素。

$(":text")
:text 选择器选取类型为 text 的 <input> 元素。

与$("[type=text]")选取的一样

$(":password")
:password 选择器选取类型为 password 的 <input> 元素。
:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

5、filter()筛选

filter()
将匹配元素集合缩减为匹配指定选择器的元素。
$('li').filter(':even').css('background-color', 'red');选择为奇数的li

三、jquery中CSS样式的写法

1、设置样式

读取样式

jquery对象.css("样式属性名")

设置样式

设置一条样式
	jquery对象.css("样式属性名"，“属性值”)
设置多条样式
	jquery.css({"样式属性名1":“属性值1" , "样式属性名2":“属性值2"})

2、类操作

增加类
jquery对象.addClass("类名1 类名2 类名3")
$(".box").addClass("bg fz");


删除类
removeClass() 方法从被选元素移除一个或多个类。
注释：如果没有规定参数，则该方法将从被选元素中删除所有类。
$("div").removeClass();//清空所有类
$("div").removeClass("bg box");


增加或删除
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。
不过，通过使用 "switch" 参数，您能够规定只删除或只添加类。
class	必需。规定添加或移除 class 的指定元素。
如需规定若干 class，请使用空格来分隔类名。
switch	可选。布尔值。规定是否添加或移除 class。

3、位置操作

offset
	$(selector).offset().left     获取元素相对于文档左侧的偏移量
	$(selector).offset().top     获取元素相对于文档上部的偏移量
	$(selector).offset({x:100,y:100})   设置       自动设置成了定位	
	$(".box").offset({"top":50,"left":200});

position
	返回匹配元素相对于父元素的位置（偏移）
$(selector). position().left
$(selector). position().top
该方法返回的对象包含两个整型属性：top 和 left，以像素计。

4、滚动条滚动的距离

$(selector).scrollLeft()    返回或设置匹配元素的滚动条的水平位置
$(selector). scrollTop()    返回或设置匹配元素的滚动条的垂直位置
设置滚动距离不要带单位$(".box").scrollLeft(300);

5、宽高

宽高
width()/heigth()
读取
$(".box").width()  
不包含padding ，border，margin

设置
$(".box").width(300)  
innerWidth/innerHeight
$(".box").innerWidth();
包含width，padding，不包含border，margin

$(".box").innerWidth(300);
outerWidth/outerHeight
$(".box").outerWidth(true);
包含width，padding，border，加布尔值的话包含margin
$(".box").outerWidth(300);

四、属性的读取和设置

attr
attribute   可以读取/设置固有属性 也可以读取/设置自定义属性，
但在读取时只能获得以写明的属性
读取属性值      attr("属性1","属性2")
设置    attr("属性1":"属性值1","属性2"：“属性值2”)



prop()
 property   无法设置自定义属性
可获得未写明的属性 如checked=checked，prop("checked")返回值是true/false
用法同上

五、jquery动画效果

1、hide/show

 hide( [speed],[callback] )
如果被选的元素已被显示，则隐藏该元素。
jquery对象.hide()

show([speed],[callback])
如果被选元素已被隐藏，则显示这些元素

toggle([speed],[callback])
toggle() 方法切换元素的可见状态。
如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

2、改变透明度

fadeToggle()
如果可见就隐藏，如果隐藏就可见

fadeTo() 
将被选元素的不透明度逐渐地改变为指定的值。

$(".box").fadeTo(2000,0.3)
fadeOut( [speed],[callback] )
逐渐改变被选元素的不透明度，从可见到隐藏

fadeIn( [speed],[callback] )
opacity从0到1

3、滑动效果

slideUp()
通过上下滑动效果隐藏
	
slideDown()
显示
slideToggle()
切换
stop([stopAll],[goToEnd])
停止当前正在运行的动画。

4、animate的使用

animate
自定义动画
jquery对象.animate(参数1，参数2，参数3)
参数1：对象{属性名：属性值，........}
参数2：速度
参数3：回调函数

利用animate完成回到顶部的函数
$("html,body").stop().animate({scrollTop:0},1000);

停止动画
jquery对象.stop(参数1，参数2)
参数1：可选  默认false  是否停止加入队列的后续动画
参数2：可选  默认false  是否完成当前动画

延迟动画
delay()
对队列中的下一项的执行设置延迟。
$(".box").fadeOut(2000).delay(2000).slideDown(1000);

六、jquery对文档的操作

1、对内容的操作

html()
	jquery对象. html()   获取jquery对象里的内容
	jquery对象. html(“内容”)   更改jquery对象里的内容，能识别标签

text()
	jquery对象. text()   获取jquery对象里的内容
	jquery对象. textl(“内容”)   更改jquery对象里的内容，不能识别标签，只能识别文本

val()
	jquery对象.val()    获取表单对象的当前value值
	jquery对象.val(“内容”)    设置表单对象的当前value值

2、内部后部添加

jquery对象.append(content)  在jquery对象内部末尾插入content内容

$(".box").append("中国");
$(".box").append("<a href=''>中国</a>");
$(".box").append($("span"));

$(content).appendTo(jquery对象)   把content内容插入到jquery对象内部末尾

$("<a href=''>中国</a>").appendTo($(".box"));
("span").appendTo($(".box"));

3、内部前面添加

prepend() 

$(".box").prepend("中国加油");
 $(".box").prepend("<a href=''>新超链接</a>");
$(".box").prepend($("span"));

prependTo()
prepend() 和 prependTo() 方法作用相同。差异在于语法：内容和选择器的位置，以及 prepend() 能够使用函数来插入内容。
外部后面添加
$("<a href=''>连接</a>").prependTo($(".box"));
$(".con").prependTo($(".box"));

4、外部后面添加

jquery对象.after()   在被选元素后插入指定的内容
$(".box").after("<h1>你好中国</h1>");

$(content).insertAfter(jquery对象) 
在被选元素之后插入 HTML 标记或已有的元素。
注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。
$(".box").after("<h1>你好中国</h1>");

5、外部前面添加

before() 方法在被选元素前插入指定的内容。
$(".box").before("djdjd");

inertBefore()
$("span").insertBefore($(".box"))

6、删除

// $(".box").detach();//删除自身与后代
$(".box").remove();//删除自身与后代
('.box').empty();//清空内部内容

7、替换

replaceWith() 方法用指定的 HTML 内容或元素替换被选元素。
replaceAll() 与 replaceWith() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceWith() 能够使用函数进行替换。
 $(".box").replaceWith("加油中国");
$(".box").replaceWith("<h3>加油中国</h3>");
 $(".box").replaceWith($("p"));
 $("<h3>加油中国</h3>").replaceAll($(".box"));

8、克隆

jquery对象.clone([boolean])
参数：可选  布尔值 默认false  不克隆事件  若为true，克隆事件

9、包含

jquery对象.wrap("包裹元素格式")  选中的jquery对象各自被包裹
 jquery对象.wrapAll("包裹格式")  把所有选中的jquery对象包裹起来 
 jquery对象.wrapInner("包裹格式")  把每一个jquery对象里的内容各自包裹起来
 $(".box").unwrap();//删除包裹  删除父元素

七、jquery对事件的操作

1、委托事件

绑定
bind()
绑定多个事件，执行一个函数
bind("事件名1  事件名2......",function(){})
绑定多个事件执行不同的函数
bind({"事件名1"：function(){},"事件名2"：function(){
},........)


on()
on的用法同上
可绑定未来事件
$("ul").on("click","li",function(){
注意与delegate()的区别

delegate() 
该方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
jquery对象.delegate(参数1，参数2，参数3)
参数1：必需。规定要附加事件处理程序的一个或多个子元素。
参数2：必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
参数3：执行的函数
 $("div").delegate("p","click",function(){}）



解绑
unbind()
jquery对象.unbind("事件名1   事件名2  ........")
off()
jquery对象.off("事件名1  事件名2  .......")
die()
移除所有通过 live() 函数添加的事件处理程序
undelegate()
移除一个被添加的事件处理器

2、模拟事件

jquery对象.trigger("事件名")  可以触发默认行为
$(".user").trigger("focus");

jquery对象.triggerHandler("事件名")
不会执行浏览器默认动作，也不会产生事件冒泡。
与 trigger() 方法相比的不同之处它不会引起事件（比如表单提交）的默认行为

.trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。

3、合成事件

hover(函数1，函数2)
hover事件触发 mouseenter 和 mouseleave 事件。
注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。

4、阻止事件默认行为

event.preventDefault()
$("a").click(function(ev){
ev.preventDefault();
		});

5、阻止事件冒泡

event.stopPropagation()

八、jquery的each方法

jquery对象.each(function(i,dom){
	i 索引号
	dom dom对象
})

或

$.each(对象,function(i,dom){
 	i 索引号
	dom 值
})