jQuery操作样式

• 样式操作：css操作：修改单个样式; 修改多个样式; 获取样式
  （能写到style里面的叫做样式操作）

    <ul>
        <li class="one">特洛伊希文</li>
        <li>李智恩</li>
        <li><a href="#">安宰贤</a></li>
        <li>小野寺律</li>
    </ul>
    <script src="js/jquery-1.12.2.js"></script>
    <script>
        $(function(){
            //css(name, value)
            //修改单个样式
            //name:样式名 value:样式值
            $(".one").css("backgroundColor","green");

            //css(obj)
            //修改多个样式
            $("li>a").css({
                backgroundColor:"red",
                color:"#fff",
                fontSize:"25px",
            });        //不能忘记加入对象{}这个符号。

            //获取样式
            //class(name)   name:想要获取的样式
            $("li").eq(0).css("fontSize", "20px");
            $("li").eq(1).css("fontSize", "21px");
            $("li").eq(2).css("fontSize", "22px");
            $("li").eq(3).css("fontSize", "23px");


            // 隐式迭代：
            // 设置操作的时候：会给jq内部的所有对象都设置上相同的值。
            // 获取的时候：只会返回第一个元素对应的值。
            console.log($("li").css("fontSize"));//20px
        });
    </script>

• 样式操作class操作：添加一个类 addClass()；移除一个类 removeClss()；判断一个类 hasClass()；切换一个类 toggleClass()

    <input type="button" value="添加basic类">
    <input type="button" value="添加bigger类">
    <input type="button" value="移除bigger类">
    <input type="button" value="判断bigger类">
    <input type="button" value="切换类">
    <ul>
        <li class="aa bb cc dd">1</li>
        <li class="aa bb cc dd">2</li>
        <li class="aa bb cc dd">3</li>
        <li class="aa bb cc dd">4</li>
    </ul>


    <script src="js/jquery-1.12.2.js"></script>
    <script>
        $(function(){

            $("input").eq(0).click(function(){
                // 添加一个类  addClass()
                $("li").addClass("basic");
            });
            $("input").eq(1).click(function(){
                $("li").addClass("bigger");
            });

            //移除一个类  removeClss()
            $("input").eq(2).click(function(){
                $("li").removeClass("bigger");
            });

            //判断一个类  hasClass()
            $("input").eq(3).click(function(){
                $("li").hasClass("bigger");
                console.log( $("li").hasClass("bigger"));
            });

            //切换一个类  toggleClass()
            $("input").eq(4).click(function(){
                //判断li有没有basic类，如果有，就移除它，如果没有就，添加它
                $("li").toggleClass("basic");
            });
        });

    </script>

属性操作（attr操作）：
（能写到标签里面的）
样式：在style里面写的，用css来操作
属性：在里面里面写的，用attr方法操作
用法和css一样
设置单个属性:attr(name,value)
设置多个属性：attr({}) 传入对象
removeAttr(name):移除某个属性

<img src="img/3.jpg" alt="哈哈“ >
<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
	$("img).attr("alt","呵呵”）；
    });

prop操作
在jQuery1.6之后，对于disabled、checked 、selected这类布尔类型的属性来说，不能用attr方法，只能用prop方法。
对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。

<input type="button" value="选中">
<input type="button" value="不选中">
<input type="checkbox" id="ck">

<script src="jquery-1.12.4.js"></script>
<script>
  
  
  //对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。
  $(function () {
    $("input").eq(0).click(function () {
      $("#ck").prop("checked", true);
    });
  
    $("input").eq(1).click(function () {
      $("#ck").prop("checked", false);
    });
  });
</script>