跳至主要內容

jQuery常用函数

Guitar大约 2 分钟
// 添加CSS样式
$obj.css("css属性名","css属性值");

DOM 属性操作

  1. val，操作 value 属性

    // 获取第一个DOM的value
$obj.val() // 等价于 $obj[0].value

// 设置所有DOM的value属性
$obj.val(值)

  2. text，类似val，操纵 innerText 属性

  3. html，类似，操作 innerHTML 属性

  4. attr，操纵任意属性

    $obj.attr("DOM属性名") // 获取 DOM 数组第一个对象的属性值
$obj.attr("DOM属性名","值") // 统一赋值

DOM 元素操作

  1. hide() 隐藏所有DOM

  2. show() 显示所有DOM

  3. remove() 删除所有DOM及其子对象

  4. empty() 删除所有DOM的子对象

  5. append 为所有DOM追加子对象

    $obj.append(innerHTML);

$obj.append("<div>我动态添加的 div</div>");

遍历

each 函数可以用来对 $obj 的所有DOM对象进行遍历操作。

$.each($obj,callback);
$obj.each(callback);

// callback 是回调函数，对每个DOM都会传入参数并执行callback
// 遍历时，将DOM元素和其所在数组$obj的下标一同传入并执行
callback = function(index, element){
    ...
}

事件处理

内置事件处理：

$obj.事件名称(callback);
// callback 与手动绑定时无异
$("button").click(fun1)
$("tr").mouseover(fun2)

自定义事件处理：

$(选择器).on("事件名",data,callback)
// data：可选，传递给callback的额外数据，json格式。
// 回调函数中接受event后，可通过event.data获取。
// callback：可选，事件发生时的回调函数

$obj.on("customerEvent",{name:"111"},function(event){
    console.log(event.data.name) // 111
})

AJAX

$.ajax(...)

// 采用json格式，配置执行参数
async：可选，默认true。布尔值，表示请求是否异步。

type：可选。默认是GET。请求的类型。不区分大小写。

data：可选。string类型，要发送到服务器的数据。通常是json字串。

url：必需。请求路径。

context：可选，上下文对象，设置回调函数中this的指向。

contentType：可选，string类型，发送数据到服务器时所使用的内容类型。
默认是"application/x-www-form-urlencoded"。

dataType：可选，string类型。期望从服务器响应的数据类型。
缺省时，jQuery 从 xml、json、text、html 这些中测试最可能的类型。
// xml：解析响应结果为DOM树。
// json：解析响应结果为json对象。
// text：解析响应结果为普通文本。
// html：解析响应结果为html文本。包含的 script 标签会在插入 dom 时执行。
// jsonp：声明采用jsonp

beforeSend：发送请求前的回调函数。function(xhr)

error：请求失败时的回调函数。function(xhr,errorInfo,exception)

success：请求成功时的回调函数。function(result,status,xhr)

complete：请求发送完成的回调函数。function (xhr,ts)
//（不论成功或失败，都会执行）

// xhr：底层发起请求的XMLHttpRequest对象。
// ts：描述请求类型的字符串

$.get(...) 和 $.post(...)

对 ajax() 进行的二次封装，简化调用。

url
data
success
dataType
Copyright ©2024-present Guitar