1、jQuery简介

最新推荐文章于 2025-06-24 10:41:47 发布

李家少年

最新推荐文章于 2025-06-24 10:41:47 发布

阅读量358

点赞数

分类专栏： jQuery

jQuery 专栏收录该内容

4 篇文章

订阅专栏

概要

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

jQuery中 $ 是什么意思？
function $(){};  $()就是一个函数名，查找的意思。

jQuery下载：
http://jquery.com/download/#Download_jQuery
分为压缩和未压缩的，例如我下的jquery-3.1.0.min.js是压缩的，jquery-3.1.0.js是未压缩的。
如果不愿意下到本地，可以远程访问大公司的，比如谷歌。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>

例1 ：点击段落隐藏

在桌面新建文件夹jquery，在里面放入jquery-1.4.4.min.js（这是从别处拷贝的）
之后新建 1.html
注意点：在每个方法后加分号，例如ready();click();hide();

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
  $("p").click(function(){
  $(this).hide();
  });
});
</script>
</head>

<body>
<p>If you click on me, I will disappear.</p>
</body>

</html>

jQuery库可以干嘛？

jQuery 库包含以下特性：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

jQuery选择器

参考：jQuery 参考手册 - 选择器
http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

所有 jQuery 函数位于一个 document的ready 函数中：这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

// jQuery 元素选择器
$(this).hide()
隐藏当前的 HTML 元素。
$("#test").hide()
元素都有id属性，隐藏 id="test" 的元素。
$("p").hide()
隐藏所有 <p> 元素。
$(".test").hide()
元素有class属性，隐藏所有 class="test" 的元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
$("ul li:first")   每个 <ul> 的第一个 <li> 元素
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

// jQuery 属性选择器
例：href 是一个属性，比如超链接标记<a></a>中就有href属性。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

// jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：
$("p").css("background-color","red");

jQuery事件

事件参考手册：
http://www.w3school.com.cn/jquery/jquery_ref_events.asp

前面的例子都是直接在页面中调用这些函数，但是若希望 jQuery 函数易于维护，那么请把 jQuery 函数放到独立的 .js 文件中。
之后引入 .js文件即可。

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

这里写图片描述

jQuery 效果

效果参考手册：
http://www.w3school.com.cn/jquery/jquery_ref_effects.asp

1、hide() show()
例：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
  $("p").hide();
  });
  $("#show").click(function(){
  $("p").show();
  });
});
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
</html>

2、切换：
toggle() 方法，点击时切换显示还是隐藏。
$(“p”).toggle();

3、淡入淡出
jQuery 拥有下面四种 fade 方法：
fadeIn()：淡入
fadeOut()：淡出
fadeToggle()：淡入淡出间切换
fadeTo()：用某个速度渐变到给定的不透明度（值介于 0 与 1 之间）

例：
$(“#div1”).fadeToggle();

$(“#div2”).fadeTo(“slow”,0.4);

4、滑动
jQuery 拥有以下滑动方法：
slideDown()
slideUp()
slideToggle()

5、动画
http://www.w3school.com.cn/jquery/jquery_animate.asp

6、某对象多个动作链接起来

<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red")
      .slideUp(2000)
      .slideDown(2000);
  });
});
</script>