jQuery教程——jQuery的快速入门

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33945246/article/details/88573411

什么是 jQuery ?

jQuery 是一个 JavaScript 函数库。
jQuery 是一个轻量级的 “写的少,做的多” 的 JavaScript 库。
jQuery 库包含以下功能:

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities
    提示: 除此之外,Jquery 还提供了大量的插件。

基础jQuery 语法

jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行 “操作”(actions)。
基础语法: $(selector).action()

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

所有 jQuery 函数位于一个 document ready 函数中:

    $(document).ready(function(){
     
       // 开始写 jQuery 代码...
     
    });

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数,操作可能失败。

提示:简洁写法(与以上写法效果相同):

$(function(){//这是jQuery的入口函数
 
   // 开始写 jQuery 代码...
 
});

jQuery 选择器

  • jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
  • jQuery 选择器基于元素的 id、类、类型、属性、属性值等 “查找”(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
  • jQuery 中所有选择器都以美元符号开头:$()。
  1. #id 选择器
    当用户点击按钮后,有 id=“test” 属性的元素将被隐藏:
    实例
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
  1. .class 选择器
    用户点击按钮后所有带有 class=“test” 属性的元素都隐藏:
    实例
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

jQuery DOM 操作

jQuery 中非常重要的部分,就是操作 DOM 的能力。

三个简单实用的用于 DOM 操作的 jQuery 方法:

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

实例:

//获得内容 - text ()、html () 以及 val ()
$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

//设置内容 - text ()、html () 以及 val ()
$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:

  • addClass () - 向被选元素添加一个或多个类
  • removeClass () - 从被选元素删除一个或多个类
  • toggleClass () - 对被选元素进行添加 / 删除类的切换操作
  • css () - 设置或返回样式属性

实例

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

//使用此方法,某些标签会增添class这个属性,如果此时在配合css样式

例如:


.blue
{
        color:blue;
}
//就可以让标签达到变色的效果。

jQuery 遍历

什么是遍历?
jQuery 遍历,意为 “移动”,用于根据其相对于其他元素的关系来 “查找”(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。

下图展示了一个家族树。通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历。

遍历 DOM 树
这些 jQuery 方法很有用,它们用于遍历 DOM 树:

  • parent() :方法返回被选元素的直接父元素。
  • parents():方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 ()。
  • parentsUntil():方法返回介于两个给定元素之间的所有祖先元素。
  • children () 方法返回被选元素的所有直接子元素。
  • find () 方法返回被选元素的后代元素,一路向下直到最后一个后代。

下面的例子返回介于 <span><div> 元素之间的所有祖先元素:
实例

$(document).ready(function(){
  $("span").parentsUntil("div");
});

下面的例子返回属于 <div>后代的所有 <span>元素:
实例

$(document).ready(function(){
  $("div").find("span");
});

jQuery - AJAX 简介

AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。

jQuery load () 方法

jQuery load () 方法是简单但强大的 AJAX 方法。
load () 方法从服务器加载数据,并把返回的数据放入被选元素中。

语法:

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

必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键 / 值对集合。
可选的 callback 参数是 load () 方法完成后所执行的函数名称。

可选的data (Map) 是 发送至服务器的 key/value 数据。
实例:

$("#box").load("testa.html",{name:"bingo",sex:"man"});

可选的 callback 参数规定当 load () 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:

  • responseTxt - 包含调用成功时的结果内容
  • statusTXT - 包含调用的状态
  • xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load () 方法完成后显示一个提示框。如果 load () 方法已成功,则显示 “外部内容加载成功!”,而如果失败,则显示错误消息:

实例

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

jQuery - AJAX get () 和 post () 方法

jQuery get () 和 post () 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
HTTP 请求:GET vs. POST
两种在客户端和服务器端进行请求 - 响应的常用方法是:GET 和 POST。

  • GET - 从指定的资源请求数据
  • POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。

jQuery $.get () 方法

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

$.get(URL,callback);

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

$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert(" 数据: " + data + "\n 状态: " + status);
  });
});

jQuery $.post () 方法

$.post () 方法通过 HTTP POST 请求向服务器提交数据。
语法:

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post () 连同请求一起发送数据:
实例

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:" 菜鸟教程 ",
        url:"http://www.runoob.com"
    },
        function(data,status){
        alert(" 数据: \n" + data + "\n 状态: " + status);
    });
});

$.post函数会从页面传信息到php页面,PHP页面通过
$.get () 和 $.post () 方法是 jQuery 中的全局函数,而在此之前讲的 load () 是对 jQuery 对象进行操作的。

jQuery 杂项方法

  • data() 向被选元素附加数据,或者从被选元素获取数据
  • each() 为每个匹配元素执行函数
  • get() 获取由选择器指定的 DOM 元素
  • index() 从匹配元素中搜索给定元素
  • $.noConflict() 释放变量 $ 的 jQuery 控制权
  • $.param() 创建数组或对象的序列化表示形式(可在生成 AJAX 请求时用于 URL 查询字符串中)
  • removeData() 移除之前存放的数据
  • size() 在版本 1.8 中被废弃。返回被 jQuery 选择器匹配的 DOM 元素的数量
  • toArray() 以数组的形式检索所有包含在 jQuery 集合中的所有 DOM 元素
  • pushStack() 将一个 DOM 元素集合加入到 jQuery 栈
  • $.when() 提供一种方法来执行一个或多个对象的回调函数
展开阅读全文

没有更多推荐了,返回首页