jQuery内容学习总结

jQuery

介绍

• jQuery是一个快速、简洁的JavaScript框架，宗旨是写得少，做的多。
• 它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
• 核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

大致为 ：选择器，文档处理，属性操作，类操作，遍历，事件，动画，Ajax，存储 等。

jQuery选择器

1. 基本选择器
   #id id匹配
   .class 类匹配
   Element 元素名匹配
   ∗ 匹配所有元素
   E1,E2,E3 分组匹配

2. 层次选择器
   $(“E1 E2”) 选择E1下所有E2
   $(“E1> E2”) 选择E1下的子E2,的元素
   $(“E1+ E2”) 选择E1后紧相邻的
   $(“E1~ E2”) 选择E1之后的所有
   补充说明：
   $(“E1 + E2”)可以用$(E1).next(E2)代替
   $(“E1 ~ E2”)可以用$斜体样式(E1).nextAll(E2)代替

3. 过滤选择器

• 通过特定的过滤规则来筛选出需要的DOM元素，以冒号(:)开头。

• 3.1 基本过滤选择器
  :first
  :last
  :not(E1) 去除所有E1选择器匹配的元素
  :even 偶数
  :odd 奇数
  :eq(index) 索引值是index
  :gt(index) 索引值大于index的元素
  :lt(index) 索引值小于index的元素
  :header 所有标题元素
  :animated 正在执行动画的所有元素

• 3.2 内容过滤选择器
  :contains(text) 含有text文本内容的元素
  :empty 不包含子元素或文本的空元素
  :has(E1) 包含有(E1选择器匹配的元素) 的所有元素
  :parent 含有子元素或文本的元素

• 3.3 可见性过滤选择器
  :hidden 所有不可见元素
  :visible 所有可见元素

• 3.4 属性过滤选择器
  [attribute] 拥有此属性的元素
  [attribute=value] 属性值为value的元素
  [attribute!=value] 属性值不为value的元素
  [attribute^=value] 属性值以value开始的元素
  [attribute$=value] 属性以value值结束的元素
  [attribute*=value] 属性中含有value的元素
  [A1][A2]…A[N] 用属性选 择器合并成一个复合属性选择器。满足多个条件。

• 3.5 子元素过滤选择器
  :nth-child(index/even/odd) 父元素下的第index素或奇偶元素
  :first-child 每个父元素的第1个子元素
  :last-child 每个父元素的最后1
  :only-child 某个元素是它父元素中惟一的子元素, 将会被匹配. 如果元素中含有其他元素,则不会被匹配
  :nth-child()

• 3.6 表单对象属性过滤选择器
  :enabled 所有可用元素
  :disabled 所有不可用元素
  :checked 所有被选中的元素(单选框,复选框)
  :selected 所有被选中的选项元素(下拉列表)

4. 表单选择器
   :input 匹配所有 元素
   :text 所有单行文本框 集合元素 $(“:text”)
   :password 所有密码框 集合元素 $(“:password”)
   :radio 所有单选框 集合元素 $(“:radio”)
   :checkbox 所有复选框 集合元素 $(“:checkbox”)
   :submit 匹配所有提交按钮 集合元素 $(“:submit”)
   :image 匹配所有图像按钮 集合元素 $(“:image”)
   :reset 匹配所有重置按钮 集合元素 $(“:reset”)
   :button 匹配所有按钮 集合元素 $(“:button”)
   :file 匹配所有文件域 集合元素 $(“:file”)
   :hidden 匹配所有不可见元素 集合元素 $(“:hidden”)

文档处理

• 内部插入
  append / appendto 向后追加
  prepend / prependto 向前追加（最上边）world!")
  html( )
  :获取匹配元素集合中第一个元素的HTML内容并返回字符串
  text()方法
  获取匹配元素集合中每个元素的内容并返回字符串
  val()方法
  元素的值通过 value 属性设置的。多用于 input 元素。

• 外部插入
  before / insertBefore
  此方法将参数指定的内容插入到匹配元素集合中的每个元素之前，并返回jQuery对象。

• 删除
  remove()方法
  移除被选元素，包括所有文本和子节点
  detach()方法
  移除被选元素，包括所有文本和子节点detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。
  empty()方法
  从被选元素移除所有内容，包括所有文本和子节点。

• 替换
  replaceWith()方法
  用指定的 HTML 内容或元素替换被选元素
  例：$(“p”).replaceWith(“Hello world!”);

• 复制
  .clone()方法
  例： $("body").append($(“p”).clone());

