JQuery03代码笔记

一、元素的创建

//按钮单击往DIV标记添加一个Span标记
$("#btn").click(function () {
    $("<span>你好</span>").appendTo("#div1");
});

//按钮单击往DIV标记添加一个Span标记 方案二
$("#btn").click(function () {
   $("#div1").html($("#div1").html() + "<span>你好</span>");
});

二、元素的添加

//把创建的span标签这个子元素直接插入到div中第一个子元素的前面
$("#dv").prepend($("<span>this is span</span>"));

//把元素添加到div的前面的位置,是div的上一个兄弟元素了
$("#dv").before($("<span>this is span2</span>"));

//在DV的最后一个子元素后面添加一个元素
var table=$("<table style='cursor: pointer' border='1' cellspacing='0' cellpadding='0'></table>");
$("#dv").append(table);

三、移除的元素

//移除#DV下的所有元素
$("#dv").empty();

//移除#DV整个元素,包括#dv
$("#dv").remove();

四、设置元素的宽和高

$("#dv").width(500);
$("#dv").height(500);

五、获取元素的left和Top

$("#dv").offset().top
$("#dv").offset().left

六、获取scroll出去的值

$("#dv").scrollLeft();
$("#dv").scrollTop();

$("#dv").scroll(function () {
    console.log($("#dv").scrollLeft());
    console.log($("#dv").scrollTop());
})

七、元素事件绑定

//对象.事件名字(事件处理函数);---
$("#btn").click(function(){});

//对象.bind("事件名字",事件处理函数);---
$("#btn").bind("click",function(){});

//父级对象.delegate("子级元素","事件名字",事件处理函数);---->
$("#dv").delegate("p","click",function(){});

八、获取文本域中的文本

//获取文本域中的value值
$("#tt2").val();
$("#tt2").text();

九、元素的选中

//元素的选中不建议使用arrt属性，建议使用prop。prop也是获取元素的属性和值的方法。
$("#ck7").prop("checked", true);