请选择 进入手机版 | 继续访问电脑版

叶子网络bbs论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
楼主: rain

jQuery 网页特效编程

[复制链接]

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 2014-11-20 18:01:19 | 显示全部楼层
当调整浏览器窗口的大小时,发生 resize 事件。
resize() 方法触发 resize 事件,或规定当发生 resize 事件时运行的函数。

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

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 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>
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 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);
        
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 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;
               
        });

});
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 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);
               
        });

});

回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 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')[i].style.background = 'red';          效果等同于上一个

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

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

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 2014-11-22 14:13:46 | 显示全部楼层
detach() : 跟remove方法一样,只不过会保留删除这个元素的操作行为
$(function(){  //等DOM加载完就可以执行了 , 性能要好
});
window.onload = function(){};    等整个内容都加载完才执行

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

$(document).ready(function(){}              jq中的完整写法,同$(function){}
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 2014-11-24 23:17:40 | 显示全部楼层
本帖最后由 rain 于 2014-11-24 23:25 编辑

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

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 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()      数据串联后以数组的形式保存
回复

使用道具 举报

0

主题

3

帖子

8

积分

超级版主

Rank: 8Rank: 8

积分
8
 楼主| 发表于 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);


回复

使用道具 举报

手机版|Archiver|叶子官网|杭州轩翼网络科技有限公司 ( 浙ICP备17027999号

GMT+8, 2024-3-28 21:35 , Processed in 0.236766 second(s), 17 queries .

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表