1.jQuery中创建元素及追加元素
DOM中可以动态创建元素:document.createElemet(“标签的名字”);
jQuery中同样可以创建元素标签,并且返回的就是jQuery对象,可以直接调用方法进行使用。
案例1
- append方法用来在元素的末尾追加元素(最后一个子节点)。增加元素末尾(儿子)
- prepend,在元素的开始添加元素(第一个子节点)。增加元素开始(儿子)
- afte,在元素之后添加元素(添加兄弟)增加元素后面(兄弟)
- before,在元素之前添加元素(添加兄弟)增加元素前面
(div)
<input type="button" value="创建元素" id="btn"/>
<div id="dv"></div>
(jq)
$(function () {
var i=0;
$("#btn").click(function () {
i++;
//创建元素
var aObj=$("<a href='http://www.baidu.com'>百度"+i+"</a>");
//把元素添加到div中
//1.把超链接追加到div中
$("#dv").append(aObj);
//2.把元素插入到某个元素的前面
$("#dv").prepend(aObj);
//3.把元素添加到当前元素的后面(兄弟元素来添加)
$("#dv").after(aObj);
//4.把元素添加到当前元素的前面(兄弟元素来添加)
$("#dv").before(aObj);
});
});
案例2
点击按钮把第一个div中的元素添加到第二个div中
(div)
<input type="button" value="显示效果" id="btn"/>
<div id="dv1">
<p>这是一个p</p>
</div>
<div id="dv2"></div>
(jq)
$(function () {
$("#btn").click(function () {
//append方法把元素添加到另一个元素中的时候,有点剪切的效果
$("#dv2").append($("#dv1>p"));
});
});
案例3
权限选择(把两个div的元素来回移动)
(div)
multiple的理解参考input标签multiple属性用法简介
<div style="margin-left: 500px; margin-top: 20px; background-color: #999999">
<select multiple="multiple" style="float: left; width: 60px; height: 100px;" id="se1">
<option>添加</option>
<option>删除</option>
<option>修改</option>
<option>查询</option>
<option>打印</option>
</select>
<div style="width: 50px; float: left;">
<input type="button" name="name" value=">" style="width: 50px;" id="toRight" />
<input type="button" name="name" value="<" style="width: 50px;" id="toLeft" />
<input type="button" name="name" value=">>" style="width: 50px;" id="toAllRight" />
<input type="button" name="name" value="<<" style="width: 50px;" id="toAllLeft" />
</div>
<select multiple="multiple" style="float: left; width: 60px; height: 100px;" id="se2">
</select>
</div>
(jq)
selected 属性规定在页面加载时预先选定该选项。
$(function () {
//第一个按钮:获取按钮添加点击事件,获取第一个下拉框中被选中的option添加到第二个下拉框
$("#toRight").click(function () {
$("#se2").append($("#se1>option:selected"));
});
//第二个按钮
$("#toLeft").click(function () {
$("#se1").append($("#se2>option:selected"));
});
//第三个按钮
$("#toAllRight").click(function () {
$("#se2").append($("#se1>option"));
});
//第四个按钮
$("#toAllLeft").click(function () {
$("#se1").append($("#se2>option"));
});
});
2…html方法
- .html方法设置内容,返回的是当前的对象,如果不传入参数,获取的是标签中的内容
- .text方法同上
- 创建元素的方式:
.html方法可以创建元素
$(“html标签”)可以创建元素
案例1
点击按钮把一个p标签添加到一个div中
(div)
<input type="button" value="创建元素" id="btn"/>
<div id="dv"></div>
(jq)
$(function () {
$("#btn").click(function () {
var pObj= $("<p></p>");
pObj.text("哈哈哈");
pObj.appendTo($("#dv"));
});
});
●●●●●●●●●●●案例2●●●●●●●●●●●●●
点击按钮动态创建表格
(css)
* {padding:0;margin:0;}
div {margin-left:100px;margin-top:50px;}
table {border-collapse:collapse;border-spacing:0;border:1px solid #c0c0c0;}
th,td {border:1px solid #d0d0d0;color:#404060;padding:10px;}
th {background-color:#09c;font:bold 16px "微软雅黑";color:#fff;}
td {font:14px "微软雅黑";}
tbody tr {background-color:#f0f0f0;}
tbody tr:hover {cursor:pointer;background-color:#fafafa;}
(div)
<input type="button" value="获取数据" id="btnCreate"/>
<div>
<table>
<thead>
<tr>
<th>名称</th>
<th>说明</th>
</tr>
</thead>
<tbody id="tbd">
</tbody>
</table>
</div>
(jq)
模拟从后台拿到的数据
var datas = [
{
name: "1111",
url: "#",
type: "one"
},
{
name: "2222",
url: "#",
type: "two"
},
{
name: "3333",
url: "#",
type: "three"
}];
方法一
//页面加载后,点击按钮,遍历数组,获取数组中的元素内容,创建行和列,加入到表格中的tbody中
$(function () {
$("#btnCreate").click(function () {
//遍历数组
for(var i=0;i<datas.length;i++){
var obj=datas[i];//数组中的每一个对象
//创建行和列,加入到tbody中
$("<tr><td><a href="+obj.url+">"+obj.name+"</a></td>"+
"<td>"+obj.type+"</td></tr>").appendTo($("#tbd"));
}
});
});
方法二
$(function () {
$("#btnCreate").click(function () {
var arr=[];
//遍历数组
for(var i=0;i<datas.length;i++){
var obj=datas[i];//数组中的每一个对象
//创建行和列,加入到tbody中
arr.push("<tr><td><a href="+obj.url+">"+obj.name+"</a></td> <td>"+obj.type+"</td></tr>");
}
$("#tbd").html(arr);
});
});
案例3
html;//清空元素中的内容,(括号内只有一对双引号时)
empty;//清空元素中的内容
remove;//移除元素自身—自杀,
clone;//克隆,复制了这个元素
(div)
<input type="button" value="显示效果" id="btn"/>
<input type="button" value="显示效果" id="btn2"/>
<div id="dv">
<span>1234567890....</span>
</div>
<div id="dv2"></div>
(jq)
$(function () {
//点击按钮清空div中内容
$("#btn").click(function () {
$("#dv").html("");//span消失
$("#dv").empty();//span消失
$("#dv").remove();//dv1都消失
});
$("#btn2").click(function () {
var spanObj=$("#dv>span").clone();
spanObj.css("fontSize","50px");
$("#dv2").append(spanObj);
});
});
3.设置和获取表单的value
input标签:文本框,radio,select,textarea(文本域),checkbox…常见的表单标签。都可以通过val方法获取和设置value的值
案例1
(div)
<input type="button" value="显示效果" id="btn"/>
<input type="text" value="文本框" id="txt"/>
<input type="radio" value="man" name="sex" id="rad" />男
<input type="checkbox" value="1" id="ck" />吃饭
<input type="submit" value="提交" id="sm" />
<!--表单元素-->
<textarea name="" id="tt" cols="30" rows="10">
哈哈....
</textarea>
<select id="se">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="4">重庆</option>
<option value="5">东京</option>
</select>
(jq)
$(function () {
//点击按钮把所有的表单的value属性值全部显示出来
$("#btn").click(function () {
console.log($(this).val());//显示按钮的value属性值
console.log($("#txt").val());//显示文本框的value属性值
console.log($("#rad").val());//显示的单选框的value属性值
console.log($("#ck").val());//显示的是复选框的value属性值
console.log($("#sm").val());//显示的是提交按钮的value属性值
//设置表单元素的value属性值
$(this).val("这是一个按钮妞");
$("#txt").val("我是一个开心的按钮");
$("#rad").val("这是单选");
$("#ck").val("兴趣来了");
$("#sm").val("这是sm按钮");
//获取文本域中的内容:1. .text()方法 2 .val()方法--推荐
alert($("#tt").text());
//点击按钮让下拉框中的 重庆选中
$("#se").val(4);//可以改变某一项选中*****
});
});
案例2
点击按钮,在div中添加一个超链接,设置超链接的title属性和热点文字,地址
设置和获取系统属性值或者自定义属性
attr可以设置属性值,两个参数:1.属性名字,2.属性值
attr可以获取属性值,一个参数:1,属性名字
$(function () {
$("#btn").click(function () {
//获取div,创建超链接
var aObj=$("<a></a>");
aObj.attr("title","wwwwwww");//鼠标停留在xxx上时显示
aObj.attr("href","http://www.baidu.cn");
aObj.text("xxxxxxx");
$("#dv").append(aObj);
console.log(aObj.attr("href"));//控制台打印出网址
});
});
案例3
全选和反选案例
- prop可以真正的获取元素是否选中的状态prop(“checked”,false);prop(“checked”)
- 用.attr(“checked”)也可以
初级
(div)
<input type="button" value="全选" id="btnAll"/>
<input type="button" value="全不选" id="btnNoAll"/>
<div id="dv">
<input type="checkbox" value="1"/>吃饭
<input type="checkbox" value="2"/>睡觉
<input type="checkbox" value="3"/>打豆豆
<input type="checkbox" value="4"/>打篮球
<input type="checkbox" value="5"/>打足球
<input type="checkbox" value="6"/>打铅球
<input type="checkbox" value="7"/>打桌球
</div>
(jq)
$(function () {
$("#btnAll").click(function () {
$("#dv :checkbox").prop("checked",true);
});
$("#btnNoAll").click(function () {
$("#dv :checkbox").prop("checked",false);
});
});
高级一点的
带全选的表格
先获取j_cbAll的这个复选框,注册点击事件,点击的时候让下面tbody中所有的复选框选中和不全选。让tbody中所有的复选框的选中状态和当前的这个全选的复选框的选中状态一致
(css)
* {padding:0;margin:0;}
.wrap {width:300px;margin:100px auto 0;}
table {border-collapse:collapse;border-spacing:0;border:1px solid #c0c0c0;}
th,td {border:1px solid #d0d0d0;color:#404060;padding:10px;}
th {background-color:#09c;font:bold 16px "微软雅黑";color:#fff;}
td {font:14px "微软雅黑";}
tbody tr {background-color:#f0f0f0;}
tbody tr:hover {cursor:pointer;background-color:#fafafa;}
(div)
<div class="wrap">
<table>
<thead>
<tr>
<th><input type="checkbox" id="j_cbAll" /></th>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td><input type="checkbox" /></td>
<td>xx</td>
<td>12</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>ss</td>
<td>45</td>
</tr>
...
</tbody>
</table>
</div>
(jq)
$(function () {
$("#j_cbAll").click(function () {
var cked=$(this).prop("checked");//保存当前复选框的选中状态
//获取tbody中所有的复选框
$("#j_tb").find(":checkbox").prop("checked",cked);
});
//获取tbody中所有的复选框
$("#j_tb").find(":checkbox").click(function () {
//先获取tbody中所有的-----复选框的个数
var length1=$("#j_tb").find(":checkbox").length;
//再获取tbody中所有------选中的复选框的个数
var length2=$("#j_tb").find(":checked").length;
//二者比较,如果相同,让最上面的复选框选中,否则不选中
if(length1==length2){
$("#j_cbAll").prop("checked",true);
}else{
$("#j_cbAll").prop("checked",false);
}
});
});
4.设置和获取元素的宽和高
- 通过.css()方法写一个属性可以获取宽或者高,是字符串类型。如果获取后重新设置需要转换,麻烦
- 用.width()和.height()获取的时候直接就是数字类型,直接设置数字或者“100px”就可以
案例1
点击放大
点击按钮,获取当前元素的宽和高,再次设置元素的宽和高,设置后元素的宽和高分别是原来的宽和高2倍
方法一
通过元素的css()方法可以获取元素的宽和高,但是都是字符串类型, parseInt字符串转整数类型
$(function () {
$("#btn").click(function () {
//获取元素的宽和高
var width=parseInt($("#dv").css("width"))*2;
var height=parseInt($("#dv").css("height"))*2;
//设置样式
$("#dv").css("width",width+"px");
$("#dv").css("height",height+"px");
})
});
方法二:
width();方法返回或设置匹配元素的宽度。
height();方法返回或设置匹配元素的高度。
$(function () {
$("#btn").click(function () {
//获取宽和高的属性值---->数字类型
var width=$("#dv").width()*2;
var height=$("#dv").height()*2;
//设置元素的宽和高--->参数可以是数字也可以是字符串
$("#dv").width(width);
$("#dv").height(height);
})
});
案例2
位置操作
offset方法返回的是对象,并且,对象中有一个left和一个top,并且值是数字类型
设置的时候也可以没有px
设置的时候元素在设置前如果没有脱离文档流,设置的时候会自动进行脱离文档流,默认为relative
如果设置前有脱离文档流,那么设置的时候直接改变位置
点击图形改变位置
(css)
*{margin: 0;padding: 0;}
div{width: 200px;height: 100px;background-color: green;position: absolute;left:100px;top:50px;}
(div)
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
(jq)
$(function () {
$("#btn").click(function () {
//获取left和top的值--->都是数字类型
console.log($("#dv").offset().left);
console.log($("#dv").offset().top);
$("#dv").offset({"left":200,"top":200});//设置值
});
});
案例3
拖动滑动条,再点击屏幕显示卷曲出去的距离
- scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置。
滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时,位置是 0 - scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数,则返回以像素计的相对滚动条顶部的偏移。
<style>
div{
width: 2000px;
height: 2000px;
}
</style>
<script src="jquery.js"></script>
<script>
$(function () {
$(document).click(function () {console.log($(this).scrollLeft()+"===="+$(this).scrollTop());
});
});
</script>
</head>
<body>
<div></div>
</body>
☆☆☆☆案例4固定导航栏
(css)
* {margin: 0;padding: 0;}
(div)
<div class="top" style="height: 50px;background-color: #aaff69"></div>
<div class="nav" style="height: 100px;width: 1500px;background-color: #ff312e">滚动时这条到顶端就不动了</div>
<div class="main" style="height: 1000px;width: 1000px;background-color: #95a5ff;margin: 0 auto;">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
...
</div>
(jq)
function文档加载后执行,所以有可能获取不到图片的高度
解决这一问题用$(window).load();
scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。
$(function () {
$(window).scroll(function () {//滚动事件
//如果滚动条滚上去的距离大于或者等于top的高度,就让nav停在顶端
if($(document).scrollTop()>=$(".top").height()){
//让nav停留在顶端就要让其脱离文档流
//现在对nav进行设置
// $(".nav").css("position","fixed","top",0);注意这里不能这样写,这样写的top值是相对于名为“top”的div的
$(".nav").css("position","fixed").css("top",0);//要用链式编程
//写到这里如果只写上面的部分,滚动条回滚的时候"top"div就不显示了
$(".main").css("marginTop",$(".nav").height());//仔细看main中p标签中的数字,直接从1跳到6,解决这个bug
}else{
$(".nav").css("position","static");//解除脱离
$(".main").css("marginTop",0);//如果不设置滚回的时候“main"上会有一个”nav“高度的空白
}
})
})
5.事件绑定
元素绑定多个事件
案例1
鼠标进入到按钮中背景颜色为红色,离开后颜色为默认,点击按钮,弹出对话框
- 链式编程
$(function(){
$("#btn").mouseover(function () {
$(this).css("backgroundColor","red");
}).mouseout(function () {
$(this).css("backgroundColor","");
}).click(function () {
alert("我被点了");
});
});
- bind()方法可以为元素同时绑定多个事件
bind()方法:第一个参数是事件名字,第二个参数是事件处理函数-匿名函数
.bind({“事件”:function(){},“事件”:function(){}})
$(function () {
$("#btn").bind({"click":function(){
alert("我被点了");
},"mouseover":function(){
$(this).css("backgroundColor","red");
},"mouseout":function(){
$(this).css("backgroundColor","");
}});
});
案例2
点1次
点n次
点p标签效果(之前有多少个p标签,弹出框弹出几次就)
- delegate: 参数:3个;1.要绑定事件的元素—p;
2.要绑定的事件的名字—click;3.绑定事件的处理函数—匿名函数
$(function () {
//点击按钮通过bind方式为div中添加一个元素
$("#btn").bind("click",function () {
//创建一个p标签,添加到div中
$("<p>这是一个p</p>").appendTo($("#dv"));
//点击p标签弹出对话框用delegate--->绑定事件
$("#dv").delegate("p","click",function () {
alert("我被点了");
});
});
});
为按钮注册鼠标进入和离开的事件–绑定–bind
$(function () {
var i=0;
$("#btn").bind("mouseover mouseout",function () {
i++;
console.log(i);
});
});
案例3
通过on为按钮绑定点击的事件,创建一个p标签加入到div中,通过on的方式为div中的p绑定点击事件
- on方法: 两个参数:1事件的名字,2事件处理函数
三个参数: 1,事件的名字, 2.要绑定事件的元素–p,3事件处理函数
on是父级元素调用,目的:为子级元素去绑定事件
$(function () {
$("#btn").on("click",function () {
//创建p添加到div中
$("#dv").append($("<p>这是一个p</p>"));
//为div中的p标签绑定事件
$("#dv").on("click","p",function () {
alert("我被点了");
});
});
});
❀绑定事件:
- bind:
绑定多个事件
参数:{“事件的类型”:事件处理函数,…} - delegate
参数:父级元素.delegate(“子级元素”,“事件类型”,事件处理函数)
delegate方法内部也是调用的on方法来绑定事件的 - on
参数:父级元素.on(“事件类型”,“子级元素”,事件处理函数);