Ringkasan titik pengetahuan umum jQuery dan enkapsulasi fungsi_jquery yang biasa digunakan

Artikel ini memperkenalkan anda kepada perkara dan fungsi pengetahuan umum dalam jQuery, termasuk banyak pengetahuan terperinci Mari belajar bersama.

jQuery memberikan kita banyak atribut berguna dan beberapa fungsi yang biasa digunakan yang telah saya rumuskan. Secara peribadi, saya fikir ia lebih biasa digunakan dalam pembangunan susun atur dalam talian, dan hanya untuk pembelajaran dan rujukan semua orang.

Saya mula mengatur dokumen ini apabila saya mula belajar bahagian hadapan, dan kini kandungannya telah meningkat secara beransur-ansur. Walaupun nampaknya kandungan dalam dokumen itu sangat mudah sekarang, melihat kandungannya, nampaknya saya masih samar-samar mengingati adegan ketika baris kod ini dirakam. Oleh itu, saya ingin menyimpan ingatan ini dan menyediakan kaedah pertanyaan mudah untuk kanak-kanak yang baru mengenali bahagian hadapan, dan juga untuk mengingati perjalanan pembelajaran bahagian hadapan saya.

** Saya akan terus mengemas kini dokumen ini **
------------------------------------------------- -----------------------------------

Jquery mata pengetahuan umum

kesan jquery

Sembunyikan/Tunjukkan:

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

Pudar masuk/keluar:

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

Slaid: slaidDown/slideUp(speed,callback)

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

Animasi:

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

jQuery DOM

Dapatkan nilai teks dan nilai atribut:

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

kod js:

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

Tetapkan nilai atribut teks:

kod js:

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

Tambah elemen:

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

Padam elemen:

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

Cari elemen:

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

Css operasi:

addClass/removeClass(“…”);//向元素添加/删除类名
$(“p”).css(“color”);//返回p元素的color样式属性的值
$(“p”).css(“color”,”red”);//把p元素的color属性设为red
$(“p”).css({“color”:””red”, “font-size”:”14px”});//同时给p设置多个属性值

jQuery AJAX:

fungsi ajax jquery

Saya sendiri merangkum fungsi ajax, kodnya adalah seperti berikut:

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:

Kadang-kadang kita perlu menggunakan kaedah jsonp untuk merentas domain saya juga merangkumkan fungsi:

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

Fungsi biasa terkapsul

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

Sekat fungsi menggelegak

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

Dapatkan nilai atribut objek selepas "?" dalam url

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

Objek salinan dalam

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

Jana nombor rawak

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

Lain-lain

Git arahan biasa

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

Kandungan di atas adalah ringkasan mata pengetahuan umum jQuery yang diperkenalkan oleh editor dan fungsi enkapsulasi yang biasa digunakan saya harap ia akan membantu semua orang!