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,点击直接到完成的位置,即直接完成到设置的参数的值
-
阳光总在风雨后,请相信有彩虹!!
-