1.包裹节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复制和替换元素</title>
<style type="text/css">
<!--
p{
font-size:14px;
margin:0px;
padding:5px;
}
-->
</style>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("input:eq(0)").click(function(){
$("p").wrap("<div id='mydiv'></div>");//每一个元素都拿div元素包裹
});
$("input:eq(1)").click(function(){
$("p").wrapAll("<div id='mydiv'></div>");//p类型的元素整合在一块，都拿div元素来包裹
});
$("input:eq(2)").click(function(){
$("p").wrapInner("<div id='mydiv'></div>");//把元素内部的内容都拿div来包裹
});
});
</script>
</head>
<body>
<p>我是段落1</p>
<h5>我是5号标题</h5>
<p>我是段落2</p>
<input type="button" value="wrap"/><br/>
<input type="button" value="wrapAll"/><br/>
<input type="button" value="wrapInner"/><br/>
</body>
</html>
截图：
2.节点属性操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>节点属性的操作</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("input:eq(0)").click(function(){
alert($("img").attr("id"));//获取图片的id属性值
});
$("input:eq(1)").click(function(){
//$("img").attr("title","下雪啦");
//alert($("img").attr("id"));
$("img").attr({"title":"下雪啦","name":"海哥"});//设置多个属性
});
$("input:eq(2)").click(function(){
$("img").removeAttr("title");//删除属性title
});
});
</script>
</head>
<body>
<img src="jia.jpg" width="100px" height="100px" id="myimg"/><br/>
<input type="button" value="获取id属性"/><br/>
<input type="button" value="设置属性"/><br/>
<input type="button" value="删除属性"/><br/>
</body>
</html>
截图：
3.节点样式操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>节点属性的操作</title>
<style type="text/css">
<!--
.myClass1{
border:1px solid #FF0;
width:120px;
height:80px;
background-color:#0FF;
}
-->
</style>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("div").click(function(){
/*
if($(this).hasClass("myClass1")){
$(this).removeClass("myClass1");//如果已经有该类选择器，则移除
}
else{
$(this).addClass("myClass1");//添加该类选择器
}
*/
//最简单的添加移除类选择器方式
$(this).toggleClass("myClass1");
});
});
</script>
</head>
<body>
<div>我是div</div>
</body>
</html>
截图：
4.对元素节点的操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置和获取HTML,文本和值</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
//alert($("#show").html());//获取选择器内容
//alert($("#show").text());//获取选择器内容,不含标签
//$("#show").html("<i>我是div元素</i>");//设置div的属性
//$("#show").text("<i>我是div元素</i>");//直接设置为带标签的文本
//alert($("#txt_name").val());//获取选择器内的内容
//$("#txt_name").val("海哥帅");//设置文本框属性
//$("#city").val("beijing");//下拉列表的默认属性
//$("#city").val(["beijing","tianjin"]);下拉列表的多选默认属性
//$("input[name='hobby']").val(["football","tennis"]);//过滤器选中复选框属性
$("input[name='gender']").val(["male"]);//默认选中性别
});
</script>
</head>
<body>
<div id="show"><b>我是div元素</b></div>
<input type="text" id="txt_name" value="海哥"/><br/>
<select id="city" multiple="multiple" size="4">
<option value="shanghai" selected="selected">上海</option>
<option value="beijing" >北京</option>
<option value="nanjing" >南京</option>
<option value="tianjin" >天津</option>
</select><br/>
<input type="checkbox" name="hobby" value="football"/>足球
<input type="checkbox" name="hobby" value="basktball"/>足球
<input type="checkbox" name="hobby" value="tennis"/>网球
<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女<br/>
</body>
</html>
截图：
