JQuery的使用

最新推荐文章于 2024-04-12 06:58:06 发布

温馨提示······

最新推荐文章于 2024-04-12 06:58:06 发布

阅读量370

点赞数

本文链接：https://blog.csdn.net/weixin_45504233/article/details/102750910

版权

第一节 jQuery概述

1.1 jQuery简介

jQuery是一个快速、简洁的JavaScript库，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

目前jQuery有三个大版本：
1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：2013年2.0版本发布，不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）
1.X大版本下，细分版本非常多，各个版本的函数都会有一定的差异。网上看到的很多教程大多是1.x版本的。jquery官方手册：http://api.jquery.com/

参考文档:https://www.jquery123.com/ jQuery中文网、菜鸟教程

1.2 什么是jQuery

jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

1.3 为什么要用jQuery

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。
很多大公司都在使用 jQuery，例如:

Google
Microsoft
IBM
Netflix

第二节 jQuery安装

2.1 网页中添加 jQuery

可以通过多种方法在网页中添加 jQuery。您可以使用以下方法：

(1)从 jquery.com 下载 jQuery 最新版本，或从GitHub下载其他版本
(2)从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

有两个版本的 jQuery 可供下载：
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）
以上两个版本都可以从 jquery.com 中下载。
jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的

<head>
	<script src="jquery-1.10.2.min.js"></script>
</head>

当然你也可以使用其它网站的CDN：

2.2 百度 CDN

<head>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
  </script>
</head>

2.3 新浪 CDN

<head>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>

2.4 Google CDN

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>

2.5 Microsoft CDN

<head>
<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
</head>

第三节 jQuery语法

jQuery 语法是通过$()核心函数选取 HTML 元素，并对选取的元素执行某些操作。

使用语法1 ： $(selector).action()

美元符号定义 jQuery==$
选择符（selector）“查询"和"查找” HTML 元素

jQuery 的 action() 执行对元素的操作

举例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素

使用语法2： $(匿名函数)

表示页面dom加载完毕，就执行，比onload事件要早，并且可以写多个。	
   $(匿名函数)  
	和
   $(document).ready(匿名函数) 一样

3.1 jQuery选择器

######3.1.1 标签选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有

元素:

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

######3.1.2 id选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

######3.1.3 class选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下：

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

属性选择器 input[type] input[type=‘text’]

结构伪类选择 a:link a:hover

层次选择器空格后代 > 子代

3.2 jQuery事件

3.2.1 什么是事件？

页面访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例：

在元素上移动鼠标。
选取单选按钮
点击元素

常见 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseover	keyup	focus	scroll
mouseout		blur	unload

3.2.2 jQuery 事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：

$("p").click();

下一步是定义触发事件。您可以通过一个事件函数实现：

$("p").click(function(){
    // 动作触发后执行的代码!!
});

也就是说，不传参数是点击，传参数是设置事件。

click()
当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
在下面的实例中，当点击事件在某个

元素上触发时，隐藏当前的

元素：

$("p").click(function(){
  $(this).hide();
});

dblclick()
当双击元素时，会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：

$("p").dblclick(function(){
  $(this).hide();
});

mouseover()
当鼠标指针穿过元素时，会发生 mouseover 事件。
mouseover() 方法触发 mouseover 事件，或规定当发生 mouseover 事件时运行的函数：

$("#p1").mouseover(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
});

mouseout()
当鼠标指针离开元素时，会发生 mouseout 事件。
mouseout() 方法触发 mouseout 事件，或规定当发生 mouseout 事件时运行的函数：

$("#p1").mouseout(function(){
    alert("再见，您的鼠标离开了该段落。");
});

mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：

$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
});

mouseup()
当在元素上松开鼠标按钮时，会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：

$("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
});

hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseover);当鼠标移出这个元素时，会触发指定的第二个函数(mouseout)。

$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);

focus()
当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

blur()
当元素失去焦点时，发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

第四节 jQuery 效果

#####4.1 隐藏显示
hide()
您可以使用 hide() 将元素隐藏

$("#hide").click(function(){
  $("p").hide();
});

show()
您可以使用show()将元素显示

$("#show").click(function(){
  $("p").show();
});

toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：

$("button").click(function(){
  $("p").toggle();
});

事实上，这三种方法都是有两个参数的：

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

4.2 淡入淡出

通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。

$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法：

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。

$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeOut() 方法：

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeToggle() 方法：

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。0透明 1不透明

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeTo() 方法：

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

4.3 滑动

通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：

slideDown()
slideUp()
slideToggle()

slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素。

$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideDown() 方法：

$("#flip").click(function(){
  $("#panel").slideDown();
});

slideUp() 方法

jQuery slideUp() 方法用于向上滑动元素。

