七，八、JQuery【1201-1202】

1，jquery初识

• prop("属性值")【单个值的时候】、prop("属性","属性值")【双值的时候】

  • prop()只能操作元素的dom属性

  • 操作元素的标签属性操作attr(), attr("属性值")，设置属性属性值let res = box.attr("属性","属性值")

  • 移除元素中的指定属性let res = box.removeAttr("属性名"),返回值是原来jquery的集合

  • addClass()添加类名，返回值jquery集合；removeClass()移除类名，返回jQuery集合

  • hasClass(),判断是否有指定的类名，返回布尔值【true || false】

  • toggleClass()，切换类名，返回值，jQuery集合

  • .html()，

  • jquery绑定事件【】

  • on(event,[selector],[data],fn)其中，中间两个是选填的，其余两个是必填的

  • $("box").on('click','','.btn',fun) 其中主要区分第二和第三空有无的关系，没有第二个且第三个为字符串时，则被当作

  • window.onload = function(){}  页面静态资源加载完毕之后执行

  • 两者的相爱相杀||

  •  off(event,[selector],[fn]) // on(event,[selector],[fn]) 关闭/开始 

• 八，jquery【1202】

  • 添加

    • 添加，box.append(p),把p添加到box中，返回值为box

    • 添加，p.appendTo(box),把p添加到box中，返回值为p

    • 追加前面，box.prepend(p),添加到最前面，返回值为box

    • 追加前面，p.prependTo(box)添加到box里面的最前面，返回值为p

  • 替换

    • box.replacewith(p)，用p替换box元素，返回值box

    • p.replaceAll(box),用p替换box,返回值p

  • 删除

    • box.empty()，内容清空，还剩本身个空壳

    • box.remove()，父子全部被移除

  • 克隆

    • clone()，默认会克隆这个元素和子元素，但是不克隆事件

    • clone(参数1，参数2),1和2都取布尔值，不写的时候默认跟随参数1的true或false，参数1表示是否克隆本身的事件，默认为false，true表示克隆事件

      • 参数2表示是否克隆子元素的事件，为true克隆，否则不克隆

  • 尺寸

    • height()、width()、

    • innerHeight()、【width+padding】,innerWidth【width+padding】

    • outerHeight()、【width+padding+border】,传递参数的时候，若为true,则可以获得margin的值

    • outerWidth【width+padding+border】

  • 元素的位置

    • offset(),【啥都不填的时候】最左边、最上边的距离,offset({left:30px,top:20px})，返回值为jQuery的集合

    • 不管是否有定位，得到的始终是页面最顶端最左边的距离

    • position()，获取相对于父元素的位置

  • 动画效果之回到顶部

  • 动画效果之点击显示

    • $(".box").show("slow",1000,function(){  })

  • 动画效果之点击隐藏

    • $("button").click(function(){ $(".box").hide() })

  • 上拉、下拉、上下拉，

    • 【sliderUp()、sliderDown、sliderToggle()】

  • 淡出【显示】、淡入【消失】，隐藏显示切换【切换版】，去到指定的透明度的值【制定版】，

    • 【fadeIn(2000)、fadeOut("slow")、fadeToggle()、fadeTo(1000,0.1)】

    • 【最后一个包含【速度+指定的值】，若不加速度，则会认为后一个就是速度，所以可能会起反效果】，【以透明度的形式实现的效果】

  • 动画集合版animate【第一个参数必填，其他三个选填，[]标志选填】

    • animate(对象，[速度]，[运动曲线swing,linear]，[动画执行结束后的回调])

    • animate(params,[speed],[easing],[fn])

    • eg: animate({left:600,bottom:300},1000,linear,function(){console.log(" I have finished it ")})

  • 动画效果之【stop与finish】

    • stop,点击哪停哪，

      • 在animate连续性动画运动中，若加上stop属性，他会停止在当前位置$("box").stop().animate({...})，则会执行一次animate动画

      • 若不加则会根据你点击的次数来回执行，直到完成点击的次数为止

      • 添加finish的话，他会从初始的位置进行运动

  •  finish，点击直接到完成的位置，即直接完成到设置的参数的值

  • 阳光总在风雨后，请相信有彩虹！！