jQuery选择器和事件

原创 2015年11月18日 16:44:14

选择器:

根据元素类型选择

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="app.js"></script>
    <!--上下不能写反 依赖关系-->
</head>
<body>
    <p class="pclass"<span style="font-family: Arial, Helvetica, sans-serif;">>p1</p></span>
    <p id="pid">p2</p>
    <button>click me</button>
</body>
</html>

$(document).ready(function(){
    $("button").click(function(){
        $("p").text("p元素被修改了");
    });
});

执行结果 两个p元素都变了

根据元素id选择器:

$(document).ready(function(){
    $("button").click(function(){
        $("#pid").text("p元素被修改了");
    });
});

根据元素class选择:

$(document).ready(function(){
    $("button").click(function(){
        $(".pclass").text("p元素被修改了");
    });
});

事件:

单击、双击、移动消失:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="app.js"></script>
    <!--上下不能写反 依赖关系-->
</head>
<body>
    <button>click me</button>
</body>
</html>
$(document).ready(function(){
   $("button").click(function(){
        $(this).hide();
   }) ;
    $("button").dblclick(function(){
        $(this).hide();
    }) ;
    /*$("button").mouseenter(function(){
        $(this).hide();
    });*/
    $("button").mouseleave(function(){
        $(this).hide();
    });
});

事件绑定、解除绑定:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="app.js"></script>
    <!--上下不能写反 依赖关系-->
</head>
<body>
    <button id="click">click me</button>
</body>
</html>

$(document).ready(function(){
    $("#click").bind("click",clickHandler1);
    $("#click").bind("click",clickHandler2);
    $("#click").unbind("click");//所有的都解除绑定
    $("#click").unbind("click",clickHandler2);//只解除绑定2
});
function clickHandler1(e){
    console.log("clickhandler1");
}
function clickHandler2(e){
    console.log("clickhandler2");
}

由于bind unbind实际上是调用了底层的on off所以代码还可以这么写:
$(document).ready(function(){
    $("#click").on("click",clickHandler1);
    $("#click").on("click",clickHandler2);
   // $("#click").off("click");//所有的都解除绑定
    $("#click").off("click",clickHandler2);//只解除绑定2
});
function clickHandler1(e){
    console.log("clickhandler1");
}
function clickHandler2(e){
    console.log("clickhandler2");
}$(document).ready(function(){
    $("#click").on("click",clickHandler1);
    $("#click").on("click",clickHandler2);
   // $("#click").off("click");//所有的都解除绑定
    $("#click").off("click",clickHandler2);//只解除绑定2
});
function clickHandler1(e){
    console.log("clickhandler1");
}
function clickHandler2(e){
    console.log("clickhandler2");
}

事件之事件目标与冒泡

目标:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="app.js"></script>
    <!--上下不能写反 依赖关系-->
</head>
<body>
    <div style="width:300px;height:300px;background-color: chartreuse">
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
            <li>e</li>
        </ul>
    </div>
</body>
</html>
$(document).ready(function(){
    $("body").bind("click",bodyHander);
    $("div").bind("click",divHander);
});
function bodyHander(event){
    console.log(event);
}
function divHander(event){
    console.log(event);
}
效果:


事件冒泡:
阻止事件冒泡:

event.stopImmediatePropagation()阻止所有事件冒泡

Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.

event.stopPropagation()阻止父级事件冒泡

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

$(document).ready(function(){
    $("body").bind("click",bodyHander);
    $("div").bind("click",divHander1);
    $("div").bind("click",divHander2);
});
function bodyHander(event){
    conlog(event);
}
function divHander1(event){
    conlog(event);
  //  event.stopPropagation();
    event.stopImmediatePropagation();
}
function divHander2(event){
    conlog(event);
}
function conlog(event){
    console.log(event);
}//防止console编译出错

事件之自定义事件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="app.js"></script>
    <!--上下不能写反 依赖关系-->
</head>
<body>
    <button id="Click">click me</button>
</body>
</html>
$(document).ready(function(){
    $("#Click").click(function(){
        var e=jQuery.Event("myEvent");
        $("#Click").trigger(e);
    });
    $("#Click").bind("myEvent",function(event){
        console.log(event);
    });
});

可以精简为:
var ClickMeBtn;
$(document).ready(function(){
    ClickMeBtn=$("#Click");
    ClickMeBtn.click(function(){
        var e=jQuery.Event("myEvent");
        $("#Click").trigger(e);
    });
    ClickMeBtn.bind("myEvent",function(event){
        console.log(event);
    });
});

也说明了var是多么的强大==










版权声明:⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄hiahiahia 欢迎斧正 举报

相关文章推荐

Jquery学习---选择器与事件

总结一下jquery的相关技术。 jquery是对js的封装,也就是一个js的类库。它能够很好的操作dom元素,实现动画效果,实现ajax交互,很受开发者欢迎。我首先从选择器和事件说起。 一:...

jquery 笔记集合1 选择器 CSS样式 函数 事件 节点

//    1.$(' 标签名 / id属性名 / class属性名 / * ')          $('p').css('color','red&#...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

JAVA-26.1-jQuery基础、派发事件、效果、选择器

一:jQuery的引入jQuery本质上就是一个是js类库,对常用的方法和对象进行封装,方便我们使用。   1.我们之前DOM编程:var obj = Document.getElementById...

01. JQuery 选择器与事件

jQuery 的下载安装 JQuery库下载:https://jquery.com/download/ JQuery导入页面: 1head>script src="jquery-1.10...

JQuery 选择器和事件

PS、//不是所有浏览器都支持 console.log 解决办法定义一个输出函数 调用即可 若出错则注释掉function conlog(event){ console.log(even...

JQuery常用选择器 事件 方法 样式属性操作

jquery选择器  jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功(大于0选中,等于0未选中)。$('#myId') //选择id为m...

jQuery学习笔记(二)选择器 事件

选择器: $(document).ready(function() { $("button").click(function() { $("p").css("background-c...

jQuery选择器、操作DOM、事件、动画

2017年8月3日学习总结 一个小案例 模拟网页上的广告,点击x关掉或3秒后自动关掉。 homework1...

jQuery基础学习(1)(标签选择器,事件)

jQuery 是目前最受欢迎的 JavaScript 框架。 它使用 CSS 选择器来访问和操作网页上的 HTML 元素(DOM 对象)。 jQuery 同时提供 companion UI(用户界面)...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)