jQuery中为我们提供了很多有用的属性，自己总结的一些常用的函数。个人认为在在线排盘开发中会比较常用的，仅供大家学习和参考。
刚开始学习前端的时候开始整理这个文档，现在内容已经逐渐增多。虽然现在看起来，文档里的内容非常简单，但是看着这些内容，好像还依稀记得这一行行代码当时被记录的情景。所以我想把这段回忆保存起来，为刚接触前端的童鞋们提供一个简单的查询的途径，也以此来缅怀我的前端学习之路。
** 此文档，我会持续更新 **
--------------------------------------------------------------------------------
jquery常用知识点
jquery效果
隐藏/显示：
hide/show(speed,callback); speed(空/slow/fast/毫秒) $("#hide").click(function(){ $("p").hide();//隐藏 p标签; $("p").show();//显示 p＝标签; });
淡入/淡出：
fadeIn/fadeout(speed,callback) $(“#click”).click(function(){ $(“#div1”).fadeIn();//直接显示； $(“#div2”).fadeIn(“slow”);//慢慢显示； $(“#div3”).fadeIn(3000);//用3秒时间显示； })
滑动：slideDown/slideUp(speed,callback)
$(“#click”).click(function(){ $(“#div1”).slideDown();//直接下滑； $(“#div2”).slideDown(“slow”);//慢慢下滑； $(“#div3”).slideDown (3000);//用3秒时间下滑； })
动画：
$(".btn1").click(function(){ $("#box").animate({ height:"300px", width:"300px" }); //将宽高变为300px； });
jQuery DOM
获取文本值、属性值：
<p id=”test”>这是一段文字中的<b>粗体</b></p> <input id=”input” value=”文本值”/> <a id=”a” href=https://www.jb51.net/”http:/...”></a>
js代码：
$(“#test”).text();//输出“这是一段文字中的粗体” $(“#test”).html();//输出“这是一段文字中的<b>粗体</b>” $(“#input”).val();//输出“文本值” $(“#a”).attr(“href”);//输出“”, 获取元素属性值
设置文本属性值：
js代码：
$(“#test”).text(''); $(“#test”).html(''); $(“#input”).val(''); $(“#a”).attr('href','xxx');
添加元素：
$(“#test”).append(“<span>添加文本</span>”;//在id=test的标签末尾添加这段代码 $(“#test”).prepend(“<span>添加文本</span>”;//在被选标签的开头添加这段代码 $(“#test”).after(“<span>添加文本</span>”;//在被选标签之后添加这段代码 $(“#test”).before(“<span>添加文本</span>”;//在被选 标签之前添加这段代码
删除元素：
$(“#div1”).remove();//删除被选元素及其所有的子元素 $(“#div1”).empty();//删除被选元素的所有子元素 $(“#div1”).remove(“.info”);//删除被选元素的类名为info的子元素
查找元素：
$("#test").parent(); //返回被选元素的直接父级元素（只是一个）； $("#test").parents(); //返回被选元素所有的祖先元素； $("#test").children(空/选择器);//值为空时返回被选元素的所有直接子元素（很多），为选择器时返回特定子元素（只是一个）； $("#test").find('.aaa'); //在test元素下寻找类名为aaa的元素 $("#test").next(); //返回被选元素的下一个同胞元素（只一个）；
操作css:
addClass/removeClass(“…”);//向元素添加/删除类名 $(“p”).css(“color”);//返回p元素的color样式属性的值 $(“p”).css(“color”,”red”);//把p元素的color属性设为red $(“p”).css({“color”:””red”, “font-size”:”14px”});//同时给p设置多个属性值
jQuery AJAX:
jquery ajax函数
我自己封装了一个ajax的函数，代码如下：
var Ajax = function(url, success) { $.ajax({ url: url, type: 'get', dataType: 'json', timeout: 10000, success: function(d) { var data = d.data; success && success(data); }, error: function(e) { throw new Error(e); } }); }; // 使用方法： Ajax('/data.json', function(data) { console.log(data); });
jsonp：
有时候我们为了跨域，要使用jsonp的方法，我也封装了一个函数：
function jsonp(config) { var options = config || {}; // 需要配置url, success, time, fail四个属性 var callbackName = ('jsonp_' + Math.random()).replace(".", ""); var oHead = document.getElementsByTagName('head')[0]; var oScript = document.createElement('script'); oHead.appendChild(oScript); window[callbackName] = function(json) { //创建jsonp回调函数 oHead.removeChild(oScript); clearTimeout(oScript.timer); window[callbackName] = null; options.success && options.success(json); //先删除script标签，实际上执行的是success函数 }; oScript.src = options.url + '?' + callbackName; //发送请求 if (options.time) { //设置超时处理 oScript.timer = setTimeout(function () { window[callbackName] = null; oHead.removeChild(oScript); options.fail && options.fail({ message: "超时" }); }, options.time); } }; // 使用方法： jsonp({ url: '/b.com/b.json', success: function(d){ //数据处理 }, time: 5000, fail: function(){ //错误处理 } });
封装的常用函数