jQuery基础知识（三）

1.jQuery的操作类样式

• .css():.css(“属性”,“属性值”)；
  .css(“属性”,“属性值”).css(“属性”,“属性值”)
  .css({“属性”:“属性值”，“属性”:“属性值”})
• addClass()：在addclass方法中类样式的名字前面没有点
  可以.addClass(“类名1”).addClass(“类名2”)
  或者.addClass(“类名1 类名2”)
• removeClass():什么也不写的时候是移除某个标签内所有的类样式
• hasClass():检查某个标签内是否应用了某个类样式
• toggleClass() :对设置或移除被选元素的一个或多个类进行切换

var result=$("#dv").hasClass("cls");
console.log(result);//返回结果是true/false

可以用以上的几个方法重写（一）中提到的页面开关灯效果（点击切换body背景色）

.cls{background-color: black;}

方法一

    <script>
        $(function () {
            $("#btn").click(function () {
                if($("body").hasClass("cls")){
                    $("body").removeClass("cls");
                    $(this).val("关灯");
                }else{
                    $("body").addClass("cls");
                    $(this).val("开灯");
                }
            });
        });
    </script>

方法二

<script>
        $(function () {
            $("#btn").click(function () {
                $("body").toggleClass("cls");//切换类样式
            });
        });
</script>

2.链式编程
链式编程注意：$(“div”).html(“设置值”).val(“设置值”)，这样可以
$(“div”).html().text()就不对了，因为获取值时返回的是获取的字符串而不是对象本身所以不能链式编程

• html() 方法返回或设置被选元素的内容 (inner HTML)。
  如果该方法未设置参数，则返回被选元素的当前内容

（css）

div{
     width: 200px;
     height: 100px;
     background-color: green;
}

(div)

<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>

(jq)

//链式编程:对象.方法().方法().方法();....
        $(function () {
            $("#btn").click(function () {
            //方法一
                $("#dv").html("<p>这是一个p</p>");
                $("#dv").css("backgroundColor","red");
            //方法二
                $("#dv").html("<p>这是一个p</p>").css("backgroundColor","red");
            //方法三
                var obj=$("#dv").css("backgroundColor","red").html("<p>这是一个p</p>");
            });
        });

但是

var obj=$("#dv").html()

就不会有效果，返回的当前元素的内容是空，所以也就不会成功

var obj=$("#dv").html().css("backgroundColor","red");

就会产生断链

链式编程案例1

当鼠标进入后,当前的li有高亮显示,点击的时候可以让当前被点击的li的字体变大,字体的颜色改变,改变字体

$(function () {
            $("#uu>li").mouseover(function () {
                $(this).css("backgroundColor","red").siblings("li").css("backgroundColor","");
            }).click(function () {
                $(this).css("fontSize","50px").css("color","green").css("fontFamily","全新硬笔行书简");
            });

        });

链式编程案例2

点击按钮,改变按钮的value值,鼠标进入到按钮中,按钮的宽改变,高改变,鼠标离开的时候,按钮的背景颜色为绿色

$(function () {
            $("#btn").click(function () {
                $(this).val("改变了");
            }).mouseover(function () {
                $(this).css({"width":"200px","height":"100px"});
            }).mouseout(function () {
                $(this).css("backgroundColor","green");
            });
        });

3.获得兄弟元素的几个方法
next();当前元素之后的紧邻着的第一个兄弟元素(下一个)
nextAll();当前元素之后的所有兄弟元素
prev();当前元素之前的紧邻的兄弟元素（上一个）
prevAll();当前元素元素之前的所有兄弟元素
siblings();当前元素的所有兄弟元素

案例

点击li上下li变不同颜色
.mouseenter();当鼠标指针进入（穿过）元素时
.mouseleave();当鼠标指针离开元素时
注释：与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。请看下面例子的演示。

end方法恢复到断链之前的效果，end()
效果图如下

（css）

ul {list-style-type: none;width: 200px;position: absolute;left: 500px;}
ul li {margin-top: 10px;cursor: pointer;text-align: center;font-size: 20px;}

(jq)

 $(function () {
            //获取ul->li
            $("ul>li").mouseenter(function () {
                $(this).css("backgroundColor","red").siblings().css("backgroundColor","");
            }).mouseleave(function () {
                $(this).css("backgroundColor","").siblings().css("backgroundColor","");
            }).click(function () {
                //链式编程代码
                //断链:对象调用方法,返回的不是当前的对象,再调用方法,调用不了,
                //解决断链--->恢复到断链之前的一个效果--修复断链
                //.end()方法恢复到断链之前的效果
                $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");
            });
        });

4.jQuery动画

hide隐藏
show展示
参数可以是number类型，也可以是字符串类型
“slow”->600ms
“normal”->400ms
“fast”->200ms

