jQuery使用case记录1

• 添加元素/内容追加等

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

• 删除元素/清除元素

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

• 给元素添加类或者删除类

  addClass() - 向被选元素添加一个或多个类
  removeClass() - 从被选元素删除一个或多个类
  toggleClass() - 对被选元素进行添加/删除类的切换操作
  

• 父元素、子元素、同级元素

  parent() 方法返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历
  parents() 方法返回被选元素的所有祖先元素
  children() 方法返回被选元素的所有直接子元素，该方法只会向下一级对 DOM 树进行遍历。
  find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
  
  eg:
  <div class="descendants" style="width:500px;">div (当前元素) 
    <p>p (儿子元素)
      <span>span (孙子元素)</span>      //会被加上红色框框
    </p>
    <p>p (儿子元素)
      <span>span (孙子元素)</span>      //会被加上红色框框
    </p> 
  </div>
  $("div").find("span").css({"color":"red","border":"2px solid red"});
  
  siblings() 方法返回被选元素的所有同胞元素
  next() 方法返回被选元素的下一个同胞元素,该方法只返回一个元素
  nextAll() 方法返回被选元素的所有跟随的同胞元素
  

• 点击事件实现菜单栏高亮选中（同时取消其他高亮选中，active类为高亮样式）

  $(".click_cg").click(function () {
  		$(this).addClass("active").siblings().removeClass("active");
  })
  

• jq attr方法和prop方法区别

  $('').attr()返回的是html对象。 操作checkbox和radio之类属性时，只能控制其选中，不能控制其取消选中。
  $('').prop()返回的是DOM对象。是有true,false两个属性使用prop();（如'checked','selected','disabled'等）
  

• jq 获取radio切换时事件

  $('input:radio[name=test]).click(function(){
        xxxxxxx;
  });
  //当name为test的单选框被选中时触发
  

• jq closest() 方法：方法返回被选元素的第一个祖先元素。祖先是父、祖父、曾祖父，依此类推。

  $(obj).closest(".ttt")  // 选取当前点击元素的第一个祖先元素class为ttt的
  

• jq 输入框值发生变化时触发事件

  方法1：
  html:
  <input type="text"  id="free_value"  oninput="change_value()" onporpertychange="change_value()"  />
  js:
  function change_value(){
  }
  		
  注意:此事件只能监听键盘输入的内容，如果是在脚本中改变input的value值不会触发事件
  
  方法2：
  html:
  <input type="text"  id="free_value" />
  js:
  $("#free_value").on("input",function(){
  })
  
  eg: oninput("change_value()")  等价于 $("xxx").on("input",function(){})