jquery常用知识点

Posted 2021-04-08 imfind

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