JQuery学习day01

JQuery

JQuery的使用

1.首先引入JQ插件

JQuery中的选择器

让我们能够更加精确找到我们要操作的元素

基本选择器

• ID选择器 : #ID的名称
• 类选择器: 以 . 开头 .类名
• 元素选择器: 标签的名称
• 通配符选择器: *
• 选择器,选择器: 选择器1,选择器2

​

JQ中的层级选择器

• 子元素选择器: 选择器1 > 选择器2
• 后代选择器: 选择器1 儿孙
• 相邻兄弟选择器 : 选择器1 + 选择器2 : 找出紧挨着的一个弟弟
• 找出所有弟弟: 选择器1~ 选择器2 : 找出所有的弟弟

JQ中的基本过滤器

JQ中的属性选择器

JQ中的表单过滤器

JQ和JS之间的转换

• JQ对象，只能调用jq的属性和方法
• js对象，只能调用js的属性和方法

jq选择器

• 基本选择器
  • ID #id名
  • 类选择器 .类名
  • 元素选择器 标签名称
  • 通配符选择器 *
  • 并集选择器 选择器1,选择器2
• 层级选择器
  • 后代选择器 选择器1 选择器2
  • 子元素选择器 选择器1>选择器2
  • 相邻 +
  • 所有弟弟 ~
• 过滤选择器
  • 第一个元素 :first
  • 最后一个 :last
  • 偶数 :even
  • 奇数 :odd
  • 大于 :gt
  • 小于 :lt
  • 等于 :eq
• 属性选择器
  • 选择器[属性] 单个属性
  • 选择器[属性1 ] [属性2 ] 多个属性
  • 选择器[] [属性= 属性值] 确定的属性值
• 表单过滤器
  • ：text
  • option:selecte
• js和jq的转换
  • js转jq
    • $(js对象)
  • jq转js
    • jq对象[0]

JQuery 的动画效果

1. 动画
	1. 三种方式显示和隐藏元素
		1. 默认显示和隐藏方式
			1. show([speed,[easing],[fn]])
				1.speed动画速度，slow，normal，fast(预定义)或毫秒值(1000)
				2.easing，切换效果，swing(默认值)，先慢，再快，再慢，linear匀速
				3.fn,回调函数，当动画执行完成后调用吗，每个元素执行1次
			2. hide([speed,[easing],[fn]])
			3. toggle([speed],[easing],[fn])，切换
		
		2. 滑动显示和隐藏方式
			1. slideDown([speed],[easing],[fn])
			2. slideUp([speed,[easing],[fn]])
			3. slideToggle([speed],[easing],[fn])

		3. 淡入淡出显示和隐藏方式
			1. fadeIn([speed],[easing],[fn])
			2. fadeOut([speed],[easing],[fn])
			3. fadeToggle([speed,[easing],[fn]])