[jquery]:常用小记

2018-11-22 本文已影响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);
  });
});