Zusammenfassung der allgemeinen Wissenspunkte von jQuery und Kapselung häufig verwendeter Funktionen_jquery

Dieser Artikel führt Sie in die allgemeinen Wissenspunkte und Funktionen von jQuery ein, einschließlich vieler detaillierter Kenntnisse. Lassen Sie uns gemeinsam lernen.

jQuery stellt uns viele nützliche Attribute und einige häufig verwendete Funktionen zur Verfügung, die ich zusammengefasst habe. Persönlich denke ich, dass es häufiger in der Online-Layoutentwicklung verwendet wird und nur zum Lernen und Nachschlagen für jedermann gedacht ist.

Ich habe mit der Organisation dieses Dokuments begonnen, als ich anfing, Front-End zu lernen, und jetzt ist der Inhalt allmählich gewachsen. Obwohl der Inhalt des Dokuments jetzt sehr einfach zu sein scheint, kann ich mich beim Betrachten des Inhalts immer noch vage an die Szene erinnern, in der diese Codezeile aufgezeichnet wurde. Daher möchte ich diesen Speicher speichern, um Kindern, die neu im Front-End sind, eine einfache Abfragemethode bereitzustellen und mich auch an meine Front-End-Lernreise zu erinnern.

** Ich werde dieses Dokument weiterhin aktualisieren **
-------------------------------------------------- ----------------------------------

Allgemeine Wissenspunkte abfragen

Jquery-Effekt

Ausblenden/Einblenden:

hide/show(speed,callback); speed(空/slow/fast/毫秒)
$("#hide").click(function(){
$("p").hide();//隐藏 p标签;
$("p").show();//显示 p＝标签;
});

Ein-/Ausblenden:

fadeIn/fadeout(speed,callback)
$(“#click”).click(function(){
$(“#div1”).fadeIn();//直接显示；
$(“#div2”).fadeIn(“slow”);//慢慢显示；
$(“#div3”).fadeIn(3000);//用3秒时间显示；
})

Slide: slideDown/slideUp(speed,callback)

$(“#click”).click(function(){
$(“#div1”).slideDown();//直接下滑；
$(“#div2”).slideDown(“slow”);//慢慢下滑；
$(“#div3”).slideDown (3000);//用3秒时间下滑；
})

Animation:

$(".btn1").click(function(){
$("#box").animate({
height:"300px", 
width:"300px"
}); //将宽高变为300px；
});

jQuery DOM

Textwert und Attributwert abrufen:

<p id=”test”>这是一段文字中的<b>粗体</b></p>
<input id=”input” value=”文本值”/>
<a id=”a” href=”http://...”></a> 

JS-Code:

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

Textattributwert festlegen:

JS-Code:

$(“#test”).text('');
$(“#test”).html('');
$(“#input”).val('');
$(“#a”).attr('href','xxx');

Element hinzufügen:

$(“#test”).append(“<span>添加文本</span>”;//在id=test的标签末尾添加这段代码
$(“#test”).prepend(“<span>添加文本</span>”;//在被选标签的开头添加这段代码
$(“#test”).after(“<span>添加文本</span>”;//在被选标签之后添加这段代码
$(“#test”).before(“<span>添加文本</span>”;//在被选 标签之前添加这段代码

Element löschen:

$(“#div1”).remove();//删除被选元素及其所有的子元素
$(“#div1”).empty();//删除被选元素的所有子元素
$(“#div1”).remove(“.info”);//删除被选元素的类名为info的子元素

Element suchen:

$("#test").parent(); //返回被选元素的直接父级元素（只是一个）；
$("#test").parents(); //返回被选元素所有的祖先元素；
$("#test").children(空/选择器);//值为空时返回被选元素的所有直接子元素（很多），为选择器时返回特定子元素（只是一个）；
$("#test").find('.aaa'); //在test元素下寻找类名为aaa的元素
$("#test").next(); //返回被选元素的下一个同胞元素（只一个）；

Operations-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-Funktion

Ich habe selbst eine Ajax-Funktion gekapselt, der Code lautet wie folgt:

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:

Manchmal müssen wir die JSONP-Methode verwenden, um domänenübergreifend zu sein. Ich habe auch eine Funktion gekapselt:

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

Gekapselte allgemeine Funktionen

$(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');
});

Sprudelfunktion blockieren

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

Erhalten Sie den Objektattributwert nach „?“ in der URL

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

Objekt tief kopieren

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;
}

Zufallszahlen generieren

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

Andere

Git-allgemeine Befehle

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

Der obige Inhalt ist eine Zusammenfassung der vom Herausgeber eingeführten allgemeinen Wissenspunkte von jQuery und der üblichen Kapselung häufig verwendeter Funktionen. Ich hoffe, dass er für alle hilfreich ist!