jQuery入门1.0

网页中添加 jQuery

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

jQuery 语法

jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。

基础语法: $(selector).action()

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

实例:

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

  • $("p").hide() - 隐藏所有 <p> 元素

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

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

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

jQuery 选择器

元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 <p> 元素:

$("p")

#id选择器

通过html的id选择元素,页面元素的id是唯一的,所以如果你要选区唯一的元素就使用id选择器

通过 id 选取元素语法如下:

$("#test")

.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

$(".test")

jQuery 事件方法语法

在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件:

$("p").click();

jQuery parent() 方法

parent() 方法返回被选元素的直接父元素。

该方法只会向上一级对 DOM 树进行遍历。

下面的例子返回每个 <span> 元素的的直接父元素:

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

jQuery parents() 方法

parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。

下面的例子返回所有 <span> 元素的所有祖先:

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

jQuery parentsUntil() 方法

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

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

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

jQuery children() 方法

children() 方法返回被选元素的所有直接子元素。

该方法只会向下一级对 DOM 树进行遍历。

下面的例子返回每个 <div> 元素的所有直接子元素:

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); }); });

jQuery AJAX 方法

AJAX 是一种与服务器交换数据的技术,可以在不重新载入整个页面的情况下更新网页的一部分。

下面的表格列出了所有的 jQuery AJAX 方法:

方法描述
$.ajax()执行异步 AJAX 请求
$.ajaxPrefilter()在每个请求发送之前且被 $.ajax() 处理之前,处理自定义 Ajax 选项或修改已存在选项
$.ajaxSetup()为将来的 AJAX 请求设置默认值
$.ajaxTransport()创建处理 Ajax 数据实际传送的对象
$.get()使用 AJAX 的 HTTP GET 请求从服务器加载数据
$.getJSON()使用 HTTP GET 请求从服务器加载 JSON 编码的数据
$.getScript()使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript
$.param()创建数组或对象的序列化表示形式(可用于 AJAX 请求的 URL 查询字符串)
$.post()使用 AJAX 的 HTTP POST 请求从服务器加载数据
ajaxComplete()规定 AJAX 请求完成时运行的函数
ajaxError()规定 AJAX 请求失败时运行的函数
ajaxSend()规定 AJAX 请求发送之前运行的函数
ajaxStart()规定第一个 AJAX 请求开始时运行的函数
ajaxStop()规定所有的 AJAX 请求完成时运行的函数
ajaxSuccess()规定 AJAX 请求成功完成时运行的函数
load()从服务器加载数据,并把返回的数据放置到指定的元素中
serialize()编码表单元素集为字符串以便提交
serializeArray()编码表单元素集为 names 和 values 的数组

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值