04-突破

发表于 2018-05-03 | 分类于前端-03-jQuery

元素的尺寸

width() height() ★★★★★
innerWidth() innerHeight() ★★★★★
outerWidth() outerHeight() ★★★★★
参数的作用
与原生JS的区别

alert( $('#div1').width() );   //width
	
alert( $('#div1').innerWidth() );  //width + padding 
	
alert( $('#div1').outerWidth() );  //width + padding + border
	
alert( $('#div1').outerWidth(true) );  //width + padding + border + margin
	
$('#div1').width(200);

$('#div1').innerWidth(200);   //width : 200 - padding
	
$('#div1').outerWidth(200);     //width : 200 - padding - border
	
$('#div1').outerWidth(200,true);   //width : 200 - padding - border - margin

隐藏元素的尺寸

alert( $('#div1').get(0).offsetWidth );   //原生JS是获取不到隐藏元素的尺寸

alert( $('#div1').width() );  //JQ是可以获取隐藏元素的尺寸

JQ实战小技巧

可视区的尺寸
页面的尺寸

1
2
3

alert( $(window).height() );     //可视区的高
	
alert(  $(document).height()  );  //页面的高

滚动距离

scrollTop() ★★★★★
scrollLeft() ★

//alert( $(document).scrollTop() );   //滚动距离
		
//$(document).scrollTop()  == $(document).height() - $(window).height()  
//滚动到最底端

##　元素距离

