jquery day3

1、元素创建

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

$("<input type=‘button’ value=‘按钮’>").appendTo($("#dv"));

});

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

$("#dv").html("<input type=‘button’ value=‘按钮’>");

});

2、元素添加方法

$(function(){

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

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

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

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

});

});

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=$("<table style='cursor:pointer' border='1' cellspacing='0' cellpadding='0'></table>");

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

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

for(var i=0;i<arr.length;i++){ //创建行，并加入到table中

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

var tr=$("<tr></tr>");

table.append(tr);

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

tr.append(td1);

var td2=$("<td><a href=' "+dt.href+" '>"+dt.name+"</a></td>"); 

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=$("<tr><td>腾讯</td><td><a href='http://www.qq.com'></a></td></tr>");

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

});

});

5、权限选择

<script>

$(function(){

$("#toAllRight").click(function(){ //第三个按钮，把左边所有移动到右边

$("#se1>option").appendTo($("#se2"));

});

$("#toAllLeft").click(function(){ //第四个按钮，把右边所有移动到左边

$("#se2>option").appendTo($("#se1"));

});

$("#toRight").click(function(){ //第一个按钮，把左边选中移动到右边

$("#se1>option:selected").appendTo($("#se2"));

});

$("#toLeft").click(function(){ //第二个按钮，把右边选中移动到左边

$("#se2>option:selected").appendTo($("#se1"));

});

});

</script>

<div>

<select id="se1">

<option>添加</option>

<option>删除</option>

</select>

<div>

<input type="button" id="toRight">

<input type="button" id="toLeft">

<input type="button" id="toAllRight">

<input type="button" id="toAllRight">

</div>

<select id="se2">

</select>

</div>

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);

}

});

});

<input type="button" value="选中/不选中" id="btn" />

<input type="checkbox" value="1" name="play" id="ck" />

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(){});