記事のディレクトリ
jQueryマルチライブラリの共存
$が取得されると、jqueryの先頭はjQueryになります。他の誰かのプラグインがページに導入されており、他の誰かが作成したプラグインが$または\ jQueryで始まる必要がある場合、インポートされたjqueryと競合します。jQueryはすでにこの状況を予測しているため、jQueryは$またはjQueryの使用を放棄するか、他の演算子に置き換えることができます。
- $コントロールを引き渡す
// 这个方法可以交还 jQuery 命名的控制权
jQuery.noConflict()
// 上面代码执行完毕以后 $ 这个变量就不能用了
// 但是 jQuery 可以使用
console.log($) // undefined
console.log(jQuery) // 可以使用
- $とjQueryの制御を引き継ぎます
// 这个方法可以交并且传递一个 true 的时候，会完全交出控制权
jQuery.noConflict(true)
// 上面代码执行完毕以后 $ 这个变量就不能用了
// jQuery 这个变量也不能用了
console.log($) // undefined
console.log(jQuery) // undefined
- カスタム交換制御
// 可以用一个变量来接受返回值，这个变量就是新的控制权
var aa = jQuery.noConflict(true)
// 接下来就可以把 aa 当作 jQuery 向外暴露的接口使用了
aa('div').click(function () {
console.log('我被点击了') })
jQueryプラグイン拡張機能
- 私たちのビジネスニーズでは、そこにないいくつかのメソッドに遭遇することがあるので、いくつかのメソッドを彼に拡張することができます
それ自体に拡張する
- 方法：
jQuery.extend
// jQuery.extend 接受一个参数，是一个对象，对象里面是我们扩展的方法
jQuery.extend({
max: function (...n) {
return Math.max.apply(null, n) },
min: function (...n) {
return Math.min.apply(null, n) }
})
- 拡張が完了したら、それを使用できます
const max = $.max(4, 5, 3, 2, 6, 1)
console.log(max) // 6
const min = $.min(4, 5, 3, 2, 6, 1)
console.log(min) // 1
要素のコレクションに拡張する
- 方法：
jQuery.fn.extend()
// jQuery.fn.extend() 接受一个参数，是一个对象，对象里面是我们扩展的方法
jQuery.fn.extend({
checked: function () {
// return 关键字是为了保证链式编程
// 后面的代码才是业务逻辑
return this.each(function() {
this.checked = true })
}
})
- 拡張が完了したら、それを使用できます
// 靠元素集合来调用
$('input[type=checkbox]').checked()
// 执行完毕之后，所有的 复选框 就都是选中状态了
jQueryで一般的に使用されるプラグイン
プラグインライブラリのURL：
フォーム検証プラグイン（jquery-validation）
ダウンロードリンク：http：//static.runoob.com/download/jquery-validation-1.14.0.zip
- jqueryを導入する
- jquery.validate.jsを紹介します
- 言語パックを導入する
- フォームタグはvalidateメソッドを呼び出します
$("form").validate(function(){
rules:{
// 定义规则
// 键是表单元素name属性值，值是规则项 -- 单一规则
uname:"required",
// 键是表单元素name属性值，值是对象
pass:{
// 键是规则名称，值是规则的值
maxlength:12,
minlength:6
required:true
}
},
message:{
// 自定义提示内容，要和上面的规则对应
uname:"用户名必填",
pass:{
maxlength:"不能大于12位",
minlength:"不能小于6位",
required:"密码必填", // 如果要使用插件默认的提示信息则可以省略
}
},
submitHandler:function(form){
// 处理表单提交
// jQuery序列化表单数据
var data = $(form).serialize();
/*
手动提交表单或发送ajax
form.submit()
ajax
*/
}
});
- カスタムエラーメッセージスタイル、クラス名エラーを使用
- カスタム検証方法：
jQuery.validator.addMethod("checkTel",function(v){
var reg = /^[1][345789]\d{9}$/;
if(!reg.test(v)){
return false;
}else{
return true;
}
},"手机号不正确");
// 验证规则是checkTel，提示信息是固定的
カラーアニメーションプラグイン（jquery.color）
ダウンロードリンク：https：//github.com/jquery/jquery-color
- プラグインをインポートするだけで、カラーアニメーションを書くだけです
画像遅延読み込みプラグイン（jquery.lazyload）
ダウンロードリンク：https：//github.com/pedromenezes/jQuery-lazyload
- jqueryを導入する
- プラグイン名を紹介します
- 画像のsrc属性をdata-original属性に置き換え、画像ラベルに幅と高さを追加します
- 制御のために画像にクラス名を追加します
- jsコードでメソッドを呼び出す：
$("img.类名").lazyload(); - カスタムプレースホルダー画像：
$("img.lazy").lazyload(function(){
placeholder:"image/1.gif",
});
laydatetimeプラグイン
公式ウェブサイトアドレス：http：//www.layui.com/laydate
- プラグインをダウンロードして、コアjsファイルを紹介します
<body>
<input type="text" id="time">
</body>
<script src="laydate.js"></script>
<script>
// 初始化时间，执行一个laydate实例
laydate.render({
elem:"#time",
type:"datetime", // 可以指定类型：month,year,datetime,time
mark:{
// 标记
'0-6-2':"儿童节",
'0-0-5':'发工资',
'2019-6-30':'离职',
'2019-6-28':'',
},
});
</script>
レイヤーポップアップレイヤープラグイン
ポップアップレイヤーアドレス：http：//layer.layui.com
- ローディングレイヤー
<body>
<button id="loading">加载</button>
</body>
<script src="jquery.js"></script>
<script src="layer.js"></script>
<script>
// loading层
$("#loading").click(function(){
var index1 = layer.load(1,{
shade:[0.1,'#666'], // 0.1表示透明度，#666表示背景颜色
shadeClose:true, // 表示点击遮罩关闭弹出层，默认为false
});
// 关闭指定的弹出层:layer.close(弹出层id);
setTimeout(function(){
layer.close(index1);},3000);
});
</script>
- プロンプトレイヤー：
<body>
<button id="tip">提示</button>
</body>
<script src="jquery.js"></script>
<script src="layer.js"></script>
<script>
// 提示层
$("#tip").click(function(){
layer.msg("提交失败！！！",{
time:2000}); // 设置2秒钟之后自动关闭
});
</script>
