JQ效果

jquery用元素id选择元素$("#id")
用元素class名选择元素$(".class")
选择p元素$("p")
隐藏当前页面所有元素$(this).hide();

jquery语法

$(selector).action();
美元符号定义jquery 
选择符(selector)查询和查找html元素
jquery的action()执行对元素的操作

jquery元素选择

$("p.intro")选取p元素中class名为intro的元素
$("p#demo")选取p元素中id名为demo的元素
jquery属性选择
$("[href]")选取所有带有href属性的元素
$("[href='#']")选取href值等于#的元素
$("[href!='#']")选取href值不等于#的元素
$("[href$='.jpg']")选取href值以.jpg结尾的元素
jquery CSS选择 在此可以修改p元素的css属性
$("p").css(); 

jquery事件函数

例：
$(document).ready(function(){
    $("button").click(function(){
    $("p").hide();
    })
})
点击按钮文本的显示与消失
<script>
    $(document).ready(function () {
        $("#hide").click(function () {
            $("p").toggle();
        })
    })
</script>
<p>显示与消失</p>
<button id="hide">隐藏</button>

jquery淡入淡出

fadeIn()用于淡入已隐藏元素 
$(selector).fandeIb(speed,callback);
speed可选("slow")("fast")(3000)
fadeOut()用于淡出可见元素
$(selector).fadeOut(speed,callback);
speed同样可选("slow")("fast")(3000)
fadeToggle()在fadeIn()fadeOut()方法之间进行切换
fadeTo()方法允许渐变为给定的不透明度(0~1)之间
$(selector).fadeTo(speed,opacity,callback);
speed规定效果时长 同样可为fast slow 和具体时间长度 opacity参数是设置不透明度(0~1)之间
$("#div1").fadeTo("slow",0.15);设置不透明度之后元素将无法完全从页面消失 留下的颜色深浅与不透明度有关
例：
<script>
    $(document).ready(function () {
        $("button").click(function () {
            $("#div1").fadeToggle("fast");
            $("#div2").fadeToggle("slow");
            $("#div3").fadeToggle(3000);
        })

    })
</script>
<button>淡入淡出</button>
<div id="div1" style="width: 80px; height: 80px; background-color: red;"></div>
<div id="div2" style="width: 80px; height: 80px; background-color: green;"></div>
<div id="div3" style="width: 80px; height: 80px; background-color: yellow ;"></div>

jquery滑动

slideDown()向下滑动
slideUp()向上滑动
alideToggle()上下滑动切换
例：
<script>
  $(document).ready(function () {
      $(".show").click(function () {
          $(".hide").slideToggle();
      })
  })
</script>
<div class="hide">
    <p>123</p>
    <p>123</p>
    <p>123</p>
</div>
<p class="show">点击</p>

jquery动画

$(selector).animate({params},speed,callback);
params定义形成动画的css属性
speed设定效果时长
callback设定动画完成后执行函数名称 也可以没有
在对元素进行动画设置的时候 默认HTML元素的位置都是静态的 并且无法移动 如需对位置进行操作 首先要对元素位置进行设置 position：absolute/relative/fixed 如果不设置位置对元素的位置动画操作就会无效
{}内可以对多个属性进行操作{left:'250px',opacity:'0.5'}
{}内对元素属性的操作 在使用animate时 必须使用Camel标记法书写所有的属性 比如 必须使用paddingLeft而不是padding-left
使用相对值的操作{height:'+=150px'}
使用队列功能
例：
   $(document).ready(function () {
        $("button").click(function () {
            $("div").animate({height:'300px',opacity:'0.4'},"slow");
            $("div").animate({width:'300px',opacity:'0.8'},"slow");
            $("div").animate({height:'100px',opacity:'0.4'},"slow");
            $("div").animate({width:'100px',opacity:'0.8'},"slow");
        })

    })

如果在函数中声明var div=$("div"); 下面的$("div“)就可以替换为div

jquery 中的 stop() 方法

可以停止动画
$(document).click(function(){
    $("#slip").click(function(){
    $("#panel").slideDown(4000);
    });
    $("#stop").click(function(){
    $("panel").stop();
    })
})

jquery方法连接

$("#p1").css("color","red").slideUp(2000).slideDown(2000);