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>
<input type="text" name="a" value="1"/>
<input type="text" name="b" value="2"/>
<input type="text" 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();//转为正真的数组