jQuery学习:html与text、width与height、scrollTop与scrollLeft、offset与position、jquery事件机制、on注册事件的两种方式

val方法

val方法用于获取表单元素的值，例如input、textare的值

html与text方法

html: innerHTML text: innerText

• 获取

        console.log($("div").html());
        console.log($("div").text());

• 设置

        $("div").html("
这是测试
");
        $("div").text("这是text的值啊");
        $("div").text("
这是测试
");

• 区别
  html方法会识别html标签
  text方法会把内容直接当成字符串，不会识别html标签

width方法与height方法

 $(function () {
        //    获取div的宽度
        console.log($("div").css("width"));//200px
        //    设置
        $("div").css("width", "200px");
        console.log($("div").css("width"));//200px

        console.log("width:" + $("div").width());//200
        console.log("innerWidth:padding  + width========>" + $("div").innerWidth());//220   padding  + width
        console.log("outerWidth:padding + width + border====>" + $("div").outerWidth());//240   padding + width + border
        //跟margin无关

        //获取屏幕的可视宽度
        console.log($(window).width());
        //获取屏幕的可视高度
        console.log($(window).height());

    });

scrollTop与scrollLeft

offset方法与position方法

• 获取元素相对于document的位置
  console.dir($(".son").offset());//返回值为对象：{left:100, top:100}

• 获取元素相对于有定位的父元素的位置
  console.dir($(".son").position());

案例：小火箭返回顶部

固定导航栏

jquery事件机制

简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)

• 简单事件
  给自己注册的事件 缺点：一次只能注册一个事件 不支持动态事件绑定

        $("div").click(function () {
            alert("简单事件");
        });

• delegate ：代理，委托
  要给div注册一个委托事件，但是最终不是由他执行，而是p执行
  动态创建的也有事件，缺点：只能注册委托事件

        //参数1：selector，事件最终由谁来执行
        //参数2：事件的类型
        //参数3：函数，要做什么
        $("box").delegate("p", "click", function () {
            alert("代理");
            console.log(this);
        })

on注册事件的两种方式

jQuery1.7之后，用on统一了所有事件的处理方法

• on注册简单事件
  表示给(selector)绑定事件，并且由自己触发，不支持动态绑定
  $(selector).on("click",function(){});
• on注册委托事件
  表示给$(selector)绑定代理事件，当必须是它的内部因素span才能触发这个事件，支持动态绑定
  $(selector).on("click","span",function () {});
• on 注册事件的语法：
  参数1：events 绑定事件的名称，可以是由空格分割的多个事件（标准事件或自定义事件）
  参数2：selector 执行事件的后代元素（可选），如果没有后代元素，那么事件将由自己执行
  参数3：handler，事件处理函数
  $(selector).on(events[,selector][,data],handler);