<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<title></title>
<script type="text/javascript">
function myclick(){
var $name=$("#id1");
var nameval=$name.val();
alert(nameval);
}
function myclick2(){
$("<div><p>我是jquer动态添加的</p></div>").appendTo("body");
$("tr:even").css("background-color","red");//判断table表格偶数,索引值是偶数,行是奇数
$("tr:odd").css("background-color","greenyellow");//判断表格奇数 索引值是奇数,行是偶数
}
</script>
</head>
<body>
用户名:<input type="text" id="id1" /><br />
密码:<input type="text" id="id2" /><br />
<input type="button" id="btn1" value="按钮" οnclick="myclick()" /><br />
<input type="button" id="btn2" value="验证jquery函数" οnclick="myclick2()" />
<table border="1">
<tr>
<td>11111111111111111</td>
</tr>
<tr>
<td>22222222222222222222</td>
</tr>
<tr>
<td>333333333333333333</td>
</tr>
<tr>
<td>444444444444444444</td>
</tr>
<tr>
<td>5555555555555555555555</td>
</tr>
<tr>
<td>66666666666666666</td>
</tr>
<tr>
<td>7777777777777777</td>
</tr>
</table>
</body>
下面代码 只适合参照:
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<title></title>
<script type="text/javascript" language="JavaScript">
$(document).ready(function(){//当界面加载完成后,为btn1按钮绑定单击事件的回调函数
$("#btn1").click(function(){
//得到用户名输入框,,通过id
// var $name = $("#id1");//得到jQuery对象
// $name.val("中国");
// alert($name.val());
// alert($name.attr("type","checkbox"));
//得到用户名输入框,,通过标签
// var $name1 = $("input");//得到所有的input标签对象
//得到用户名输入框,,通过样式类
// var $name3 = $(".input1");
// alert($name3.val());
//通过层级选中器得到form下的所有input
// var $inputs = $("form input");
// debugger;
// alert($inputs.length);
$("tr:even").css("background","red");
$("tr:odd").css("background","green");
});
});
</script>
<style>
.input1{
color: red;
}
</style>
</head>
<body οnlοad="">
<form>
用户名:<input class="input1" type="text" id="id1" /><br />
密码:<input class="input1" type="text" id="id2" /><br />
<input type="button" id="btn1" value="按钮1" /><br />
</form>
<input type="button" id="btn2" value="按钮2" /><br />