$("div").hide(1000,function(){
alter("隐藏完毕");
});

案例1

点击按钮显示或者隐藏图片
firs第一个元素
last最后一个元素
效果图如下：


（css）

img{float: left;margin-top: 10px;margin-right:10px;width: 100px;height: 100px;}

(div)

<input type="button" value="显示" id="xs">
 <input type="button" value="隐藏" id="yc">
<div>
    <img src="image1.jpg">
    <img src="image1.jpg">
</div>

(jq)

$(function () {
        $("#xs").click(function () {
            $("div>img").first("img").show(800,function () {
                $(this).next().show(800,arguments.callee)
            })
        });
        $("#yc").click(function () {
            $("div>img").last("img").hide(800,function () { //获取最后一个图片，隐藏
                $(this).prev().hide(800,arguments.callee)//arguments.callee相当于递归
            })
        });
    });

案例2

slideUp(滑入)
slideDown（滑出）
slideToggle（切换滑入滑出）
参数:可以写数字类型 1000毫秒—1秒
参数:字符串: slow normal fast

(div)

<input type="button" value="滑入" id="btn1"/>
<input type="button" value="滑出" id="btn2"/>
<input type="button" value="切换" id="btn3"/>
<div id="dv"></div>

（jq）

$(function () {
            $("#btn1").click(function () {
                $("#dv").slideUp(1000);
            });
            $("#btn2").click(function () {
                $("#dv").slideDown(1000);
            });
            $("#btn3").click(function () {
                $("#dv").slideToggle(1000);
            });

        });

案例3

fadeIn淡入
fadeOut淡出
fadeToggle切换淡入淡出
fadeTo可以设置透明度。参数1：时间；参数2：到达透明度


(div)

<input type="button" value="淡入" id="btn1"/>
<input type="button" value="淡出" id="btn2"/>
<input type="button" value="切换" id="btn3"/>
<input type="button" value="透明度变化" id="btn4"/>
<div id="dv"></div>

(jq)

 $(function () {
            $("#btn1").click(function () {
                $("#dv").fadeIn(1000);
            });
            $("#btn2").click(function () {
                $("#dv").fadeOut(1000);
            });
            $("#btn3").click(function () {
                $("#dv").fadeToggle(1000);
            });
            $("#btn4").click(function () {
                $("#dv").fadeTo(1000,0);
            });
        });

5.动画方法：animate方法

案例1

animate方法；
参数:
1.是键值对—对象（数值的属性可以改，颜色不能改）
2.时间—1000毫秒—1秒
3.匿名函数—回调函数



(css)

*{margin: 0;padding: 0;}
div{width: 200px;height: 100px;background-color: green;position: absolute;/*脱离文档流*/}

(div)

<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>

(jq)

$(function () {
            $("#btn").click(function () {
                //获取div,产生动画效果
                $("#dv").animate({"width":"300px","height":"300px","left":"300px"},1000,function () {
                    $("#dv").animate({"width":"50px","height":"30px","left":"800px","top":"300px","opacity":0.2},2000);
                });
            });
        });

案例2

横向导航栏下拉框
.stop方法用来停止动画
下方案例中就是先停止再隐藏，如果没有stop，鼠标移开后二级目录还会闪烁一下再隐藏。

(css)

* {margin:0;padding:0;}
ul {list-style:none;}
.wrap {width:330px;height:30px;margin:100px auto 0;padding-left:10px;background-color: #0099cc;}
.wrap li {background-color: #0099cc;}
.wrap > ul > li {float:left;margin-right:10px;position:relative;}/*横向排列*/
.wrap a {display:block;height:30px;width:100px;text-decoration:none;color:#000;line-height:30px;text-align:center;}
.wrap li ul {position:absolute;top:30px;display:none;}/*二级目录先隐藏起来*/

(div)

<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">111</a>
            <ul>
                <li><a href="javascript:void(0);">1.1</a></li>
                <li><a href="javascript:void(0);">1.2</a></li>
                <li><a href="javascript:void(0);">1.3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">222</a>
            <ul>
                <li><a href="javascript:void(0);">2.1</a></li>
                <li><a href="javascript:void(0);">2.2</a></li>
                <li><a href="javascript:void(0);">2.3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">333</a>
            <ul>
                <li><a href="javascript:void(0);">3.1</a></li>
                <li><a href="javascript:void(0);">3.2</a></li>
                <li><a href="javascript:void(0);">3.3</a></li>
            </ul>
        </li>
    </ul>
</div>

$(function () {
            $(".wrap>ul>li").mouseover(function () {
                $(this).children("ul").stop().show(500);
            });
            $(".wrap>ul>li").mouseout(function () {
                $(this).children("ul").stop().hide(500);
            });
        });