jq概念笔记

jQuery页面加载后执行的事件(3种方式)
1 $(function () {

});

2 $(document).ready(function () {

});

3 window.onload = function () {

};

$() 获取到的都是一个集合

$('li') => ['li','li','li']

attr('title') 为获取(title可以换成class、id等)

scrollTop()获取滚动距离

$('div').attr('title','456');//$('div').attr('title','456');为赋值

上找父母（parents）下找孩子（children）中间找兄弟（siblings）、next

$('#.父级元素').find('.className、标签');

//index 索引:当前元素在所有兄弟节点中的位置从0开始

$('div').addClass('box3 box4');添加class

width = width

innerwidth() = width+padding 不加margin

outerwidth() = width+padding+border 不加margin

如果

outerWidth(true)这样就加margin

$('input[value*=3]').css('background','red');

$('div[style*=red]').css('background','');

// input[value^=11] ^= 11开头
// input[value$=11] $= 11结尾
// input[value*=11] *= 只要有包含11的

<body>
<script type="text/javascript">
//insertBefore prependTo 前面插入
//insertAfter appendTo后面插入
	$(function(){
		// $('span').insertBefore($('div')).css('color','red');span插入到div前面
		//$('div').insertAfter($('span'));div插入到span后面
		 //$('div').appendTo($('span'));
		 // $('div').prependTo($('span'));
		 //区别:后续操作变了
		 // $('div').before($('span')); div前面是span
		 // $('div').after($('span')).css('color','red'); div后面是span 针对的是第一个操作的元素
	});
</script>
  <div>div</div>
  <span>span</span>
</body>

好的鼠标事件写法:

$('div').on('click',function(){
		alert('123');
		$('div').off('加取消的事件');
	});

鼠标移入移出事件：

$(function(){
　　$("#div").hover(function(){
　　　　$(".div2").slideDown();
　　},function(){
　　$(".div2").slideUp();
  })
});

 $(function(){  
                $('#id').on({  
                    mouseover : function(){  
                        $(this).wrap("<h1>") ;  
                    } ,  
                    mouseout : function(){  
                        $(this).unwrap() ;  
                    }   
                }) ;  
            }) ;

$('#div1').find('div').eq($(this).index()).show();

eq($(this).index())//对应当前点击的下标表示

//ev:event 对象

//js
/*鼠标坐标方法:clientX(相对于可视区) Y;
keycode:键盘键值
*/
//jq
/*鼠标坐标方法:ev.pageX(相对于文档的) Y;
ev.which:键盘键值
ev.preventDefault()阻止默认事件
ev.stopPropagation()阻止冒泡操作
return false;阻止默认事件+阻止冒泡操作一句搞定
*/
//one() 只执行一次

detach():跟remove方法一样，只不过会保留删除这个元素的操作行为(如点击).

/ get():把jq转成原生js
// outerWidth():获取不到隐藏元素的值

clone():可以接受一个参数，作用可以复制之前的操作行为

//$('#div1').clone(true).appendTo($('span'));//true加上克隆行为

//$('span').wrap('<div>');
// wrap():这里表示给每个span元素外面包裹一个div标签（单独包裹）
//$('span').wrapAll('<div>');用一个div包裹住所有的span
//wrapInner():内部包裹

//unwrap():删除包裹：删除父级(不包括body)

$('li').slice(1,4).css('background','red'); 2,3,4个变红了筛选

//serialize:输出序列化表单值
// 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'},

]

</form>

运动

// animate():第一个参数：{width:200} 运动的值和属性
// 第二个-时间：默认400ms{},1000
//第三个-运动形式-两种：1.默认：swing(慢快慢) 2.linear(匀速)
//第四个-回调函数
//$(this).animate({width:300,height:300},2000,'linear',function(){alert(123)});

//stop():默认阻止当前运动，不阻止所有，stop(true) 阻止后续所有运动，stop(true,true) 当前运动立马完成 = finish()立即完成运动。

$('#div1').offset().top //left offset()的距离值都是相对于整个页面的

$('#div2').position().left//父级元素css加定位他不认margin值

//delay(1000):延迟(时间)

//事件委托
/*$('ul').delegate('li','click',function(){
this.style.background = 'red';
});*/
//阻止事件委托 $('ul').undelegate();

//$('#div1').trigger('click');(打开页面)主动触发点击效果

工具方法

//$.aaa() jq、js都可以用叫做工具方法
//$.trim() 去前后空格
//$.type() 判断数据类型、num = 1; alert($.type(num));
//$.inArray() 类似于 indexOf 用法:alert($.inArray('b',arr))返回位置

//$.proxy() 改变this的指向用法:$.proxy(show,window)(3,4);后面传参

var jq = $.noConflict();//防止冲突

var $ = jq;

jq(function(){

alert(123);

})

scrollTop() ==$(document).height()-$(window).height();

//解决冲突
    var jq = $.noConflict();
    var $ = 123;
    jq(function () {
        alert($); //123
    });

var str = '{"name":"hello"}';

alert($.parseJSON(str).name);//JSON

var aDiv = document.getElementsByTagName('div');//类数组
$.makeArray(aDiv).push();//转为正真的数组

猜你喜欢