1 获取与设置属性
<span style="font-size:24px;">$(function()
{
var $v = $("p");
var $li = $("ul li:eq(1)");
//获取属性及获取页面值
var pTitle = $v.attr("title");
alert("before:"+pTitle);
var title2 = $li.attr("title");
var text = $li.text();
//设置属性
var $vA= $("p");
$vA.attr("title","445");
alert("after:"+$vA.attr("title"));
alert(title2);
alert(text);
});</span>
2 利用JS新建结点
$("#button").click(
function(){
var num= document.getElementById("text").value;
alert(num);
for(var i=0;i<num;i++ )
{
var input=document.createElement("input");
input.setAttribute("type", "text");
document.getElementById("div").appendChild(input);
}
}
);
3 利用jquery操作DOM
(1)附加在后面
//在后面添加
var div=$("#div");
div.html="";
//添加第一种方式
div.append("<input type='text' value='123'>")
.append("<input type='text' value='123'>");
//添加第二种方式
$("<input type='text' value='123'>").appendTo(div)
alert('22');
(2)附加在前面
//在前面添加
div.prepend("<input type='text' value='before'>");
(3) 结点的移动
//插入在XX的后面 让0在3的后面
$("ul li:eq(0)").insertAfter($("ul li:eq(3)"));
//让3在0后面的后面
$("ul li:eq(0)").after($("ul li:eq(3)"));
(4) 结点的移除
//移除
//(1)第一种方式
//删除 并返回被删除的结点对象 (可以间接实现移除)
var removed=$("ul li:eq(2)").remove();
$("ul li:eq(0)").append(removed);
//(2)第二种方式 按照属性删除
$("ul li").remove("li[title=1]");
// 清空元素内容
$("ul li:eq(0)").empty();
示例 动态添加文件上传窗口,动态删除
<script type="text/javascript">
$(function()
{
var div = $("#div")
$("#button").click(function()
{
var br = $("<br>");
var file = $("<input type='file' />");
var btn = $("<input type='button' value='remove'/>");
$("#div").append(br).append(file).append(btn);
btn.click(
function()
{
br.remove();
file.remove();
btn.remove();
}
)
}
)
})
</script>
</head>
<body>
<input type="file" id="file" />
<input type="button" value="more" id="button">
<div id="div"></div>
</body>
(5) 结点的复制
<script type="text/javascript">
$(function()
{
$("ul li").click(function()
{
//参数true表示克隆出来的对象与原对象拥有相同的属性 方法
$(this).clone(true).appendTo($("ul"));
});
});
</script>
</head>
<body>
<p title="123">option</p>
<ul>
<li>0</li>
<li title="1">1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
(6) 替换结点
$(function()
{
//后面替换前面的
//$("p").replaceWith("<a href='http://www.google.com'>Google.com</a>");
//前面替换后面的
$("<a href='http://www.google.com'>Google.com</a>").replaceAll("p");
});
(7)元素的包裹
$(function()
{//会面包裹前面的
//$("p").wrap("<a href='http://www.google.com'><b></b></a>");
//前面包裹后面的
$("p").wrapInner("<a href='http://www.google.com'><b></b></a>");
});
(8) 操作CSS
<style type="text/css">
.high{
font-weight: bold;
color:red
}
.another{
font-style:italic;
color:green
}
</style>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function()
{
$("input:eq(0)").click(function()
{
alert($('p').attr("class"));
});
$("input:eq(1)").click(function()
{
$("p").attr("class", "high");
});
$("input:eq(2)").click(function()
{
$("p").addClass("high");
});
$("input:eq(3)").click(function()
{
$("p").removeClass("high");
});
$("input:eq(4)").click(function()
{
$("p").removeClass();
});
$("input:eq(5)").click(function()
{
//两种状态切换 添加与删除
$("p").toggleClass("another");
});
$("input:eq(6)").click(function()
{
//判断元素是否具有制定样式
//alert($('p').hasClass('another'));
alert($('p').is('.another'));
});
});
(10) 对按钮内容的修饰
$(function()
{
$("input:eq(0)").click(function()
{
alert($("p").html());
});
$("input:eq(1)").click(function()
{
alert($("p").text());
});
$("input:eq(2)").click(function()
{
$("p").html('<a href="http://www.google.com">hello world</a>');
});
$("input:eq(3)").click(function()
{
$("p").text('<a href="http://www.google.com">hello world</a>');
});
$("input:eq(4)").click(function()
{
alert($(this).val());
});
$("input:eq(5)").click(function()
{
$(this).val('hello world');
});
});
利用 focus和blur事件实现输入框默认值显隐
$("#username").focus(function()
{
if($(this).val()=="username")
{
$(this).val("");
}
}).blur(function()
{
if($(this).val()=="")
{
$(this).val("username");
}
11 对子元素进行遍历
$(function()
{
var v1 = $("body").children();
var v2 = $("p").children();
var v3 = $("ul").children();
alert(v1.length);
alert(v2.length);
alert(v3.length);
for(var i = 0; i < v3.length; i++)
{
alert(v3[i].innerHTML);
}
}