jQuery——创建元素的案例 | 事件参数对象下的属性

事件参数对象,jQuery中事件参数对象同样存在
e.button: 鼠标按键的键值
e.altKey: 用户是否按下了alt键——布尔类型
e.shiftKey: 用户是否按下了shift键——布尔类型
e.ctrlKey: 用户是否按下了ctrl键——布尔类型
e.keyCode: 键盘的按下键的值

jQuery中判断元素是否存在,是通过包装集的length属性来测试的,通过这个对象.length属性不等于0的方式来判断

    <script src="jquery-1.12.1.js"></script>
    <script>
        $(function(){
            if($("btn1").length!=0){
                console.log("存在");
            }else{
                console.log("不存在");
            }
        });
    </script>
......
<input type="button" value="按钮" id="mayday" />
<p>1</p><p>2</p><p>3</p>

只创建一个元素

    <style>
        div{
            width: 200px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script src="jquery-1.12.1.js"></script>
    <script>
        $(function(){
            $("btn").click(function(){
                if($("#p1")).length==0)
            {
                //点击按钮,只创建一个p标签,在div中
                $("<p id='p1'>这是一个p</p>").appendTo($("#dv"));
            }
            });
        });
    </script>
......
	<input type="button" value="创建一个p" id="btn" />
	<div id="dv"></div>

e.target属性得到的是触发该事件的目标对象,此时是DOM对象

    <style>
        div{
            width: 300px;
            height: 200px;
            background-color: yellow;
        }
        p{
            width: 100px;
            height: 30px;
            background-color: pink;
        }
    </style>
    <script src="jquery-1.12.1.js"></script>
    <script>
        $(function(){
            $("#dv").click(function(e){
                console.log(e.target.attr("id"));
            });
            $("p").click(function(e){
                console.log("p被点击了");
                //return false;
            });
        });
    </script>
......
<input type="button" value="显示效果" id="btn"/>
<div id="dv">
    <p id="p1">这是个p</p>
</div>

e.currentTarget得到的是触发该事件的当前的对象

    <script>
        $(function(){
            $("#dv").click(function(e){
                console.log("div被点了");
                console.log($(e.currentTarget).attr("id"));
            });
            $("p").click(function(e){
                console.log("p被点了");
            });
        });
    </script>

e.delegateTarget得到的是代理的这个对象

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值