天天看点

Nearth===>WEB前端--第21课/JQuery/链式编程1(基本使用方法以及断链)

链式编程:

断链:
 var obj=$("#dv").html().css("backgroundColor","red");//断链
   console.log(obj);//报错      

代码学习:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nearth</title>
    <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
      <style type="text/css">
        div{
        width:200px;
        height: 200px;
        background-color: aquamarine;
      }
      </style>
    <script type="text/javascript">
      //要求,页面中有一个按钮,还有一个div,点击按钮的时候,让div中添加一个p 标签,并显示内容
      //点击按钮的同时修改div 的背景颜色
      //链式编程:对象.方法().方法().方法();·····
      $(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().css("backgroundColor","red");//断链 
          console.log(obj);//报错
          */  
        })
      })
    </script>
  </head>
  <body>
    <h1>链式编程</h1>
    <hr >
    <input type="button" name="" id="btn" value="显示效果" />
    <div id="dv">
        <p>这是一个p</p>      
    </div>
  </body>
</html>
注意:运行结果也就那样······没什么好看的···顺便想偷个懒··········哈哈哈···········      

休息了几天也该学习了··········舒服···························