==alert( $(‘#div1’).offset().top ); //offset()的距离值都是相对于整个页面的==

position() ★★★
left top
==不认magin值==

alert(ev.pageY);   
//鼠标的坐标 : 相对于整个页面的
		
alert( ev.clientY );  
//鼠标的坐标 : 相对于可视区的

绑定

$('ul').delegate('li','click',function(ev){
	$(this).css('background','red');
		
	//$(ev.delegateTarget).css('background','red'); 
	//ev.delegateTarget==ul
		
	$(ev.delegateTarget).undelegate();
		
});

triger

主动触发

$('#input2').keydown(function(ev){
	if( ev.which == 13 ){
		$('#input1').trigger('click');
		
		//$('#input1').click();
		
	}
});

	$('div').on('click.def',function(){
	alert(1);
});

$('div').on('click.abc',function(){
	alert(2);
});

$('div').trigger('click.abc');

$(this).off(‘.drag’);
可以忽略命名空间

工具方法

$.type() ★★★★★
- 比原生typeof更强大
$.isFunction() ★★★
$. isNumeric() ★★★
$. isArray() ★★★
$. isWindow() ★★★
$. isEmptyObject() //{}返回ture ★★★
$. isPlainObject() //对象自变量 {}也返回ture ★★★

$.extend() ★★★★★

对象继承操作
深拷贝操作//默认是浅拷贝的 , true代表深考虑

var a = {
    name : "hello"
};

var b = {};

$.extend( true,b , a , {age:20} );//默认是浅拷贝的  , true代表深考虑

console.log(b);

b.name = 'hi';

alert( a.name );

$.proxy()

function show(n1,n2){
	alert(n1);
	alert(n2);
	alert(this);
}

//show();  
//show.call( document );

//$.proxy( show , document ,3)(4);

//$(document).on('click', $.proxy(show,window,3,4) );

05-进阶

发表于 2018-05-03 | 分类于前端-03-jQuery

animate() :

第一个参数 : 对象 {} 去设置样式属性和值(目标点)
第二个参数 : 时间默认是400
第三个参数 : 运动形式只有两种 swing(默认 : 缓冲 : 慢快慢) linear(匀速的)
第四个参数 : 运行结束的回调

数值的运算操作

1
2
3

$('#div1').animate({
			width : '+=100'
		},1000,'linear');

配置参数step的作用
duration easing complete

$('#div1').animate({
	width : 300
},{
	duration : 1000,
	easing : 'linear',
	complete : function(){
		//alert(123);
	},
	step : function(a,b){  //可以检测我们定时器的每一次变化
		//console.log(a);
		console.log(b.pos);   //运动过程中的比例值(0~1)
	}
});

//$('#div1').stop();    //默认情况下 : 只会停止当前运动
		
//$('#div1').stop(true);  //第一个参数 : 可以停止所有的运动

//$('#div1').stop(true,true); //第二个参数 : 可以停止到指定的目标点(当前的)

工具方法

$. parseJSON() ★★★★★
- : 把JSON类型的字符串，转换成真正的JSON数据
- : 只能针对JSON类型的字符串(安全比较好),要是严格的JSON
$. parseHTML() ★

//$.parseHTML()  : 转化HTML的形式的字符串,转成DOM节点，放到一个数组中

/*var a = '<div>div</div><span>span</span>';

var arr = $.parseHTML(a);

//console.log(arr);

arr[1].innerHTML = 'hello';
	
$('body').append( arr[1] );*/

$. parseXML() ★
$. isXMLDoc() ★

jQ插件

$.browser()

http://jquery.thewikies.com/browser/

https://github.com/carhartl/jquery-cookie#readm

e-calendar

http://www.jq22.com/jquery-info541
用法和JQ是相同的

06-高级方法

发表于 2018-05-03 | 分类于前端-03-jQuery

高级方法

清空

html(“”)
empty()

删除节点

remove()
detach()

获取文本

text() ★
获取文本的特点

替换节点

replaceWidth() ★
replaceAll() ★

事件扩展

hover() ★★★

mouseenter , mouseleave
与over,out区别

focusin() ★

支持input冒泡

focusout() ★

on参数

$('#div1').on('click',{name:"hello"},function(ev){
	
	console.log(ev.data.name);
	
});

获取原生event
- originalEvent
- changedTouches

triggerHandler() ★
与trigger()的区别:不会触发事件自带的默认行为

event对象

ev.stopImmediatePropagation(); //会阻止本身的事件操作

ev.stopPropagation();

ready()

$(document).ready(function(){

});

$(function(){   //等DOM加载完就会执行
	

	$('img').load(function(){
		alert($('img').width());	
	});
	
});

$(window).load(function(){   //等整个页面加载完才会执行
	
	
	
});

截止操作

nextUntil() ★
prevUntil() ★
parentsUntil() ★

不包括截止的dom节点

数据缓存

data()

$('#div1').data('name','hello');   //把数据存到了一个大的集合中
	
$('#div1').removeData('name');

alert( $('#div1').data('name') );

prop() //. [] oDiv[‘index’] = i; ★★★
与attr()三者的区别
removeAttr() , removeProp() , removeData()

JSON形式的设置

on()
css()
attr()

回调形式的设置

addClass()
html()
val()

工具方法

$.merge() ★
$.map() ★
$.grep() ★
$.unique() : 只是针对DOM节点的去重方法 ★
$.inArray() ★
$.makeArray() ★
$.trim() ★★★

ajax扩展

辅助

$. param() ★★★
serialize() ★★★
serializeArray() ★★★

07-ajax-getJSON

发表于 2018-05-03 | 分类于前端-03-jQuery

jQuery中的$.getJSON( )方法函数主要用来从服务器加载json编码的数据，它使用的是GET HTTP请求。使用方法如下：

1	$.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )

url是必选参数，表示json数据的地址；
data是可选参数，用于请求数据时发送数据参数；
success是可参数，这是一个回调函数，用于处理请求到的数据。

08-siblings

发表于 2018-05-03 | 分类于前端-03-jQuery

jQuery( “prev ~ siblings” )

prev: 任何有效的选择器

siblings: 一个选择器来过滤第一选择器以后的兄弟元素。

(prev + next) 和 (prev ~ siblings)之间最值得注意的不同点是他们各自的可及之范围。前者只达到紧随的同级元素，后者扩展了该达到跟随其的所有同级元素。

==不含自己==

.nextAll( [selector ] )

考虑一个页面上一个简单的列表：

<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>

如果我们从第三个项目开始，我们可以找到它之后的元素：

1	$('li.third-item').nextAll().css('background-color', 'red');

执行后的结果是列表项 4 和 5 变成红色背景。由于我们没有提供一个选择器表达式，因此这两个元素很明确的成为了结果对象中的一部分。如果我们有提供一个选择的表达式，那么在包含在结果对象之前，会先测试该元素是否满足匹配的选择器表达式。

.prevAll( [selector ] )

closet和parents

.closest()	.parents()
开始于当前元素	开始于父元素
在 DOM 树中向上遍历，直到找到与提供的选择器相匹配的元素	向上遍历DOM树到文档的根元素，每个祖先元素加入到临时集合，如果提供一个选择器，则会使用该选择器在集合中进行过滤
返回包含零个或一个元素的jQuery对象	返回包含零个，一个或多个元素的jQuery对象

09-窗口的高度

发表于 2018-05-03 | 分类于前端-03-jQuery

$(window).height() 获取的是当前可视窗口的高度，也就是用户能看到的窗口的高度，是不变的（在窗口大小不变的前提下）

$(document).height() 获取的是窗口内文档的高度,这个高度随着文档内容的高度改变而改变

当窗口滚动条滚到最低端时，$(document).height() == $(window).height() + $(window).scrollTop()。

当窗口内文档高度不足浏览器窗口高度时，$(document).height()返回的是$(window).height()。

$(“body”).height() 如果body没有border、margin的话，$(“body”).height()==$(document).height(),但是还是不建议使用这种方式去获取文档内容高度

PS:如果你发现$(window).height()值有问题，返回的不是浏览器窗口的高度，那么看看是不是网页没有加上<!DOCTYPE>声明。
如果没加的话网页会进入怪异模式，你懂的

10-jsonp的坑

发表于 2018-05-03 | 分类于前端-03-jQuery

$.ajax({
 9             type : "get",
10             async:false,
11             url : "ajax.ashx",
12             dataType : "jsonp",
13             jsonp: "callbackparam",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
14             jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
15             success : function(json){
16                 alert(json);
17                 alert(json[0].name);
18             },
19             error:function(){
20                 alert('fail');
21             }
22         });

jsonp: “callbackparam”,//==传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)==

jsonpCallback:”success_jsonpCallback”,//==自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名==

如何使用JSONP，使用JSONP，我们必须带一个参数传给程序员，在后面加一个callback=？的参数，“？”为前端页面JS函数的名称，如果不是使用JQ库的，这个需要根据前端工作人员来定义。如果使用JQ库，那么这里比较方便了，JQ库会直接把返回过来的”？”进行解析

这里注意下，如果url中带了”callback=？”，那么dataType只要写json就可以，如果dataType为jsonp，那么url的链接可以不带”callback=？”，JQ会自动在链接中加上”callback=？”,如果参数不是默认callback，则添加 jsonp：cb（其他参数），用来代替”callback=？”

11-一个元素绑定了多个 click 事件，如何取消其中的一个。

发表于 2018-05-03 | 分类于前端-03-jQuery

$('#btn').on('click.name1', function(){
    alert(1)
})
$('#btn').on('click.name2', function(){
    alert(2)
})

// 如果这么写，解绑name1，如何只取消绑定特定的一个
$('#btn').unbind('click.name1')

12-判断网址

发表于 2018-05-03 | 分类于前端-03-jQuery

如果针对一个具体的URL，光用jQuery，不需要插件可以这样：

$.ajax({
 url: 'http://some.url.com',
 type: 'GET',
 complete: function(response) {
  if(response.status == 200) {
   alert('有效');
  } else {
   alert('无效');
  }
 }
});

13-swiper不能及时更新的坑

发表于 2018-05-03 | 分类于前端-03-jQuery

参考链接

observer:true,//修改swiper自己或子元素时，自动初始化swiper 
observeParents:false,//修改swiper的父元素时，自动初始化swiper 
onSlideChangeEnd: function(swiper){ 
　　　swiper.update();  
　　　mySwiper.startAutoplay();
　　   mySwiper.reLoop();  
}

加上这串代码后，使用基本正常

mySwiper.reLoop(); 重新对需要循环的slide个数进行计算，当你改变了slidesPerView参数时需要用到，需要自动轮播的时候必须要加上；

swiper.update(); 更新Swiper，这个方法包含了updateContainerSize，updateSlidesSize，updateProgress，updatePagination，updateClasses方法。也就是数据改变是重新初始化一次swiper；

mySwiper.startAutoplay(); 重新开始自动切换；

但是还会有一个问题，比如说在初始化页面是，初始化加载一组数据，但是这组数据里面只有一条信息，但是其他组数据里面包含了多条信息，在这种情况下必须要手动切换一次才能触发自动轮播，还没找到解决办法。

以上就是遇到的一些问题，记录一下，以后遇到还可以看看。

元素的尺寸

隐藏元素的尺寸

JQ实战小技巧

滚动距离

绑定

triger

工具方法

$.extend() ★★★★★

$.proxy()

animate() :

工具方法

jQ插件

$.browser()

$.cookie()

e-calendar

高级方法

清空

删除节点

获取文本

替换节点

事件扩展

hover() ★★★

focusin() ★

focusout() ★

on参数

event对象

ready()

截止操作

数据缓存

JSON形式的设置

回调形式的设置

工具方法

ajax扩展

辅助

jQuery( “prev ~ siblings” )

.nextAll( [selector ] )

.prevAll( [selector ] )

closet和parents