🔒 jquery知识点补充

jquery相关知识点补充

production，development版本的区别

production生产版，代码经过混淆压缩，用在生产环境(放在服务器上给客户用)
development开发版，原始未混淆压缩的代码，给自己用

jQuery的原型

jQuery的原型（公共属性）是:$.fn

$.fn = jQuery.fn = jQuery.prototype

点击导航缓动到相应位置

	<nav style="position: fixed;top: 0;">
	<a href="#a">a</a>
	<a href="#b">b</a>
	<a href="#c">c</a></nav>
	<div id="a" style="width: 100px;height: 100px;background: green;margin-top: 500px;">aaaa</div>
	<div id="b" style="width: 100px;height: 100px;background: green;margin-top: 500px;">bbb</div>
	<div id="c" style="width: 100px;height: 100px;background: green;margin-top: 500px;margin-bottom: 500px;">ccc</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
	$('a').click(function(event) {
		event.preventDefault();
		var eleId = $(this).attr('href');
		$('html,body').animate({scrollTop: $(eleId).offset().top}, 800);
	});
</script>

addClass(function(index){})

根据条件，将数组中的class按需添加

var colors = ['red', 'yellow', 'blue', 'green'];
$('li').addClass(function(i){
  return colors[i];
});

JS Bin

面试题

<div id=x></div>
var div = document.getElementById('x')
var $div = $('#x')

请说出 div 和 $div 的联系和区别。

div 和 $div 的联系是：
把 div 变成 $div ： $(div)
把 $div 变成 div :  
由于$div是一个伪数组，所以要取得他，需要用get()从数组中取出来
$(div).get(0) 或者简写为$(div)[0]

div 和 $div 的区别是：
$div是JQuery对象，可以使用jq的api。
而div是DOM对象，可以使用DOM的api
两者可以调用的属性和方法不一样

removeClass()移除元素的所有class

removeClass()没有参数则移除所有class

$('div').removeClass();
//如果不传入参数，则默认将div的所有class移除

或者使用removeAttr('class')

$('div').removeAttr('class');
//移除div的class属性

触发器trigger

$('btn1').click(function(){
	$('#div1').trigger('click'); // 触发#div1的click事件
})

transitionend过渡完成后执行某个函数

transitionend事件
该事件在 CSS 完成过渡后触发。

var $div1 = $("#div1");
$div1.on('transitionend', fn);

animationend动画结束后执行某个函数

animationend事件
该事件在 CSS 动画结束播放时触发

$div1.on("animationend", fn);

animationiteration 该事件在 CSS 动画重复播放时触发
animationstart 该事件在 CSS 动画开始播放时触发

return false取消冒泡和默认行为

http://www.berlinix.com/js/jquery-return-false.php

http://caibaojian.com/javascript-stoppropagation-preventdefault.html

return false实际完成了3件事：
1.event.preventDefault() //阻止默认行为

• event.stopPropagation() //阻止冒泡
• 停止回调函数执行并立即返回。

点击页面其他地方关闭弹出层

$('#btn').click(function() {
    $('#popover').show();
    $(document).one('click', function() {
    //在click事件里，给父级加上了另一个事件，这个事件会被立刻执行，因此需要给wrapper阻断冒泡，让它在被点击时才执行
        console.log(1); //只有弹出层show出来后，才会触发document的click事件，且只触发一次
        $('#popover').hide();
    });
});

//document的click事件加在了btn函数内部，它会在冒泡阶段直接执行，即使不点击document也会直接执行
因此需要阻断冒泡
$('#wrapper').click(function(ev) {
    ev.stopPropagation();
});

.on()向动态创建的子元素添加事件处理程序

$('').on('click',未来的子元素,function)向未来的子元素添加事件处理函数

$("ul").click(function(){
  $("<li>创建li</li>").insertAfter("ul");
});

$("ul").on("click","li",function(){
  $(this).hide(); //给动态创建的li绑定事件处理函数
});

http://www.runoob.com/try/try.php?filename=tryjquery_event_on_newel

jsonp跨域

$.ajax({
  dataType:'jsonp',
  url:'https://api.douban.com/v2/movie/top250',
  data:{
    count:10,
    page:1
  }
})
.then(res => {
  console.log(res)
})