2
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>jQuery中的DOM操作</title>
    <style type="text/css">
      .anthor{
        font-style: italic;
      }
    </style>
  </head>
  <body>
    
    <p title="选择你喜欢的水果">选择你喜欢的水果</p>
    <ul>
      <li title="苹果">苹果</li>
      <li title="橘子">橘子</li>
      <li title="菠萝">菠萝</li>
    </ul>
  </body>
  <script src="../js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    
    /*
     * 属性操作
     *    attr()方法来获取和设置属性
     *    removeAttr()方法来删除属性
     */
    
    //获取属性
    //var txt = $('p').attr('title');
    //设置单个属性值
    //$('p').attr('title','my title');
    //设置多个属性值
    //$('p').attr({"title":"my title","name":"test"})//将名/值形式的对象设置为匹配元素的属性
    //类似方法还有html() text() height() width() val() css()等方法
    
    //删除属性
    //$('p').removeAttr("title");
    
    /*
     * 追加样式  addClass()方法
     * 移除样式  removeClass()方法
     */
    $("p").addClass("anthor");
    $("p").removeClass('anthor');
    
    
    /*切换样式*/
    //toggle()控制行为上的重复切换
    /*
    $("p").toggle(function(){
      //代码3
    },function(){
      //代码4
    })
    */
    
    //上述代码会重复切换代码3和代码4
    //toggleClass()控制样式上的重复切换
    //$("p").toggleClass("anthor");//重复切换类名“anthor”
    
    /*判断是否含有某个样式*/
    //hasClass();   如果有返回true，否则返回false
    
    /*
     * 其他方法
     * 1、html()方法：读取或设置某个元素的HTML内容
     * 2、text()方法：读取或设置某个元素中的文本内容
     * 3、val()方法：用来设置和获取元素的值
     * 4、focus()方法：相当于JavaScript中的onfocus()方法，作用是处理获得焦点的事件
     * 5、blur()方法：相当于JavaScript中的onblur()方法，作用是处理失去焦点的事件
     *        defaultValue属性：包含该表单元素的初始值
     */
    
    /*
     * 遍历节点
     * 1、children()方法：取得匹配元素的子元素的集合
     * 2、next()方法：取得匹配元素后面紧邻的同辈元素的集合
     * 3、prev()方法：取得匹配元素前面紧邻的同辈元素的集合
     * 4、siblings():取得匹配元素前后所有同辈元素的集合
     * 5、closest():方法用于取得最近的匹配元素：从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素
     * 6、parent()方法：获得集合中每个匹配元素的父级元素
     * 7、parents()方法:获得集合中每个匹配元素的祖先元素
     */
    
    /*
     * CSS-DOM操作
     * 1、css()方法获取和设置元素的属性值
     * 2、height()方法：获取和设置元素在页面中的实际高度
     * 3、width()方法：获取和设置元素在页面中的实际宽度
     * 4、offset()方法：获取元素在当前视窗的相对偏移，返回的对象包含top和left属性
     * 5、position()方法：获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，返回的对象包含top和left属性
     * 6、scrollTop()方法和scrollLeft()方法分别获取元素的滚动条距顶端和距左侧的距离
     */
    /*var offset = $("p").offset();
    var left = offset.left;
    var top = offset.top;*/
  </script>
</html>