jQury学习(1)

一.https://jquery.com/下载jQuery:

1.Production jQuery版——优化压缩后的版本（删除空格等，文件较小，但不利于阅读），建议程序发布时使用

Develepment jQuery版——未压缩版本（格式标准，易于阅读），一般在网站建设时使用，便于调试

jQuery map文件——map文件能够被用来在某些现在浏览器上调试压缩后的jQuery文件，map文件可以增强调试的体验，对于使用jQuery的用户来说，一般不需要下载改文

2.将下载好的js文件复制粘贴到编译器的js文件夹中,直接使用<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>调用,或者:

百度压缩版引用地址:
<script src=”http://libs.baidu.com/jquery/3.3.1/jquery.min.js”></script>
微软压缩版引用地址:
<script src=”http://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js”></script>
官网jquery压缩版引用地址:
<script src=”http://code.jquery.com/jquery-3.3.1.min.js”></script>

二.代码编写

<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
 <script type="text/javascript" src="bind.js" ></script>

注:这里导入的顺序不对会导致控制台报错:Uncaught ReferenceError: $ is not defined.

1.常用选择器:html:

<p>p1</p>
<p class="p">p2</p>
<button>点击我</button>

jQuery:

$(document).ready(function(){
    $("button").click(function(){
       $(".p").text("p元素被修改了");//"p"可用id.类选择器等,和css类似
    });    
});

2.事件方法:

<button>点击我</button>

$(document).ready(function(){
    $("button").click(function(){
        $(this).hide();
    });//类似的,双击鼠标(dbclick),鼠标放上去(mouseenter),鼠标经过(mouseover)等等
});

3.事件冒泡

这里我们在300*300的盒子里面放了一个无序列表(),当我们点击盒子时,控制台显示了两个事件,一个是盒子(div:currenttarget和target均指向子集)的一个是body(currenttarget指向自己,target是指向div的)的,然后我们阻止事件的冒泡: 

event.stopPropagation();//阻止父节点的冒泡(显示两个div)
event.stopImmediatePropagation();//阻止所有冒泡(显示一个div,也就是自己的事件会显示)

<div style="width: 300px;height: 300px;background-color: gray;">
            <ul>
                <ol>A</ol>
                <ol>B</ol>
                <ol>C</ol>
                <ol>D</ol>
            </ul>
        </div>

$(document).ready(function(){
    $("body").bind("click",bodyHandler);
    $("div").bind('click',divHandler1);
    $("div").bind('click',divHandler2);
});
//currenttarget:指向父集,target:指向子集
function bodyHandler(event){
    console.log(event);
}
function divHandler1(event){
    console.log(event);
    /*event.stopPropagation();//阻止父节点的冒泡*/
    event.stopImmediatePropagation();//阻止所有冒泡
}
function divHandler2(event){
    console.log(event);
}

4.绑定事件(绑定(bind/on,解除绑定unbind/off,官网推荐后者))

<button id="clickMeBtn">点击我</button>

$(document).ready(function(){
    $("#clickMeBtn").click(function(){
        alert("wo ");
    });
    $("#clickMeBtn").on("click",clickHandler1);
    $("#clickMeBtn").bind("click",clickHandler2);
    $("#clickMeBtn").unbind("click",clickHandler1);//("click",跟参数就解除某一事件,不跟就解除所有有关事件),官方现在推荐使用on,off替换bind和unbind
    
});
function clickHandler1(){
    console.log("clickHandler1");
}
function clickHandler2(){
    console.log("clickHandler2");
}