jQuery总结（二）

Jquery特殊效果

fadeIn() 淡入

    $btn.click(function(){

        $('#div1').fadeIn(1000,'swing',function(){

            alert('done!');

        });

    });

fadeOut() 淡出

fadeToggle() 切换淡入淡出

hide() 隐藏元素

show() 显示元素

toggle() 切换元素的可见状态

slideDown() 向下展开

slideUp() 向上卷起

slideToggle() 依次展开或卷起某个元素

Jquery链式调用

jQuery对象的方法会在执行完后返回这个jQuery对象，所有jQuery对象的方法可以连起来写：

$('#div1') // id为div1的元素

.children('ul') //该元素下面的ul子元素

.slideDown('fast') //高度从零变到实际高度来显示ul元素

.parent()  //跳到ul的父元素，也就是id为div1的元素

.siblings()  //跳到div1元素平级的所有兄弟元素

.children('ul') //这些兄弟元素中的ul子元素

.slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

$(this).next().slideToggle().parent().siblings().children('ul').slideUp();

jQuery属性 操作

1、html() 取出或设置html内容

// 取出html内容    var $htm = $('#div1').html();

// 设置html内容    $('#div1').html('<span>添加文字</span>');

2、prop() 取出或设置某个属性的值

取出图片的地址    var $src = $('#img1').prop('src');

设置图片的地址和alt属性    $('#img1').prop({src: "test.jpg", alt: "Test Image" });

3、val()获取input 标签 的value

jQuery循环

对jQuery选择的对象集合分别进行操作，需要用到jQuery循环操作，此时可以用对象上的each 方法 。

$(function(){

    $('.list li').each(function(i){

        $(this).html(i);

    })

})

......

<ul class="list">

    <li></li>

    <li></li>

</ul>

// each 中的this 表示当前正遍历出来的那个标签对象

            // each函数中传的匿名函数可以传放两个形参

            // 形参1: 遍历时的索引/标签的索引

            // 形参2: 遍历出来的那个标签对象和动态的this同一个对象

            $lis.each(function (i, elem) {

                // if ($(this).index() % 2 == 1) {

                //     $(this).css({'color':'red'});

                // }

                console.log(i + elem);

            })

jQuery事件函数列表

blur() 元素失去焦点

focus() 元素获得焦点

click() 鼠标单击

mouseover() 鼠标进入（进入子元素也触发）

mouseout() 鼠标离开（离开子元素也触发）

mouseenter() 鼠标进入（进入子元素不触发）

mouseleave() 鼠标离开（离开子元素不触发）

hover() 同时为mouseenter和mouseleave事件指定处理函数

ready() DOM加载完成

submit() 用户递交表单

调试程序的方法

1、alert()

2、console.log()

3、document.title()

转载于:https://www.cnblogs.com/flyPENG/p/9836018.html