jQuery学习
十一月 02, 2018
-
恶毒的期中考试hade passed by了哈哈哈，于是乎想记录一下这几天学习的新技术
-
传说中火了很多年的Js库–jQuery😱
-
你可能会心生疑问(一脸懵逼)了，这tm什么鬼？能有啥用啊？
-
打个比方，很久很久以前有两个农民，小王&小李，为了抵抗不久就要到来的冰河世纪，他们拼命地拿着铲子种地，这天，他们又在种地，艳阳高照，小李问小王~嗨，傻子，咱们买个播种机吧！小王蔑视一笑，败家玩意！那玩意贵死！种你地去！小李愤愤而去，硬是买来了播种机，从此以后种地速度一日千亩！甩了小王八条街！最后凄惨的小王冻死在了门边上。。
-
以上纯属扯皮🙃，当然jQuery就像是小李买的播种机，可以提高前端开发写代码的效率，和原生js代码结合编写，会有出其不意的惊艳效果。
-
GitHub真的是个好东西嘻嘻嘻，于是我先扒了一下 jQuery的官方文档😃
-
好吧这个是英文的。又一次下定决心要好好学英语。。
-
不甘心啊~来看中文的！👉地址
-
文档有困难？上视频👉地址
-
我真的是拼了老命了😂
-
以下是我的总结各种知识点，各种大深坑😏
-
写js代码的时候，jQuery提供了一个神奇的函数，文档就绪函数
$(function(){})，它是在DOM结构加载完成以后才执行的函数，因此w3school推荐所有代码写在这个函数的大括号里面，方便后续的js操作。 -
js是jQuery他爹，js对象穿的衣服(函数/方法)和jQuery对象穿的衣服(函数/方法)不一样的哈，人言Every thing is object(万物皆对象)，jQuery又给补了一句A kind of object can transfer to another kind of object. 直译过来就是原生js对象和jQuery对象是可以相互转化的，即
$(obj)和$obj.get(0) -
jQuery可以进行函数调用的链式操作，返回值如果是布尔类型的就不能链式操作了😭。
-
$(‘选择器:target’)的意思是当选择器选择的元素作为目标的时候被选中，并且！！返回了一个jQuery对象！！ -
❤Tips: 元素被选中是需要时间的，代码执行速度太快了，根本来不及反应紧接着本应执行的函数(方法)，解决方法可以是利用设置定时器setTimeout(function(){},1000)，或者因为css本身执行速度超级快，也可以通过把:target写在css样式里面就可以忽略这个反应时间了。
-
js表达式不能直接放在
$(“”)里面，会被识别为字符串，应使用字符串拼接的方式。 -
如果把多次使用到的对象放到自定义的变量里面，变量命名以$开头，这样代码简洁速度快。
-
元素被认为是隐藏或显示的情况
- css-display值是none。
- type=“hidden”的表单(form)元素。
- 宽度和高度都显式设置为0。
- 一个祖先元素是隐藏的，则该元素不会在界面上显示。
- 而visibility:hidden或opacity:0被认为是可见的，因为他们仍然占据布局空间。
-
:first-child是第一个孩子👶，而:first-of-type是🧑父元素的孩子中第一次出现的元素。 -
:nth-child(数/表达式eg:2n就是偶数的意思)整个表达式索引值是从1开始，:eq()的索引值是从0开始，:nth-child()多用于找规律地选中元素。 -
对象自定义属性 : jQuery中，
$(“#div”).attr(“aa”,123)就相当于原生js中的obj.setAttribute(“属性名”,“属性值”)。取值就在使用attr时传一个参数，设置值传两个参数。同样的，prop()方法相当于原生js的对象.属性(属性不会显示在DOM元素中)，设置值和获取值的方法同上。 -
我们知道form表单的checkbox(复选框)中只要有checked属性(默认勾选的属性)，无论值是什么都会被默认选中，但是在jQuery中通过对象.attr(“checked”,false);就不会被选中。。
-
有eq选择器也有一个eq()方法，功能都一样🙆♂️
-
forEach(function(elem, index, array){})循环是原生js的写法，对应jQuery中的each(index, elem, array)函数，二者都返回原生对象
-
若要检索和更改DOM属性，比如元素的checked，selected或disabled属性，请使用
.prop()方法！！！ -
jQuery中创建元素—-eg.var $div4 = $(‘’)
-
jQuery中子元素
appendTo父元素，原生js中父元素appendChild子元素 -
jQuery中的
.text()和.html()取值都是元素的content，但是设置值的时候，如果将元素的内容写成标签，.text()直接以字符串的形式输出，.html()则以元素的形式输出。 -
jQuery的树遍历中，.closest()开始于当前元素，在DOM树中向上遍历，直到找到与提供的选择器相匹配的元素为止，返回0或1个jQuery对象；.parents()开始于父元素，向上遍历DOM树到文档的根元素，每个祖先元素祖先元素加入到临时集合，如果提供一个选择器，则会使用该选择器在集合中进行过滤，返回0或1或多个jQuery对象。
-
jQuery封装的mouseenter()事件和原生的mouseover()事件的区别在于前者解决了鼠标从元素外层向里层移入的时候发生的内层元素事件冒泡；同样的原生的mouseout()也有事件冒泡，相应的jquery解决方法是封装了mouseleave()事件
-
.fouse()获取焦点问题默认不会冒泡，但是jquery封装了.fousein()方法就会冒泡；同样的，.blur()在元素失去焦点的时候触发，默认不会事件冒泡，但是jquery封装的.fouseout()方法就支持事件冒泡/
-
$(“#div”).hover(function(){鼠标划入触发事件}, function(){鼠标划出触发事件});.hover()同时绑定的是mouseenter()和mouseleave()事件，不支持事件冒泡，和写mouseenter()和mouseleave()`的链式操作是一样的。
-
event.stopProppagation()防止事件冒泡到DOM树上，不触发任何祖先元素的事件处理函数，这个方法不接受任何参数。
-
jQuery封装的动画函数中，.hide()和.show()都可以传参数设置动画时间(以毫秒为单位)，.toggle()是这两个函数的综合；fadeIn()和fadeOut()是元素淡入和淡出(底层js是用定时器改变的透明度opacity)，设置的延迟时间duration可以用字符串‘fast’和‘slow’分别代表200和600毫秒的延时，不设置则默认400毫秒的延时；.fadeToggle()就是综合…in和…out啦~；slideDown()和slideUp()分别是向下展开和向上收起动画效果，同样可以设置延迟时间，slideToggle()综合…，toggle即切换。
-
.not()会让代码更加易读，而:not()会构造一个比较复杂的选择器(尤其传的参数需要拼接字符串的时候)，推荐用前者进行筛选元素。
-
:parent和:empty是正好相反的，前者选中内容不是空的元素，后者选中内容是空的元素。
-
jq对象.val()方法可以返回input的value属性值。
-
🎄树遍历中，.children()找满足条件的亲子代元素，.find()找子孙后代👌所有满足条件的元素，.children()不返回文本节点，让所有子元素包括使用文字和注释节点，建议使用.contents()。
-
.trigger()扳机函数有事件冒泡，在事件处理程序中返回false或调用事件对象中的.stopPropgation()方法可以使事件停止冒泡。triggerHandler()没有事件冒泡，并且如果要触发jquery绑定的事件处理函数而不触发原生的事件(浏览器的默认行为eg—表单的默认提交)，使用triggerHandler()。e.preventDefault()默认事件行为将不再被触发，triggerHandler()与普通的方法返回jquery对象(这样可以链式操作)相反，triggerHandler()返回最后一个处理的事件的返回值，如果没有触发任何事件，会返回undefined，triggerHandler()不能进行链式操作。
-
点击事件: a)click点击事件; b)dblclick双击事件。
-
detach()和remove()都可以移除DOM元素，remove()有返回值是删除掉的jQuery对象，如果把返回的jq对象再append()进来，绑定的事件就失效了👉给后插入的元素绑定事件: a)通过事件冒泡将事件委托给父元素，当点击子元素时，由于事件冒泡，会触发父元素绑定的事件(on方法的第二个参数option会指明真正绑定事件的是哪个元素) b)还可以不加第二个参数，给click事件的事件处理函数传入参数event(e), e.target返回原生对象。
-
.siblings()可以结合.end()使用，来返回当前的对象(this),因为.siblings()以后当前对象就是this的兄弟们了，如果要接着操作this，就要使用.end()来返回。
-
🎈remove()同时移除元素上的事件及jQuery数据