获取操作兄弟元素
-
元素.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()获取该元素前面的所有兄弟元素
网友评论