jquery day3

1、元素创建

(1)$("#btn").click(function(){

$("").appendTo($("#dv"));

});

(2)$("#btn").click(function(){

$("#dv").html("");

});

2、元素添加方法

$(function(){

$("#btn").click(function(){

$("#dv").prepend($("把创建span标签插入到div第一个子元素前面"));

$("#dv").after($("把元素添加到div后面位置,div下一个兄弟元素"));

$("#dv").before($("把元素添加到div前面位置,div上一个兄弟元素"));

});

});

3、移除元素

$(function(){

$("#btn").click(function(){

$("#dv")html($("");  //从父级元素中移除所有子元素

$("#dv").empty(); //清空父级元素中子元素

$("#dv").remove(); //删除所有

});

});

4、动态创建表格

var arr=[

{"name":"B站","href":"http://www.bilibili.com"},

{"name":"传智播客","href":"http://www.itcast.com"}

];

$(function(){

$("#btn1").click(function(){ //点击按钮创建表格

var table=$("

");

$("#dv").append(table);

//循环遍历数组,创建行

for(var i=0;i

var dt=arr[i]; //每个数组元素,都是对象

var tr=$("");

table.append(tr);

var td1=$(""+dt.name+""); //创建td,并加入tr中

tr.append(td1);

var td2=$(""+dt.name+""); 

tr.append(td2);

tr.mouseenter(function(){

$(this).css("backgroundColor","green");

}).mouseleave(function(){

$(this).css("backgroundColor","");

});

}

});

$("#btn2").click(function(){ //点击按钮移除表格

$(this).empty();

});

$("#btn3").click(function(){ //点击按钮在table中添加一行

var tr=$("腾讯");

$("#dv").children("table").append(tr);

});

});

5、权限选择

6、自定义属性

.attr(参数1,参数2);  //设置某个属性值

.attr(参数1);  //获取某个属性值

参数1:属性名字

参数2:属性值

7、元素选中

.prop(属性,值);---值一般是布尔类型,一般是设置选中

.prop(属性);---获取这个元素是否选中

点击按钮切换复选框选中

$(function(){

$("#btn").click(function(){

if($("#ck").prop("checked")){

$("#ck").prop("checked",false);

}else{

$("#ck").prop("checked",true);

}

});

});

8、元素宽和高设置

.width()可以获取也可以设置元素宽

.height()可以获取也可以设置元素高

var w/h=$("#dv").width/height();

$("#dv").css("width/height",w/h*2);

9、元素left和top设置

获取

$("#dv").css("left",$("#dv").offset().left*2);

$("#dv").css("top",$("#dv").offset().top*2);

设置

$("#dv").offset({"left":500,"top":250});

10、元素卷曲出去的值

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

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

11、固定导航栏

$(function(){

//为浏览器注册滚动事件

$(window).scroll(function(){

//如果向上卷曲出去距离的值大于或等于第一个div高度

if($(this).scrollTop()>=$(".top").height()){

//设置导航栏固定在页面顶部

$(".nav").css("position","fixed");

$(".nav").css("top",0);

$(".main").css("margin-top",$(".nav").height());

}else{

$(".nav").css("position","static");

$(".main").css("margin-top",0);

}

});

});

12、为元素绑定事件

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

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

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

 

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(jquery day3)