web前端 (15)Jquery 03

最新推荐文章于 2024-01-09 07:30:00 发布

士不可以不弘毅，任重而道远

最新推荐文章于 2024-01-09 07:30:00 发布

阅读量200

点赞数

分类专栏： WEB前端文章标签： web前端

本文链接：https://blog.csdn.net/weixin_44075537/article/details/85036280

版权

WEB前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

目录
获取宽度与高度
显示与隐藏函数 *
Jquery 事件
Jquery 文档函数 ***

获取宽度与高度

通过attr函数获取元素的宽度与高度时, 得到的数据是带有长度单位的字符串, 例如: “100px”

Jquery提供了用于获取获取宽度与高度数值的函数 (数值的单位默认为px)

获取宽度
var width = $obj.width();
设置宽度
$obj.width(值);
获取高度
var height = $obj.height();
设置高度
$obj.height(值);

案例:

获取盒模型相关的宽度与高度了解

获取宽度:
var width = $obj.width();
获取宽度+左右内边距的宽度
var width = $obj.innerWidth();
获取宽度+左右内边距的宽度+左右边框宽度
var width = $obj.outerWidth();
获取宽度+左右内边距的宽度+左右边框宽度+左右外边距宽度
var width = $obj.outerWidth(true);

获取高度:
var height = $obj.height();
获取高度+上下内边距的高度
var height = $obj.innerHeight();
获取高度+上下内边距的高度+上下边框高度
var height = $obj.outerHeight();
获取高度+上下内边距的高度+上下边框高度+上下外边距高度
var height = $obj.outerHeight(true);

显示与隐藏函数 *

基本显示隐藏效果
- 显示 : $obj.show();
- 隐藏 : $obj.hide();
- 切换 : $obj.toggle();
左上折叠淡入淡出显示隐藏效果
- 显示 : $obj.show(持续时间毫秒);
- 隐藏 : $obj.hide(持续时间毫秒);
- 切换 : $obj.toggle(持续时间毫秒);
上下折叠显示隐藏效果(图片需要有固定的宽度)
- 显示 : $obj.slideDown(持续时间毫秒);
- 隐藏 : $obj.slideUp(持续时间毫秒);
- 切换 : $obj.slideToggle(持续时间毫秒);
淡入淡出显示隐藏效果
- 显示 : $obj.fadeIn(持续时间毫秒);
- 隐藏 : $obj.fadeOut(持续时间毫秒);

动画函数 *

格式:
$obj.animate(style,time,[function]);

参数1.    style   :    是一个JSON格式的参数, 用于描述动画最终的样式 !
参数2.    time    :   表示从当前样式, 过渡到参数1样式 所需的毫秒时间值
参数3.    可选参数 , function类型, 在动画执行完毕时 自动调用 !

案例:

孙宽口活好会闭眼旋转跳跃 !

Jquery 事件

为了使 HTML标签与 JS逻辑代码进行分离, 便于后期的扩展与维护.

我们建议使用Jquery的事件处理方式:

事件的绑定与解绑

注意:
通过绑定添加的事件, 是可以叠加的 !
添加的事件无论是否产生了叠加 , 一次解绑全部解除 !
格式:
- 绑定事件
- $obj.bind(“事件类型”,函数);
- 解绑事件
- $obj.unbind(“事件类型”);
- 模拟触发事件
- $obj.trigger(“事件类型”);

案例:

事件函数熟悉

通过jquery, 调用事件函数传递function 完成事件逻辑的处理 !

格式:
$obj.事件类型(function);

例如指定点击事件:
$obj.click(function(){

});

常用事件函数:
click(fn)/click() 点击
dblclick(fn)/dblclick() 双击
blur(fn)/blur() 失去焦点
focus(fn)/focus() 获取焦点
change(fn)/change() 元素状态改变
keydown(fn)/keydown() 键盘按下
keyup(fn)/keyup() 键盘弹起
mouseover(fn)/mouseover() 鼠标移入
mouseout(fn)/mouseout() 鼠标移出
submit(fn)/submit() 表单提交

案例:
$(“button”).dblclick(function(){
alert(“按钮被点击”);
});

组合事件函数熟悉

hover(in,out)
移入移出组合事件
in : 当光标移出时触发的函数
out : 当光标移入时触发的函数

案例:

动态绑定事件函数

给未来元素绑定事件 (给未来添加的元素, 提前指定事件函数)

格式:
$祖先元素.on(“事件类型”,“选择器”,处理函数);

给指定的祖先元素内 , 符合选择器条件的未来元素 指定处理事件的函数 !

Jquery 文档函数 ***

创建元素
格式:
var $obj = $(“html元素字符串”);

例如创建一个按钮
var $but = $("<button>示例按钮</button>");

添加元素
- 向指定的父元素内部追加新的子元素
  格式: $父元素.append(新元素);
- 向指定的父元素内部前置新的子元素
  格式; $父元素.prepend(新元素);
- 向指定的元素后, 添加新的兄弟元素
  格式: $obj.after(新元素);
- 向指定的元素前, 添加新的兄弟元素
  格式: $obj.before(新元素);
删除元素
格式: $obj.remove() // 删除调用remove函数的元素
清空元素
格式: $obj.empty() // 清空调用empty函数的元素
克隆元素
- 忽略事件克隆
  var $新的对象 = $原对象.clone();
- 携带事件克隆
  var $新的对象 = $原对象.clone(true);

案例:

<style type="text/css">
    table{
        width:800px;
        margin: 0 auto;
    }
    table,td,th{
        border:2px solid #999;
    }
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    $(function(){
         $("table").on("click",".delete",function(){
            $(this.parentNode.parentNode).remove();
        }); 
        /* $(".delete").click(function(){
            $(this.parentNode.parentNode).remove();
        }); */
        $("#x1").click(function(){
            var str1 = $("input:eq(0)").val();
            var str2 = $("input:eq(1)").val();
            var str3 = $("input:eq(2)").val();
            var str4 = $("input:eq(3)").val();
            var str5 = $("input:eq(4)").val();
            //创建新的tr元素
            var $tr = $("<tr><td>"+str1+"</td><td>"+str2+"</td><td>"+str3+"</td>"
            +"<td>"+str4+"</td><td>"+str5+"</td><td><button class='delete'>删除</button></td></tr>");
            //将tr添加到table中
            $("table").append($tr);
        });
    });
</script>
</head>
<body>
    <div>
        图书编号:<input>
        图书名称:<input>
        图书作者:<input>
        图书价格:<input>
        图书简介:<input>
        <button id="x1">添加</button>
    </div>
    <br><hr><br>
    <table>
        <tr><th>图书编号</th><th>图书名称</th><th>图书作者</th><th>图书价格</th><th>图书简介</th><th>操作</th></tr>
    </table>
</body>

作业

使用Jquery , 完成视频播放器 !

士不可以不弘毅，任重而道远

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端 (15)Jquery 03

目录获取宽度与高度显示与隐藏函数 *Jquery 事件Jquery 文档函数 ***获取宽度与高度通过attr函数获取元素的宽度与高度时, 得到的数据是带有长度单位的字符串, 例如: “100px”Jquery提供了用于获取获取宽度与高度数值的函数 (数值的单位默认为px)获取宽度var width = $obj.width();设置宽度$obj.width(值);...
复制链接

扫一扫