Menu
Woocommerce Menu

处理页面的事件详解银河国际网址手机版,冲突的方法

0 Comment

本文实例叙述了jQuery自定义增加”$”与缓慢解决”$”争辨的法子。共享给大家供大家参谋。具体剖析如下:

本文实例陈说了jQuery使用之标识成分属性用法。分享给我们供我们参照他事他说加以考察。具体深入分析如下:

在事先dom操作中涉及了javascript对事件管理的牵线。由于区别浏览器处总管件各不相平等,那给开垦者带来了不须求的麻烦,jQuery的方便人民群众的减轻了那个地方的辛勤。

1.自定义加多$

此间介绍jQuery的运用主要饱含jQuery怎么样控制页面,满含成分的质量、css样式风格、DOM模型、表单成分和事件处理等。

1.绑定事件监听

虽说jQuery很强劲,但不管如何,jQuery都不容许知足全部客户的急需,并且有一对急需相当小众,也不合乎放置任何jQuery框架中,便是因为那或多或少,jQuery提供了客户自定义加多“$”的方法。

标志元素的属性

(//www.jb51.net/article/60096.htm)对事件的监听做了详细的介绍,看到了iE和DOM标准浏览器对待事件监听的分别,并对两个监听事件实践顺序和措施也区别。

代码如下:

html中每贰个标记都具有部分个性,他们这几个标识在页面中显现各样地方,举例上边的<a>标志

在jQuery中,通过bind()对事件绑定,约等于IE浏览器的attach伊芙nt()和标准DOM的addEventListener()。如下例子:

复制代码 代码如下:

复制代码 代码如下:

复制代码 代码如下:

$.fn.disable = function() {
 return this.each(function() {
     if (typeof this.disabled != “undefined”) this.disable = true;
 });
}

<a herf=”” title=”isaac” target=”_blank”
id=”linkisaac”>

<script type=”text/javascript”>
            $(function() {
                $(“img”)
                    .bind(“click”, function() {
                       
$(“#show”).append(“<div>点击事件1</div>”);
                    })
                    .bind(“click”, function() {
                       
$(“#show”).append(“<div>点击事件2</div>”);
                    })
                    .bind(“click”, function() {
                       
$(“#show”).append(“<div>点击事件3</div>”);
                    });
            });
        </script>

以上代码首先设置”$.fn.disable”,表明“$”增加二个办法disable(),当中“$.fn”是扩张jQuery所必需的。

该标识<a>表示标志的名目,为叁个超链接,其他还也许有href titile target
id等质量表示那些超链接在页面中的各类情形。

        <img src=”11.jpg”>
        <div id=”show”></div>

下一场使用佚名函数定义那几个法子,即用each()将调运这些法子的各样成分disabled属性均安装为true.(借使该属性存在)

正文从jQuery角度出发,进一步讲授页面属性决定方法。

上述代码对img绑定了多个click监听事件.

例:扩展jquery的功能

1.each()遍历成分

bind()通用语法为

复制代码 代码如下:

each(callback)方法主要用来对选取器中的元素实行遍历,它接受一个函数作为参数,这几个函数接受三个参数,指代成分的序号。对于标识的个性来说,能够采用each()方法合作this关键字来获得大概安装采用器中的每一个成分对应的属性值。

bind(eventType,[data],Listener)
个中,eventType为事件的体系,能够是blur/focus/load/resize/scroll/unload/click/dblclick/onmousedown/mouseup/onmouseover/onmouseover/onmouseout/mouseenter/onmouseleave/change/select/submit/onkeydown/keypress/keyup/error

<script type=”text/javascript”>
    $.fn.disable = function() {
 //扩大jQuery,表单成分统一disable
 return this.each(function() {
     if (typeof this.disabled != “undefined”) this.disabled = true;
 });
    }
    $.fn.enable = function() {
 //增添jQuery,表单元素统一enable
 return this.each(function() {
     if (typeof this.disabled != “undefined”) this.disabled = false;
 });
    }

选取each()方法遍历全体因素。

data为可选参数,用来传递一些新鲜的多寡供监听函数使用。而listener为事件监听函数,上边的例证中应用佚名函数

    function SwapInput(oName, oButton) {
 if (oButton.value == “Disable”) {
     //借使按键的值为Disable,则调用disable()方法
     $(“input[name=” + oName + “]”).disable();
     oButton.value = “Enable”;
 } else {
     //假设开关的值为Eable,则调用enable()方法
     $(“input[name=” + oName + “]”).enable();
     oButton.value = “Disable”; //然后设置按键的值为Disable
 }
    }
</script>
<form method=”post” name=”myForm1″ action=”addInfo.aspx”>
    <p>
 <label for=”name”>请输入您的真名:</label>
 <br>
 <input type=”text” name=”name” id=”name” class=”txt”>
    </p>
    <p>
 <label for=”passwd”>请输入您的密码:</label>
 <br>
 <input type=”password” name=”passwd” id=”passwd” class=”txt”>
    </p>
    <p>
 <label for=”color”>请选用你最爱怜的颜料:</label>
 <br>
 <select name=”color” id=”color”>
     <option value=”red”>红</option>
     <option value=”green”>绿</option>
     <option value=”blue”>蓝</option>
     <option value=”yellow”>黄</option>
     <option value=”cyan”>青</option>
     <option value=”purple”>紫</option>
 </select>
    </p>
    <p>请接纳你的性别:
 <br>
 <input type=”radio” name=”sex” id=”male” value=”male”>
 <label for=”male”>男</label>
 <br>
 <input type=”radio” name=”sex” id=”female” value=”female”>
 <label for=”female”>女</label>
    </p>
    <p>你兴奋做些什么:
 <input type=”button” name=”btnSwap” id=”btnSwap” value=”Disable”
class=”btn” onclick=”SwapInput(‘hobby’,this)”>
 <br>
 <input type=”checkbox” name=”hobby” id=”book” value=”book”>
 <label for=”book”>看书</label>
 <input type=”checkbox” name=”hobby” id=”net” value=”net”>
 <label for=”net”>上网</label>
 <input type=”checkbox” name=”hobby” id=”sleep” value=”sleep”>
 <label for=”sleep”>睡觉</label>
    </p>
    <p>
 <label for=”comments”>小编要留言:</label>
 <br>
 <textarea name=”comments” id=”comments” cols=”30″
rows=”4″></textarea>
    </p>
    <p>
 <input type=”submit” name=”btnSubmit” id=”btnSubmit” value=”Submit”
class=”btn”>
 <input type=”reset” name=”btnReset” id=”btnReset” value=”Reset”
class=”btn”>
    </p>
</form>

复制代码 代码如下:

对于多个事件类型,要是希望采纳同一个监听函数,能够同事加多在eventType中,事件时期利用空格分离。

措施SwapInput(nName,oButton)依据按键的值进行剖断,假诺是不可用”disable”,则调拨运输disable()将成分设置为不可用,相同的时候修改开关的值为”enable”,反之则调拨运输enable()方法。

<script type=”text/javascript”>
    $(function() {
$(“p”).each(function(index){
    this.title = “这是第”+ (index+1) + “个P,id是:”+ this.id;
});
    });
</script>
<div>
    <p id=”001″>第一段</p>
    <p id=”002″>第二段</p>
    <p id=”003″>第二段</p>
    <p id=”004″>第二段</p>
    <p id=”005″>第二段</p>
    <p id=”006″>第二段</p>
    <p id=”007″>第二段</p>
</div>

复制代码 代码如下:

2.解决”$”的冲突

如上代码中有7个P成分,首先使用$(“p”)获取页面中有着p成分集结,然后使用each()方法遍历全体的图片。通过this关键字对图片展开拜会,获取图片的id,并设置图片的id属性。其中each()方法的函数index为因素所处的序号。

$(function() {
                $(“p”).bind(“mouseenter mouseleave”, function() {
                    $(this).toggleClass(“over”)
                })
            });

与前边小说的事态周边,尽管JQuery特别强劲,不过一时开荒者同时选择五个框架,那时必要小心,因为任何框架也大概选择了”$”,进而产生争辩,jQ同样提供了noConflict()方法来消除”$”争执的难题。

2.到手属性的值。attr(name)方法

除此以外一些出奇的事件类型能够直接使用事件名称作为绑定函数,接受参数为监听函数。举例从前频频使用的

复制代码 代码如下:

除却在遍历整个选用器中的成分。相当多时候须要获得有个别对象的风味的值,在jQuery中能够通过attr(name)方法很自在的兑现那或多或少。该办法获得成分集中第贰个的属性值。若无匹配则重回unfefined.

复制代码 代码如下:

jQuery.noconflict();

复制代码 代码如下:

$(“p”).click(function(){
                //加多click事件监听函数
            })

上述代码便可使”$”根据别的javascript框架的秘技运算,那是jQuery中便不可能再利用”$”,而必须使用“jQuery”,比如$(“h2
a”)必得写成jQuery(“h2 a”)

script type=”text/javascript”>
    $(function() {
 var sTitle = $(“p”).attr(“title”);//获取首个p成分的title属性值
 $(“#display”).text(sTitle);
    });
</script>
<div>
    <p id=”001″ title=”isaac,hobby”>第一段</p>
    <p id=”002″ title=”isaac,hobby”>第二段</p>
    <p id=”003″>第二段</p>
    <p id=”004″>第二段</p>
    <p id=”005″>第二段</p>
    <p id=”006″>第二段</p>
    <p id=”007″>第二段</p>
    <span id=”display”></span>
</div>

其中,通用语法为

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图