jQ 基础

01JQ 选择器

$('p') //元素选择器 
$('#id') //id选择器 
$('.class') //类选择器 
$ ('*') //选取全部元素 
$ ('this') // 获取当前元素

02JQ 事件

$('#id').click(); // 点击事件 
$('#id').mouseenter() // 鼠标事件
$('#id').keypress() // 键盘事件
$('#id').submit() // 表单事件
$('#id').load() // 文档事件 

03JQ 显示隐藏

hide()&&show()

$('#id').click(function(){
    $('.class').hide(1000);
    $('.class').show(1000);
})

toggle()

$('#id').click(function(){
    $('.class').toggle(1000);
})

淡入淡出

• fadeIn() 淡入
• fadeOut() 淡出
• fadeToggle() 淡入淡出
• fadeTo() 元素变透明

$('#id').click(function(){
    $('.class').fadeIn();
    $('.class').fadeIn("slow");
    $('.class').fadeIn(1000);
    
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
    
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
})

JQ滑动

• slideDown() 下拉滑动
• slideUp() 上滑
• slideToggle()

$('#id').click(function(){
    $('.clss').slideDown(1000);
    $('.clss1').slideUp(1000);
    $('.clss2').slideToggle(1000)
})

JQ动画animate()

// 动画
$('#id').click(function(){
    $('.class').animate(
     {
          left:'250px',
          opacity:'0.5',
          height:'150px',
          width:'150px'
     }
    );
    var divBox = $('#div');
    divBox.animate({height:150px,opacity:'0.4'});
    divBox.animate({width:350px,opacity:'1.4'});
})
// 停止动画 
$('#button').click(function(){
    $('.divBoxLer').stop();
    // stop() 可以添加两个参数 来控制动画的执行
})

JQ动画 链

$('#id').click(function(){
    $('.clss').css('width:150px').slideDown(1000).slideUp(2000);
})

04JQ DOM操作

获取返回内容

        $(document).ready(function(){
             $('#id').click( function(){
                 var textData = $('.p').text("Hello world!");
                 var textHtml = $('.PL').html("Hello world!");
                 console.log(taxtData);
                 console.log(textHtml);
             })
        })

获取表单的值

        $(document).ready(function(){
            $('#button').click(function(){
             var formData = $('#name').val("Hello world!");
             console.log(formData,'数据')
            })
        })

获取属性

$(document).ready(function(){
  $("button").click(function(){
    alert($("#runoob").attr("href",'Hello world!'));
  });
});

05JQ 添加元素

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

    $(document).ready( function(){
            $('#button').click( function(){
                $('.p').append('添加在p标签尾部的新内容');
                $('.p').prepend('添加在p标签开头的新内容');
                
                var text = $('<li></li>').html('添加内容')
                $('#ul .li').after(text)
                $('#ul .li').before(text)
            })
        })

06JQ 删除元素

• remove() - 删除被选元素（及其子元素）
• empty() - 从被选元素中删除子元素

    $(document).ready( function(){
        $('#button').click(){
            $('.class').remove();
            $('.class').empty();
        }
        })

07JQ 操作CSS

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性

$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("h1,h2,p").removeClass("blue");
    $("h1,h2,p").toggleClass("blue");
    $("h1,h2,p").css("background-color");
  });
});

08JQ 操作尺寸

• width() 返回元素的宽度
• height() 返回元素的高度
• innerWidth() 元素的宽度（包括内边距）
• innerHeight() 元素的高度（包括内边距）
• outerWidth() 元素的宽度（包括内边距和边框）
• outerHeight() 元素的高度（包括内边距和边框）

09JQ 异步交互

load()方法

$(selector).load(URL,data,callback);

        $(document).ready( function(){
            $('#button').click(function(){
                $('.form').load('./api/newData.txt')
            })
        })

$.get() 方法

$.get(URL,callback);

        $(document).ready( function(){
            $('#button').click(function(){
                $.get('URL',function(data,status){
                    console.log(data,'数据')
                })
            })
        })

$.post() 方法

$.post(URL,data,callback);

        $(document).ready( function(){
            $('#button').click(function(){
                $.post('url',{
                    name:'name',
                    url:'url',
                    },
                    function(data,status){
                        console.log(data,'数据')
                    }
                )
            })
        })