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

jquery三种基本选择器

梁凯达的博客
梁凯达的博客原创
2018年04月27日 22:05:152307浏览

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

进入百度程序员类库:

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

准确导入方式为:

 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

  </script>

  <script type="text/javascript">

  </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>

运行实例 »

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


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议