jQuery---学习：简介与使用

最新推荐文章于 2024-07-24 11:09:48 发布

Ysmooth

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量109

点赞数 1

分类专栏： jQuery 文章标签： jquery javascript html

本文链接：https://blog.csdn.net/Ysmooth/article/details/119999834

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery：简介与使用

jQuery简介
- 什么是jQuery
- 为什么使用jQuery
一、jQuery选择器和事件
二、jQuery操作CSS

jQuery简介

jQuery库可以通过一行简单的标记被添加到网页中。

jQuery库是一个JavaScript文件，您可以使用HTML的<script>标签引用它：

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

也可以通过网络分发网络引用它，无需下载。

<head>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
</head>

提示：将下载的文件放在网页的同一目录下，就可以使用jQuery。我们没有在<script>标签中使用type="text/javascript"是因为在HTML5中不必那样做了。JavaScript是HTML5以及所有现代浏览器中的默认脚本语言！

什么是jQuery

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

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

提示：除此之外，Jquery还提供了大量的插件。

为什么使用jQuery

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

一、jQuery选择器和事件

jQuery选择器允许您对HTML元素组或单个元素进行操作。jQuery选择器允许您对HTML元素组或单个元素进行操作。jQuery选择器基于元素的id、类、类型、属性、属性值等“查找"(或选择)HTML元素。它基于已经存在的，除此之外，它还有一些自定义的选择器。jQuery中所有选择器都以美元符号开头：$()。

元素选择器$("元素")
$("p")选取所有<p>元素

<!DOCTYPE html>
<html>
<head>
<title>java学习</title>
 <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
 </script>
 <script>
   $(document).ready(function() {
      $("button").click(function() {
         $("p").hide();
      });
   });
 </script>
</head>
<body>
 <h2>这是一个标题</h2>
 <p>这是一个段落。</p >
 <p>这是另一个段落。</p >
 <button>点我</button>
</body>
</html>

jQuery #id 选择器
语法：$("#idName")
$("#test")

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>java学习</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
 $(document).ready(function() {
  $("button").click(function() {
   $("#test").hide();
  });
 });
</script>
</head>
<body>
 <h2>这是一个标题</h2>
 <p>这是一个段落</p >
 <p id="test">这是另外一个段落</p >
 <button>点我</button>
</body>
</html>

jQuery .class 选择器
语法：$(".className")
$(".test")

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>java学习</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
 $(document).ready(function() {
  $("button").click(function() {
   $(".test").hide();
  });
 });
</script>
</head>
<body>
 <h2 class="test">这是一个标题</h2>
 <p class="test">这是一个段落。</p >
 <p>这是另外一个段落。</p >
 <button>点我</button>
</body>
</html>

jQuery事件方法语法

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

$("p").click();

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

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

常用的jQuery事件方法

$(document).ready()方法允许我们在文档完全加载完后执行函数。

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

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

click()方法是当按钮点击事件被触发时会调用一个函数。该函数在用户点击HTML元素时执行。
dblclick()方法是当按钮双击事件被触发时会调用一个函数。
在下面的实例中，当点击事件在某个<p>元素上触发时，隐藏当前的<p>元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>java学习</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>如果你点我，我就会消失。</p >
<p>点我消失!</p >
<p>点我也消失!</p >
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>java学习手册</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
 $(document).ready(function() {
  $("input").focus(function() {
   $(this).css("background-color", "#cccccc");

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

  });
 });
</script>
</head>
<body>
 Name:
 <input type="text" name="fullname">
 <br> Email:
 <input type="text" name="email">
</body>
</html>

获取和设置内容

文档对象模型(Document Object Model)操作

