jQuery常用方法

jQuery选择器

• dom中获取元素的几个方式
  • document.getElementById()
  • doucemnt.getElementByTagName()
  • document.getElementByName()
  • document.getElementByClassName()
• jQuery中获取DOM元素的方式
  • id选择器： $(’#id’)
  • 标签选择器： $(‘tagName’)
  • 类样式选择器： $(’.class’)
  • 多条件选择器：$(‘li, span, p’)
  • 层级选择器：$(‘li > span’)

---

jQuery样式操作

• 添加样式： addClass(‘className’)
• 删除样式： removeClaa(‘className’) 不带参数时移除当前元素的所有css样式
• 切换样式： toggleClass(‘className’)
• 修改样式：css(‘height’: ‘200px’)也可以是一个对象

---

jQuery常用方法

• HTML和CSS样式
  • $(’#id’).html() : 相当于InnerHTML，当html参数为空时是获取，有参数时是设置。
  • $(’#id’).text(): 相当于innerText，当text参数为空时是获取，有参数时是设置。
  • $(’#id’).val(): 相当于value，当val参数为空时获取，有参数时是设置。

---

jQuery的链式调用

• jQuery允许在相同的元素上运行多条jQuery语句
• 只有在返回一个jQuery对象的时候才能继续链式调用（html()返回的是string，所以不能链式调用）

---

jQuery动画

• 显示和隐藏 show / hide（可选参数： slow、fast、 毫秒值, callback）

  • hide():元素隐藏动画
  • show(): 元素显示动画
  • toggle(): 元素显示隐藏切换

• 淡入淡出 fadein / fadeout / fadeToggle（可选参数： slow、fast、 毫秒值, callback）

  • fadein(): 淡入已隐藏的元素
  • fadeout()：淡出隐藏的元素
  • fadetoggle(): 切换元素显示隐藏的淡入淡出
  • fadeto(speed, opacity, callback): 淡入淡出到指定的透明度

• 滑动 slideUp / slideDown / slideToggle（可选参数： slow、fast、 毫秒值, callback）

  • slideUp(): 向下滑动
  • slideDown(): 向上滑动
  • slideToggle(): 切换滑动的动画

• 动画 animate

  • $(’#id’).animate({height: ‘200px’}, slow) 这里的animate对象使用的是标准对象写法，而css设置偏向于json写法

• 停止动画

  • $(’#id’).stop(stopAll, goToEnd):
    • stopAll: boolean值：是否停止所有的动画，默认false 即仅仅停止当前执行的动画，其他的不受影响
    • goToEnd: boolean值：是否完成当前动作后再停止，默认false 即清除当前动画

• 动画的callbacl

  • 动画完成后的回调
    • callback加括号后只执行一次
    • callback不加括号每次动画完成都要执行

---

jQuery创建元素的方式

• 把字符串转化为jQuery对象，然后使用append()插入到元素中，并且内容是在元素内容之后， prepend() 添加到元素中，并且内容是在元素之前， after()添加到当前元素后面， before()添加到当前元素前面。

  	const dom = $('<div>
  					<span>这里是要插入的内容</span>
  				   </div>
  				');
  	const parentDom = $('parent');
  	parentDom.append(dom);
  

• 使用html()
• 拼接html模板字符串，然后再追加到HTML中

---

jQuery删除元素

• remove(): 删除当前元素和其子元素
• empty(): 删除当前元素的子元素
• remove(’.id’): 删除选择器选中的元素

---

jQuery获得尺寸

• height() / width() : 获得元素的高度和宽度，不包含内外边距和边框
• innerHeight() / innerWidth(): 包括内边距的宽度和高度
• outerHeight() / outerWidth(): 包括内边距和边框的宽度和高度

---

jQuery遍历

• 向上遍历祖先：

  • parent(): 返回直接父元素，只返回一个
  • parents(): 返回所有祖先元素，一直到html
  • parentsUtil(): 返回介于两个元素之间的所有祖先元素（不包含起点和终点）

    		// 获取从item到container之间的item的祖先元素（不包括item和container）
    		$('.item').parentsUtil('.container')
    

• 向下遍历后代

  • children(): 返回所有的直接后代 ，返回多个
  • find(selector): 返回后代所有符合条件的后代, 返回多个
  • siblings(): 返回所有同级（同胞）的元素，返回多个
  • next() / nextAll(): 返回后一个 / 后面所有的同级（同胞）元素
  • nextUtil()：向后查找，返回和指定元素之间的同级（同胞）元素， 不包含起点和终点
  • 衍生方法
    • prev() / prevAll(): 返回前一个 / 前面所有的同级（同胞）的元素
    • prevUtils(): 向前查找，返回指定元素之间的同级（同胞）元素

• 过滤

  • first(): 返回首个符合条件的元素
  • last():返回最后一个符合条件的元素
  • eq(index): 从复合条件的元素中找到指定下标的元素
  • filter(’.item’): 在第一次查询的结果中筛选，返回符合筛选条件的元素
  • not(’.item’): 与filter相反，在第一次查询结果中帅选，返回不符合not条件中的元素

---

jQuery事件绑定

• 原始绑定事件的优化：

  	const btn = $('.btn');
  	btn.mouseover(function () {
  		...
  	});
  	btn.mouseout(function () {
  		...
  	});
  	btn.click(function () {
  		...
  	});
  	// 使用链式调用简化
  	btn.mouseover(function () {
  		...
  	}).mouseout(function () {
  		...
  	}).click(function () {
  		...
  	});
  

  • 使用bind简化事件绑定
    • bind(type, function) ;

  	const btn = $('.btn');
  	btn.bind({'mouseover': function () {
  		...
  	}, 'mouseout': function () {
  		...
  	}, {'click', function () {
  		...
  	}})
  

  • 使用delegate简化绑定
    • $(selector).delegate(childSelector,event,data,function)
    • 通过委托提高性能

• 事件解绑

• on: off

• bind: unbind

• delagate: undelagate

来源：https://blog.csdn.net/htp_411/article/details/100769892