01-JQ复习

发表于 | 分类于 |

轮播图

如果父级设定position:relative,子级设定position:absolute要设父级高度,否则高度撑不开;

jq on()方法

$(".div1").on('click', function(event) {
    // console.log($(this)[0].tagName);
    // console.log($(this).attr('class'));
    // $(this).html("hello");
    // event.preventDefault();
    console.log(event.target.tagName+" : "+$(event.target).attr('class')+" "+$(this).attr('class'));
    // $(this)指的是绑定事件的元素,也就是.div1
});

$(this)[0].tagName
如果委托的元素没有写出来,那么$(this)指的是 $(“.div1”),如果有写委托元素,那么$(this)指的是委托元素

jq的取值赋值

  • 当一组元素的时候,取值是一组中的第一个
  • 当一组元素的时候,赋值是一组中的所有元素

    $().text()是特例,会获取所有选中元素的文本内容,不包括html标签

return false;

阻止默认事件event.preventDefault(); 又阻止冒泡event.stopPropagation();

offset();

offset().left//获取到屏幕的左距离
position().left//自己转换为定位元素,忽略margin值

Parent() offsetParent();

Parent()//获取父级
offsetParent()//获取有定位的父级

screenX clientX pageX的区别

image

查看图片

outerWidth()与原生offsetWidth

//outerWidth():可以获取到隐藏元素的值
//offsetWidth : 是获取不到隐藏元素的值

clone()

clone(true)会把绑定到原来元素的事件也一并克隆.

包装

  • wrap() : 包装

  • wrapAll() : 整体包装

  • wrapInner() : 内部包装

  • unwrap() : 删除包装 ( 删除父级 : 不包括body )

表单序列化

1
2
3
4
5
6
7
8
9
//console.log($('form').serialize());  //string : a=1&b=2&c=3
	
	console.log( $('form').serializeArray() );
	
	[
		{ name : 'a' , value : '1' },
		{ name : 'b' , value : '2' },
		{ name : 'c' , value : '3' }
	]

stop()

  • $(‘#div1’).stop(); //默认 : 只会阻止当前运动

  • $(‘#div1’).stop(true); //阻止后续的运动

  • $(‘#div1’).stop(true,true); //可以立即停止到指定的目标点

  • $(‘#div1’).finish(); //立即停止到所有指定的目标点

jsonp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({
					url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
					type: 'get',//默认get,不用写也可以
					dataType: 'jsonp',
					jsonp: "cb",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
					// jsonpCallback:"baidu",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
					data:{
//						json:1,
						wd:"a"
					},
					success:function (data) {
						console.log(data);
					}
				});

插件

  • $.extend({}) //工具方法
  • $.fn.extend({})//$()方法

$.grep()

1
2
3
4
5
6
7
jQuery.grep( array, function [, invert ] )

$.grep( [0,1,2], function(n,i){
   return n > 0;
 });
 //结果:
 //[1, 2]

插件的几种参数用法:

  1. 传入json对象:
    1
    2
    3
    4
    $( ".selector" ).button({
      disabled: true,
      create: function( event, ui ) {}
    });

2.传入参数:

1
2
3
4
5
$( ".selector" ).button( "disable" );

var isDisabled = $( ".selector" ).button( "option", "disabled" );

$( ".selector" ).button( "option", "disabled", true );

3.事件绑定:

1
$( ".selector" ).on( "buttoncreate", function( event, ui ) {} );

index()

1
2
3
4
5
6
7
8
9
10
11
<ul> 
<li id="foo">foo</li> 
<li id="bar">bar</li> 
<li id="baz">baz</li> 
</ul> 

$('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置 
$('li').index($('#bar')); //1，传递一个jQuery对象 
$('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置 
$('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的做引位置 
$('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。