$(selector).slideUp(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideUp() 方法：

$("#flip").click(function(){
  $("#panel").slideUp();
});

slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

$(selector).slideToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideToggle() 方法：

$("#flip").click(function(){
  $("#panel").slideToggle();
});

4.4 链式编程

直到现在，我们都是一次写一条 jQuery 语句（每个语句都是独立一行）。

不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

提示： 这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。“p1” 元素首先会变为红色，然后向上滑动，再然后向下滑动：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

如果需要，我们也可以添加多个方法调用。

**提示：**当进行链接时，代码行会变得很差。不过，jQuery 语法不是很严格；您可以按照希望的格式来写，包含换行和缩进。

如下书写也可以很好地运行：

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

第五节 jQuery HTML DOM操作

5.1 获取

jQuery 拥有可操作 HTML 元素和属性的强大方法。

jQuery DOM 操作

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容---->innerText
html() - 设置或返回所选元素的内容（包括 HTML 标记）—innerHTML
val() - 设置或返回表单字段的值—value属性

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

下面的例子演示如何通过 jQuery val() 方法获得输入字段的值：

$("#btn1").click(function(){
  alert("值为: " + $("#test").val());
});

获取属性-attr()

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值：

$("button").click(function(){
  alert($("#a1").attr("href"));
});

5.2 设置

设置内容 - text()、html() 以及 val()

我们将使用前一章中的三个相同的方法来设置内容：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("Hello world!");
});

设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。

下面的例子演示如何改变（设置）文本中 color属性的值：

$("button").click(function(){
  $("#font1").attr("color","red");
});

案例：全选 |全不选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选全不选</title>
		<script src="js/jquery-1.11.0.js" type="text/javascript"></script>
	</head>
	<body>
		<table border="1" width="300" height="200">
			<tr>
				<td><input id="selectAll" type="checkbox">全选</td>
				<td>编号</td>
				<td>用户名</td>
				<td>密码</td>
			</tr>
			<tr>
				<td><input type="checkbox" class="sel"></td>
				<td>1</td>
				<td>zhangsan</td>
				<td>123</td>
			</tr>
			
			<tr>
				<td><input type="checkbox" class="sel"></td>
				<td>2</td>
				<td>lisi</td>
				<td>123123</td>
			</tr>
			
			<tr>
				<td><input type="checkbox" class="sel"></td>
				<td>3</td>
				<td>wangwu</td>
				<td>12312421</td>
			</tr>
			
			
		</table>
		
		<script type="text/javascript">
			$(function(){
				$("#selectAll").click(function(){
					//attr(); ---->prop();
					//alert($(this).attr("checked"));
					//alert($(this).prop("checked"));
					if($(this).prop("checked")){
						$(".sel").prop("checked",true);
					}else{
						$(".sel").prop("checked",false);
					}
				});
			});
			
		</script>
	</body>
</html>

5.3 添加元素

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

jQuery append() 方法

jQuery append() 方法在被选元素的结尾插入内容。

$("p").append("追加文本");

jQuery prepend() 方法

jQuery prepend() 方法在被选元素的开头插入内容。

$("p").prepend("在开头追加文本");

通过 append() 和 prepend() 方法添加若干新元素

在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。

不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：

