Blogger Information
Blog 250
fans 3
comment 0
visits 321517
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jquery三种基本选择器
梁凯达的博客
Original
2308 people have browsed it

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>

运行实例 »

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


Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post