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