JQ 基本用法

$(“选择器”):用来获取元素; 创建标签var pM = $(“<p>黄鹤楼</ p>”); /n

添加

prepend : 添加到前边;
append : 添加到后边

after 为当前元素添加兄弟元素 添加到后边
before 为当前元素添加兄弟元素 添加到前边

替换

A.replaceWith(B):用 B 替换 A;
A.replaceAll(Sel):用A替换所有通过Sel选择器找到的元素;

删除

enpty(): 作用是清除指定标签中所有的内容(包扩标签和数据)
remove(Sel):清除指定标签中满足 Sel 选择器的标签

获取父级或子集

parent:获取父级
parents 获取所有父级
children:获取所有子集
find : 获取指定标签中所有满足选择器的元素

属性操作

addClass():作用是为指定的标签添加class;

删除类名

$("p").removeClass("oneP");

toggleClass 如果该元素拥有该class值则删除 没有则添加

attr(属性名,属性值) : 只写属性名获取属性,两者都写设置属性

//删除元素属性的方法

$(".oneImg").removeAttr("width");

元素内容操作

val() 用于访问表单元素的值相当于value;
html():获取/设置指定标签中的内容(可以识别标签)相当于 innerhtml
text 相当于 innerext

JQ动画

animate(参数一,参数二,参数三,参数四)
* 参数1,:需要修改的标签属性
* 参数二:动画持续时长,单位 毫秒
* 参数三:动画速度曲线,默认 linear 可以设置 为 swing 但是需要插件支持(可省略)
* 参数四:动画执行结束之后触发的函数(可省略)

$(this).animate({
                height:"700px",
                background:"blue"
             },2000,function(){
                alert("结束了")
             });

JQ的显示或隐藏操作

hide():隐藏 show():显示 toggle():如果显示 就隐藏 如果隐藏就显示; 有两个参数
可不写 (直接隐藏)
写一个时间(在时间内隐藏完毕)
第二个可写在隐藏操作完成后要执行的函数

fadeIn:淡入 fadeOut:淡出 fadeToggle:如果隐藏就淡入 如果显示就淡出 参数与以上相同
slideUp 上滑 slidedown 下滑 slideToggle 显示就上滑 隐藏就下滑

fadeTo():变换到指定透明度
参数一写 时间或速度单词 ;
参数二写 透明度数 0-1;
参数三可写函数 或不写;

动画可写多个 形成队列

$("#custom3").click(function(){
            $("#aaa").animate({
                width:"200"
            },5000);
            $("#aaa").animate({
                height:"200"
            },5000);
            $("#aaa").animate({
                width:"100"
            },5000);
            $("#aaa").animate({
                height:"100"
            },5000);
        });
  • 停止动画: stop(isStopAll,isGoToEnd)
    isStopAll:是否清楚队列的动画,默认false
    isGoToEnd:是否直接完成动画 默认false;

//链式操作

$("img").attr("src", "img/1.jpeg")
        .css("border", "2px solid cyan")
        .fadeOut(1000)
        .slideDown(1000);
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值