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"){

                 }
             })
         })
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值