1.Jquery排他 not(this)
以前在工作中碰到排他的情况都是对所有对象执行反操作,然后再对特定的对象进行正操作,如下:
$('.catalogue').on('click','.title',function(){
$(this).toggleClass('active')
$(this).next().toggle()
$('.catalogue .title').not(this).removeClass('active');
$('.catalogue .title').not(this).next().hide();
})
这个时候就需要用到Jquery的一个方法——not(this),就可以轻松实现排他
2.Jquery排他模块化布局 load(DOM)
load() 方法从服务器加载数据,并把返回的数据放置到指定的元素中。引入html 标签,如下:
1.dom.html 完全是hmtl标签
<div>
<h1 class="center">模块化</h1>
<ul class="theme-bgBlue fz12">
<li class="theme-black666">模块化布局属性</li>
<li class="theme-black666">模块化布局属性</li>
<li class="theme-black666">模块化布局属性</li>
</ul>
</div>
2.html
<div class="box J_dataload"></div>
<div class="box J_dataloads"></div>
3.js
$(function(){
$('.J_dataload').load('loads.html',function () {//可以引入简单html 不建议引用
//....
$.getScript("loads.js");//引入js
});
$('.J_dataloads').load('dom.html',function () {//引入标签
//....
});
})
3.jq实现点击空白处,指定元素消失,且指定元素内部事件不受影响
第一步首先 先给body事件
$("body").click(function(){
$(".emoji-container").hide();
});
第二步元素本身阻止事件冒泡
$(".emoji-container").click(function(e){
e.stopPropagation();//阻止冒泡到body
});
或者其他影响附件,发现冒泡事件将bootstrap的tab事件抑制了
$('#emojiTab a').click(function (e) {
e.preventDefault();
$(this).tab('show')
});