• 包装
  1.wrap()方法
  例：$(“p”).wrap("

  单个p
  ");
  2.wrapAll()方法
  $(selector).wrapAll(wrapper) 在指定的 HTML内容或元素中放置 所有 被选的元素
  3.unwrap()方法
  $(selector).unwrap() 删除被选元素的父元素
  4.wrapInner()方法
  $(selector).wrapInner(wrapper)使用指定的HTML 内容或元素，来包裹每个被选元素中的所有内容

属性操作

• 元素属性操作

1. 获取/设置
   attr()方法
   设置或获取被选元素的属性值/自定义属性返回属性值
   获取属性 例： $("img").attr("width"); 设置属性 例：$(“img”).attr({“width”:“180”,‘height’:‘150’}); – 大号变为json对象
   prop() 方法
   设置或返回被选元素的属性和值（计算过的）

2. 删除属性
   removeAttr()方法
   从被选元素中移除属性例：$(“p”).removeAttr(“id”)
   removeProp() 方法
   移除由 prop() 方法设置的属性。

• 样式属性操作
  1. 设置样式
  CSS()方法 ：计算过的样式
  设置或返回被选元素的一个或多个样式属性。
  $(“p”).css(“background-color”) #获得
  $(“p”).css(“background-color”,‘red’)#设置
  2. 位置
  offset()方法
  返回或设置匹配元素相对于文档的偏移（位置）
  $(selector).offset().left/top 获取
  $(selector).offset({x:100,y:100}), 设置 自动设置成了定位
  position()
  返回匹配元素相对于父元素的位置（偏移）
  此方法只对可见元素有效。
  scrollLeft()
  返回或设置匹配元素的滚动条的水平位置
  $(“div”).scrollLeft(100);
  scrollTop()
  返回或设置匹配元素的滚动条的垂直位置
  $(“div”).scrollTop(100);
  3. 尺寸
  width()
  返回或设置匹配元素的宽度
  innerWidth()
  返回元素的宽度,该方法包含padding，但不包含 border 和margin
  outerWidth()
  返回元素的高度,包含 padding 和border
  outerWidth(true)
  返回元素的高度,包含 padding 和border 和margin

类操作

1. 添加类   addClass()
	向被选元素添加一个或多个类。
	例子：$("p:first").addClass("intro");
2. 移除类    removeClass()
	从被选元素移除一个或多个类。
	例子：$("p").removeClass("intro");
3. toggleClass()
	有就删除，没有就添加
	例子：$("p").toggleClass("main");
4.  检查是否含有    hasClass()
	检查被选元素是否包含指定的class
	例子:alert($("p:first").hasClass("intro"));

遍历

$.each(遍历对象，function( index,遍历对象中的元素){ })
- 1. 向上遍历
parent()
返回被选元素的直接父元素。
parents()
返回被选元素的所有祖先元素，可以加区间
$(“span”).parents(“ul”); 返回所有 元素的所有祖先并且它是

元素
parentsUntil()
法返回介于两个给定元素之间的所有祖先元素。
$("#big2").parentsUntil(“#big0”).css(“background-color”,“green”);
- 2. 向下遍历
children()
方法返回被选元素的所有直接子元素
find()
返回被选元素的后代元素，一路向下直到最后一个后代。
$(“div”).find("*"); 返回div所有后代
- 3. 水平(同级)
1.siblings()
返回被选元素的所有同胞元素。
2.next()
法返回被选元素的下一个同胞元素。
3.nextAll()
返回被选元素的所有跟随的同胞元素。
4.nextUntil()
返回介于两个给定参数之间的所有跟随的同胞元素。
不包括匹配的元素本身
5.prev(), prevAll() & prevUntil()
上一个 与前面用法一样，方向相反

过滤

1**. first()**
返回被选元素的首个元素
2. last()
返回被选元素的最后一个元素
3. eq()
返回被选元素中带有指定索引号的元素
eg: $("div").eq(3).css("background-color","green"); **4. filter()** 允许您规定一个标准。不匹配这个标准的元素 会被从集合中删除，匹配的元素会被返回 例如：$(".parent div").filter(":odd").css(“color”,“red”);
5. not()
返回不匹配标准的所有元素
get方法与eq方法
get()返回dom eq()返回Jquery
区别：eq返回的是一个jquery对象 get返回的是一个html 对象数组
each()
$(selector).each(function(index){})
可以遍历指定的元素集合，通过回调函数返回遍历元素的序列号

事件

1. 加载事件
   (相当于js中的onload)
   全写 $(document).ready(function(){}) 简写$(function(){}) ，， 写法二$(()=>{ })

• onload和ready区别
  1.执行时间
  window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
  $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
  2.编写个数不同
  window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
  $(document).ready()可以同时编写多个，并且都可以得到执行
  3.简化写法
  window.onload没有简化写法
  $(document).ready(function(){})可以简写成$(function(){});

2. 事件类型
   blur、focus、load、resize、scroll、
   unload、click、dblclick、mousedown、
   mouseup、mousemove、mouseover、
   mouseout、mouseenter、mouseleave、
   change、select、submit、keydown、
   keypress、keyup、error等。

3. 事件绑定
   bind
   bind(type、[data]、function)
   Type为事件类型
   data为方法传递的参数,可以忽略.
   function是用来绑定的处理函数.
   例如：为id为hot 的div的元素绑定单击事件。
   $(“#hot”).bind(“click”,function(){
   alert(“层被点击”);
   })
   on
   $(selector).on(event,childselector,data,function)
   bind跟on绑定事件的区别：
   on 阻止了事件冒泡
   绑定单个事件
   bind(“事件名”,function(){})
   on(“事件名”,function(){})
   绑定多个事件
   on({“事件名1”:function(){},”事件名2”:function()
   {}})
   一次绑定多个事件
   $(“div”).bind(“mouseover mouseout”,function(){
   $(this).toggleClass(“over”);
   })
   一次性绑定事件
   one(“事件名”,function(){})
   hover()
   合成事件，方法触发
   hover(enter,leave)
   用于模拟光标悬停事件.当光标移动到元素上时,
   会触发指定的第一个函数,当光标移出这个元素
   时,触发指定的第二个函数.
   4. 常见事件
   mouseenter 进入
   mouseleave 离开
   与js区别
   mouseenter事件和mouseover的区别关键点就是：冒泡的方式处理问题mouseover 会冒泡，触发父节点的mouseover事件
   mouseenter 只会在绑定它的元素上被调用，而不会在后代节点上被触发

4. 事件移除
   unbind
   $(“#pos”).unbind(“click”);
   off
   off(“事件名”)
   6. 事件冒泡
   冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。
   阻止事件冒泡的方法
   在绑定的事件中加入event参数并在函数中增加ent.stopPropagation()调用就可以阻止事件冒泡。也可以使用return false阻止冒泡。
   event.preventDefault();
   作用是阻止默认行为
   7. 模拟事件
   $(“seletor”).trigger(“event”)
   会触发默认行为
   $(“seletor”).triggerHandler(“event”)
   不会触发默认行为
   实现通过一个事件去操作另一个事件的执行，为了调用自定义的事件（通常与bind或者on事件合作）
   模拟操作可以使用trigger()方法来完成。
   例如：
   $(“#pos”).click(function(){
   $(“#btn”).trigger(“click”);//模拟操作触发的#btn
   的click事件.
   })
   模拟事件可以实现传参数给操作的事件
   **trigger(type [,data])**方法有两个参数,
   第一个参数是要触发的事件类型,第二个参数是传递给事件处理函数的附加数据,以数组的形式传递.
   $(“#btn”).bind(“click”,function(event,mes,mes2)
   {
   alert(mes+”,”+mes2);
   })
   $(“#btn”).trigger(“click”,[“Hello”,”World!”]);
   注意:在事件绑定时的event参数是不可
   以省略的.但在调用时可以不指定。

动画

1，隐藏、显示
	$("p").hide();
	$("p").show();
	$("p").toggle();
2，淡入、淡出
	$("p").fadeIn();
	$("p").fadeOut();
	$("p").fadeTo();
	例:$("p").fadeTo(1000,0.4);
	$("p").fadeToggle();
3，划入、划出
	$("p").slideDown();
	$("p").slideUp();
	$("p").slideToggle();
4，自定义动画
	提供easing参数swing开头结尾慢,中间快 （默认）linear （匀速）
	 $("div").animate({left:'250px'}，
	 3000,"linear",callback);
	 $(“#pos”).animate({left:”+=20px”,height:”+=20px”},fast   function(){ });
5，停止动画
	$("p").stop();
		停止第一个动画
	$("p").stop(stopAll,goToEnd);
		停止所有动画
			eg：$("p").stop(true,true);
		stopAll  ：   true
		是否停止全部	
		gotoEnd   ：       true
是否允许完成当前的动画
6，延迟动画
	$("p").delay("slow").fadeIn();
		eg：delay(1000)
	 $(selector).delay(duration)
7，判断元素是否处于动画状态
	$(“#ele”).is(“:animated”)
	说明：动画是顺序执行的。

AJAX

function AJAX(path) {
$.ajax({
	type: 'get',
	url: path,
	dataType: 'jsonp',
	success: function(data) {
	console.log('请求成功！', data)
},
	error: function() {
	console.log('请求失败！')
	}
})
}
AJAX('https://apis.map.qq.com/output=jsonp');
异步方法
	.done( )
	.fali( )
	.always( )
	.then( )

存储

cookie
	使用插件
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.cookie.js"></script>

三种方式：

1. 添加一个"会话cookie"
   $.cookie(‘the_cookie’, ‘the_value’);

2. 创建一个cookie并设置有效时间为 7天
   $.cookie(‘the_cookie’, ‘the_value’, { expires: 7 });

3. 创建一个cookie并设置 cookie的有效路径
   $.cookie(‘the_cookie’, ‘the_value’, { expires: 7, path: ‘/’ });

4. 读取cookie
   $.cookie(‘the_cookie’);

5. 删除cookie
   $.cookie(‘the_cookie’, null); //通过传递null作为cookie的值即可

6. 可选参数
   $.cookie(‘the_cookie’,‘the_value’,{
   expires:7,
   path:’/’,
   domain:‘jquery.com’,
   secure:true
   }）
   expires：（Number|Date）有效期；设置一个整数时，单位是天；也可以设置一个日期对象作为Cookie的过期日期；
   path：（String）创建该Cookie的页面路径；
   domain：（String）创建该Cookie的页面域名；
   secure：（Booblean）如果设为true，那么此Cookie的传输会要求一个安全协议，例如：HTTPS；

注意：cookie是基于域名来储存的。要放到测试服务器上或者本地localhost服务器上才会生效。cookie具有不同域名下储存不可共享的特性。单纯的本地一个html页面打开是无效的。