jq 第2天

文章目录

• jq 第2天
• • 基本过滤器
  • 内容选择器
  • animate()
  • 对js中dom操作步骤
  • 轮播图
  • hover()
  • show()/hide()
  • slideDown()/slideUp()
  • children()

基本过滤器

*ul li:first      匹配第一组ul的第一个li（只匹配一个）
*ul li:first-child  匹配每组ul的第一个li（匹配至少一个li）
li:not(.c1) 匹配类名不是c1的li
*li:gt(2) 匹配下标大于2的li
li:lt(2) 匹配下标小于2的li
*li:eq(2) 匹配下标等于2的li
*li:even 匹配下标为偶数的li
li:odd 匹配下标为奇数的li
:header 匹配所有的标题标签
*:focus 匹配获取焦点的元素
:root 匹配根标签（html）
:animated 匹配具有动画效果的元素

内容选择器

*div:contains('hello') 匹配自身包含以及后代包含hello内容的所有div
div:empty 匹配纯空div
*div:has(p) 匹配后代包含p的div标签
div:parent 匹配非空的div

animate()

作用：给元素添加自定义动画
参数：参数一：样式对象
	 参数二：动画时间  （单位：ms)
返回值：添加动画之后的元素自身

$("div:eq(0)").css({width:"50px",background:"yellow"}).animate({width:"400px",height:"200px"},2000);

对js中dom操作步骤

step1:骨架分析---html标签
step2:样式布局---css样式
step3:功能分析---js
	3.1 事件和影响元素对应关系：
		1       1
		1       多
		多个     1 :解题思路：封装函数
		多个     多个：转化为：多对1进行处理，其中1指的是下标
	3.2 先做1对1/1对多/多对1，最后做多对多
	3.3 影响元素哪些方面？
		3.3.1 对元素内容操作
				对普通双标签：innerHTML属性/innerText属性
							获取：oDiv.innerHTML
							设置：oDiv.innerHTML = "你好"
							
				对表单控件： input:value属性      oInput.value;
						   textarea：value属性
						   select：value属性 
		3.3.2 对元素属性操作
					a) dom对象.属性名（除了className例外）
					b) getAttribute()/setAttribute()
					
					<img src="" id="img"  class="img"/>
					oIMg.src = "路径"
					oImg.id = "box"
					oImg.className = "box"
		3.3.3 对元素样式操作
					设置：oDiv.style.属性名 = 属性值
					获取：oDiv.style.属性名
	3.4 进行功能实现

轮播图

分类：
	呼吸轮播（前后轮播）
	干蹦轮播（左右轮播）
	无缝滚动
	
原理：
	呼吸：使用定位布局
	干蹦轮播：使用浮动布局
	无缝：浮动

hover()

作用：鼠标移入移出事件
参数：参数一：鼠标移入时，回调函数
	 参数二：鼠标移出时，回调函数
返回值：自身

show()/hide()

作用：显示/隐藏
参数：暂无
返回值：自身

slideDown()/slideUp()

作用：滑入/滑出
参数：暂无
返回值：自身

children()

作用：获取元素所有的儿子
参数：指定儿子的标签名
返回值：自身