jQuery学习---jquery 与 DOM操作

实例一：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</script>

$(function(){

var p = $("p");

var li = $("ul li:eq(1)");

var title = p.attr("title");

var title2 = li.attr("title");

var text = li.text();

alert(title);//hello world

alert(title2);//1

alert(text);//好

$("ul").append("<li title='abc'>hello</li>")

.append("<li title='xyz'>world</li>");

$("<li title='abc'>hello</li>").appendTo("ul");

});

</script>

</head>

<body>

<p title="hello world">你觉得学校怎么样？</p>

<ul>

<li title="4">好得不得了</li>

<li title="5">好的无法形容</li>

</ul>

</body>

</html>

实例二：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</script>

var addItems = function()

{

document.getElementById("div1").innerHTML="";//避免重复点击

var value = parseInt(document.getElementById("itemsNumber").value);

//alert(value);

for(var i = 0; i < value; i++)

{

var input = document.createElement("input");

input.setAttribute("type","text");

var br = document.createElement("br");

document.getElementById("div1").appendChild(input);

document.getElementById("div1").appendChild(br);

}

$(function(){

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

document.getElementById("div1").innerHTML="";

var value = parseInt($("#itemsNumber").val());

for(var i = 0; i < value; i++)

{

$("#div1").append("<input type='text'><br>");

}

});

</script>

</head>

<body>

</body>

</html>

实例三：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</script>

$(function(){

var li1 = "<li title='hello'>hello1</li>";

var li2 = "<li title='hello'>hello2</li>";

var li3 = "<li title='hello'>hello3</li>";

$("ul").append(li1);

$("ul").prepend(li2);

$("ul li:eq(4)").after(li3);

});

</script>

</head>

<body>

<p title="hello world">你觉得学校怎么样？</p>

<ul>

<li title="4">好得不得了</li>

<li title="5">好的无法形容</li>

</ul>

</body>

</html>

运行结果：

实例四：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

</script>

$(function(){

$("ul li:eq(2)").insertAfter("ul li:eq(4)");

});

</script>

</head>

<body>

<p title="hello world">你觉得学校怎么样？</p>

<ul>

<li title="4"

补充：web前端 , JavaScript ,

上一个：js弹出窗口之弹出层
下一个：详解jQuery是如何工作的

更多图片编程知识:

更多JAVA疑问解答：: java怎么在线读取ftp服务器上的文件内容; 关于程序员的职业规划; HTML和JSP矛盾吗？; java小程序如何打包？; java怎么split路径文件名？; 关于Hibernate实体自身多对一的抓取问题; 关于apache2+tomcat群集出现的问题; SSH 导入导出excel 谁有这块的资料吗?; springmvc 加载一个jsp页面执行多个方法报404; 关于用jquery 导入 excel; java对时间进行循环放到List中; 一个图片的输入输出程序，第一次调用某方法会中断，第二次调用则正常; 请上过传智播客的人说一下传智播客怎么样呀！是不是像它说的那样好呀！; spring的schema怎么配置; 【菜鸟求助】SSH中怎么从JSP页面往后台传值呢