jQuery学习笔记

资源

• 从 jquery.com 下载 jQuery 库
• DOM 文档对象模型(Document Object Model)）
• jQuery API 官方文档
• jQuery API 中文文档

jQuery 语法

• jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
• jQuery代码在块中写

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

• jQuery 使用 $ 符号作为 jQuery 的简写。若和其它框架冲突，使用noConflict() 方法来解决
• 选择符（selector）基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素
• jQuery 的 action() 执行对元素的操作

实例:

$(this).hide(); //隐藏当前元素
$("p").hide(); //隐藏所有 
 元素
$("p.test").hide(); //隐藏所有 class="test" 的 
 元素
$("#test").hide(); //隐藏所有 id="test" 的元素
$(".test").hide(); //隐藏所有带有 class="test" 属性的元素

点击查看更多selector例子

代码入口

jQuery 函数位于一个 document ready 函数中

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

简写为:

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

jQuery事件

• jQuery 是为事件处理特别设计的
• 页面对不同访问者的响应叫做事件
• 常见事件：鼠标事件,键盘事件,表单事件,文档/窗口事件
• 详见

jQuery AJAX 方法

load() 从服务器加载数据，并把返回的数据放置到指定的元素中

• load()加载的内容中的javascript代码会自动执行,而单纯的ajax加载的内容中的javascript代码则不会自动执行
• javascript可被放置在 HTML 页面的 和 部分中，也可以放在其它的元素中，eg:

  中

• 详细load()的用法请点击

$(function(){
    //在打开该页面后把中的内容换成从服务器拉取的
    $("body").load("http://127.0.0.1:10052/uuocmd/1001");
    //在打开该页面后把id="test"的元素中的内容换成从服务器拉取的
    //$("#test").load("http://127.0.0.1:10052/uuocmd/1001");
});

get() 使用 AJAX 的 HTTP GET 请求从服务器加载数据

详细get()的用法请点击

post() 使用 AJAX 的 HTTP POST 请求从服务器加载数据

详细post()的用法请点击
GET vs. POST

其它jQuery AJAX 方法

jQuery 获得内容 - text()、html() 以及 val()

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

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

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

jQuery - 设置内容text()、html() 以及 val()

$(function(){
    $("#btn1").click(function(){
        $("#test1").text("Hello world!");
    });
    $("#btn2").click(function(){
        $("#test2").html("Hello world!");
    });
    $("#btn3").click(function(){
        $("#test3").val("RUNOOB");
    });
});

jQuery - 获取/设置元素的属性值

$(function(){
    //获取值
    var tiltel=$("#testwebsite").attr("title");
    
    //设置属性值
    $("button").click(function(){
        $("#testwebsite").attr("href","./test.html");
    });
    //设置多个属性值
    $("button").click(function(){
        $("#testwebsite").attr({
            "href" : "./test.html",
            "title" :tiltel+tiltel
        });
    });

});

jQuery - 获取/设置元素的自定义属性值

自定义属性名字必须符合规则 data-*

$(function(){
    //获取属性 data-[key] = [value]
    var tiltel1=$("#testwebsite").data("title");
    //等价于
    var tiltel2=$("#testwebsite").attr("data-title");

    //设置属性
    $("#itestwebsited").data("title", "测试");
    //等价于
    $("#testwebsite").attr("data-title","测试");
});