jQuery

Posted 2022-03-06 xhrr

1. jQuery与DOM 的转换

　　jquery → DOM： jQuery对象[ ]

　　DOM → jQuery：$(dom对象 )

2. 注册事件

　　简单方式： $(‘选择器‘).事件名(事件处理程序)

　　on的方法： jQuery对象.on( ‘事件名‘, 事件处理程序)

　　事件委托： jQuery对象.on(‘事件名‘, ‘选择器‘, 事件处理程序)

　　移除事件

　　　　简单：jQuery对象.off(‘click‘, 事件程序名)

　　　　事件委托：jQuery对象.off(‘事件名’, ‘选择器‘, 事件处理程序名)

　　bind 和 unbind方法操作事件

　　　　注册：jQuery对象.bind(‘事件名‘, 事件处理程序)

　　　　移除：jQuery对象.unbind(‘事件名‘, 事件处理程序名)

3. 操作css样式

　　jquery对象.css(‘width‘, 500)　

　　$(‘.box‘).css(

　　　　‘width‘:200,

　　　　‘background-color‘: ‘#090‘

　　)

　　获取：xx=$(‘.box‘).css(‘height‘)

3.0 操作元素

　　创建/追加

　　　　向父元素最后追加

　　　　　　①新jQuery对象.appendTo( ‘父元素选择器‘, 父元素jQuery对象)【eg：$(‘<li></li>‘).appendTo(‘ul‘)】

　　　　　　②父元素jQuery对象.append(‘新jQuery对象‘)

　　　　向父元素最前面追加

　　　　　　①新jQuery对象.prependTo(‘父元素‘)

　　　　　　②父jQuery对象.prepend(‘新jQuery对象‘)

　　　　同级元素追加

　　　　　　前面插入：jQuery对象.before(‘新jQuery对象‘)

　　　　　　后面插入：jQuery对象.after(‘新jQuery对象‘)

　　删除

　　　　jQuery对象.remove()

　　请空

　　　　jQuery对象.empty()；清空元素内部所有元素以及元素相关事件

　　　　jQuery对象.html( ‘‘ )；请空内部所有元素，但不会释放元素内部相关事件

　　克隆

　　　　jQuery对象.clone(布尔)；默认false仅克隆内容，true克隆内容和事件

4. 选择器

　　基本：id、类、标签、交集、并集

　　层级：

名称	用法	描述
:eq(index)	$(‘li:eq(2)‘)	获取li中索引为2的元素
:odd	$(‘li:odd‘)	获取li中索引为奇数的元素
:even	$(‘li:even‘)	获取li中索引为偶数的元素

　　筛选选择器：

名称	用法	描述
children()	$(‘ul‘).children(‘li‘)	相当于子类选择器
find()	$(‘ul‘).find(‘li‘)	相当于后代选择器
siblings()	$(‘#a‘).sibling(‘li‘)	查找兄弟节点，不包括自己
parent()	$(‘#a‘).parent()	查找父亲
eq()	$(‘li‘).eq(1)	查找索引为1的节点，从0开始
next()	$(‘li‘).next()	下一个兄弟元素
prev()	$(‘li‘).prev()	上一个兄弟元素
prevAll()	$(‘li‘).prevAll()	之前所有的元素

5. 入口函数

　　$(function()  )

　　$(document).ready(function()   )

　　区别：

　　window.onload = function()

　　　　当页面中所有资源【DOM树，媒体】加载完毕后才执行

　　

　　$(function()

　　　　仅仅等DOM树加载完毕后执行

　　)

6. 操作类名

　　添加：$(‘div‘).addClass(‘xx‘)

　　移除：$(‘div‘).removeClass(‘xx‘)

　　检测类名是否存在：$(‘div‘).hasClass(‘xx‘)

　　切换类名：$(‘div‘).toggleClass(‘xx‘)         //有则删没有则添加

7. 操作标签属性

　　设置：$(‘div‘).attr(‘pid‘, 110)

　　获取：$(‘div‘).attr(‘pid‘)

　　移除：$(‘div‘).removeAttr(‘pid‘, 100)

　　prop方法：针对表单属性selected、checked、disabled操作使用prop方法

　　　　获取： $(‘input‘).prop( ‘checked‘ )

　　　　设置： $(‘input‘).prop(‘selected‘, true)

8. 操作标签内容

　　文本： jquery对象.text() 　　jquery对象.text(‘xxx‘)

　　所有： jquery对象.html()　　jquery对象.html(‘xxxx‘)

　　表单： jquery对象.val()　　jquery对象.val(‘xxx‘)

9. 操作元素尺寸

　　width 和 height 【内容部分】

　　　　jQuery对象.width(‘数字’)

　　innerWidth 和 innerHeight 【内容+padding】

　　　　jQuery对象.innerWidth()

10. 操作元素位置

　　元素距离文档位置

　　　　jQuery对象.offset()；返回一个对象，包含元素位置

　　元素距离上级定位元素位置

　　　　jQuery对象.position()；返回一个对象包含位置

　　操作卷去的页面间距

　　　　jQuery对象.scrollTop()

$(‘div‘).scroll(function()
　 　// 获取被卷起的间距
　 　var v = $(this).scrollTop();
　 　console.log(v);
);

$(‘button‘).click(function()
　　  // 设置卷起的间距
　　  $(‘div‘).scrollTop(0);
);　

10. 动画

　　speed:运动时长；　　easing：运动方式，默认swing缓冲，linear匀速

　　显示：jQuery对象.show(speed, easing, fn)　　

　　隐藏：jQuery对象.hide(speed, easing, fn)

　　切换：jQuery对象.toggle(speed, easing, fn)

　　下拉上卷：

　　　　显示：jQuery对象.slideDown(speed, easing, fn)

　　　　隐藏：jQuery对象.slideUp(speed, easing, fn)

　　　　切换：jQuery对象.slideToggle(speed, easing, fn)

　　淡入淡出

　　　　显示：jQuery对象.fadeIn(speed, easing, fn)

　　　　隐藏：jQuery对象.fadeOut(speed, easing, fn)

　　自定义动画：

　　animate(params, [speed],[easing],fn)
　　params传入一个对象
　　animate(
  　　 样式属性名：目标值 
　　)

　　停止动画

　　　　jQuery对象.stop(clearQueue, jumpToEnd)

　　　　clearQueue布尔值   true：请空该物体所有动画；false默认：仅清除当前这一动画

　　　　jumpToEnd布尔值    true：停止动画并直接完成运动目标；false默认：停止动画保持当前状态，不会运动到当前目标

11. 事件对象

　　鼠标事件对象相关属性

　　　　事件对象.clientX/Y　　参照浏览器

　　　　事件对象.pageX/Y　　参照文档

　　　　事件对象.offsetX/Y　　参照事件源

　　公共属性和方法

　　　　事件对象.target

　　　　事件对象.preventDefault()；阻止默认行为

　　　　事件对象.stopPropagation()；阻止事件冒泡

12. 链式编程

　　jQuery对象调用一些方法做设置操作时，方法完毕后，内部会重新返回当前jQuery对象，所以可以继续调用jQuery的其他方法，这种现象就是链式编程

end方法在链式编程上返回上一jQuery对象

13. 多库共存

　　① jQuery.noConflict()；  释放 $ 用其他变量接收，jQuery中不使用$,使用jQuery

　　②jQuery库释放$符合的使用权，用其他简单的符号代替