JQuery

关注

转载最新推荐文章于 2026-09-19 15:02:03 发布 447 阅读 AI 写同款· GEO 优化 ›

jQuery——jQuery基本概念文章目录jQuery基本概念为什么要学习jQuery？jQuery初体验什么是jQuery?jQuery的版本jQuery的入口函数jQuery对象与DOM对象的区别（重点）DOM对象转换成jQuery对象：jQuery对象转换成DOM对象：练习：隔行变色案例 jQuery基本概念学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常见的效果。为什么要学习jQuery？【01-让div显示与设置内容.html】使用javascript开发过程中，有许多的缺点阅读详情

jQuery前言

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。

1 向页面添加jQuery库：

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

2 jQuery语法：

基础语法是：

$(selector).action()

文档就绪函数：

$(document).ready(function(){
--- jQuery functions go here ----
});

一 jQuery选择器

1.1 元素选择器：

方法	作用
`$("p"`)	选取 `<p>` 元素。
`$("p.intro")`	选取所有 `class="intro"` 的 `<p>` 元素。
`$("p#demo")`	选取所有 `id="demo"` 的 `<p>` 元素。

1.2 属性选择器：

方法	作用
`$("[href]")`	选取所有带有 `href` 属性的元素。
`$("[href='#']")`	选取所有带有 `href` 值等于 “`#`” 的元素。
`$("[href!='#']")`	选取所有带有 `href` 值不等于 “`#`” 的元素。
`$("[href$='.jpg']")`	选取所有 `href` 值以 “`.jpg`” 结尾的元素。

1.3 CSS选择器:

方法	作用
`$("p").css("background-color","red");`	把所有 p 元素的背景颜色更改为红色

1.4 更多选择器

方法	作用
`$(this)`	当前 `HTML` 元素
`$("p")`	所有 `<p>` 元素
`$("p.intro")`	所有 `class="intro"` 的 `<p>` 元素
`$(".intro")`	所有 `class="intro"` 的元素
`$("#intro")`	`id="intro"` 的元素
`$("ul li:first")`	每个 `<ul>` 的第一个 `<li>` 元素
`$("[href$='.jpg']")`	所有带有以 “`.jpg`” 结尾的属性值的 `href` 属性
`$("div#intro .head")`	`id="intro"` 的 `<div>` 元素中的所有 `class="head"` 的元素

二 jQuery事件函数

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

例子：

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

三 jQuery效果

语法：

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

3.1 jQuery隐藏和显示

方法	作用
`hide()`	隐藏
`show()`	显示
`toggle()`	隐藏和显示切换

（其中这三个函数可带速度和回调函数参数）

3.2 jQuery淡入淡出(入：进入浏览器，出：出去流览器)

方法	作用
`fadeIn()`	淡入
`fadeOut()`	淡出
`fadeToggle()`	淡入淡出切换
`fadeTo()`	淡的透明度to(0-1)

3.3 jQuery 滑动效果

方法	作用
`slideDown()`	向下滑动
`slideUp()`	向上滑动
`slideToggle()`	向上向下滑动切换

四 jQuery 动画

语法：

$(selector).animate({params},speed,callback);

例子

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

jQuery stop() 方法用于在动画或效果完成前对它们进行停止

$(selector).stop(stopAll,goToEnd);

Callback 函数在当前动画 100% 完成之后执行
语法:$(selector).hide(speed,callback)

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）

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

五获得HTML内容和属性

方法	作用
`text()`	设置或返回所选元素的文本内容（不包括 `HTML` 标记）
`html()`	设置或返回所选元素的内容（包括 `HTML` 标记）
`val()`	设置或返回表单字段的值
`attr()`	方法用于获取属性值。

例子

$("#test").text();
$("#test").html();
$("#test").val();
$("#w3s").attr("href");
//设置Html内容和属性
$("#test").text("hello");
$("#test").html("<h1>hello</h1>") ;
$("#test").val(hello");
$("#w3s").attr("href","http://www.baidu.com")
//通过回调函数
$("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
});

六添加新的 HTML 内容

方法	作用
`append()`	在被选元素的结尾插入内容
`prepend()`	在被选元素的开头插入内容
`after()`	在被选元素之后插入内容
`before()`	在被选元素之前插入内容

`$("p").prepend("Some prepended text.");

七删除已有的 HTML 元素

方法	作用
`remove()`	删除被选元素（及其子元素）
`empty()`	从被选元素中删除子元素

八操作CSS

方法	作用
`addClass()`	向被选元素添加一个或多个类
`removeClass()`	从被选元素删除一个或多个类
`toggleClass()`	对被选元素进行添加/删除类的切换操作
`css()`	设置或返回样式属性
`$("p").css("background-color")`	返回css属性值
`$("p").css("background-color","yellow")`	设置css属性
`$("p").css({"background-color":"yellow","font-size":"200%"})`	设置多个css

九尺寸方法

方法	作用
`width()`	方法设置或返回元素的宽度（不包括内边距、边框或外边距）
`height()`	方法设置或返回元素的高度（不包括内边距、边框或外边距）
`innerWidth()`	方法返回元素的宽度（包括内边距）
`innerHeight()`	方法返回元素的高度（包括内边距）
`outerWidth()`	方法返回元素的宽度（包括内边距和边框）
`outerHeight()`	方法返回元素的高度（包括内边距和边框）
`$(document).height()`	返回文档（HTML 文档）的宽度和高度
`$(window).height()`	返回窗口（浏览器视口）的宽度和高度

十 jQuery遍历

方法	作用	例子
`parent()`	方法返回被选元素的直接父元素	`$("span").parent()`
`parents()`	方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (`<html>`)
`children()`	方法返回被选元素的所有直接子元素
`find()`	方法返回被选元素的后代元素的指定元素	`$("div").find("span")` `$("div").find("*")` 表示`div`后的所有元素
`siblings()`	方法返回被选元素的所有同胞元素	`$("h2").siblings()` `h1` `h2` `h3`都会被找到`next()` 方法返回被选元素的下一个同胞元素
`first()`	方法返回被选元素的首个元素
`last()`	方法返回被选元素的最后一个元素
`eq()`	方法返回被选元素中带有指定索引号的元素	`$("p").eq(1)`
`filter()` `not()`	方法返回匹配标准的所有元素	`$("p").filter(".intro")`
`not()`	方法返回不匹配标准的所有元素。

十一 Ajax

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

语法：

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

例子

$("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);
  });
});

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

语法:

$.get(URL,callback)

例子

$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

11.3 `$.post(URL,data,callback)` 方法通过 HTTP POST 请求从服务器上请求数据并发送数据。

语法:

$.post(URL,data,callback)

例子

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

对应的asp文件

<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>