【前端基础】javascript笔记

      #调用：   window.document
               window.document.body

   <script>
      // javascript语句
   </script>
   //通常在html head标签中定义javascript

    // 单行注释

    /*
       多行注释
    */

   var a = 133;  //也可省略关键字var
   str = "hello hehe"

     + - * / % ++ -- 
     eg . var firname = "fank"
          var secname = "hu"
          var name=firname +" "+secname

     onclick : 户点击时执行的js语句
          <input type="button" id="b1" value="click me" onclick="alert('hey guy')" />
     onmouseover 鼠标移入
     onmouseout  鼠标移出

    <script>
      function sayHi(name){
        alert(name+",keep calm and caryy on");
        return name;
      }
    </script>
   <input type="button" id="b3" value="button3" onclick="sayHi('fankhu')"/>

     # if .. else if .. else
      v=input
     if (v > 3) {
        //something
     }else{
        //something else
     }

     # 三目 (a>b) ? a : b
     # switch
       switch(){
         case "a": v="hi";break;
         case "b": v="no";break;
         default:
            alert("error");
       }
     #比较操作符
          == 值等于
          === 值和类型都等于
          >,<,>=,<=,!=
     # 逻辑操作符 || &&

      for(i=0;i<10;i++){ } 
      for(i in arr){ }
      while( ){ }
      do{ }while()

    # 创建一个空对象
      obj1= new Object();

    # 对象定义方法：创建一个构造函数（有点像其他oop的类定义）
       
       function myobject (name) {
         var privateA=111;             //外部不可见
         this.name=name;
          this.info= "I'm a object";  // this关键字，表示对象本身，只有this指向的属性才能被外部看见
          this.showInfo=function(){   // 用匿名函数定义对象的方法
            alert(this.info);
           }
       }

      扩展 ： myobject.prototype.sayHi=function(){....}
      
      继承 ；对象Dog要继续对象Pet 
             Dog.prototype = new Pet();

     # json 是javascript对象的一种简单紧凑的标签。能被js和浏览器直接解析。
     # 语法 
        var user1='{"username":"toby","location":"JP"}';
        var user2='({"username":"toby","location":"JP"})';

        var ob1=eval('('+user1+')');
        var ob2=eval(user2);

        var ob3=JSON.parse(user1);

  # JSON数据序列化 --将js对象转化为JSON序列
        JSON.stringify()     

  $(this).hide()   隐藏当前HTML元素
 
  $("#test").hide()  隐藏 id="test"的函数
 
  $("p").hide()     隐藏 所有<p>标签

  $(".test").hide()  隐藏所有class="test"的标签

    $(selector).action()

    选择器+事件

    $(document).readY(function(){

    });

    为了防止在文档加载完成前就运行jqury代码

    1.5.1 元素选择器
    $("p")

    $("p.intro")  选取所有class=intro的<p>元素

    $("p#demo")   选取所有id=demo的<p>元素

    $("[href]") 选择所有带href属性的元素

    $("[href='#']") 选取所有带有href值等于#的元素

    $("[href!='#']")

    $("[href='.jpg']")
    
    $("input[name='group_status']:checked").val()  #选择 radio值    

    $("p").css("background-color","red");

    $(document).ready(function) #文档就绪事件

    $(selector).click(function) #单击事件

    $(selecto).dblclick(function) #双击

    $(selector).mouseover(function)

    #隐藏
    $("p").hide(); 
    #显示
    $("p").show(); 

     $(selector).hide(speed,callbackfunc)
    $("p").hide(1000,function(){
    alert("The paragraph is now hide");
    })

   #获取DOM内容

   text()  设置或返回元素文本内容
   html()  设置或返回元素的HTML内容
   val()   设置或返回表单字段的值
   attr()  获取属性
   其中以上函数也可拥有回调函数

   #设置内容
   test("new content");
   html("<p>Hello fank</p>");
   val("sth");

   $("#w3s").attr("href","http://www.w3school.com.cn/jquery");

   #添加元素

   append() 在被选元素结尾插入内容
   prepend() 在被选元素开头插入内容
   after()   在被选元素之后插入内容
   before()  在被选元素之前插入内容

  # $("#btn4").click(function(){
          $("#test2").append("<p>hi</p>");
     })
     });

     remove()  删除元素及其子元素
     empty()   从被选元素中删除子元素

    css()

    $("p").css("backgroud-color":"yellow");

    # jQuery 祖先

      parent()    返回元素的直接父元素
      parents()   返回所有父元素
      parentsUntil("div") 返回直到div的父元素

       children()   返回所有直接子元素
       find("*")    返回所有后代
       find("span") 返回span标签的后代
     
       var open_buttion= $(obj).parent().prev().children();

       siblings() 返回所有同胞元素
       next()     返回下一个同胞元素
       nextAll()  返回后面所有同胞元素
       nextUntil()
       prev(),prevAll(),prevUntil()

       first()
       last()
       eq()  返回索引 eq(1)
       filter() 选取符合条件的元素
          filter(".intro") 返回带有类名intro的元素
       not() 与filter相反

      Ajax= Asynchronous Javascript And Xml
      不重载整个页面，Ajax通过后台加载数据并在页面显示指定内容。
      Ajax 支持使用http GET 和POST方法从服务器请求数据

           GET - 从指定资源请求数据
           POST 向指定资源提交要被处理的数据
        GET：
            GET请求可能会被缓存
            GET请求保留在浏览器的历史记录中
            GET请求可被收藏为书签
            GET请求不应在处理敏感数据时使用
            GET请求有长度限制 2048
            GET请求应该只用于取回数据
        POST:
            POST请求不会被缓存
            POST请求不会保留在历史记录中
            不能被收藏为书签
            无长度要求

    1 获取指定列，修改样式
    $("#yl_monitor_table tbody tr").each(function(){online=$(this).find('td:eq(4)');online_val=online.text();if(online_val>0){online.css({color:'red',fontWeight:'bold'})}else(online.css({color:'green',fontWeight:'bold'}))})