DOM定义访问HTML和XML文档的标准
获得内容——text()、html()以及val()是三个简单实用的用于DOM操作的jQuery方法：
text()——设置或返回所选元素的文本内容
html()——设置或返回所选元素的内容(包括HTML标记)
val()——设置或返回表单字段的值
attr()——获取属性值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#runoob").attr("href"));
  });
});
</script>
</head>
<body>
<p>< a href=" " id="runoob">baidu</ a></p >
<button>显示 href 属性的值</button>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
</head>
<body>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p >
<button id="btn1">显示文本</button>
<button id="btn2">显示HTML的代码</button>
</body>
</html>

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("值为: " + $("#test").val());
  });
});
</script>
</head>
<body>
<p>名称: <input type="text" id="test" value="baidu"></p >
<button>显示值</button>
</body>

</html>

添加元素

通过jQuery，可以很容易地添加新元素/内容。用于添加新内容的四个jQuery方法：
append()——在被选元素的结尾插入内容
prepend()——在被选元素的开头插入内容
after()——在被选元素之后插入内容
before()——在被选元素之前插入内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
 $(document).ready(function() {
  $("#btn1").click(function() {
   $("p").append(" <b>追加文本</b>。");
  });
  $("#btn2").click(function() {
   $("ol").append("<li>追加列表项</li>");
  });
 });
</script>
</head>
<body>
 <p>这是一个段落。</p >
 <p>这是另外一个段落。</p >
 <ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
 </ol>
 <button id="btn1">添加文本</button>
 <button id="btn2">添加列表项</button>
</body>

</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>java学习手册</title>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
 
</script>
<script>
 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); // 追加新元素
 }
</script>
</head>
<body>
 <p>这是一个段落。</p >
 <button onclick="appendText()">追加文本</button>
</body>
</html>

删除元素

通过jQuery，可以很容易地删除已有的HTML元素。如需删除元素和内容，一般可使用以下两个jQuery方法：
remove()-删除被选元素(及其子元素)
empty()-从被选元素中删除子元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
 $(document).ready(function() {
  $("button").click(function() {
   $("#div1").remove();
  });
 });
</script>
</head>
<body>
 <div id="div1"
  style="height: 100px; width: 300px; border: 1px solid black; background-color: yellow;">
  这是 div 中的一些文本。
  <p>这是在 div 中的一个段落。</p >
  <p>这是在 div 中的另外一个段落。</p >
 </div>
 <br>
 <button>移除div元素</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
 $(document).ready(function() {
  $("button").click(function() {
   $("p").remove(".italic");
  });
 });
</script>
</head>
<body>
 <p>这是一个段落。</p >
 <p class="italic">
  <i>这是另外一个段落。</i>
 </p >
 <p class="italic">
  <i>这是另外一个段落。</i>
 </p >
 <button>移除所有 class="italic" 的 p 元素。</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
 $(document).ready(function() {
  $("button").click(function() {
   $("#div1").empty();
  });
 });
</script>
</head>
<body>
 <div id="div1"
  style="height: 100px; width: 300px; border: 1px solid black; background-color: yellow;">
  这是 div 中的一些文本。
  <p>这是在 div 中的一个段落。</p >
  <p>这是在 div 中的另外一个段落。</p >
 </div>
 <br>
 <button>清空div元素</button>
</body>
</html>

二、jQuery操作CSS

通过jQuery，可以很容易地对CSS元素进行操作。jQuery拥有若干进行CSS操作的方法。我们将学习下面这些：
addClass()-向被选元素添加一个或多个类

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
   <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
   </script>
