JQuery

认识 jQuery

1、jQuery:

jQuery 库可以通过一行简单的标记被添加到网页中。

2、什么是 jQuery:

jQuery 是一个 JavaScript 函数库。

3、jQuery 库包含的功能:

HTML 元素选取

HTML 元素操作

CSS操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

Utilities

jQuery 语法

1、jQuery 语法:

基础语法: $(selector).action()

美元符号定义 jQuery

选择符 (selector) “查询”和“查找” HTML 元素

jQuery 的 action() 执行对元素的操作

例如:

——$(this).hide() - 隐藏当前元素

2、文档加载完成后执行:

$(document).ready(function(){});

JQuery 事件

常用事件: click()，dblclick()，mouseenter()，mouseleave()

绑定事件和解除绑定:

jquery1.4 及之前的版本，由.click() 或 bind()方法绑定的事件，不能适用脚本创建的新元素：即是说页面加载完成后，再动态创建的DOM元素并不能响应之前绑定的事件！

.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制（在Jquery1.7中添加，相应off()也添加）

$(document).ready(function(){
    $("#Btn").on("click",clickFun);//绑定事件
    $("#Btn").off("click",clickFun);//解除事件
});
function clickFun(){
    console.log("clickButton");
}

阻止冒泡:

 <script>
    $(document).ready(function () {
        $("div").on("click",testdiv);
        $("button").on("click",testbtn1);
        $("button").on("click",testbtn2);
    });
    function testdiv(e) {
        console.log(e);
    }
    function testbtn1(e) {
        console.log(e);
    }
    function testbtn2(e) {
        console.log(e);
        e.stopPropagation();//阻止父级冒泡
        //e.stopImmediatePropagation();//阻止全部冒泡
    }
</script>
<div style="width:50px;height:50px;background-color:blue;">
    <button>按钮</button>
</div>

自定义事件

<script>
    $(document).ready(function () {
        var clickBtn = $("#clickBtn");
        clickBtn.click(function () {
            var e = jQuery.Event("myEvent");
            clickBtn.trigger(e);
        });
        clickBtn.bind("myEvent",function (e) {
            console.log(e);
        });
    });
</script>
<button id="clickBtn">按钮</button>