<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
    <script type="text/javascript" src="jquery.1.11.1.min.js"></script>
   <style type="text/css">
      .red{
         color: red;
      }
      .box3{
         width: 100px;
         height: 100px;
         background: red;
      }
   </style>
</head>
<body>
  
   addClass()  添加类名
   removeClass() 移除类名
   toggleClass() 添加或移除类名,这个方法很灵活,很舒服
   html()   无参数时获取内部html或者有参数设置内部html
   text() 无参数时获取内部文本或者有参数设置内部文本
   val()  获取或者设置表单元素的value
   css()  获取或者设置css样式
   一个字符串参数  获取
   一个对象       设置
   两个参数       设置
   attr()         给普通标签设置或者获取属性
   removeAttr()    移除属性
   prop() 给表单元素设置和获取属性
   data() 给JQ对象设置属性
   offset  偏移值
 
   <div id="box">box</div>
   <div id="box1">
      <span>span1</span><span>span2</span>
   </div>
   <div id="box2">111</div>
   <div id="box100"></div>
  
   <input type="text" name="" id="t">
   <div class="box3"></div>
   
   <script type="text/javascript">
      //开始这样<div id="box100"></div>,
      //添加属性后变成<div id="box100" name="zhangsan"></div>
      $("#box100").attr("name","zhangsan");  
      $("[name=zhangsan]").html("123")        //因为有属性了,所有可以赋值
 
 
      $("#box").addClass("red").click(function(){
         // $(this).removeClass("red");
         //this指id名为box对应的标签,  toggleClass()这个方法有类就删除类,没类就添加类,很灵活,很舒服
         $(this).toggleClass("red");      
      });
 
      $("#box1").html("<span>hello</span>");  //设了参数就替换了原来的值
      $("#box2").text("<span>hello</span>");  //设了参数就替换了原来的值,标签名也会写上去
 
      $("#t").val("happy");               //给表单赋值的
      $("#t").change(function(){           //输入框内容发生改变时,鼠标一移开马上触发
         alert(123)     
      })
      $(".box3").css("background","#FFFF00");   //2个值设置宽度
     
      $("#box").attr("index",0);           //添加属性,2个参数添加属性,一个参数获得属性
      $("#box").removeAttr("index");       //移除属性
 
   </script>
</body>
</html>