jQuery学习笔记

最新推荐文章于 2024-08-18 22:16:18 发布

ddwqas

最新推荐文章于 2024-08-18 22:16:18 发布

阅读量132

点赞数

分类专栏： web 文章标签： jquery ajax 自定义属性

本文链接：https://blog.csdn.net/ddwqas/article/details/102472163

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

资源

jQuery 语法

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

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

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

实例:

$(this).hide(); //隐藏当前元素
$("p").hide(); //隐藏所有 <p> 元素
$("p.test").hide(); //隐藏所有 class="test" 的 <p> 元素
$("#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 页面的 <body> 和 <head> 部分中，也可以放在其它的元素中，eg:<p>中
详细load()的用法请点击

$(function(){
    //在打开该页面后把<boby>中的内容换成从服务器拉取的
    $("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("<b>Hello world!</b>");
    });
    $("#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","测试");
});

ddwqas

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记

资源从 jquery.com 下载 jQuery 库DOM 文档对象模型(Document Object Model)）jQuery API 官方文档jQuery API 中文文档 jQuery 语法jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。jQuery代码在<script>....</script>块中写基础语法： ...
复制链接

扫一扫

专栏目录