文章目录
1.取得指定元素下的所有子元素
<!--导入JQuery的js文件-->
<script src="../js/juery.min.js"></script>
<script>
$(function(){
var div=$("div").children();
console.log(div.html());
})
</script>
</head>
<body>
<p>Hello</p>
<div>
<span>Hello Again</span>
</div>
<p>And Again</p>
</body>
2.取得指定元素下的所有指定子元素
<script>
$(function(){
var div=$("div").children(".selected");
console.log(div.html());
})
</script>
</head>
<body>
<div>
<p class="selected">Hello</p>
<span>Hello Again</span>
<p>And Again</p>
</div>
</body>
3.查找父元素下的指定子元素
<script>
$(function(){
var div=$("p").find("span");
console.log(div.html());
})
</script>
</head>
<body>
<p>
<span>Hello</span>,how are you?
</p>
</body>
4.取得指定元素的祖先元素
<script>
$(function(){
var temp=$("span").parents();
console.log(temp);
})
</script>
</head>
<body>
<div>
<p><span>Hello</span></p>
<span>Hello Again</span>
</div>
</body>
5.取得指定元素的父元素
<script>
$(function(){
var temp=$("span").parents("div[class='div1']");
console.log(temp.length);
})
</script>
</head>
<body>
<div class="div1">
<div class="div2">
<p>
<span>Hello</span>
</p>
</div>
</div>
</body>
6.为指定的元素追加子元素
<script>
$(function(){
var temp=$("p").append("<h1>这是追加的内容！</h1>");
})
</script>
</head>
<body>
<p>I would like to say:</p>
</body>
7.删除元素本身（谁调用删除谁）
<script>
$(function(){
var temp=$("p:first").remove();
})
</script>
</head>
<body>
<p>Hello</p>
how are
<p>you?</p>
</body>
8.表单中的数据序列化
方便提交到服务器端
<script>
$(function(){
$("input[type='button']").click(function(){
var data=$("form").serialize();
console.log("需要提交的数据"+data);
})
})
</script>
</head>
<body>
<form action="cart_submit" method="post">
<fieldset>
<legend>title or explanatory caption</legend>
用户名：<input type="text" name="ename"/><br /><br />
编号：<input type="text" name="empno"/><br /><br />
职位：<input type="text" name="job"/><br /><br />
薪资：<input type="text" name="sal"/><br /><br />
佣金：<input type="text" name="comm"/><br /><br />
<input type="button" value="提交"/><input type="reset" value="重置"/>
</fieldset>
</form>
</body>