jquery教程

jquery

jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。
jQuery库包含以下功能:

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

语法

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

  • $定义 jQuery
  • selector "查询"和"查找" HTML 元素
  • action() 执行对元素的操作

例如

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素

jQuery HTML

获取/设置内容 以及 回调函数

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

实例获取内容

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

获取内容

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

获取/设置属性 和 回调函数 - attr()

jQuery attr() 方法用于获取属性值。

实例演示如何获得链接中 href 属性的值

$("button").click(function(){
alert($("#w3s").attr("href"));
});

实例演示如何改变(设置)链接中 href 属性的值

$("button").click(function(){
  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});

jQuery 方法 attr(),也提供回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});

文档就绪事件

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中,这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数,操作可能失败。

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

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

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

选择器

元素选择器

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

在页面中选取所有 <p> 元素:
$("p")

id选择器

Query #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下:
$("#test")

.class 选择器

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

语法如下:
$(".test")

更多选择器

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×