jQuery第四天

最新推荐文章于 2024-06-14 10:11:23 发布

狗都不干机械

最新推荐文章于 2024-06-14 10:11:23 发布

阅读量51

点赞数

文章标签： jquery javascript css

本文链接：https://blog.csdn.net/I_love_bc/article/details/116093443

版权

jQuery第四天

一. jQuery事件注册

1.1单个事件注册

语法:

element .事件( function() {})
$ ("div") .click (function() {事件处理程序 })

其他事件和原生基本一致。
比如mouseover、mouseout、 blur、 focus、 change、 keydown、 keyup、 resize、 scroll等

二. jQuery事件处理

2.1事件处理on()绑定事件

on()方法在匹配元素上绑定一个或多个事件的事件处理函数
语法:

element.on(events,[selector],fn)

events:一个或多个用空格分隔的事件类型,如"click’或"keydown"
selector:元素的子元素选择器。
fn:回调函数即绑定在元素身上的侦听函数。

2.2事件处理off()解绑事件

off()方法可以移除通过on()方法添加的事件处理程序。

$("p") .off() //解绑p元素所有事件处理程序
$("p") .off( "click") //解绑p元素 上面的点击事件后面的foo是侦听函数名
$ ("ul") .off ("click", "li") ;//解绑事件委托

如果有的事件只想触发一次，可以使用one()来绑定事件。

2.3自动触发事件trigger()

有些事件希望自动触发比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。

element.click() // 第一种简写形式
element.trigger ("type") //第二种自动触发模式
element.triggerHandler(type) // 第三种自动触发模式 不会触发元素的默认行为

三. jQuery事件对象

事件被触发,就会有事件对象的产生。

element. on (events, [selector] , function (event) {})

阻止默认行为: event.preventDefault()或者return false
阻止冒泡: event.stopPropagation(）

四. jQuery对象拷贝

如果想要把某个对象拷贝(合并)给另外一个对象使用,此时可以使用$ . extend()方法
语法:

$. extend ([deep], target, object1, [objectN])

deep:如果设为true为深拷贝，默认为false浅拷贝
target:要拷贝的目标对象
object1:待拷贝到第一个对象的对象。
objectN:待拷贝到第N个对象的对象。
浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象。
深拷贝,前面加true ,完全克隆(拷贝的对象,而不是地址) ,修改目标对象不会影响被拷贝对象。

五. jQuery插件

jQuery功能比较有限,想要更复杂的特效效果,可以借助于jQuery插件完成。
注意:这些插件也是依赖于jQuery来完成的,所以必须要先引入jQuery文件,因此也称为jQuery插件。

jQuery插件常用的网站:

jQuery插件库http://www.jq22.com/
jQuery之家http://www.htmleaf.com/

jQuery插件使用步骤:
1.引入相关文件。( jQuery文件和插件文件)
2.复制相关html、css、 js (调用插件)。

六.案例

1.评论发布与删除

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            $(".btn").on("click", function () {
                var li = $("<li></li>");
                li.html($(".txt").val() + "<a herf='javascript:;'>删除</a>");
                $("ul").prepend(li);
                li.slideDown();
                $(".txt").val("");
            })
            $("ul").on("click", "a", function () {
                $(this).parent().slideUp(function () {
                    $(this).remove()
                });
            })
        })
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            text-decoration: none;
            width: 450px;
            padding-left: 80px;
        }

        .box {
            border: 1px solid black;
            margin: 100px auto;
            width: 600px;
            padding: 10px;
        }

        textarea {
            width: 450px;
            height: 160px;
            outline: none;
            resize: none;
        }

        ul li {
            line-height: 25px;
            border-bottom: 1px dashed #cccccc;
            list-style: none;
            display: none;
        }

        ul li a {
            float: right;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box" id="weibo">
        <span>微博发布</span>
        <textarea name="" class="txt" cols="30" rows="10"></textarea>
        <button class="btn">发布</button>
        <ul>
        </ul>
    </div>
</body>
</html>

狗都不干机械

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery第四天

jQuery第四天一. jQuery事件注册1.1单个事件注册语法:element .事件( function() {})$ ("div") .click (function() {事件处理程序 })其他事件和原生基本一致。比如mouseover、mouseout、 blur、 focus、 change、 keydown、 keyup、 resize、 scroll等二. jQuery事件处理2.1事件处理on()绑定事件on()方法在匹配元素上绑定一个或多个事件的事件处理函数语
复制链接

扫一扫