JQuery入门学习之简介及基本选择器的使用

一、概述

1.JQuery是一套简洁、快速、灵活的JavaScript脚本库，它能让用户在网页上简单的操作文档、处理事件、运行动画效果以及添加异步交互。注意，它是脚本库，并不是框架。

2.特点

a.代码精致小巧；

b.强大的功能函数；

c.跨浏览器；

d.链式语法风格。

二、下载与配置

1.下载：可以去官网下载http://jquery.com，不过好像有点慢，可以自己去百度资源。

2.配置：将下载后的jQuery拷到项目中，然后指定其路径，如：

<script language="javascript" src="JS/jquery-1.6.1.min.js">

或

<script type="text/javascript" src="JS/jquery-1.6.1.min.js">

三、jQuery插件的使用

（1）把下载好的插件包含到<head>标记内，并确保它位于主jQuery源文件之后；

（2）包含一个自定义的JavaScript文件，并在其中使用插件创建（或插件扩展）的方法

四、选择器

jQuery基本选择器包括 ID选择器、元素选择器、类名选择器、复合选择器、通配符选择器。

1.ID选择器

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery基本选择器的使用</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
	//以下函数在DOM加载完毕之后执行。
	//$(document).ready(function(){
	$(function(){//$(function() {}) 是  $(document).ready(function()的简写。
		$("input[type='button']").click(function(){//为按钮绑定单击事件
			var inputValue = $("#testInput").val();//获取文本框的值
			alert(inputValue);
		});
	});
</script>
</head>
<body>
	<input type="text" id="testInput" name="test"/>
	<input type="button" value="输入的值为" />
</body>
</html>

2.元素选择器

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery基本选择器的使用</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<!-- 元素选择器的使用 -->
<script type="text/javascript">
	$(function(){
		//当页面元素载入就绪时就会自动执行程序，自动为按钮绑定单击事件
		$("input[type='button']").click(function(){
			//获取第一个div元素(使用的HTML方法是JQuery的方法,因为eq方法返回的是一个jQuery包装集，故也只能调用jQuery的方法)
			$("div").eq(0).html("<img src='images/03.jpg'/>变成了头像3");
			//获取第二个div元素(使用的innerHTML方法是DOM对象的方法，因为get方法返回的是DOM对象，故也只能调用DOM对象的方法)
			$("div").get(1).innerHTML="<img src='images/04.jpg'/>变成了头像4";
		});
	});
</script>
</head>
<body>
	<div><img src="images/01.jpg">这是头像1</div><br>
	<div><img src="images/02.jpg">这是头像2</div>
	<input type="button" value="一阵过后" />
</body>
</html>

3.类名选择器（.class）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery基本选择器的使用</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<!-- 类名选择器的使用 -->
<script type="text/javascript">
	$(function(){
		//选取DOM元素
		var myClass = $(".myClass");
		//为选取的DOM元素设置背景颜色
		myClass.css("background-color","#C50210");
		//为选取的DOM元素设置文字颜色
		myClass.css("color","#FFF")
	});
</script>
</head>
<body>
	<div class="myClass">注意观察我的样式</div><br>
	<div>我是默认的样式</div>
</body>
</html>

4.复合选择器（以下代码我用谷歌浏览器测试没有效果，，）

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery基本选择器的使用</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<!-- 元素选择器的使用 -->
<script type="text/javascript">
	$(function(){
		$("input[type='button']").click(function(){
			//添加所使用的CSS类
			$("div,#span").addClass("change");
		});
	});
</script>
</head>
<body>
	<p class="default">p元素</p>
	<div class="default">div元素</div>
	<span class="default" id="span">id为span的元素</span>
	<input type="button" value="为div元素和id为span的元素换肤" />
</body>
</html>

5.通配符选择器（*）（略）。

JQuery入门学习之简介及基本选择器的使用

猜你喜欢