jquery三种基本选择器 - html

首页 > 博客列表 > jquery三种基本选择器

博主信息

博文 250

粉丝 3

访问量 317815

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

jquery三种基本选择器

梁凯达的博客

原创

2295人浏览过

1、jquery的导入方法，需要用两个<script type="text/javascript"></script>进行设置。

进入百度程序员类库：

http://cdn.code.baidu.com/

准确导入方式为：

</script>

</script>

其中jquery代码编写在第二个行中

jquery代码的几个选择器：

1、标签选择器，编写方式为：

$('标签名').css（'background','red'）

2、类选择器

$('.类名').css（'background','red'）

3、id选择器

$(‘#ID名’).css（'background','red'）

4、通配符选择器

$('tr:nth-child(3)~*').css(‘background’,'red')

实际例子：

实例

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style type="text/css">
		table{
			width: 300px;
			margin: auto;
			text-align: center;
			border-collapse: collapse;
		}
		table,td{
			border: 1px solid;
		}
		td{
			width: 10%;
			height: 10%;
		}
	</style>
</head>
<body>
	 <table>
	 	<caption>作业课程</caption>
	 	<tr>
	 		<th>很大</th>
	 		<td class="td1">1</td>
	 		<td id="td2">2</td>
	 		<td>3</td>
	 		<td>4</td>
	 		<td>5</td>
	 		<td>6</td>
	 		<td>7</td>
	 		<td>8</td>
	 		<td>9</td>
	 		<td>10</td>
	 	</tr>
	 </table>
	 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
	  </script>
	  <script type="text/javascript">
	  	$('th').css('color','red')
	  	$('.td1').css('background','brown')
	  	$('#td2').css('font-weight','bold')
	  	$('td:nth-child(3)~*').css('background','orangered')
	  </script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

批改状态：合格

老师批语：