function appendText()
{
    var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。

jQuery before() 方法在被选元素之前插入内容。

$("img").after("在后面添加文本");
 
$("img").before("在前面添加文本");

通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：

function afterText()
{
    var txt1="<b>I </b>";                    // 使用 HTML 创建元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
    var txt3=document.createElement("big");  // 使用 DOM 创建元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
}

5.4 删除元素

删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

jQuery remove() 方法

jQuery remove() 方法删除被选元素及其子元素。

$("#div1").remove();

jQuery empty() 方法

jQuery empty() 方法删除被选元素的子元素。

$("#div1").empty();

过滤被删除的元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class=“italic” 的所有

元素：

$("p").remove(".italic");

5.5数组或集合元素遍历

$("p").each(function(i,n){
  	alert(i+"...."+n);
});
或
$.each(arr,function(i,n){
    alert(i+"...."+n);
})

案例2 ：两个 select框，把一个select框中的内容移动到另一个select

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>移动元素</title>
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
	</head>

	<body>

		<select id="leftselect" size="10"  style=" width: 100px;">
			<option value="1">北京</option>
			<option value="2">上海</option>
			<option value="3">南京</option>
			<option value="4">广州</option>
			<option value="5">杭州</option>
			<option value="6">深圳</option>
		</select>
	
		<div style="display: inline-block; vertical-align: top; margin-top: 20px;">
			
			<input type="button" value="右移>>" id="toRight" /><br/>
			<input type="button" value="左移<<" id="toLeft"/><br/>
			<input type="button" value="全部右移" id="toRightAll" /><br/>
			<input type="button" value="全部左移" id="toLeftAll"/>
			
		</div>
		<select id="rightselect" size="10" multiple="multiple" style=" width: 100px;">
			
		</select>
		
		<script type="text/javascript">
			var leftselect=document.getElementById("leftselect");
			var rightselect=document.getElementById("rightselect");
			$(function(){
				$("#toRight").click(function(){
					//左边删除
					var selop=leftselect.options[leftselect.selectedIndex];
					selop.remove();
					//右边添加
					rightselect.add(selop);
					
				});
				$("#toLeft").click(function(){
					//右边删除
					var selop=rightselect.options[rightselect.selectedIndex];
					selop.remove();
					//右边添加
					leftselect.add(selop);
				});
				
				$("#toRightAll").click(function(){
					//左边删除
					$(rightselect).append(leftselect.options);
					$(leftselect).empty();
					
					
				});
				
				$("#toLeftAll").click(function(){
					$(leftselect).append(rightselect.options);
					$(rightselect).empty();
				});
				
			})
			
		</script>
	</body>

</html>

5.6 CSS类

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

实例样式表

下面的样式表将用于本页的所有例子：

.important
{
        font-weight:bold;
        font-size:xx-large;
}
 
.blue
{
        color:blue;
}

jQuery addClass() 方法

下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

您也可以在 addClass() 方法中规定多个类：

$("button").click(function(){
  $("body div:first").addClass("important blue");
});

jQuery removeClass() 方法

下面的例子演示如何在不同的元素中删除指定的 class 属性：

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

jQuery toggleClass() 方法

下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

5.7 CSS()方法

jQuery css() 方法

css() 方法设置或返回被选元素的一个或多个样式属性。

返回 CSS 属性

如需返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");

下面的例子将返回首个匹配元素的 background-color 值：

$("p").css("background-color");

设置 CSS 属性

如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value");

下面的例子将为所有匹配元素设置 background-color 值：

$("p").css("background-color","yellow");

设置多个 CSS 属性

如需设置多个 CSS 属性，请使用如下语法：

css({"propertyname":"value","propertyname":"value",...});

下面的例子将为所有匹配元素设置 background-color 和 font-size：

$("p").css({"background-color":"yellow","font-size":"200%"});

案例演示；省市级联

<script>
	$(function(){
		//2.创建二维数组用于存储省份和城市
		var cities = new Array(3);
		cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
		cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
		cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
		cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
		
		$("#province").change(function(){
			//10.清除第二个下拉列表的内容
			$("#city").empty();
			
			//1.获取用户选择的省份
			var val = this.value;
			//alert(val);
			//3.遍历二维数组中的省份
			$.each(cities,function(i,n){
				//alert(i+":"+n);
				//4.判断用户选择的省份和遍历的省份
				if(val==i){
					//5.遍历该省份下的所有城市
					$.each(cities[i], function(j,m) {
						//alert(m);
						//6.创建城市文本节点
						var textNode = document.createTextNode(m);
						//7.创建option元素节点
						var opEle = document.createElement("option");
						//8.将城市文本节点添加到option元素节点中去
						$(opEle).append(textNode);
						//9.将option元素节点追加到第二个下拉列表中去
						$(opEle).appendTo($("#city"));
					});
				}
			});
			
		});
	});
</script>

第六节 jQuery节点关系

通过 jQuery 节点关系，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行查找。

#####6.1 祖先

jQuery parent() 方法

parent() 方法返回被选元素的直接父元素。

该方法只会向上一级对 DOM 树进行遍历。

下面的例子返回每个元素的的直接父元素：

$(document).ready(function(){
  $("span").parent();
});

#####6.2 后代

jQuery children() 方法

children() 方法返回被选元素的所有直接子元素。

该方法只会向下一级对 DOM 树进行遍历。

下面的例子返回每个

元素的所有直接子元素：

$(document).ready(function(){
  $("div").children();
});

您也可以使用可选参数来过滤对子元素的搜索。

下面的例子返回类名为 “1” 的所有

元素，并且它们是

的直接子元素：

$(document).ready(function(){
  $("div").children("p.1");
});

jQuery find() 方法

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

下面的例子返回属于

后代的所有元素：

$(document).ready(function(){
  $("div").find("span");
});

下面的例子返回

的所有后代：

$(document).ready(function(){
  $("div").find("*");
});

#####6.3 同胞

jQuery siblings() 方法

siblings() 方法返回被选元素的所有同胞元素。

下面的例子返回

的所有同胞元素：

$(document).ready(function(){
  $("h2").siblings();
});

您也可以使用可选参数来过滤对同胞元素的搜索。

下面的例子返回属于

的同胞元素的所有
元素：

$(document).ready(function(){
  $("h2").siblings("p");
});

jQuery next() 方法

next() 方法返回被选元素的下一个同胞元素。

该方法只返回一个元素。

下面的例子返回

的下一个同胞元素：

$(document).ready(function(){
  $("h2").next();
});

####第七节 jQuery AJAX

#####7.1 jQuery AJAX简介

什么是 AJAX？

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

7.2 ajax()方法

jQuery 底层 AJAX 实现。简单易用的高层实现get和post方法等。$.ajax() 返回其创建的 XMLHttpRequest
对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

常用参数

contentType:(默认: “application/x-www-form-urlencoded”) 发送信息至服务器时内容编码类型。默认值适合大多数情况。

data:发送到服务器的数据

dataType:预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断。

“xml”: 返回 XML 文档，可用 jQuery 处理。

“html”: 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。

“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。’’‘注意：’’'在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)

“json”: 返回 JSON 数据。

“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

“text”: 返回纯文本字符串

success：请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。

function (data, textStatus) {
    // data 可能是 xmlDoc, jsonObj, html, text, 等等...
    this; // 调用本次AJAX请求时传递的options参数
}

type：(默认: “GET”) 请求方式 (“POST” 或 “GET”)，默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

url：(默认: 当前页地址) 发送请求的地址。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery实现ajax请求</title>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
</head>
<body>

	<div id="mydiv">
	
	</div>

	<input id="btn1" type="button" value="发送ajax请求get方式" >
	<input id="btn2" type="button" value="发送ajax请求post方式" >
	<script type="text/javascript">
		$(function(){
			$("#btn1").click(function(){
				
				//ajax方法
				$.ajax({
					url:"servlet1",
					type:"GET",
					data:"username=张三&age=20",
					dataType:"html",
					contentType:"text/plain",
					success:function(msg,status){
						$("#mydiv").append(msg);
						alert(status);
					}
					
				});
				
			});
			
		$("#btn2").click(function(){
				
				//ajax方法
				$.ajax({
					url:"servlet1",
					type:"POST",
					data:"username=张三&age=20",
					dataType:"html",
					contentType:"application/x-www-form-urlencoded",
					success:function(msg,status){
						$("#mydiv").append(msg);
						alert(status);
					}
				});
				
			});
			
		})
	
	</script>
</body>
</html>

7.3 get和post方法

$.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法：

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：

$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});

