jQueryの共通知識とよく使う関数のカプセル化まとめ

jQueryの共通知識とよく使う関数のカプセル化まとめ_jquery

WBOY

リリース： 2016-05-16 15:14:17

オリジナル

1362 人が閲覧しました

この記事では、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 + '&#63;' + 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('[&#63;|&]' + name + '=' + '([^&;]+&#63;)(&|#|;|$)', "ig").exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null;
};

ログイン後にコピー

ディープコピーオブジェクト

function cloneObj(obj) {
var o = obj.constructor == Object &#63; 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の常識的なポイントや、よく使われるカプセル化機能などをまとめたものであり、皆様のお役に立てれば幸いです。