HTML--JQuery入门

例子

$(function () {
    var $btn=$("#btn");
    $btn.click(function () {
        alert("asd")
    })
})

window.onload=function () {
    var  a=document.getElementById("btn");
    a.onclick=function () {
        alert("asd")
    }
}

---

二：$是JQuery的核心函数，能完成很多功能，$()就是调用这个函数

1，传入参数为函数时，表示页面加载完成后之后

        $(function () {

        })


2，传入参数为HTML字符串时，根据这个字符串创建元素节点对象

        $(function () {
            $("<button></button>").appendTo("body");
        })


3，传入参数为选择器字符串时，
    $("#id属性值")，id选择器，根据id查询标签对象
    $("标签名")，标签名选择器，根据标签名查询标签对象
    $(".class属性值")，类型选择器，根据class属性查询标签对象

        $(function () {
            var a=$("#btn");
            a.click(function () {
                alert("asd");
            })
        })

4，传入参数为DOM对象时，会把这个dom对象转化为JQuery对象

        $(function () {
            var one =document.getElementById("btn");
            alert( $(one));
        })

---

三：JQuery对象和dom对象区分

DOM对象：
1，通过getElementById查询出来的是DOM对象
2，通过getElementByName查询出来的是DOM对象
.......

JQuery对象：
1，通过JQuery提供的API创建的对象，是JQuery对象
2，通过JQuery包装的DOM对象，是JQuery对象
3，通过JQuery提供的API查询的对象，是JQuery对象

JQuery对象的本质：JQuery对象是DOM对象的数组+JQuery提供的一系列功能函数

---

四：JQuery对象和DOM对象的互换

DOM对象转JQuery对象
    1，先有DOM对象
    2，$(DOM对象)

JQuery对象转DOM对象
    1，先有JQuery对象
    2，JQuery对象[下标]取出相应的DOM对象


        $(function () {
            var one =document.getElementById("btn");
            var two=$(one);
            alert(two);
            var three=two[0];
            alert(three);
        })

---

五，层级选择器
    后代选择器：给定祖先元素下匹配所有的后代元素
        例：
        body元素里面的input元素
        $("body input")

子元素选择器：给定父元素下匹配所有子元素
    例：
    body元素里面的input元素
    $("body>input")

相邻元素选择器：匹配所有紧接在prev元素后的next元素
    例：
    匹配input元素后面的button元素
    $("input+button")

之后的兄弟元素选择器：匹配prev元素之后的所有siblings元素
    例：找到和input同辈的button属性
    $("input~button")

---

六：属性操作
    html()：可以设置和获取起始标签和结束标签中的内容==dom属性innerHTML
    text()：可以设置和获取起始标签和结束标签中的文本==dom属性innerText
    val()：可以设置和获取表单项的value属性值==dom属性value

    $(function () {
        var one=$("#btn");
        one.html("asdasd");
        alert(one.html());
    })

attr()：可以设置和获取属性的值。不推荐操作checked，readOnly，selected，disabled.....
prop()：可以设置和获取属性的值。只推荐操作checked，readOnly，selected，disabled.....

    $(function () {
        var one=$("#btn");
        alert(one.attr("value"));//获取
        one.attr("value","btn");//设置
        alert(one.attr("value"));
    })

---

七，事件

 $(function () {})和window.onload=function(){}的区别：
    分别在哪时候触发：
        1，JQuery的页面加载完成之后是浏览器内核解析完页面的标签创建好DOM对象之后就会马上执行
        2，原生js的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成

    执行次数：
        1，原生js的页面加载完成之后，只执行最后一次的赋值函数
        2，JQuery的页面加载完成之后，按顺序把全部注册的function函数执行


    常用事件处理方法：
        click()：可以绑定单击事件，以及触发单击事件
        mouseover()：鼠标移入事件
        mouseout()：鼠标移出事件
        bind()：可以给元素一次性绑定一个或者多个事件

            $(function () {
                $("#btn").bind("click mouseover mouseout",function () {
                    console.log("asd");
                })
            })

        unbind()：跟bind()的操作相反，解除事件的绑定
            $("#btn").unbind("click");//注意，如果不传入参数，则全部解除全部事件

        one()：使用方法跟bind()一样。但是one绑定的事件只会触发一次
        live()：用来绑定事件，可以用来绑定选择器匹配的所有元素事件。哪怕这个元素是后面动态创建出来也有效


 事件的冒泡：
    事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素里去响应
        解决方法：子元素方法  return false


 获得事件的对象：
 
         $(function () {
             $("#btn").bind("click mouseover mouseout",function (event) {
                 if(event.type=="click"){

                 }else if(event.type=="mouseover"){

                 }else if(event.type=="mouseout"){

                 }
             })
         })