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=$("
tr.append(td1);
var td2=$("
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、权限选择
$(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"));
});
});
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(){});