美文网首页
[jquery]:常用小记

[jquery]:常用小记

作者: 阿不不不不 | 来源:发表于2018-11-22 17:11 被阅读17次

    jquery函数

    .map()

    $.map() 函数用于使用指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回

    <body>
    <div></div>
    <p></p>
    <span></span>
    <script>
    $(function () { 
        var arr = [ "a", "b", "c", "d", "e" ];
        $("div").text(arr.join(", "));
        arr = $.map(arr, function(n, i){
            return (n.toUpperCase() + i);
        });
        $("p").text(arr.join(", "));
    })
    </script>
    </body>
    
    Snip20181122_10.png
    .data()

    向被选元素附加数据,或者从被选元素获取数据

    //获取当前点击的按钮的值
    $(selector).data(object)
    
    如:
    $("this").data("")
    
    .prop()

    prop() 方法设置或返回被选元素的属性和值

    返回属性的值:
    $(selector).prop(property)
    设置属性和值:
    $(selector).prop(property,value)
    使用函数设置属性和值:
    $(selector).prop(property,function(index,currentvalue))
    设置多个属性和值:
    $(selector).prop({property:value, property:value,...})
    
    如:
    //设置check框不选中
    $(",acb").prop("checked",false);
    

    事件

    .click 点击事件
    .change 值改变事件
    

    选择器

    不但表示input标签元素活着普通的表单元素,还包括select,check,text等标签元素,name为过滤属性
    $(":input[name = 'qo.currentPage']").val();
    

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

    三个简单实用的用于 DOM 操作的 jQuery 方法:
    text() - 设置或返回所选元素的文本内容
    html() - 设置或返回所选元素的内容(包括 HTML 标记)
    val() - 设置或返回表单字段的值

    补充: DOM

     HTML DOM (文档对象模型)
    
    当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 
    
    通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。 
    
    *   JavaScript 能够改变页面中的所有 HTML 元素
    
    var x=document.getElementById("intro");
    var y=x.getElementsByTagName("p");
    var x=document.getElementsByClassName("intro");
    
    *   JavaScript 能够改变页面中的所有 HTML 属性
    *   JavaScript 能够改变页面中的所有 CSS 样式
    *   JavaScript 能够对页面中的所有事件做出反应
    

    Window浏览器对象模型

    所有浏览器都支持 window 对象。它表示浏览器窗口。
    所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
    全局变量是 window 对象的属性。
    全局函数是 window 对象的方法。
    甚至 HTML DOM 的 document 也是 window 对象的属性之一:
    window.document.getElementById("header");
    与此相同:
    document.getElementById("header");
    //常用到
    windown.location.reload();刷新当前页面
    window.open("index.aspx",'top'); 只是表示打开这个页面,并不是打开并刷新index.aspx
    window.location.href="index.aspx"; 表示重新定向到新页面,同时刷新打开的这个页面;
    

    jquery ajax

    load()
    load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
    语法:
    $(selector).load(URL,data,callback);
    必需的 URL 参数规定您希望加载的 URL。
    可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
    可选的 callback 参数是 load() 方法完成后所执行的函数名称。
    
    这是示例文件("demo_test.txt")的内容:
    <h2>jQuery and AJAX is FUN!!!</h2>
    <p id="p1">This is some text in a paragraph.</p>
    下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中:
    示例
    
    $("#div1").load("demo_test.txt");
    

    get/post

    通过 HTTP GET 或 POST 请求从服务器请求数据

    jQuery $.get() 方法
    $.get() 方法通过 HTTP GET 请求从服务器上请求数据。
    语法:
    $.get(URL,callback);
    必需的 URL 参数规定您希望请求的 URL。
    可选的 callback 参数是请求成功后所执行的函数名。
    下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据:
    实例
    $("button").click(function(){
      $.get("demo_test.asp",function(data,status){
        alert("Data: " + data + "\nStatus: " + status);
      });
    });
    
    jQuery $.post() 方法
    $.post() 方法通过 HTTP POST 请求从服务器上请求数据。
    语法:
    $.post(URL,data,callback);
    必需的 URL 参数规定您希望请求的 URL。
    可选的 data 参数规定连同请求发送的数据。
    可选的 callback 参数是请求成功后所执行的函数名。
    下面的例子使用 $.post() 连同请求一起发送数据:
    实例
    $("button").click(function(){
      $.post("demo_test_post.asp",
      {
        name:"Donald Duck",
        city:"Duckburg"
      },
      function(data,status){
        alert("Data: " + data + "\nStatus: " + status);
      });
    });
    

    相关文章

      网友评论

          本文标题:[jquery]:常用小记

          本文链接:https://www.haomeiwen.com/subject/osxlqqtx.html