$.post() 方法

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

语法:

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.post() 连同请求一起发送数据：

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.jsp",
    {
        name:"百度",
        url:"http://www.baidu.com"
    },
        function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});

7.4 load方法

jQuery load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法:

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

这是示例文件（“demo_test.txt”）的内容：

<h2>jQuery AJAX 是个非常棒的功能！</h2><p id="p1">这是段落的一些文本。</p>

下面的例子会把文件 “demo_test.txt” 的内容加载到指定的

元素中：

$("#div1").load("demo_test.txt");

也可以把 jQuery 选择器添加到 URL 参数。

下面的例子把 “demo_test.txt” 文件中 id=“p1” 的元素的内容，加载到指定的

元素中：

$("#div1").load("demo_test.txt #p1");

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息：

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

第八节其他

#####8.1 jQuery noConflict方法

jQuery 和其他 JavaScript 框架

正如您已经了解到的，jQuery 使用 $ 符号作为 jQuery 的简写。

如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？

其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。

其中某些框架也使用 $ 符号作为简写（就像 jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。

jQuery 的团队考虑到了这个问题，并实现了 noConflict() 方法。

jQuery noConflict() 方法

noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。

当然，您仍然可以通过全名替代简写的方式来使用 jQuery：

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});

您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。请看这个例子：

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});

如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 “jQuery”：

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});

总结:

1 jquery是javascrpt的框架, write less ,do more!

2 下载 jquery 1.12.4 2 3

3 使用方式 (1) 下载放入自己服务器，（2） CDN

4 语法: 两种使用形式

5 选择器标签选择器 id选择器 class选择器

6事件 click() mouseover() mouseout() change()

7 效果: hide() show() toggle(); fadeIn fadeOut fadeToggle() fadeTo() slideUp slideDown slideToogle

8 Dom操作

获取设置内容和属性 text() html() val()

添加元素 append() prepend() after() before();

删除元素:remove() empty()

元素遍历 jquery对象.each() $.each(function(i,n){…})

css类

9jquery节点关系：父节点子节点兄弟节点下一个兄弟前一个兄弟

10 ajax

$.ajax (url ,type,dataType,success,data,contentType)

$.get(url,data,callback,dataType);

$.post();

$.getJSON();

$.getScript();

jquery对象.load();

11 让渡

温馨提示······

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery的使用

第一节 jQuery概述1.1 jQuery简介jQuery是一个快速、简洁的JavaScript库，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML...
复制链接

扫一扫