<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--jQuery使用:
第一步就是导入类库
jquery
1.概念
2.语法
选择器:
基本选择器:
1.id ------------- $("#id")
3.jQuery对象和原生对象转换
4.明天
对节点的增删改查
报错:
Uncaught ReferenceError: $ is not defined 没有找到引用的包
-->
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
</head>
<body>
<input type="button" value="弹document框" id="btn1"/>
<input type="button" value="弹jquery框" id="btn2"/>
<br/>
<input type="text" id="name" /><br/>
<input type="text" id="pwd"/><br/>
<table id="ta" border="1px" cellpadding="0px" cellspacing="0px" >
<tr>
<td>姓名</td>
<td>性别</td>
</tr>
</table>
<input type="button" id="btn3" value="添加"/>
<input type="button" id="btn4" value="删除"/>
<input type="button" id="btn5" value="替换"/>
<br />
<img src="img/cc.png" id="img1"/>
<script type="text/javascript">
$("#btn1").click(function(){
//jquery对象转换成document对象
var a=$("#btn1");
var b=a.get(0);
alert(b);
});
$("#btn2").click(function(){
//document对象转换成jquery对象
var a=document.getElementById("btn2");
var b=$(a);
alert(b)
});
$("#btn3").click(function(){
var na=$("#name").val();
var pwd=$("#pwd").val();
$("#ta").append("<tr><td>"+na+"</td><td>"+pwd+"</td></tr>")
});
$("#btn4").click(function(){
//删除索引为偶数的元素
$("tr:even").remove();
$("#img1").remove();
});
$("#btn5").click(function(){
//标签除了可以直接写
//还可以是使用document创建出来的
//还可以是document.getElementById()/$(选择器)
$("#img1").replaceWith("<img src='img/arrow-left-b.png' id='img1'/>")
});
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--jQuery使用:
第一步就是导入类库
jquery
1.概念
2.语法
选择器:
基本选择器:
1.id ------------- $("#id")
3.jQuery对象和原生对象转换
4.明天
对节点的增删改查
报错:
Uncaught ReferenceError: $ is not defined 没有找到引用的包
-->
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
</head>
<body>
<input type="button" value="弹document框" id="btn1"/>
<input type="button" value="弹jquery框" id="btn2"/>
<br/>
<input type="text" id="name" /><br/>
<input type="text" id="pwd"/><br/>
<table id="ta" border="1px" cellpadding="0px" cellspacing="0px" >
<tr>
<td>姓名</td>
<td>性别</td>
</tr>
</table>
<input type="button" id="btn3" value="添加"/>
<input type="button" id="btn4" value="删除"/>
<input type="button" id="btn5" value="替换"/>
<br />
<img src="img/cc.png" id="img1"/>
<script type="text/javascript">
$("#btn1").click(function(){
//jquery对象转换成document对象
var a=$("#btn1");
var b=a.get(0);
alert(b);
});
$("#btn2").click(function(){
//document对象转换成jquery对象
var a=document.getElementById("btn2");
var b=$(a);
alert(b)
});
$("#btn3").click(function(){
var na=$("#name").val();
var pwd=$("#pwd").val();
$("#ta").append("<tr><td>"+na+"</td><td>"+pwd+"</td></tr>")
});
$("#btn4").click(function(){
//删除索引为偶数的元素
$("tr:even").remove();
$("#img1").remove();
});
$("#btn5").click(function(){
//标签除了可以直接写
//还可以是使用document创建出来的
//还可以是document.getElementById()/$(选择器)
$("#img1").replaceWith("<img src='img/arrow-left-b.png' id='img1'/>")
});
</script>
</body>
</html>