总结几个关于 jQuery 用法

最新推荐文章于 2022-11-29 13:58:04 发布

煊琰

最新推荐文章于 2022-11-29 13:58:04 发布

阅读量164

点赞数

有关 jquery 用法

$.trim()
$.inArray()
$.getJSON()
事件委托 on
遍历closest()
ajaxSubmit()
拖拽排序 dragsort()

进入正文 ing...

1. jQuery.trim（str）

解释：从字符串的开头和结尾删除空格。

var str='   hello hi    '; 
var new_str=$.trim(str);
console.log(str.length)        // 12
console.log(new_str.length)    // 8

比如提交表单时，要获取用户的val()值，防止用户输入的空格对后续操作造成影响，这里就可以用 trim ()

var username=$.trim($('#username').val());

2.jQuery.inArray( value, array [, fromIndex ] )

它的方法类似于JavaScript的原生.indexOf()方法，没有找到匹配元素时它返回-1。如果数组第一个元素匹配value（参数），那么$.inArray()返回0。

var fruits=['apple','banner','orange','pear'];
var mine='orange';
var res=$.inArray(mine,fruits);
if(res==-1){ // 不存在
	console.log('sorry,没有你喜欢的!')
}else{
	console.log('有你的！')
}

顺便来回忆下原生js 对于字符串 indexOf 的用法

语法：stringObject.indexOf(searchvalue,fromindex)

注意:

(1) indexOf() 方法对大小写敏感

(2) 如果要检索的字符串值没有出现，则该方法返回 -1。检测到返回 0。

var str='hello hi see';
var searchvalue=str.indexOf('a');
if(searchvalue==-1){
	console.log('该字符串不存在！') // 该字符串不存在
}else{
	console.log(searchvalue)
}

3.jQuery.getJSON()

简单来说就是通过ajax请求来获取 json数据。

具体来说就是用于通过HTTP GET形式的AJAX请求获取远程JSON编码的数据。

扩展几点：


(1) JSON是一种数据格式，JS原生支持JSON格式，通过jQuery.getJSON()从服务器获得的JSON数据，jQuery会先尝试将其转为对应的JS对象。
(2) 如果请求的URL中包括"callback=?"等类似的部分，jQuery会自动将其视作JSONP，并执行对应的回调函数来获取JSON数据。
(3) 服务器返回的JSON数据必须符合严格的JSON语法，例如：所有属性名称必须加双引号，所有字符串值也必须加双引号(而不是单引号)。
(4) 该函数是通过异步方式加载数据的。
(5) 该函数属于全局jQuery 对象。

下面来看它的语法：

// 请求目标url 类型字符串  
// 发送请求传递的数据 可选 
// 请求成功执行的回调函数
jQuery.getJSON( url [, data ] [, success ] )

比如：要获取"/action.php?m=list&page=2&size=10"的JSON数据，获取成功时弹出对话框

$.getJSON( "/action.php?m=list", { page: 2, size: 10  }, function(data, textStatus, jqXHR){
    // 如果服务器返回的JSON格式的数据是 [ {"id":11, "title":"文章11"}, {"id":12, "title":"文章12"}, {"id":13, "title":"文章13"} ]
    // jQuery将获取的JSON格式数据转换为JS数组
    for(var i in data){
        var obj = data[i];
        alert( obj.title );
    }

} );

上面代码：回调函数有三个参数可以将它们console.log() 出来，附一张截图

getjson_callback参数图

4.绑定事件 on

这里首先要了解：事件委托

事件委托：
通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素；

举个例子：
比如一个宿舍的同学同时快递到了，一种方法就是他们都一个个去领取，还有一种方法就是把这件事情委托给宿舍长，让一个人出去拿回来所有快递，然后再根据收件人一一分发给每个宿舍同学；

在这里，取快递就是一个事件，每个同学指的是需要响应事件的 DOM 元素，而出去统一领取快递的宿舍长就是代理的元素，所以真正绑定事件的是这个元素，按照收件人分发快递的过程就是在事件执行中，需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。

关于事件委托详解，大家可以在这里深入了解下。

继续...

通常我们见过绑定事件 on 的用法有一下俩种

原文链接