jQuery基础学习（1）
程序员文章站
2022-04-29 14:13:22
...
jQuery是快速、简洁的JavaScript框架 ，它极大地程度的简写的JavaScript代码，废话不多说。
使用jQuery第一步导入jQuery
1. <script type="text/javascript" src=" js/jquery-3.3.1.js"></script>
2. <script type="text/javascript"></script> 第二步定义jQuery方法
// 第一个jQuery的方法括号是参数，多个参数用,分开
1. $(function name() {});//此方法是在页面加载完成是就执行的的方法第三步创建jQuery实例
‘’$‘’就是jQuery实例
jQuery使用实例
1
<script type="text/javascript" src=" js/jquery-3.3.1.js"></script>
<script type="text/javascript"> $(function name() {
alert($('#text').val());//弹出id为text的值 });
</script>
</head>
<body> <!-- 定义一个文本框并附上默认值 -->
<input id="text" type="text" value="123">后台输出效果为
val();为获取的数据值除了val()还有html()和text()这三个为用的比较多的
#为id选择器jQuery还有许多选择器这里就不详说
基础使用就是这些啦
下面为一个简单的隔行变色和悬停变色
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function() {
//table tr为获取所有的table表格下的tr odd为匹配所有索引值为奇数的元素，从 0 开始计数 .css('要改变的地方','要变成什么样')改变样式
//意思为找到所有双数的tr并且吧背景颜色改为红色
$('table tr:odd').css("background-color", "yellow");
//even为匹配所有索引值为偶数的元素，从 0 开始计数
//意思為找到所有的单数tr并把背景颜色变为粉色
$('table tr:even').css("background-color", "pink");
//:eq 是等于的意思 一定要注意空格table tr :eq(0)和table tr:eq(0)和效果不一样
//意思为找到第一个tr并把背景颜色改为红色
$('table tr:eq(0)').css("background-color","red");
//:gt为大于 .hover(function() {},function() {})为鼠标移入移出第一个参数为移入，第二个参数为移出
$('table tr:gt(0)').hover(function() {
//this 则是移入的数据项
$(this).css("background-color", "red");
}, function() {
$('table tr:even').css("background-color", "pink");
$('table tr:odd').css("background-color", "yellow");
$('table tr:eq(0)').css("background-color","red");
});
});
</script>
</head>
<body>
<!--定义一个table表格 -->
<table border="1" width="90%" align="center" ">
<tr>
<td>学生编号</td>
<td>学生姓名</td>
<td>学生年龄</td>
</tr>
<tr>
<td>t21601</td>
<td>111</td>
<td>58</td>
</tr>
<tr>
<td>t21602</td>
<td>222</td>
<td>68</td>
</tr>
<tr>
<td>t21603</td>
<td>333</td>
<td>78</td>
</tr>
<tr>
<td>t21604</td>
<td>444</td>
<td>88</td>
</tr>
</table>
隔行变色
光标移入
移出光标则还原
jQuery的第一次学习就到这里了，谢谢观看，大佬勿喷
上一篇： 微信封禁上万账号，重点含此类违规内容
下一篇： 你的钱来的不容易