rain
发表于 2014-11-20 18:01:19
当调整浏览器窗口的大小时,发生 resize 事件。
resize() 方法触发 resize 事件,或规定当发生 resize 事件时运行的函数。
当用户滚动指定的元素时,会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。
scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数。
rain
发表于 2014-11-20 23:04:40
<script>
$(function(){
/*$('div').click(function(ev){
//ev : event对象 ev自动处理好浏览器的兼容
//ev.pageX(相对于文档的) : clientX(相对于可视区)
//ev.which : keyCode
ev.preventDefault();//阻止默认事件
ev.stopPropagation();//阻止冒泡的操作
return false; //阻止默认事件 + 阻止冒泡的操作
});*/
$('div').one('click',function(){//只执行事件一次
alert(123);
});
});
</script>
rain
发表于 2014-11-20 23:46:59
本帖最后由 rain 于 2014-11-21 00:00 编辑
//div2.offsetLeft
//alert( $('#div2').offset().left );//获取到屏幕的左距离
alert( $('#div2').position().left );//到有定位的父级的left值,把当前元素转化成类似定位的形式
//alert( $('input').val() ); 提取值
//$('input').val(456); 赋值
//alert( $('li').size() );//4 像length
$('li').each(function(i,elem){ //一参:下标 二参 : 每个元素
$(elem).html(i);
rain
发表于 2014-11-21 13:39:17
拖拽效果
$(function(){
var disX = 0;
var disY = 0;
$('div').mousedown(function(ev){
disX = ev.pageX - $(this).offset().left;
disY = ev.pageY - $(this).offset().top;
$(document).mousemove(function(ev){
$('div').css('left',ev.pageX - disX);
$('div').css('top',ev.pageY - disY);
});
$(document).mouseup(function(){
$(document).off();
});
return false;
});
});
rain
发表于 2014-11-21 20:47:24
$(function(){
$('#div1').hover(function(){ 定义一个移入效果和一个移出效果
//$(this).css('background','blue');
//$('#div2').hide(3000); 隐藏
//$('#div2').fadeOut(1000);//默认400 变淡
//$('#div2').slideUp(); 上卷
$('#div2').fadeTo(1000,0.5); 定义变淡程度
},function(){
//$(this).css('background','red');
//$('#div2').show(3000);
//$('#div2').fadeIn(1000);
//$('#div2').slideDown();
$('#div2').fadeTo(1000,1);
});
});
rain
发表于 2014-11-22 09:36:38
document.getElementById('div1').innerHTML 原生写法
alert( $('#div1').get(0).innerHTML ); get()把JQ转化为JS,但必须有下标
for(var i=0;i<$('li').length;i++){ length也是JQ里面的函数
$('li').get(i).style.background = 'red';
$('li').style.background = 'red'; 效果等同于上一个
outerWidth() JQ中获取得到隐藏元素的值
offsetWidth : js是获取不到隐藏元素的值 两者都是width+padding+border
alert( $('div').html() ); 得到第一个元素的内容
alert( $('div').text() );//会获取所有的内容(特例),不含标签
$('div').text('<h3>h3</h3>'); 把标签也当成内容赋值
rain
发表于 2014-11-22 14:13:46
detach() : 跟remove方法一样,只不过会保留删除这个元素的操作行为
$(function(){//等DOM加载完就可以执行了 , 性能要好
});
window.onload = function(){}; 等整个内容都加载完才执行
DOMContentLoaded 原生js中dom加载完就执行,高版本浏览器支持
$(document).ready(function(){} jq中的完整写法,同$(function){}
rain
发表于 2014-11-24 23:17:40
本帖最后由 rain 于 2014-11-24 23:25 编辑
parents() : 获取当前元素的所有祖先节点,参数就是筛选功能
closest() : 获取最近的指定的祖先节点(包括当前元素自身),必须要写筛选的参数,只能找到一个元素
siblings() : 找所有的兄弟节点,参数也是筛选功能
nextAll() : 下面所有的兄弟节点,参数也是筛选功能
prevAll() : 上面所有的兄弟节点
Until() : 截止
rain
发表于 2014-11-26 13:44:20
clone() : 可以接收一个参数 ,作用可以复制之前的操作行为
wrap() : 包装
wrapAll() : 整体包装
wrapInner() : 内部包装
unwrap() : 删除包装 ( 删除父级 : 不包括body )
var elem2 = elem.add('span'); add 增加元素进来
slice() 指定从哪里到哪里选定元素
console.log($('form').serialize());//string : a=1&b=2&c=3
serializeArray() 数据串联后以数组的形式保存
rain
发表于 2014-11-26 16:01:50
//animate() :
//第一个参数 : {} 运动的值和属性
//第二个参数 : 时间(运动快慢的)默认 : 400
//第三个参数 : 运动形式 只有两种运动形式 ( 默认 : swing(慢快慢) linear(匀速) )
//第四个参数 :回调函数
$(function(){
$('#div1').click(function(){
$(this).animate({width : 300 , height : 300} , 4000 , 'linear',function(){
alert(123);
});
$('#div2').animate({width : 300 , height : 300} , 4000 , 'swing');
//$('#div1').stop(); //默认 : 只会阻止当前运动
//$('#div1').stop(true); //阻止后续的运动
//$('#div1').stop(true,true); //可以立即停止到指定的目标点
$('#div1').finish();//立即停止到所有指定的目标点
.delay() 延迟
$(this).animate({width : 300} , 2000).delay(1000).animate({height : 300} , 2000);