[前端学习]jquery部分学习笔记，第二天

获取操作兄弟元素

• 元素.next()获取该元素下一个兄弟元素
• 元素.nextAll()获取该元素后面的所有兄弟元素
• 元素.prev()获取该元素上一个兄弟元素
• 元素.prevAll()获取该元素前面的所有兄弟元素
• 元素.siblings()获取该元素的所有兄弟元素

jquery动画方法

• 要注意，jquery中hide()和show()封装时，自带了动画效果
• 滑动动画方法：
  • 元素.slideUp()使元素往上滑，就是渐渐不见，参数可以是数字和字符串
  • 元素.slideDown()使元素往下滑，就是渐渐出现，参数可以是数字和字符串
  • 元素.slideToggle()使元素切换上滑和下滑的效果，当前没显示就下滑，当前显示了就上滑，参数可以是数字和字符串
• 透明度动画方法：
  • 元素.fadeIn()使元素透明度慢慢增加，最终变为1，参数可以是数字和字符串
  • 元素.fadeOut()使元素透明度慢慢减少，最终变为0，参数可以是数字和字符串
  • 元素.fadeToggle()切换透明效果，是1就慢慢变为0，是0就慢慢变为1，参数可以是数字和字符串
  • 元素.fadeTo()使元素透明度慢慢变为设定的值，两个参数，数字和透明度
• animate动画方法：
  • 之前在学习特效的时候，已经封装过这个动画方法，jquery中默认内置了这个方法，直接调用就行。也是三个参数：属性和值的键值对；执行时间数字；回调函数(在动画效果完毕后再执行)
• 停止动画方法：
  • 元素.stop()停止执行该元素调用的动画方法,有多种用法，翻手册去查

jquery动态创建及添加元素

• DOM中动态创建元素有五种方法，在jquery中有两种
  • $("标签代码")直接使用$()的方式写入html结构代码就能创建，该方法返回的就是创建的标签对象。然后在配合元素.append()方法，将其追加到其他元素中
  • 元素.html("标签代码")使用html方法也能在元素内部动态创建元素，相比上一步省去了追加的步骤，但是该方法会覆盖元素内部所有内容
• 添加元素的方法
  • 元素1.append(元素2)将元素2添加到元素1的内部的最后面,注意append()方法操作的是元素本身
  • 元素1.prepend(元素2)将元素2添加到元素1的内部的最前面
  • 元素1.after(元素2)将元素2添加到元素1的后面，作为兄弟元素
  • 元素1.before(元素2)将元素2添加到元素1的前面，作为兄弟元素
  • 元素2.appendTo(元素1)主动将元素2添加到元素1内部，与append()方法的区别是操作的对象不同

jquery克隆元素及元素内容清除

• 元素.clone()元素调用clone()方法就是克隆自身，返回值是克隆出来的一个新元素对象，注意克隆出来的新元素和元素本身没有任何联系
• 元素.html("")使用空字符串覆盖元素的内容，可以实现清空内部内容的效果
• 元素.empty()调用empty方法也可以清空内部内容
• 元素.remove()移除元素自身，既然元素都没了，那它内部的内容当然也没了

jquery获取和设置属性值

• 表单元素值的获取和设置
  • 元素.val()很简单就是使用val方法，不写参数获取值，写参数就是设置值。
  • 另外有一点要注意，val()也不光只是用来获取和设置值。例如：想要设置下拉框默认选中项，DOM是设置option的selected属性。jquery中使用option父元素(select)调用val方法参数写option对应的value值也能设置默认选中
• 获取和设置的值
  • 元素.attr()用来获取设置自定义的属性和值
  • 元素.prop()用来获取设置符合w3c规范的属性和值
  • 注意这两个方法一定要分清楚用途，乱用会出现获取值为undefined的bug
  • 只写一个参数，表示获取元素这个属性的值
  • 写两个参数，表示给元素添加这个属性，并给其赋值

jquery获取设置元素的宽和高

• jquery中有两种方法可以操作：
  • 元素.parseInt(.css("width"|"height"))通过css方法并传入参数可以获取元素的宽高，但是需要注意它返回的是字符串，所以要转换为数字更方便运算。设置值传入第二个参数即可，如果是数字需要加单位
  • 元素.width()|元素.height()通过width()和height()方法，也可获取和设置元素的宽高，它们返回的是数值。设置就是传入参数，参数可以是数值也可以是字符串

jquery获取设置元素的距离

• jquery中已经封装好了offset方法，直接使用就能设置
  • 元素.offset().left|top调用offset方法，返回的是一个对象，再分别调用left和top属性，就能获取到元素的left和top值，返回值是数字
  • 元素.offset({"left",0:"top",0})往offset中传入键值对形式的参数，就能设置left和top值
