前段学习——jQuery

$("#test").html()    
       //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 

       // 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 

       //虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

       //约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 

var $variable = jQuery 对象
var variable = DOM 对象

$variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

--------------------------属性
$("").attr();   // 返回被选元素的属性值 可以用来操控属性
$("").removeAttr();//从被选元素中移除属性
$("").prop(property,value);方法设置或返回被选元素的属性和值
$("").removeProp();//会移除当前jQuery对象所匹配的每一个元素上指定名称的属性
--------------------------CSS类
$("").addClass(class|fn) //添加类名
$("").removeClass([class|fn]) //删除类名
--------------------------HTML代码/文本/值
$("").html([val|fn])  //返回或设置被选元素的内容,如果该方法未设置参数，则返回被选元素的当前内容
$("").text([val|fn])  //设置或返回被选元素的文本内容
$("").val([val|fn|arr]) //设置或返回当前所匹配元素的value值
---------------------------
$("").css("color","red")//方法返回或设置匹配的元素的一个或多个样式属性。

//创建一个标签对象
    $("
")


//内部插入

    $("").append(content|fn)      ----->$("p").append("Hello");//在被选元素的结尾（仍然在内部）插入指定内容。
    $("").appendTo(content)       ----->$("p").appendTo("div");//append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。
    $("").prepend(content|fn)     ----->$("p").prepend("Hello");//在被选元素的开头插入指定内容
    $("").prependTo(content)      ----->$("p").prependTo("#foo");//与prepend()方法作用相同。差异在于语法：内容和选择器的位置，以及 prepend() 能够使用函数来插入内容。

//外部插入

    $("").after(content|fn)       ----->$("p").after("Hello");//在被选元素后插入指定的内容。
    $("").before(content|fn)      ----->$("p").before("Hello");//在被选元素之前插入指定的内容。
    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");//在被选元素之后插入 HTML 标记或已有的元素。
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");//在您指定的已有子节点之前插入新的子节点

//替换
    $("").replaceWith(content|fn) ----->$("p").replaceWith("Paragraph. ");//用指定的 HTML 内容或元素替换被选元素。

//删除

    $("").empty()  //从被选元素移除所有内容，包括所有文本和子节点。
    $("").remove([expr])//移除被选元素，包括所有文本和子节点。该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。

//复制

    $("").clone([Even[,deepEven]])//生成被选元素的副本，包含子节点、文本和属性。

CSS
        $("").css(name|pro|[,val|fn]) //返回或设置匹配的元素的一个或多个样式属性。
    位置
        $("").offset([coordinates]) //返回或设置匹配元素相对于文档的偏移（位置）
        $("").position()//返回匹配元素相对于父元素的位置（偏移）。
        $("").scrollTop([val]) //返回或设置匹配元素的滚动条的垂直位置。
        $("").scrollLeft([val])//返回或设置匹配元素的滚动条的水平位置。
    尺寸
        $("").height([val|fn])//返回或设置匹配元素的高度
        $("").width([val|fn]) //返回或设置匹配元素的宽度
        $("").innerHeight()   //返回第一个匹配元素的内部高度。
        $("").innerWidth()   //返回第一个匹配元素的内部宽度。
        $("").outerHeight([soptions])//返回第一个匹配元素的外部高度。
        $("").outerWidth([options])//返回第一个匹配元素的外部宽度。

页面载入
    ready(fn)  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
    $(document).ready(function(){}) -----------> $(function(){})

事件处理
    $("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。

    //  .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
    //  $(‘ul‘).on(‘click‘, ‘li‘, function(){console.log(‘click‘);})就是筛选出ul下的li给其绑定
    //  click事件；

    [selector]参数的好处:
        好处在于.on方法为动态添加的元素也能绑上指定事件；如：

        //$(‘ul li‘).on(‘click‘, function(){console.log(‘click‘);})的绑定方式和
        //$(‘ul li‘).bind(‘click‘, function(){console.log(‘click‘);})一样；我通过js给ul添加了一个
        //li：$(‘ul‘).append(‘
js new li
‘)；这个新加的li是不会被绑上click事件的

        //但是用$(‘ul‘).on(‘click‘, ‘li‘, function(){console.log(‘click‘);}方式绑定，然后动态添加
        //li:$(‘ul‘).append(‘
js new li
‘);这个新生成的li被绑上了click事件
    
    [data]参数的调用:
             function myHandler(event) {
                alert(event.data.foo);
                }
             $("li").on("click", {foo: "bar"}, myHandler)