{常用的方法}
1、循环 each
用JS语法创建一个一维数组,存入string类型的姓名,再迭代
var nameArray = new Array("哈哈","呵呵","嘻嘻");
for(var i=0;i<nameArray.length;i++){
document.write(nameArray[i]+"<br/>");
}
用JSON语法创建一个一维数组,存入string类型的姓名,再迭代
var nameArray = ["哈哈","呵呵","嘻嘻","都都"];//js对象
var $nameArray = $(nameArray);//jquery对象
$nameArray.each(function(){
//this表示数组中每一个元素,this属性js对象,this代表string类型
alert(this);
});
用JSON语法创建一个一维数组,存入object类型的姓名和薪水,再迭代
var nameArray = [
{
name : "哈哈",
sal : 6000
},
{
name : "嘿嘿",
sal : 7000
},
{
name : "笨笨",
sal : 8000
}
];
var $nameArray = $(nameArray);
$nameArray.each(function(){
//this代表object类型
alert(this.name + ":"+this.sal);
});
2、内部插入 append
html
<ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul> <hr/> <div>这是子元素,要插入到父元素内</div>
1)DIV标签插入到UL标签之后(父子关系)
$("ul").append( $("div") );
2)DIV标签插入到UL标签之前(父子关系)
$("ul").prepend( $("div") );
2、外部插入
1)DIV标签插入到UL标签之后(兄弟关系)
$("ul").after( $("div") );
- 1
- 2
2)DIV标签插入到UL标签之前(兄弟关系)
$("ul").before( $("div") );
3、属性的操作
html
<form> <table> <tr> <td> <input type="text" name="username" value="张三"/> </td> <td> <input type="password" name="password" value="123456"/> </td> </tr> </table> </form>
1)取得form里第一个input元素的type属性
alert( $("form input:first").attr("type") );
2)设置form里最后个input元素的为只读文本框
$("form input:last").attr("readonly","readonly")
$(":password").attr("readonly","readonly")
4、创建节点(DOM对象)
- 创建div元素,添加”哈哈”文本,ID属性,并添加到文档中
1)js方式
var divElement = document.createElement("div");
divElement.innerHTML = "哈哈哈";
divElement.setAttribute("id","2015");
divElement.id = "2015";
document.body.appendChild(divElement);*/
2)jquery方式
var $div = $("<div id='2015'>哈哈哈哈哈</div>");
$("body").append( $div );
$(document.body).append( $div );
5、删除节点
html
<ul id="a"> <li>第一项</li> <li id="secondID">第二项</li> <li>第三项</li> </ul> <ul id="b"> <li>第一条</li> <li id="secondID">第二条</li> <li>第三条</li> </ul> <div>这是div元素</div>
1)删除ID为secondID的LI元素
$("#secondID").remove();
2)删除所有LI元素
$("#a li").remove();
3)删除UL元素
$("#b").remove();
6、获取标签节点内容
html
<div> 哈哈 </div> <select id="city"> <option value="地都">北京</option> </select>
1取得div中的内容
alert( $("div").text() );
2)取得option的值和描述
var $option = $("#city option");
var value = $option.val();
var html = $option.text();
alert(value + ":" + html);
7、复制
<input type="button" value="原按钮" onclick="alert('静态事件')"/>
1)复制原input元素,添加到原input元素后,与其同级
var $old = $(":button");
var $new = $old.clone();
$new.val("新按钮");
$old.after( $new );
2)为原input元素动态添加单击事件,且复制原input元素,
//var $old = $(":button");
//$old.click(function(){
// alert("动态事件");
//});
3)添加到原input元素后,与其同级,且和原按钮有一样的行为
//var $new = $old.clone(true);
//$new.val("新按钮");
//$old.after( $new );
8、替换
<table border="1" align="center"> <tr> <td> <div style="width:165px;height:23px"> 双击会被替换成文本框 </div> </td> <td> 不会变 </td> </tr> </table>
1)双击div中的文本,用文本框替换文本
$("div").dblclick( function(){
var $text = $("<input type='text' style='width:165px;height:23px'/>");
//文本框替代div标签
$(this).replaceWith( $text );
} );
9、删除
<table> <tr> <td> 添加属性border/align/width </td> <td> 删除属性align </td> </tr> </table>
1)为table元素添加属性border/align/width
var $table = $("table").attr("border","2").attr("align","right").attr("width","60%")
2)将table元素的align属性删除
$table.removeAttr("align");
10、样式的操作
<style type="text/css"> .myClass{ font-size:30px; color:red } <div>无样式</div> <div class="myClass">有样式</div>
1)为无样式的DIV添加样式
//$("div:first").addClass("myClass");
2)为有样式的DIV删除样式
//$("div:last").removeClass("myClass");
3)切换样式,即有样式的变成无样式,无样式的变成有样式
//$("div").toggleClass("myClass");
4)最后一个DIV是否有样式
var flag = $("div:last").hasClass("myClass");
alert(flag?"有样式":"无样式");
11、位置、尺寸
1)获取图片的坐标
var offset = $("img").offset();
var x = offset.left;
var y = offset.top;
alert(x+":"+y);
2)设置图片的坐标
$("img").offset({
top:100,
left:200
});
3)获取图片的宽高
var w = $("img").width();
var h = $("img").height();
alert(w+":"+h);
4)设置图片的宽高
$("img").width(500);
$("img").height(600);
<img src="../images/zgl.jpg"/>
12、查找
<div> <span> Hello Again <b> Bold </b> </span> </div> <p>And Again</p> <span>And Span</span>
1)取得div元素的直接子元素内容,不含后代元素
//var $span = $("div").children();
//var content = $span.html();//包含子标签
//var content = $span.text();//不包含子标签
//alert(content);
2)取得div元素的下一个同级的兄弟元素内容
//var $p = $("div").next();
//alert( $p.text() );
3)取得div元素的上一个同级的兄弟元素内容
//alert( $("div").prev().text() );
4)依次取得div元素的上下一个同级的所有兄弟元素的内容
var $all = $("div").siblings("p");
$all.each(function(){
alert( $(this).html() );
});
13、隐藏和显示
<p> <img src="../images/zgl.jpg"/> </p>
1)图片隐蔽
$("img").hide(5000);
2)休息3秒
window.setTimeout(function(){
//图片显示
$("img").show(5000);
},3000);
14、淡入淡出 动画
<p>
<img src="../images/zgl.jpg" style="display:none"/>
</p>
<script type="text/javascript">
//淡入显示图片
$("img").fadeIn(3000);
//淡出隐蔽图片
$("img").fadeOut(3000);
</script>
15、好友列表上下滑动
<div>
中国0<br/>
中国1<br/>
中国2<br/>
中国3<br/>
中国4<br/>
中国5<br/>
中国6<br/>
中国7<br/>
中国8<br/>
中国9<br/>
</div>
<input type="button" value="我的好友"/>
<script type="text/javascript">
//向上下滑动
$(":button").click(function(){
//div标标上下移动
$("div").slideToggle(100);
});
</script>