JQuery的概念

  • 问题：使用js完成对网页的操作，代码的书写量比较大。 js中对网页操作提供的方式过 于简单，造成获取和操作HTML元素对象过于麻烦。
  • 解决: 使用jQuery
  • 结论： 其实jQuery就是讲常用的js操作封装了起来。jQuery是js的一个框架。
  • 内容：jQuery本质上还是js，基本语法和js一致。将js的DOM操作重新封装 整合了。
  • 学习：
    • 1、如何使用JQuery完成网页操作。
    • 2、jquery的特点 jQuery是js的一个框架 jQuery提供了多种多样的选择器 jQuery支持主流的各种版本的浏览器 jQuery使用起来特别简单
    • 3、jQuery的使用 jQuery的选择器 jQuery的DOM操作 jQuery的事件和动画
  • 使用：
    • 使用script标签的外部引用，将JQuery文件引用进来。方可正常使用JQuery
    • <-script src=”JQuery路径” type=”text/javascript” charset=”utf-8”><-/script>

JQuery选择器

  • 基本选择器

    • 全部选择器 *
    • ID选择器:$(“#id名”) 返回的是存储了指定的HTML元素对象的数组
    • 标签选择器:$(“标签名”) 返回的是存储了指定标签的数组
    • 类选择器:$(“.类选择器”) 返回的是使用了相同类选择器的HTML元素对象
    • 组合选择器:$(“选择器，选择器，选择器，…..”) 返回的是所有选择器所指定HTML元素对象

  • 层级选择器

    • 祖先获取所有后代：$(“选择器 标签名”) 返回的是选择器下的所有指明的后代元素。
    • 选择所有子元素：$(“选择器>选择器”)返回的是所有的子元素
    • 选择紧跟的元素：$(“选择器+选择器”)返回的是紧跟的元素
    • 选择后面所有的元素：$(“选择器 ~选择器”)返回所有后面的元素（了解）

  • 简单选择器：在其他选择器的基础上选择某个或某些指定的HTML元素(筛选)

    • 选择第一个元素
      • $(“选择器:first”) 返回第一个HTML元素
    • 选择最后一个
      • $(“选择器:last”) 返回第一个HTML元素去除某个元素：
    • 去除选择的HTML元素中的某些元素
      • $(“选择器:not(选择器)”)
    • 奇数偶数
      • $(“选择器:even”) 返回角标为偶数的HTML元素
      • $(“选择器:odd”) 返回角标为奇数的HTML元素
    • 指定角标
      • $(“选择器:eq(角标)”)返回指定角标的HTML元素对象
    • 大于角标
      • $(“选择器:gt(角标)”)返回大于指定角标的HTML元素
    • 小于角标
      • $(“选择器:lt(角标)”)返回小于指定角标的HTML元素

  • 内容选择器

    • 包含:
      • 选择器:contains(“内容”)返回包含指定内容的元素
    • 内容为空:
      • 选择器:empty 返回内容为空的元素对象
    • 含有指定元素对象
      • 选择器:has(选择器) 返回含有指定的元素的元素对象
    • 不为空的元素
      • 选择器:parent 返回内容不为空的元素

  • 可见性选择器

    • 匹配隐藏
      • $(“选择器:hidden”) 返回隐藏的HTML元素
    • 匹配可见
      • $(“选择器:visible”) 返回可见的HTML元素

  • 属性选择器

    • 属性：
      • $(“选择器[属性名]”) 返回具备某些属性的HTML元素
    • 属性值：
      • $(“选择器[属性名=值]”) 返回具备属性且属性值为特定

  • 子元素选择器

  • 表单选择器

  • 具体详细操作查看JQuery api

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    <html>
    	<head>
    		<title>jquery的选择器</title>
    		<meta charset="UTF-8"/>
    		<!--引入jQuery文件-->
    		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
    		<!--声明js代码域-->
    		<script type="text/javascript">
    			//id选择器
    			function testId(){
    				//jquery--id
    				var inp=$("#uname");
    				alert(inp.val());
    			}
    			//标签选择器
    			function testEle(){
    				var inps=$("input");
    				alert(inps[1].value);	
    			}
    			//类选择器
    			function testClass(){
    				var inps=$(".common");
    				alert(inps.length);
    			}
    			//组合选择器：
    			function testAll(){
    				var eles=$("h3,input");
    				alert(eles.length);
    			}
    			//测试子选择器
    			function testChild(){
    				var inps=$("#showdiv>input");
    				alert(inps.length);
    			}
    			//测试层级选择器
    			function testCj(){
    				var inp=$("input:first");
    				alert(inp.val());
    				
    			}
    			function testCj2(){
    				var tds=$("td:not(td[width])");
    				alert(tds.html());
    			}
    		</script>
    		<style type="text/css">
    			.common{}
    			div{
    				width: 300px;
    				height: 100px;
    				border: solid 2px orange;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<h3>jquery的选择器</h3>
    		<input type="button" name="" id="" value="测试id"  onclick="testId()" class="common"/>
    		<input type="button" name="" id="" value="测试标签选择器"  onclick="testEle()"/>
    		<input type="button" name="" id="" value="测试类选择器"  onclick="testClass()"/>
    		<input type="button" name="" id="" value="测试组合选择器"  onclick="testAll()"/>
    		<hr />
    		用户名: <input type="text" name="uname" id="uname" value="张三" class="common"/>
    		<hr />
    		<input type="button" name="" id="" value="测试子选择器" onclick="testChild()" />
    		<input type="button" name="" id="" value="测试层级选择器--first" onclick="testCj()" />
    		<input type="button" name="" id="" value="测试层级选择器--not" onclick="testCj2()" />
    		<hr />
    		<div id="showdiv">
    			<input type="text" name="" id="" value="" />
    			<input type="text" name="" id="" value="" />
    			<input type="text" name="" id="" value="" />
    			<input type="text" name="" id="" value="" />
    		</div>
    		<div id="">
    			<input type="text" name="" id="" value="" />
    			<input type="text" name="" id="" value="" />
    			<input type="text" name="" id="" value="" />
    			<input type="text" name="" id="" value="" />
    		</div>
    		<table border="1px" height="200px">
    			<tr>
    				<td width="100px"></td>
    				<td width="100px"></td>
    				<td width="100px"></td>
    			</tr>
    			<tr>
    				<td>1</td>
    				<td>2</td>
    				<td>3</td>
    			</tr>
    			<tr>
    				<td>4</td>
    				<td>5</td>
    				<td>6</td>
    			</tr>
    		</table>
    	</body>
    </html>