8.JQuery(二)

给id为box的div添加类,点击后执行函数,然后函数内容为添加fontsize30(类名)从而执行多一个类名的操作
$("#addclass").click(function(){
$("#box").addclass(“fontsize30”)
})
还有移除的方法,removeClass(不接上类名,会把所有类名都移除)
判断元素是否有该类名,用hasClass,如果有的话返回ture,否则false
切换,toggleClass,如果元素有某个class,就移除掉,没有就加上

selected 属性规定在页面加载时预先选定该选项。
active - 链接被点击的时刻
tab栏切换,需求:给tab栏的每一个li标签设置"鼠标移入"事件,当前li添加active值,其他的兄弟元素li移除active
找到当前tab栏下标一致的div,添加selected,其他的兄弟元素移除selected
$(".wrapper>ul>li").mouseenter(function(){
$(this(dom对象转成JQ对象,这里的this是鼠标移入被锁定的dom对象).addClass(“active”)给当前的li添加active
.siblings(“li”)(转成JQ对象后在这就不会变回去,还能接着用).removeClass(“active”)给li的兄弟元素移除active
var idx = $(this).index()获取当前li的下标
$(".products>.main").eq(idx)(传入锁定对象的下标).addClass(“selected”).siblings(“div”).removeClass(“selected”)
})

网页动画:
show函数没有传参数则没有动画效果,想要有动画效果,就传参数
1.代表执行动画的时长,毫秒,也可以是代表时长的字符串:fast(200)(200毫秒显示出来)、normal(400)、slow(600)
2.回调函数,加在毫秒后,可以回调一些内容(2000,function(){alert(“······”)})

hide函数,本身就是隐藏的,要先显示才能执行的操作
传入的参数和show一样,属于逆向收缩

toggle函数为切换,如果已经隐藏就是显示,已经显示就是隐藏,传入的函数和hide或show一样

slideDown滑入函数和slideUp滑出函数一样,但不是收缩,而是滑动进出的
fadeIn淡出函数和fadeOut淡入函数(由浅入深)
css也可以进行以上的操作,不过要进行大量的坐标变化的代码填写,相当复杂

应用定时器代入,达到要求能自动结束动画
条件:抽取一个可以执行简单动画的函数
参数1:obj:要执行动画的对象
参数2:speed:移动的速度(可正负,这样可以避免在函数内的改加减号)
参数3:target:执行动画的目标位置(这里不能靠正负,所以要加上speed条件同时&&达到哪种目标(||或者型)才能执行哪种操作)
若要不改变speed正负,只取正值,可以加一个函数去判断,当前位置大于target时可以让speed=-speed
有多个对象共用一个定时器函数时,为了不冲突
1、先清除全局变量的timer
2、然后清除定时器的函数加上指定的对象,否则会影响其他的对象
3、定时器启动也要加上指定对象
以上为向执行动画中的对象添加一个timer属性,用来保存定时器标识
attr:要执行动画中的样式,比如:left top width 等,在引用的时候不能为stlye.attr,这样会把他当成是stlye中的一个属性,但是又没有,所以要为stlye[attr]把他看成是变量
callback:回调函数,可以执行全局赋值函数的内容,callback所在的共用函数体是一个局部函数

让div移动到800位置,用animate方法可以有效替代定时器的复杂性,一句代码就可以了
animate({left:800},2000,”swing“,function(){alert(“执行完毕了”)}),{里面装属性},“里面装方法”
参数1:必须传入:对象:需要做的动画的属性
参数2:可选,代表执行动画的时长
参数3:可选,缓动swing 匀速linear
参数4:可选,动画执行完毕之后的回调函数,回调函数里面还可以加入嵌套animate,无限嵌套,无限变化

html函数
$("#box").html()
如果不带参数,则是代表获取所有内容(包括标签)
如果传入参数,则是设置内容(内容中包含了标签,会把标签解析出来),会把原来的内容覆盖
append函数
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲box").()
带参数时,可以创建标签,但是创建的标签只存在内存中,不能像html()那样显示出来
如果要在页面上显示,就要追加,变成KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲box").append(("#box").$(”内容“))
empty函数
清空标签,并且把当前标签上绑定的事件一起清除
$("#box").empty()

attr函数
更改属性值
$(“img”).attr(“src”,"images/aj2.jpg“)
如果标签没有这个属性,则是添加
$(“img”).attr(“aaa”,"aaaaa“)没有aaa更改就会加入
也可以多个属性同时操作,把aaa和src同时写到括号里
加属性不加属性值,就是获取属性,获取没有的属性会返回undefind
removeAttr函数,移除属性
$(“img”).removeAttr(”属性“)就可以移除
也可以多个属性同时移除,不过要空格隔开放在同一个”“中
除了本身标签设置选中属性之外,当用户自己选择之后再获取拿到是undefined
JQ1.6版本后,对于checked selected disabled这类都是boolean类型(只有被本身设置选中或没设置)的属性不用attr函数,而是使用prop函数

猜你喜欢

转载自blog.csdn.net/qwe863226687/article/details/114057231