jQuery常用知识点总结以及平时封装常用函数


Posted in Javascript onFebruary 23, 2016

本文为大家介绍了jQuery中常用知识点及函数,包含许多细节方面的知识,下面我们一起学习一下。

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=”http://...”></a>

js代码:

$(“#test”).text();//输出“这是一段文字中的粗体”
$(“#test”).html();//输出“这是一段文字中的<b>粗体</b>”
$(“#input”).val();//输出“文本值”
$(“#a”).attr(“href”);//输出“http://...”, 获取元素属性值

设置文本属性值:

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(){
//错误处理
} 
});

封装的常用函数

$(window).scroll(function() {
var a = $(window).scrollTop();
if(a > 100) {
$('.go-top').fadeIn();
}else {
$('.go-top').fadeOut();
}
});
$(".go-top").click(function(){
$("html,body").animate({scrollTop:"0px"},'600');
});

阻止冒泡函数

function stopBubble(e){
e = e || window.event; 
if(e.stopPropagation){ 
e.stopPropagation(); //W3C阻止冒泡方法 
}else { 
e.cancelBubble = true; //IE阻止冒泡方法 
} 
}

获取url中“?”后的对象属性值

var getURLParam = function(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)', "ig").exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null;
};

深度拷贝对象

function cloneObj(obj) {
var o = obj.constructor == Object ? new obj.constructor() : new obj.constructor(obj.valueOf());
for(var key in obj){
if(o[key] != obj[key] ){
if(typeof(obj[key]) == 'object' ){
o[key] = mods.cloneObj(obj[key]);
}else{
o[key] = obj[key];
}
}
}
return o;
}

生成随机数

function randombetween(min,max){
return min + (Math.random() * (max-min +1));
}
console.log(parseInt(randombetween(50,100)));

其他

git常用命令

1、git config user.name \ user.email //查看当前git的用户名称、邮箱
2、git clone https://github.com/jarson7426/javascript.git //clone仓库到本地。
3、修改本地代码,提交到分支: git add file \ git commit -m “新增文件”
4、把本地库推送到远程库: git push origin master
5、查看提交日志:git log -5
6、返回某一个版本:git reset --hard 123
7、创建分支:git branch name \ git checkout name
8、合并name分支到当前分支:git merge name
9、删除本地分支:git branch -d name
10、删除远程分支: git push origin :daily/x.x.x
11、git checkout -b mydev origin/daily/1.0.0 //把远程daily分支映射到本地mydev分支进行开发
12、合并远程分支到当前分支 git pull origin daily/1.1.1
13、发布到线上:
git tag publish/0.1.5
git push origin publish/0.1.5:publish/0.1.5

以上内容是小编给大家介绍的jQuery常用知识点总结以及平时封装常用函数,希望对大家有所帮助!

Javascript 相关文章推荐
javascript读取RSS数据
Jan 20 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
Apr 11 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
node.js基础知识小结
Feb 26 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
vue.js实现照片放大功能
Jun 23 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 #Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 #Javascript
JavaScript tab选项卡插件实例代码
Feb 23 #Javascript
Javascript技术栈中的四种依赖注入详解
Feb 23 #Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 #Javascript
全面解析Bootstrap布局组件应用
Feb 22 #Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 #Javascript
You might like
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
js用类封装pop弹窗组件
2017/10/08 Javascript
laravel-admin 与 vue 结合使用实例代码详解
2019/06/04 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
Python字符串中查找子串小技巧
2015/04/10 Python
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
Python新手学习raise用法
2020/06/03 Python
安全生产网格化管理实施方案
2014/03/01 职场文书
医学生临床实习自我评价
2014/03/07 职场文书
倡议书范文
2014/04/16 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
五年级小学生评语
2014/12/26 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android