• 顺便记录一下获取卷去距离的方法
  • 元素.scrollTop()|scrollLeft() 获取元素顶部和左侧被卷去的距离，返回值是数值。一般常用于获取document页面被卷去的距离，或者盒子内部某元素被卷去的距离

jquery绑定事件

• 最基础的绑定事件就是点上事件名方法，同时绑定多个事件之前说过可以用链式编程
• jquery中其他绑定事件的方法：
  • 元素.bind({事件名1:事件处理函数，事件名2:事件处理函数，事件名3:事件处理函数})bind方法可以同时绑定多个事件，以键值对的形式传入。bind还可以为多个事件绑定相同的事件处理，事件名在引号中用空格隔开即可
  • 元素.delegate(元素名，事件名，事件处理函数)注意delegate方法不是为元素自身绑定事件，而是为它内部的某个子元素绑定事件
  • 元素.on(事件名，元素名，事件处理函数)on方法绑定事件，参数有两种写法：如果只写事件名和处理函数，那么就是为自身绑定事件；如果三个参数都写，那么用法与delegate相同，也是为元素的某个子元素绑定事件。注意：第二个参数是触发事件选择器，内部某个后代的选择器字符串
  • 以上几种绑定事件的方法，最推荐使用的是on方法，尤其是为动态创建数据(未来元素)注册事件的时候

jquery解绑事件

• jquery中绑定事件和解绑事件是成双成对的
  • 使用on()方法绑定的事件，解绑使用off()方法，需要解绑什么事件就传入事件字符串
  • 使用bind()方法绑定事件，解绑使用unbind()方法，需要解绑什么事件就传入事件字符串
  • 使用delegate()方法绑定事件，解绑使用undelegate()方法，需要解绑什么事件就传入事件字符串
• 几个需要注意的点
  • off()方法如果只写事件名参数，那么只是对该元素解绑对应事件，元素内部的子元素不受影响；如果在事件名后面写第二个参数**，那么是给该元素的子元素解绑参数名对应事件；如果什么参数都不写，那么父元素和子元素的所有事件都解绑
  • undelegate()方法解绑的时候，会把父元素和子元素对应参数名的事件都解绑。

jquery触发事件

• js中如果想要触发事件，一般是绑定事件的元素执行触发操作才行。而jquery中让一个元素事件，在另一个事件中调用触发的方法有三种：
  • 元素.click()如果元素已经绑定了事件，在另一个事件中直接再调用一遍就能触发,click只是例子
  • 元素.trigger()再另一个事件中，用绑定事件的元素调用trigger方法也能触发事件，参数是需要触发的事件名
  • 元素.triggerHandler()使用方法和功能与上一个一样
• 三者的区别：
  • 前两种方法不仅可以触发自定义的事件，还可以触发浏览器默认的事件（比如：获取焦点等）。第三种只能触发已经绑定好的自定义事件，不能触发浏览器默认事件

事件对象再次讲解

• 之前已经学过了事件对象event，这里再对其三个目标属性作解释
• 例子：$("#dv").on("click","p","function () {}");
  • event.delegateTarget 获取事件委托的元素，以上面例子来说：是委托dv调用on方法，为p标签绑定的点击事件，所以这里event.delegateTarget返回的是dv
  • event.currentTarget 获取真正绑定事件的元素，以上面例子来说，真正绑定事件的是p标签，所以这里event.currentTarget返回的是p
  • event.target这里属性之前学过了，获取触发事件源，肯定是点击p才能触发事件，所以返回p
• 另外还涉及到一个题外话，argument.length可以获取指向函数在调用时，一共接受了几个参数

jquery取消事件冒泡及取消浏览器默认事件

• 事件冒泡原理是，多个嵌套关系元素都设置了相同事件，如果点击触发了内层的事件，那么外层所有相同事件都会被触发
• jquery阻止事件冒泡方法：
  • event.stopProgation()在事件处理函数中，用event事件对象调用stopProgation方法可以阻止事件冒泡
  • return false在事件处理函数中,最后写上return false也能阻止事件冒泡。并且它不只能阻止事件冒泡，还能阻止浏览器默认事件。比如常见的就是阻止a标签点击默认跳转事件

链式编程原理解释

• 链式编程的用法已经学过了，这里解释一下链式编程的原理。首先要明白只有对象才能调用方法，这也是链式编程的基础，必须返回值是对象才能继续链式调用
• 那么链式编程怎么实现的呢？就是在方法内部最后return this，如果某个元素对象调用方法后又返回了该对象，返回值是对象可以继续调用方法，这样就实现了链式调用
• 有些方法不传参数和传参数返回结果不一样，就是用了判断在某个分支中return this
• 所以链式编程的原理就是：在方法最后返回了调用该方法的对象，是对象就能再次调用方法

each方法

• jquery中有隐式迭代，所有获取到元素集合如果对它们进行相同的操作，那么不需要再像原生js那样去循环遍历
• 但是隐式迭代只针对所有元素进行相同的操作，如果想要集合内的每个元素都进行不同的操作，就要用each方法来遍历集合
• 元素集合.each(function(index,ele){})each方法默认有两个参数，就集合中每个元素的索引和对应的元素。它会自动遍历集合
• 注意each方法返回的元素是DOM对象，所有在jquery中要操作需要先将其转换为jquery对象
• each遍历的是键值对，所以它不仅能遍历一维数组，还能遍历二维数组和对象

jquery多库共存问题

• 在实际开发中肯定会引入很多的外部js文件，如果某个外部文件中将jquery的顶级对象$声明为了变量，那么$就不能再正常使用了，解决这种问题的方法叫做释放$控制权
• var aa = $.noconflict()用$调用noconflict方法，就释放$对象，将$引用赋值给aa变量，这时aa就代替了$成为jquery的顶级对象，aa可以实现之前$的任何操作，而$就解放出来了
• 另外如果不想释放$的控制权，那么使用jquery关键字也可以，因为$和jquery关键字都是顶级对象，它们功能完全相同

jquery插件

• 插件的使用
  • jquery插件就别人已经封装的一个功能，使用的时候直接下载复制粘贴就行，简单无脑。不过插件的目的是节省开发所花的时间，所以为提高自己，在时间允许的情况下最好是自己写。哪怕用插件也要看看具体代码，理解其逻辑思路
• 自己封装jquery插件
  • 1.完成需要封装成插件的功能
  • 2.然后将css单独放入一个文件
  • 3.将js功能部分代码单独放入一个文件，注意功能代码是封装的函数等其他不是立即生效的代码
  • 4.将js实现逻辑部分代码放到demo.html文件中，逻辑代码是调用、注册事件等
  • 5.书写使用指南
  • 总结：可能写的少，还分不清楚哪些js代码应该放入单独文件，哪些js代码需要放在html中，以后插件写得多了自然就明白了
• 题外话jquery扩展：
  • $.fn.函数(){};这是固定语法，这样写就能让函数成为jquery中任何一个对象的方法，直接用元素对象调用方法就能使用
  • extends()方法也是jquery的扩展方法，详细的扩展方法有很多，在使用的时候去查阅手册

jqueryUI

• jqueryUI就是集成了多个插件功能的页面，在页面中找到想用的插件复制到自己页面上就行了
• jqueryUI使用时必须引入UI的样式文件，jquery的库文件，UI的js文件
• 下来自己试试，实际就是比复制粘贴稍微难点

jquery考试总结

• jquery对象是DOM对象的包装集
• $ === jquery
• $( function () {})不是文档就绪的写法
• 当获取到一个元素集合，内部所有元素都设置了相同属性值，当你不遍历直接用集合调用方法打印相同属性时，默认会输出一个元素的属性值

jquery方法

• 对jquery中方法的不完整汇总
• 元素.click();点击事件
• 元素.css();设置css样式
• 元素.text();不写参数表示获取，写参数表示设置内部文本，相当于innerText且没有兼容问题
• 元素.html();不写参数表示获取，写参数表示设置内部文本或者标签结构，相当于innerHTML
• 元素.val();不写参数表示获取，写参数表示设置value值，相当于value属性
• 元素.css();设置css样式，如果只设置一个样式用逗号分隔，如果设置多个样式以对象键值对的方式写参数，相当于style属性
• 元素.children();获取该元素内部的所有子元素，如果想要获取内部某个具体标签元素，可以在参数中写入
• 元素.show();显示该元素，参数可以传入时间，动画效果多少秒显示完
• 元素.hide();隐藏该元素，参数可以传入时间，动画效果多少秒隐藏完
• 元素.siblings()获取该元素的所有兄弟元素，如果传入参数，例如li，就是所有的兄弟li标签
• 元素.index()获取该元素在集合中的索引值
• 元素.find()在元素内部找参数对应的标签元素，这个方法没有限制是否是子元素，更深层也可以
• 元素.addClass()给元素添加样式类名，详细使用见操作样式部分
• 元素.removeClass()给元素移除样式类名，详细使用见操作样式部分
• 元素.hasClass()判断元素是否应用了传入参数的类名
• 元素.toggleClass()切换样式类名，判断元素是否应用参数类名，有就清除，没有就添加
• 元素.next()获取该元素下一个兄弟元素
• 元素.nextAll()获取该元素后面的所有兄弟元素
• 元素.prev()获取该元素上一个兄弟元素
• 元素.prevAll()获取该元素前面的所有兄弟元素