2021-05-24 15:49 已编辑清华大学 Java

关注

jquery复习笔记整合

jQuery

jQuery 是一个 JavaScript 库，极大地简化了 JavaScript 编程。

jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。

可以通过下面的标记把 jQuery 添加到网页中：

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

ps：script 标签应该位于页面的 head 部分。

jQuery 库包含以下特性：

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

jQuery下载

jQuery 下载：

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

这两个版本都可以从 jQuery官网下载。

jQuery引用：

可以通过 CDN（内容分发网络）引用它。
谷歌和微软的服务器都存有 jQuery 。

如需从谷歌或微软引用 jQuery，请使用以下代码之一：

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

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>

jQuery语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法：$(selector).action()

**美元符号（$）**定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

示例
$(this).hide() - 隐藏当前元素

$(“p”).hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class=“test” 的所有元素

$("#test").hide() - 隐藏所有 id=“test” 的元素

文档就绪函数
实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){
   

});

这是防止文档在完全加载之前运行 jQuery 代码。

jQuery选择器

对元素组或单个元素进行操作。

元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。

$(“p”) 选取 p 元素。

$(“p.intro”) 选取所有 class=“intro” 的 p 元素。

$(“p#demo”) 选取所有 id=“demo” 的 p 元素。

属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href=’#’]") 选取所有带有 href 值等于 “#” 的元素。

$("[href!=’#’]") 选取所有带有 href 值不等于 “#” 的元素。

$(" [h r e f$ =’.jpg’]") 选取所有 href 值以 “.jpg” 结尾的元素。

一些选择器示例

语法	描述
$(this)	当前 HTML 元素
$(“p”)	所有 p 元素
$(“p.intro”)	所有 class=“intro” 的 p 元素
$(".intro")	所有 class=“intro” 的元素
$("#intro")	id=“intro” 的元素
$(“ul li:first”)	每个 ul 标签的第一个 li 元素
$(" [h r e f$ =’.jpg’]")	所有带有以 “.jpg” 结尾的属性值的 href 属性
$(“div#intro .head”)	id=“intro” 的 div 标签中的所有 class=“head” 的元素

jQuery事件

jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。

示例

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   
  $("button").click(function(){
   
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>

一些事件函数

事件函数	函数绑定
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

jQuery效果

隐藏和显示

使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

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

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

toggle() 方法等效于hide() 和 show() 方法：

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

淡入淡出

jQuery 拥有下面四种 fade 方法：

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

同时使用**fadeIn()和fadeOut()**方法可以实现淡入淡出：

$("p").click(function(){
   
	$("div").fadeIn();
	});
$("p").click(function(){
   
  $("div").fadeOut();
  })

使用fadeToggel()方法可以替代fadeIn()和fadeOut()方法：

$("button").click(function(){
   
  $("#div1").fadeToggle();
  })

fadeTo()方法 相对新增了不透明度（opacity）

$("button").click(function(){
   
  $("#div1").fadeTo(2000，0.66);
  })

滑动

jQuery 拥有以下滑动方法：

slideDown()
slideUp()
slideToggle()

动画（效果总结）

示例:

$("button").click(function(){
   
  $("div").animate({
   
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

停止动画
stop() 方法
jQuery stop() 方法用于停止动画或效果，在它们完成之前。

*方法简写&链接
一条语句中允许多个jQuery方法用在同一个元素中。

示例

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

ps：jQuery会无视空格，并拼接代码来执行代码行。
示例

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

so：代码行结束记得输入“；”

jQuery DOM操作

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

获取与修改

获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：

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

代码示例

获取：

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

设置：

$("#btn1").click(function(){
   
  $("#test").val("Hello！World！");
});

css层面的获取与修改

css() 方法设置或返回被选元素的一个或多个样式属性。
示例：$(“p”).css({“background-color”:“yellow”,“font-size”:“200%”});

attr()方法
获取：

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

设置:

$("button").click(function(){
   
  $("#w3s").attr({
   
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});