Bajins

# JavaScript框架

# Flag

# React

# VueJS

# VueJS框架

插件/组件

Mobile

项目

# 动态导入组件

() => import(`@${_this.files.path}.vue`)

//component(resolve) {require([`@${_this.files.path}.vue`], resolve)}
resolve => require([`@${_this.files.path}.vue`], resolve)

resolve => require.ensure([], () => resolve(require(`@${_this.files.path}.vue`)))

const resolveRequire = (path) => {
    return resolve => {
        require.ensure([], (require) => {
            resolve(require(`@${path}.vue`));        
        });
    }
}

# jQuery

// 扩展jQuery实例函数
jQuery.fn.extend({
	/**
	 * 交换任意两个jQuery对象的位置
	 * @param another
	 */
	swap: function(another){
		var me = this;    
		var cloneMe = me.clone();
		var temp = $('<span/>');
		another.before(temp);
		me.replaceWith(another);
		temp.replaceWith(cloneMe);
		return this;
	}
});

/* ***调用举例*** */
var $t1 = $("#t1");
var $t2 = $("#t2");
$t1.swap($t2);

// 扩展jQuery实例函数
jQuery.fn.extend({
	/**
	 * 在同辈元素中向上或向下移动
	 * @param direction 'up'或'down'
	 */
	move: function(direction){
		var me = this;
		var another = null;
		if(direction == 'up'){
			another = me.prev();
			another.before(me);
		}else if(direction == 'down'){
			another = me.next();        
			another.after(me);
		}
		return this;
	}
});

/* *** 调用举例  ***/
var $p = $('p#id_2');
var success = $p.move('up');	//移动成功则为true，否则false

// 原生JS DOM里有一个内置属性outerHTML，用来获取当前节点的html代码(包含当前节点本身)
$(".test").prop("outerHTML");

// Jquery设置outerHTML
$('.test').prop('outerHTML', '<div>');

attr()和prop()的区别

  • attr() 方法设置或返回被选元素的属性值。attribute 是 HTML 标签上的特性（属性），它的值只能够是字符串；
  • prop() 方法设置或返回被选元素的属性和值。property 是 DOM 中的属性，是 JavaScript 里的对象；

官方建议具有true或false两个值的属性，如checked、selected、disabled应同时使用prop()和attr()

$.attr("checked", "true");
$.attr("checked", true);
$.attr("checked", "checked");
$.attr("checked", "false"); // 不会生效
$.attr("checked", false);
$.removeAttr("checked");
// 只使用prop的情况下，可以看到标签元素上没有checked属性，但页面有渲染动作
$.prop("checked", "true");
$.prop("checked", true);
$.prop("checked", "checked");
$.prop("checked", "false"); // 不会生效
$.prop("checked", false);
$.removeProp("checked");

$.attr("checked"); // 1.6+返回"checked"或"undefined";1.5-返回 true或false
$.prop("checked"); // 1.6+返回 true/false
$.is(":checked");

readonly属性对radio、select、checkbox这三个表单无效，设置disabled属性后，读取不到值

  • 把表单值存入<input type="hidden" >中，如果代码中要改变选中则同时要赋值给该输入框
  • 提交表单前先移除disabled属性，不提交表单时或提交表单后设置disabled属性（代码中要改变选中前先移除disabled属性）
  • 只设置没有选中的input框disabled属性 （代码中要改变选中时先移除disabled属性）

根据文本获取元素

$.fn.findByContentText = function (text) {
    return $(this).contents().filter(function () {
        return $(this).text().trim() == text.trim();
    });
};

var search = $( "ul li label" ).filter( function () {
    return $( this ).text().toLowerCase().indexOf( "text".toLowerCase() ) >= 0;
}).first(); // .last()

 
$('div:contains("test"):not(:has(*)):last').css('background-color', 'red');

# jQuery插件/组件

# 事件点击一次执行多次

// 先移除再绑定，jQuery 3.0中已弃用此方法
$('#id').unbind('click').on('click',function(){
    consoel.log("ok");
});
// 先移除再绑定
$("#id").off("click").on("click",function(){
    consoel.log("ok");        
});

# Bootstrap

← JavaScript笔记 →