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 相关文章推荐
js表数据排序 sort table data
Feb 18 Javascript
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
深入理解React高阶组件
Sep 28 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
Aug 15 Javascript
vue中组件的过渡动画及实现代码
Nov 21 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
使用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
Php-Redis安装测试笔记
2015/03/05 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
Node调用Java的示例代码
2017/09/20 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
解决python线程卡死的问题
2019/02/18 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
军训自我鉴定
2014/01/22 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
学习十八大报告感言
2014/02/28 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
社区文化建设方案
2014/05/02 职场文书
五水共治一句话承诺
2014/05/30 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
财务整改报告范文
2014/11/05 职场文书
美丽的大脚观后感
2015/06/03 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript
python源码剖析之PyObject详解
2021/05/18 Python
详解MySQL中的pid与socket
2021/06/15 MySQL
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL