jQuery初体验

目录

 

JQuery

jQuery常用选择器

JQuery的事件

jQuery中的动画

 

---

JQuery

什么是jQuery？有什么作用？

jQuery是目前最流行的JavaScript程序库，它通过封装原生的JavaScript函数的到一整套定义好的方法。

jQuery常用选择器

• 标签选择器
  • 直接使用html标签名作为选择器 $("p")表示选择页面中所有的

    标签

• 类选择器
  • 使用标签的class属性值作为选择器，$(".bth")表示选择页面中class值为bth的元素
• id选择器
  • 使用元素的id值作为选择器，$("#title")表示选择页面中id为title的元素

	
		
		
		
	
	
		
这是段落1
		
这是段落2
		
这是段落3
	
		

• 并集选择器
  • 多个选择器之间使用逗号隔开， $(".btn,#title") 表示选择class为btn的元素以及id为title的元素
• 交集选择器
  • 标签选择器.类选择器 $("p.myp") 表示选取

    标签中class为myp的标签

  • 标签选择器#id选择器 $("p#title") 表示选取

    标签中id为title的标签

• 全局选择器
  • $("*") 表示选择所有的元素
• 后代选择器
  • 使用空格隔开 $("body div") 表示body中的所有的标签
    作为选择器（包括子标签或者后代标签中的div)
• 子选择器
  • 使用>， $("#title>span") 表示id为title元素的子标签作为选择器
• 相邻元素选择器
  • 使用+ $("h2+p") 表示紧邻在h2元素之后的同辈p元素
• 同辈元素选择器
  • 使用~ $("h2~p") 表示h2之后的所有同辈的p元素
• 属性选择器
  • 按照属性名选择元素
    • $("[ href]") 表示选择所有具有href属性的元素
  • 按照属性值来选择元素
    • $("[href='#']") 表示选择href属性值为“#”的所有元素
    • $("[href!='#']") 表示选择href属性值不等于“#”的所有元素
    • $("[href^='en']") 表示选择href属性值以en开头的元素
    • $("[href$='.jpg' ]") 表示选择href属性值以.jpg结尾的元素
    • $("[href*='txt'] ")表示href属性值中含有text的元素
  • 满足多个符合条件的属性
    • $("li[id][title='要点']") 表示选择具有id属性，并且title属性值为“要点”的li元素
• 过滤选择器
  • 使用:，表示在冒号前面的选择器中筛选出符合冒号后特征的元素
    • ：first表示选择第一个元素
    • ：last 表示选择最后一个元素
    • ：even 表示选择索引是偶数的元素（索引从0开始）
    • ：odd 表示选择索引是奇数的元素
    • ：eq(index) 表示选择索引值等于index 的元素
    • ：gt(index)表示索引大于index的元素
    • ：lt(index)表示索引小于index的元素
    • ：not(selector)选择不匹配selector选择器的元素
    • ：header 选择标题元素
    • ：focus 选择当前获取焦点的元素
    • ：visable 选择所有可见的元素
    • ：hidden 选择所有隐藏的元素
    • 表单元素选择器
    • ：表单元素
      • 比如 ：input 选择表单中所有的input标签
      • ：radio 选择表单中的单选按钮

JQuery的事件

• 鼠标事件
  • click 单击
    • 触发事件
      • $("xxx").click(); 表示触发xxx元素的单击事件
    • 定义单击事件
      • $("xxx").click(function(){}); 表示定义单击事件，如果xxx元素被单击，则执行function函数。
  • dblclick 双击
    • $("xxx").dblclick(function(){}); 定义双击事件
    • 注意：双击事件触发时，一定会引起单击事件的触发（2次），所以在同一个元素定义同时定义单击和双击事件时，要考虑到冲突。
  • mouseenter 鼠标移入事件
    • $("xxx").mouseenter(function(){});//定义鼠标移入事件
  • mouserleave 鼠标移出事件
    • $("xxx").mouseleave(function(){});//定义鼠标移出事件
  • mouseover 鼠标移入事件
    • $("xxx").mouseover(function(){});//定义鼠标移入事件
  • ounserout鼠标移出事件
    • $("xxx").mouseout(function(){});//定义鼠标移出事件
  • mouseenter/mouserleave事件与mouseover/mouseout事件的异同
    • 相同点：都是鼠标移入/移出某个元素范围内的事件
    • 不同点：mouseenter/mouserleave事件只检测该元素的移入/移出事件，不涉及到子元素，mouseover/mouseout检测本元素及本元素内部的子元素的移入/移出事件
  • hover 鼠标悬停事件
    • 组合事件，相当于mouseover与mouseout的组合
    • $("xxx").hover(function(){},function(){});//第一个function是鼠标移入时的响应函数，第二个是鼠标移出时的响应函数。
• 键盘事件
  • keydown键按下事件 (键盘上所有的按钮都能触发此事件)
  • keyup 键弹起事件
  • keypress 键按下事件（只检测可打印的按键，比如alt、ctrl、shift等检测不到）
• 表单事件
  • focus 元素获取焦点事件
  • blur 元素失去焦点事件
• 绑定事件
  • $("xxx").on(事件名,处理函数);
  • 绑定多个事件
    • $("xxx").on({
      • 事件1:处理函数,
      • 事件2:处理函数
    • });

	
		
		
		
		
		
		
	

	
		单击我试一下
		

			这是div1，mouseenter和mouseleave示例
		
		

			这是div1，mouseenter和mouseleave示例
		
		

			这是div2，mouseover和mouseout示例
		
	
		

			
首页
			
首页
			
首页
			
首页
			
首页
		
		

			这是div3，测试hover
		
		
		

			这是div4
		
	

jQuery中的动画

显示与隐藏元素

• show()在显示元素时，能定义显示元素时的效果，如显示速度
• hide()在隐藏显示元素时，能定义隐藏元素时的效果，如隐藏速度

	
		
		
		
		
	
	
		

			This is a div
		
		显示
		隐藏
		切换显示状态
	

切换元素状态

• toggle()用于切换元素的可见状态
• 速度可以取如下值：毫秒（如1000）、slow、normal、fast

	
		
		
		
		
		
	
	
		

			
疏影
			
横斜
			
水清浅
			
，
			
暗香
			
浮动
			
月黄昏
			
。
			
——Hydra
		
		展开
	

淡入淡出效果

• fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果

滑动效果

• slideDown()可以使元素逐步延伸显示，slideUp()则使元素逐步缩短直至隐藏

	
		
		
		
		
	
	
		
		

		淡入
		淡出
		滑动显示
		滑动隐藏
		切换状态