首页 > 代码库 > Jquery用法

Jquery用法

2024-07-17 06:20:34   221人阅读

向您的页面添加 jQuery 库

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

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

<head><script type="text/javascript" src="jquery.js"></script></head>
请注意，<script> 标签应该位于页面的 <head> 部分。
Jquery需要下载，如果不想下载的话，可以将src部分改成网络链接
<head><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script></head>

 

jQuery 语法

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

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

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

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

示例

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

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

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

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

提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。

文档就绪函数

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

一个小例子

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){  $("button").click(function(){    $("p").css("background-color","red");  });});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button type="button">Click me</button></body></html>

 

jQuery 是为事件处理特别设计的。
jQuery可以通知servlet
 

jQuery AJAX 实例

<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){  $("#btn1").click(function(){    $(‘#test‘).load(‘/example/jquery/demo_test.txt‘);  })})</script></head><body><h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3><button id="btn1" type="button">获得外部的内容</button></body></html>

 

jQuery $.get() 方法

<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){  $("button").click(function(){    $.get("/example/jquery/demo_test.asp",function(data,status){      alert("数据：" + data + "\n状态：" + status);    });  });});</script></head><body><button>向页面发送 HTTP GET 请求，然后获得返回的结果</button></body></html>

 

<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){  $("button").click(function(){    $.post("/example/jquery/demo_test_post.asp",    {      name:"Donald Duck",      city:"Duckburg"    },    function(data,status){      alert("数据：" + data + "\n状态：" + status);    });  });});</script></head><body><button>向页面发送 HTTP POST 请求，并获得返回的结果</button></body></html>

 


联系
我们