<script>
 $(document).ready(function() {
   $("button").click(function() {
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
 });
</script>
  <style type="text/css">
  .important {
     font-weight: bold;
     font-size: xx-large;
   }
  .blue {
     color: blue;
   }
  </style>
</head>
  <body>
    <h1>标题 1</h1>
    <h2>标题 2</h2>
    <p>这是一个段落。</p >
    <p>这是另外一个段落。</p >
    <div>这是一些重要的文本!</div>
    <br>
    <button>为元素添加 class</button>
  </body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
 
</script>
<script>
 $(document).ready(function() {
  $("button").click(function() {
   $("body div:first").addClass("important blue");
  });
 });
</script>
<style type="text/css">
.important {
 font-weight: bold;
 font-size: xx-large;
}
.blue {
 color: blue;
}
</style>
</head>
<body>
 <div id="div1">这是一些文本。</div>
 <div id="div2">这是一些文本。</div>
 <br>
 <button>为第一个 div 元素添加类</button>
</body>

</html>

removeClass()-从被选元素删除一个或多个类

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
 
</script>
<script>
 $(document).ready(function() {
  $("button").click(function() {
   $("h1,h2,p").removeClass("blue");
  });
 });
</script>
<style type="text/css">
.important {
 font-weight: bold;
 font-size: xx-large;
}
.blue {
 color: blue;
}
</style>
</head>
<body>
 <h1 class="blue">标题 1</h1>
 <h2 class="blue">标题 2</h2>
 <p class="blue">这是一个段落。</p >
 <p class="important">这是另外一个段落。</p >
 <br>
 <button>从元素中移除 class</button>
</body>

</html>

toggleClass()-对被选元素进行添加/删除类的切换操作

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
 $(document).ready(function() {
  $("button").click(function() {
   $("h1,h2,p").toggleClass("blue");
  });
 });
</script>
  <style type="text/css">
  .blue {
    color: blue;
   }
  </style>
</head>
  <body>
    <h1 class="blue">标题 1</h1>
    <h2 class="blue">标题 2</h2>
    <p class="blue">这是一个段落。</p >
    <p>这是另外一个段落。</p >
    <br>
    <button>切换 class</button>
  </body>
</html>

css()-设置或返回样式属性
css()方法设置或返回被选元素的一个或多个样式属性。如需返回指定的CSS属性的值，请使用如下语法：

css("propertyname");

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
 $(document).ready(function() {
  $("button").click(function() {
   alert("背景颜色 = " + $("p").css("background-color"));
  });
 });
</script>
</head>
<body>
 <h2>这是一个标题</h2>
 <p style="background-color: #ff0000">这是一个段落。</p >
 <p style="background-color: #00ff00">这是一个段落。</p >
 <p style="background-color: #0000ff">这是一个段落。</p >
 <button>返回第一个 p 元素的 background-color</button>
</body>
</html>

如需设置指定的CSS属性，请使用如下语法：css("propertyname","value");
设置多个CSS属性，请使用如下语法：
css({"propertyname","value","propertyname","value",...});
下面的例子将为所有匹配元素设置background-color值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
 $(document).ready(function() {
  $("button").click(function() {
   $("p").css("background-color", "yellow");
  });
 });
</script>
</head>
<body>
 <h2>这是一个标题</h2>
 <p style="background-color: #ff0000">这是一个段落。</p >
 <p style="background-color: #00ff00">这是一个段落。</p >
 <p style="background-color: #0000ff">这是一个段落。</p >
 <p>这是一个段落。</p >
 <button>设置 p 元素的 background-color</button>
</body>
</html>

Callback函数

当动画100%完成后，即调用Callback函数。典型的语法：
$(selector).hide(speed,callback)
callback参数是一个在hide操作完成后被执行的函数。

<html>
<head>
<script type="text/javascript" 
 src=" https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js ">
</script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(1000,function(){
    alert("The paragraph is now hidden");
    });
  });
});
</script>
</head>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p >
</body>

</html>

动画

jQuery stop()方法用于在动画或效果完成前对它们进行停止。jQuery stop()方法用于停止动画或效果，在它们完成之前。stop()方法适用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画。
语法：$(selector).stop(stopAll,goToEnd);
可选的stopAll参数规定是否应该清除动画队列。默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的goToEnd参数规定是否立即完成当前动画。默认是false。因此，默认地，stop()会清除在被选元素上指定的当前动画。
下面的例子演示stop()方法，不带参数：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip

{
padding:5px;
text-align:center;
background-color:#e5eecc;

border:solid 1px #c3c3c3;

}
#panel

{
padding:50px;
display:none;
}
</style>
</head>
<body>
 
<button id="stop">停止滑动</button>
<div id="flip">点击这里，向下滑动面板</div>
<div id="panel">Hello world!</div>
</body>
</html>

Chaining

通过jQuery，您可以把动作/方法链接起来。Chaining允许我们在一条语句中允许多个jQuery方法(在相同的元素上)。直到现在，我们都是一次写一条jQuery语句(一条接着另一条)。不过，有一种名为链接(chaining)的技术，允许我们在相同的元素上运行多条jQuery命令，一条接着另一条。这样的话，浏览器就不必多次查找相同的元素。如需链接一个动作，您只需简单地把该动作追加到之前的动作上。
实例代码如下，下面的例子把css(), slideUp(), slideDown()链接在一起。"p1"元素首先会变为红色，然后向上滑动，然后向下滑动：：

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red")
    .slideUp(2000)
    .slideDown(2000);
  });
});
</script>
</head>
<body>
<p id="p1">jQuery 乐趣十足！</p >
<button>点击这里</button>
</body>

</html>

AJAX

什么是AJAX?

AJAX=异步JavaScript和 XML(Asynchronous JavaScript and XML) 简短地说，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。使用AJAX的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

关于jQuery与AJAX

jQuery提供多个与AJAX有关的方法。通过jQuery AJAX方法，您能够使用 HTTP Get和HTTP Post 从远程服务器上请求文本、HTML、XML或JSON-同时您能够把这些外部数据直接载入网页的被选元素中。如果没有jQuery，AJAX编程还是有些难度的。编写常规的AJAX代码并不容易，因为不同的浏览器对 AJAX的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现AJAX功能。

GET vs POST

两种在客户端和服务器端进行请求-响应的常用方法是：GET和 POST。

GET-从指定的资源请求数据
POST-向指定的资源提交要处理的数据GET基本上用于从服务器获得(取回)数据。

注释：GET 方法可能返回缓存数据。POST也可用于从服务器获取数据。不过，POST方法不会缓存数据，并且常用于连同请求一起发送数据。

jQuery $.get()方法
$.get()方法通过 HTTP GET 请求从服务器上请求数据。
语法：$.get(URL,callback);

必需的URL 参数规定希望请求的URL。可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用$.get()方法从服务器上的一个文件中取回数据：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>java学习</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("button").click(function(){
  $.get("/try/ajax/demo_test.php",function(data,status){
   alert("数据: " + data + "\n状态: " + status);
  });
 });
});
</script>
</head>
<body>
<button>发送一个 HTTP GET 请求并获取返回结果</button>
</body>

</html>

jQuery $.post()方法
$.post()方法通过 HTTP POST 请求向服务器提交数据。
语法：$.post(URL,data,callback);
必需的URL参数规定您希望请求的URL。可选的data参数规定连同请求发送的数据。可选的 callback参数是请求成功后所执行的函数名。
下面的例子使用$.post()连同请求一起发送数据：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>java学习</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("button").click(function(){
  $.post("/try/ajax/demo_test_post.php",{
   name:"菜鸟教程",
   url:"http://www.runoob.com"
  },
  function(data,status){
   alert("数据: \n" + data + "\n状态: " + status);
  });
 });
});
</script>
</head>
<body>
<button>发送一个 HTTP POST 请求页面并获取返回内容</button>
</body>
</html>

Ysmooth

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery---学习：简介与使用

jQuery：简介与使用jQuery简介什么是jQuery为什么使用jQuery一、jQuery选择器和事件jQuery事件方法语法常用的jQuery事件方法获取和设置内容文档对象模型(Document Object Model)操作添加元素删除元素二、jQuery操作CSSCallback函数ChainingAJAX什么是AJAX?关于jQuery与AJAXGET vs POSTjQuery简介jQuery库可以通过一行简单的标记被添加到网页中。jQuery库是一个JavaScript文件，您可以
复制链接

扫一扫

专栏目录