1.什么是jQuery?
jQuery是一个优秀的JavaScript库,是一个凭借简洁的语法和跨平台的兼容性,极大低简化了JavaScript开发人员遍历HTML文档,操作DOM,执行动画和开发AJax的操作。jQuery封装很多预定义的对象和函数。
2.jQuery库的特点
- HTML元素操作
- HTML元素选取
- CSS操作思路
- HTML事件函数
3.jquery思路
4.上课代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器示例</title>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<input name="apple" />
<input name="flower" checked="checked" />
<table>
<tr>
<td>Header 1</td>
</tr>
<tr>
<td>Value 1</td>
</tr>
<tr>
<td>Value 2</td>
</tr>
</table>
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
<script src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$('li:first'); //将会得到<li>list item 1</li>
$('li:last'); //将会得到<li>list item 5</li>
$("input:not(:checked)"); //将会得到<input name="apple" />
$("tr:eq(1)"); //将会得到<tr><td>Value 1</td></tr>
$("tr:gt(0)"); //将会得到<tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr>
$("tr:lt(2)"); //将会得到<tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr>
$(":header").css("background",
"#EEE"); //结果为<h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2>
</script>
</body>
</html>