jQuery常用知识点总结以及平时封装常用函数
2019独角兽企业重金招聘Python工程师标准>>>
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)));
判断手机横竖屏状态
<script type="text/javascript">
function hengshuping(){if(window.orientation==180||window.orientation==0){alert("竖屏状态!") }
if(window.orientation==90||window.orientation==-90){alert("横屏状态!") }}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
</script>
其他
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
转载于:https://my.oschina.net/u/1428820/blog/1558824
jQuery常用知识点总结以及平时封装常用函数相关推荐
- java js 速度慢,java js 速度慢jQuery常用知识点总结以及平时封装常用函数
本文为大家介绍了jQuery中常用知识点及函数,包含许多细节方面的知识,下面我们一起学习一下. jQuery中为我们提供了很多有用的属性,自己总结的一些常用的函数.个人认为在在线排盘开发中会比较常用的 ...
- ES6常用知识点概述
前言 国庆假期已过一半,来篇干货压压惊. ES6,并不是一个新鲜的东西,ES7.ES8已经赶脚了.但是,东西不在于新,而在于总结.每个学前端的人,身边也必定有本阮老师的<ES6标准入门>或 ...
- 【C++】-- C++11基础常用知识点(下)
上篇: [C++]-- C++11基础常用知识点(上)_川入的博客-CSDN博客 目录 新的类功能 默认成员函数 可变参数模板 可变参数 可变参数模板 empalce lambda表达式 C++98中 ...
- JavaScript工作面试常用知识点总结大全
JavaScript工作面试常用知识点总结大全 JS语言的构成 ECMAScript - JavaScript的核心 BOM - 浏览器对象模型 DOM - 文档对象模型 JS的引入方式 外部引入:通 ...
- javascript常用实例的实现与封装
1.前言 大家在开发的时候应该知道,有很多常见的实例操作.比如数组去重,关键词高亮,打乱数组等.这些操作,代码一般不会很多,实现的逻辑也不会很难,下面的代码,我解释就不解释太多了,打上注释,相信大家就 ...
- 一个常用的自定义弹框封装(适配 AndroidX),加载 ProgressDialog,状态显示的 StatusDialog 和自定义 Toast,全部支持背景颜色,圆角,边框和文字的自定义,构建者模
MNProgressHUD 项目地址:maning0303/MNProgressHUD 简介: 一个常用的自定义弹框封装(适配 AndroidX),加载 ProgressDialog,状态显示的 S ...
- html常用的属性有哪些,HTML常用的属性知识点总结
这次给大家带来HTML常用的属性知识点总结,使用HTML常用属性的注意事项有哪些,下面就是实战案例,一起来看一下. 在HTML中,属性也是整个HTML内容比较重要的,那么对于HTML属性大家了解多少呢 ...
- javaScript常用知识点有哪些
javaScript常用知识点有哪些 一.总结 一句话总结:int = ~~myVar, // to integer | 是二进制或, x|0 永远等于x:^为异或,同0异1,所以 x^0 还是永远等 ...
- list python 访问 键值对_基础|Python常用知识点汇总(中)
字符串字符串是 Python 中最常用的数据类型.我们可以使用引号('或")来创建字符串.1.创建字符串 str1 = 'Hello World!' str2 = "Hello W ...
最新文章
- 编程方法学21:监听器和迭代器回顾
- 华为鸿蒙系统首发设备,华为鸿蒙系统首发设备曝光!不是手机
- python布尔类型运算_9.python的布尔类型与流程控制
- Linq下有一个非常实用的SelectMany方法,很多人却不会用
- 数字图像处理:四连通域与八连通域
- 非正常关机导致无法启动MYSQL提示丢失mysql.sock的解决办法
- 第一部分:开发前的准备-第四章 多分辨率多屏幕的支持
- 信号与系统 matlab综合实验 pdf,《信号与系统——MATLAB综合实验》 谷源涛-第三讲.pdf...
- 1230v3配服务器内存性能提升,E3 1230 V3四核3.7G睿频福利教程及评测
- 沟通CTBS助真科电子跨平台接入
- nrf52832(nrf52810)之硬件I2C(TWI)驱动BMI160
- 18级计算机应用基础期中考试题,早安正能量 励志新开始---法学与社会学学院18级新生开展早自习活动...
- 计算机毕业后的打算英语作文,毕业后规划英语作文
- 正确的临摹方法,小白零基础临摹教程
- html5四季特点,美国一年四季天气特点介绍
- IP网络主动测评系统——X-Vision
- 零基础入门,花生壳骨灰级微信小程序开发教程
- 1248码转换成ABCD
- 用Python制作一个数据预处理小工具,多种操作,一键完成,非常实用!
- 广和通推出新一代3GPP R16工业级5G模组FG160工程样品