jQuery 网页特效编程

rain

当调整浏览器窗口的大小时，发生 resize 事件。
resize() 方法触发 resize 事件，或规定当发生 resize 事件时运行的函数。

当用户滚动指定的元素时，会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。

rain

<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

//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

拖拽效果

$(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

$(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

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')[i].style.background = 'red';          效果等同于上一个

outerWidth()              JQ中获取得到隐藏元素的值
offsetWidth :            js是获取不到隐藏元素的值          两者都是width+padding+border

alert( $('div').html() );     得到第一个元素的内容
alert( $('div').text() );  //会获取所有的内容(特例)，不含标签
$('div').text('<h3>h3</h3>');         把标签也当成内容赋值

rain

detach() : 跟remove方法一样，只不过会保留删除这个元素的操作行为
$(function(){  //等DOM加载完就可以执行了 , 性能要好
});
window.onload = function(){};    等整个内容都加载完才执行

DOMContentLoaded    原生js中dom加载完就执行，高版本浏览器支持

$(document).ready(function(){｝              jq中的完整写法，同$(function)｛｝

rain

parents() : 获取当前元素的所有祖先节点，参数就是筛选功能
closest() : 获取最近的指定的祖先节点(包括当前元素自身),必须要写筛选的参数,只能找到一个元素
siblings() : 找所有的兄弟节点，参数也是筛选功能
nextAll() : 下面所有的兄弟节点，参数也是筛选功能
prevAll() : 上面所有的兄弟节点
Until() : 截止

rain

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

//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);