0
点赞
收藏
分享

微信扫一扫

jQuery_01(入门&选择器)

捡历史的小木板 2022-03-15 阅读 40

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>
举报

相关推荐

JQuery-01选择器

jQuery入门&选择器

jQuery_01 初识jQuery

jQuery入门和选择器

jQuery的入门以及选择器

jQuery选择器

jQuery 选择器

jquery 选择器

0 条评论