1.1.jQuery介绍
jQuery是一个Javascript库,是对于ECMAScript、dom、bom的一个浅封装,让用户更方便操作。 jQuery功能: 使用CSS选择器进行元素查询 事件机制 Dom操作 属性操作 工具方法 Ajax 我们将会从以上几个点展开讲述
学习jQuery之前需具备顶基础知识:
-
HTML
-
CSS
-
JavaScript
jQuery库包含**以下功能:**
-
HTML选取
-
HTML元素操作
-
CSS操作
-
HTML事件函数
-
JavaScript特效和函数
-
HTML DOM遍历和修改
-
AJAX
提示:除此之外,Jquery还提供了大量的插件,目前jQuery兼容于所有主流浏览器
1.2.jQuery安装
jQuery安装十分简单,只需要将jQuery的库导入到html中即可,我们可以下载下来也可以使用CDN资源。 一般我们在下载或者使用cdn资源的时候,都会让我们选择jquery.js 与 jquery.min.js版本,它们的区别在于jquery.min.js是经过压缩的,体积更小,适用于部署环境。而jquery适用于源码研究,我们对于jquery的学习,应该要上升到源码层次。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-
网页中添加jQuery
-
从jquery.com下载jQuery库
-
从CDN中载入jQuery
-
-
下载jQuery
有两个版本的jQuery可供下载:
-
Production version -用于实际的网站中,已被精简和压缩
-
Development version -用于测试和开发(未压缩,是可读的代码)
以上两个版本都可以在jQuery官网下载
jQuery库是一个JavaScript文件,可以使用HTML的<script>
标签引用,但需要注意引入的jQuery的版本要和API手册版本/开发使用一致
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>01-HelloWorld.html</title> <!-- 本地引入 --> <script src="../../jquery-3.5.1/jquery-3.5.1.js"></script> <!-- 通过cdn引入 --> <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> --> <script> // 1.原生JS的固定写法 window.onload = function () { alert('helloworld -- js') } // 2.jQuery的固定写法 $(document).ready(function () { alert('helloworld -- jquery') }) </script> </head> <body> </body> </html>
1.3.jQuery函数
通过"jQuery"和"$"来调用jQuery函数 $(选择器) 通过选择器选择到符合条件的Element元素,将其保存到jQuery对象 $(html片段) 将html片段转换成Element元素,然后再封装成一个jQuery对象 $(Element元素) 将Element元素转换成一个jQuery对象 $(匿名函数) 匿名函数在文档加载完毕以后执行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>02-jQuery的核心函数和核心对象.html</title> <!-- 1.jQuery核心函数 简称:jQuery函数($/jQuery) 引入jQuery库以后,直接使用$/jQuery即可 当函数用:$(params) 当对象用的时候:$.each() 2.jQuery核心对象 简称:jQuery对象 $() 得到jQuery对象:执行jQuery函数返回的就是jQuery对象 使用jQuery对象:$obj.xxx() --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="../../jquery-3.5.1/jquery-3.5.1.js"></script> <script> $(function () { // jQuery核心函数 console.log($, typeof $); // jQuery核心对象 console.log($(), $() instanceof Object); }) </script> </head> <body> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>03-比较原生js和jQuery.html</title> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; border: 1px solid black; } </style> <!-- 需求 通过原生js和jQuery来获取到三个div 并且修改他们的背景颜色 --> <!-- 导入cdn --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="../../jquery-3.5.1/jquery-3.5.1.js"></script> <script> // JS原生DOM window.onload = function () { // 1.利用原生JS来查找DOM元素 var div1 = document.getElementsByTagName('div')[0] var div2 = document.getElementsByClassName('box1')[0] var div3 = document.getElementById('box2') // console.log(div1); // console.log(div2); // console.log(div3); // 2.利用原生JS修改背景颜色 // div1.style.backgroundColor = 'red' // div2.style.backgroundColor = 'yellow' // div3.style.backgroundColor = 'blue' } // jQuery $(document).ready(function () { // 1.通过jQuery来查找元素 var $div1 = $('div:first') var $div2 = $('.box1') var $div3 = $('#box2') // console.log($div1); // console.log($div2); // console.log($div3); // 2.利用jQuery来修改背景颜色 $div1.css({backgroundColor: 'red'}) $div2.css({ backgroundColor: 'yellow', width: '200px', height: '200px' }) $div3.css({backgroundColor: 'blue'}) }) </script> </head> <body> <div></div> <div class="box1"></div> <div id="box2"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>04-jQuery和js入口函数的区别.html</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="../../jquery-3.5.1/jquery-3.5.1.js"></script> <script> /* 前提:图片或者是资源是通过网络数据获取的 需求:获取网络图片的宽度或高度 区别一 原生JS和jQuery入口函数的加载模式不同 原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行 jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕 */ // 原生JS入口函数 window.onload = function () { // 获取img var img = document.getElementsByTagName('img')[0] //var img=document.images[0]; // 通过原生JS拿到DOM元素的宽高 var width = window.getComputedStyle(img).width console.log('JS' ,width) } // jQuery入口函数 $(document).ready(function () { // 获取img var $img = $('img') // console.log($img); // 通过jQuery来获取img的宽度 var $width = $img.width() console.log('jquery', $width);//因网速、浏览器缓存,结果可能是null或者0或者470 }) /* 区别2 原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的 jQuery如果编写了多个入口函数,后面的不会覆盖前面的 */ // 原生JS入口函数 // 后面覆盖前面 window.onload = function () { alert('第一个入口函数js') } window.onload = function () { alert('第二个入口函数js') } // jQuery入口函数 // 依次执行 $(document).ready(function () { alert('第一个入口函数jquery') }) $(document).ready(function () { alert('第二个入口函数jquery') }) /* jQuery入口函数的写法: */ // 第一种写法 $(document).ready(function () { alert('hello jQuery') }) // 第二种写法 jQuery(document).ready(function () { alert('hello jQuery') }) // 第三种写法 (推荐写法) $(function () { alert('hello jQuery') }) // 第四种写法 jQuery(function () { alert('hello jQuery') }) </script> </head> <body> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594098348314&di=40aafcc3476781ff40766f2e9b5c165a&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F62%2F02%2F01300542526392139955025309984.jpg" alt=""> </body> </html>
1.4.jQuery对象
jQuery对象是类数组对象,jQuery的方法都是对类数组中的元素的批量操作 注意:jQuery对象可以调用jQuery.prototype中声明的方法,普通的Element元素则不能调用。在使用jquery的时候,拿到一个对象务必要搞明白该对象是Element元素还是jQuery实例 如下代码,this是Element元素,如果想调用jQuery方法,需要使用$()将其转换为jQuery实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>05-jQuery和JS的基本使用小案例.html</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="../../jquery-3.5.1/jquery-3.5.1.js"></script> <script> // 原生JS window.onload = function () { var btn1 = document.getElementById('btn1')// 获取id为btn1的元素 btn1.onclick = function () {// btn1设置点击事件 console.log("btn1",this); // 获取到input输入框中的值 var username = document.getElementById('username').value alert(username) } } // jQuery /* jQuery核心函数:($/jQuery) jQuery核心对象:执行$()返回的对象 */ $(function () { $('#btn2').click(function () {// 获取id为btn2的按钮,设置点击事件 console.log("btn2",this,$(this),$('#btn2')); // 获取到input输入框中的值 var username = $('#username').val() alert(username) }) }) </script> </head> <body> <!-- 需求:点击按钮,提示输入框中输入的值 --> 用户名:<input type="text" id="username"><br> <button id="btn1">确定(原生)</button> <button id="btn2">确定(jQuery)</button> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>06-jQuery核心函数与对象的使用.html</title> </head> <body> <div> <button id="btn">测试</button><br> <input type="text" name="msg1"><br> <input type="text" name="msg2"><br> </div> <!-- 1.jQuery核心函数作为一般函数调用的时候:$(param) 1-参数为函数: 当DOM加载完成后,执行此回调函数 2-参数为选择器字符串:查找所有匹配的标签,并将它们封装成jQuery对象 3-参数为DOM对象:将DOM对象封装成jQuery对象 4-参数为HTML标签字符串(很少用):创建标签对象并封装成jQuery对象 2.jQuery静态方法,$作为对象使用:$.xxx() 1-$.each() 隐式遍历数组 2-$.trim 取出两端的空格 等等 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> // 需求一:点击按钮,显示按钮的文本标题,增加一个新的输入框 // 1.jQuery入口函数 // 1-参数为函数: 当DOM加载完成后,执行此回调函数 $(function () { //绑定文档加载完成的监听 // 2.获取id为btn的按钮 // 2-参数为选择器字符串:查找所有匹配的标签,并将它们封装成jQuery对象 $('#btn').click(function () { // this是什么? 发生事件的dom元素对象 当前就是btn按钮 // 3.获取button按钮中的标题 // alert(this.innerHTML) // jQuery获取元素内容 // 3-参数为DOM对象:将DOM对象封装成jQuery对象 alert($(this).html()) // 增加新的输入框 // 4-参数为HTML标签字符串:创建标签对象并封装成jQuery对象 $('<input type="text" name="msg3">').appendTo('div') }) // 需求二 遍历输出数组中的所有元素值 var arr = [1,2,3,4,5,6] // 1-$.each() 隐式遍历数组 $.each(arr, function (index, item) { console.log(index, item); }) // 需求三 去掉 my jQuery 两端的空格 var str = ' my jQuery ' console.log('----'+str.trim()+'-------'); console.log('----' + $.trim(str) + '-------'); }) </script> </body> </html>
2.jQuery选择器
jQuery的选择器与CSS3中的选择器几乎完全一致,这里就不再赘述。总体梳理:
基本选择器
层次选择器
伪类选择器
伪元素选择器器
属性选择器 具体用法如下:
$("form") $("ul.nav > li")
jQuery中所有选择器都以美元符号开头:$()
例如:
元素选择器
在页面中选取所有<div>
元素
$("div")
实例 用户点击按钮后所有<div>
元素都隐藏
$(document).ready(function(){ $("button").click(function(){ $("div").hide(); }); });
#id选择器 通过 id 选取元素语法如下
$("#div1")
实例 用户点击按钮后,有id="div1"属性都元素都将被隐藏
$(document).ready(function(){ $("button").click(function(){ $("#div1").hide(); }); });
.class选择器 jQuery 类选择器可以通过指定的 class 查找元素
$(".box")
实例 用户点击按钮后所有带有 class="box" 属性的元素都隐藏
$(document).ready(function(){ $("button").click(function(){ $(".box").hide(); }); });
更多实例:
3.jQuery事件
jQuery的事件绑定与Element元素不同,不可以使用onxxx属性,也不能使用addEventListener,而是使用on(),可以理解为on是对于Element元素事件绑定的封装。 on()也支持事件代理。
on(event,[selector],[data],fn)
off(event,[selector],fn)
one(event,[selector],fn)
trigger(event,[data]) jQuery的事件绑定还支持快捷绑定
click([data],fn) …
3.1.事件的基本使用
jQuery事件方法语法
-
on() off()
-
bind() unbind()
-
快捷绑定click()等
在jQuery中,大多数DOM事件都有一个等效都jQuery方法
页面中指定一个点击事件:
$("p").click();
下一步是定义触发事件的内容:
¥$("p").click(function(){ //动作触发后执行都代码!! })
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>01-事件的基本使用.html</title> </head> <body> <button>新增</button> <button>修改</button> <div>标题</div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script> <script> $(function () { // 第一个参数 事件类型 第二个参数(可选的) 要传递的参数 第三个参数 事件处理函数 /* $('button').bind('click', '123', function (event) { console.log('button点击'); console.log(event); console.log(event.data);//123 }) */ // 点击新增或者修改按钮,改变div内部的内容 $('button').bind('click', function (event) { // 通过event.target(DOM节点,可以拿到内部的内容) 来判断当前是哪个按钮点击 // console.log(event.target); // console.log(event.target.innerHTML); if($(event.target).html() === '新增'){ $('div').html('新增学生信息') }else{ $('div').html('修改学生信息') } }) // 解绑 unbind() 无参时 解除绑定的所有事件 // $('button').unbind() // 解绑 unbind('click') 传递参数->事件类型 // $('button').unbind('click') // 解绑 unbind() 解绑click对应的事件 function clickEvent() { console.log('我是click事件'); } $('button').click(clickEvent) // 第一个参数 事件类型 第二个参数 事件名称 $('button').unbind('click', clickEvent) }) </script> </body> </html>
3.2.事件代理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>02-事件代理.html</title> </head> <body> <button>点我啊</button> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script> <script> // 点击body // 第一个参数 事件类型 第二个参数(可选) 将要代理谁 第三个参数(可选) 传递给事件内部的参数 第四个参数 事件处理程序 // $('body').on('click', function (event) { // console.log(event); // }) // button做代理 $('body').on('click','button', [1,2], function (event, a, b) { console.log(event, a, b); }) // 事件解绑 移除代理 使用off // $('body').off('click', 'button') // 模拟事件执行 trigger 第一个参数 事件类型 第二个参数 数组参数(传递给形参) $('button').trigger('click', [1, 2]) </script> </body> </html>
3.3.事件类型
常用**的jQuery事件快速绑定方法**
1.$(document).ready()
$(document).ready()方法允许我们在文档完全加载完后执行函数
2.click()
click()方法是当按钮点击事件被触发时会调用一个函数
3.dbclick()
当双击元素时,会发生dbclick事件
4.mouseenter()
当鼠标指针穿过元素时,会发生mouseenter事件
5.mouseleave()
当鼠标指针离开元素时,会发生mouseleave事件
6.mousedown()
当鼠标指针移动到元素上方,并按下鼠标按键时,会发生mousedown事件
7.mouseup()
当元素上松开鼠标按钮时,会发生mouseup事件
8.hover()
hover()方法用于模拟光标悬停事件
当鼠标移动到元素上时,会触发指定当第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定当第二个函数(mouseleave)
9.blur()
当元素失去焦点时,发生blur事件
10.keydown()
键盘事件:按键按下事件
11.keyup()
键盘事件:按键抬起事件
12.表单事件等等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>03-事件类型方法.html</title> </head> <body> <p>一段文字</p> <button>点我啊</button><br> 输入一些东西: <input type="text"> <form action=""> name: <input type="text" value="zhangsan"> <span style="display: none;">请输入你的名字</span> <br> <input type="submit" value="提交"> </form> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script> <script> $(function () { //click() 鼠标单击事件 //当点击事件在某个<p>元素上触发时,隐藏当前当<p>元素 $("p").click(function(){ $(this).hide(); }); // dblclick() 鼠标双击事件 $('button').dblclick(function () { alert('dblclick') }) // mouseenter() 鼠标进入事件 不支持子元素 $('button').mouseenter(function () { console.log('mouseenter:你的鼠标移到了button的元素上!'); $('button').css('background', 'red') }) // mouseleave() 鼠标离开事件 不支持子元素 $('button').mouseleave(function () { console.log('mouseleave:再见,你的鼠标离开了该button'); $('button').css('background', 'blue') }) // mousedown() 当鼠标指针移动到元素上方,并按下鼠标按键时 $('button').mousedown(function () { console.log('mousedown:鼠标在该按钮上按下'); }) // mouseup() 当元素上松开鼠标按钮时,会发生mouseup事件 $('button').mouseup(function () { console.log('mouseup:鼠标在button上松开'); }) // hover() 鼠标悬停事件 $('button').hover(function () { console.log('hover'); $(this).css("background-color","#cccccc"); }) //blur() 失去焦点 $("input").blur(function(){ $(this).css("background-color","#ffffff"); }); // 键盘事件 // keydown 按键按下事件 $('input').keydown(function () { $('input').css('background', 'blue') }) // keyup 按键抬起事件 $('input').keyup(function () { $('input').css('background', 'yellow') }) // submit() $('form').submit(function () { alert('submit') return false; }) // focus $('input:text').focus(function () { // 动画 $('span').css('display','inline').fadeOut(3000) }) }) </script> </body> </html>
4.jQueryDOM操作
jQuery中提供了一系列的操作DOM节点的api,用于解决DOM原生API无法进行批量操作并且功能性较差的弊端。 插入方法:append、appendTo、prepend、prependTo、after、before、insertBefore、insertAfter 包裹方法:wrap、unwrap、wrapAll、wrapInner、 替换方法:replaceWith、replaceAll 移除方法:empty、remove、detach 克隆方法:clone
通过 jQuery,可以很容易地添加新元素/内容。
我们将学习用于添加新内容的四个 jQuery 方法:
-
append() - 在被选元素的结尾插入内容(仍然在该元素的内部)
-
prepend() - 在被选元素的开头插入内容
-
after() - 在被选元素之后插入内容
-
before() - 在被选元素之前插入内容
-
等等
复制节点:
原生DOM有 cloneNode(true/false) 浅复制false 深复制true。是否复制内部内容,并不涉及事件的复制。默认浅复制
jQuery对象有 clone(true/false) 浅复制false 深复制true。会复制内容,是否复制事件。默认浅复制
属性操作 在dom中,我们通过setAttribute/getAttribute/style来操作元素属性,jQuery中提供了更加便捷的方法 属性:attr、removeAttr、prop、removeProp css:addClass、removeClass、toggleClass、wrapInner、 内容:html、text、val
jQuery 拥有可操作 HTML 元素和属性的强大方法
三个简单实用的用于 DOM 操作的 jQuery 方法:
-
text() - 设置或返回所选元素的文本内容
-
html() - 设置或返回所选元素的内容(包括 HTML 标记)
-
val() - 设置或返回表单字段的值
5.jQuery静态方法
静态方法属于定义在jQuery函数上的方法,通过jQuery或者$直接调用的方法 数组及对象操作:each、map、toArray、merge 测试操作:type、isEmptyObject、isPlainObject、isNumberic 字符串操作:param、trim
因使用频率高,本章节内容重点讲解,方便以后编码使用、看源码使用
5.1.数组及对象操作
each()
通用遍历方法,可用于遍历对象和数组
不同于遍历 jQuery 对象的 $().each() 方法,此方法可用于遍历任何对象。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略
例如:
// 遍历对象 var obj = { name: 'zach', age: 18, height: '1.88' } // 第一个参数 要遍历的数组或对象 第二个参数 处理函数 $.each(obj, function (key, value) { console.log(key, value); }) //遍历数组 $.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
map() 将一个数组中的元素转换到另一个数组中
作为参数的转换函数会为每个数组元素调用,而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组,并扩展至原始数组中
例如:
var arr=$.map( [0,1,2], function(n){ return n + 4; });
toArray()
把jQuery集合中所有DOM元素恢复成一个数组
例如:
console.log($('li').toArray());
merge() 合并两个数组
返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。要去除重复项,请使用$.unique()
例如:
console.log($.merge( [0,1,2], [2,3,4] ));
注意:更多其他关于数组及对象的操作,请移步jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm
5.2.测试操作
type()
用于检测obj的数据类型
console.log($.type($)); //function console.log(jQuery.type(true) === "boolean");//true console.log(jQuery.type(3) === "number");//true console.log(jQuery.type("test") === "string");//true console.log(jQuery.type(function(){}) === "function");//true console.log(jQuery.type([]) === "array");//true console.log(jQuery.type(new Date()) === "date");//true console.log(jQuery.type(/test/) === "regexp");//true
isEmptyObject() 测试对象是否是空对象(不包含任何属性),这个方法既检测对象本身的属性,也检测从原型继承的属性(因此没有使用hasOwnProperty方法更具体)
console.log(jQuery.isEmptyObject({})); // true console.log(jQuery.isEmptyObject({ foo: "bar" })); //false
isPlainObject() 测试对象是否是纯粹的对象(通过 "{}" 或者 "new Object" 创建的)
console.log(jQuery.isPlainObject({})); // true console.log(jQuery.isPlainObject("test")); // false console.log($.isPlainObject($('body')))//false
isNumberic() 确定它的参数是否是一个数字
$.isNumeric() 方法检查它的参数是否代表一个数值。如果是这样,它返回 true。否则,它返回false。该参数可以是任何类型的
console.log($.isNumeric("-10")); // true console.log($.isNumeric(16)); // true console.log($.isNumeric(0xFF)); // true console.log($.isNumeric("0xFF")); // true console.log($.isNumeric("8e5")); // true (exponential notation string) console.log($.isNumeric(3.1415)); // true console.log($.isNumeric(+10)); // true console.log($.isNumeric(0144)); // true (octal integer literal) console.log($.isNumeric("")); // false console.log($.isNumeric({})); // false (empty object) console.log($.isNumeric(NaN)); // false console.log($.isNumeric(null)); // false console.log($.isNumeric(true)); // false console.log($.isNumeric(Infinity)); // false console.log($.isNumeric(undefined)); // false 注意:其他更多关于测试的操作,例如$.isArray(obj)判断是否是数组、$.isFunction(obj)判断是否是函数等,请移步[https://jquery.cuishifeng.cn/](https://jquery.cuishifeng.cn/)
5.3.字符串操作
param()
将表单元素数组或者对象序列化。
例如:
var obj = { page: 1, age: 12 } var str = jQuery.param(obj); console.log(str);
parseJSON() 解析json字符串转换为js对象/数组
// 原生js: // JSON.parse(jsonString) json字符串 转 js对象/数组 // JSON.stringify(jsonObj/jsonArr) js对象/数组 转 json字符串 // 2.$.parseJSON(json): 解析json字符串转换为js对象/数组 var json = '{"name":"Tom", "age":12}'// 模拟一个json对象 console.log($.parseJSON(json)); // 将json对象转换为js对象 json = '[{"name":"Tom", "age":12},{"name":"lilly", "age":12}]';// json数组 console.log($.parseJSON(json));// 将json对象转换为js数组
trim() 去掉字符串起始和结尾的空格,多用于用户数据的清洗
例如:
console.log('--'+$.trim(" hello, how are you? ")+'--');
注意:其他更多关于字符串的操作,请移步jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm