jQ

jQuery

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

1. jQuery优势

   • 动画
   • 子元素查找children
   • Ajax
   • 浏览器兼容

2. 页面加载事件

   	window.onload	$(document).ready()
   执行时机	必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行	网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完
   编写个数	同一页面不能编写多个	同一页面能编写多个
   简化写法	无	$(function(){//执行代码}) ;

3. jQuery语法结构

   $(selector).action() ;

   • 工厂函数$()：将DOM对象转化为jQuery对象,“$”等同于“ jQuery ”
   • 选择器 selector：获取需要操作的DOM 元素
   • 方法action()：jQuery中提供的方法,操作可以连写

   $("h2").css("background-color","#CCFFFF").next().css("display","block");
   

4. jQuery对象转DOM对象

   • jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象

     var $txtName =$ ("#txtName");      //jQuery对象
     var txtName =$txtName[0];          //DOM对象
     
     

   • 通过get(index)方法得到相应的DOM对象

     var $txtName =$("#txtName");        //jQuery对象
     var txtName =$txtName.get(0);       //DOM对象
     
     

5. 选择器:和css一样

   过滤选择器:使用":"

   语法构成	描述
   :first	频等）才能执行
   :last	选取最后一个元素
   :even	选取索引是偶数的所有元素（index从0开始）
   :odd	选取索引是奇数的所有元素（index从0开始）
   :eq(index)	选取索引等于index的元素（index从0开始）
   :gt(index)	选取索引大于index的元素（index从0开始）
   :lt(index)	选取索引小于index的元素（index从0开始）
   :not(selector)	选取不是selector的元素
   :header	选取所有标题元素，如h1~h6
   :focus	选取当前获取焦点的元素
   :visible	选取所有可见的元素
   :hidden	选取所有隐藏的元素

   $(" p:hidden").show();   //获取隐藏的<p>元素，使其显示
   $(" p:visible").hide();   //获取显示的<p>元素，使其隐藏
   

   转义:KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲id#a");->("#id\#a");

6. 样式设置

   • 使用css()为指定的元素设置样式值

     $(this).css("border","5px solid #f5f5f5");
     

   • 追加和移除样式

     addClass(class)或addClass(class1 class2 … classN)

     removeClass(“style2 ”)或removeClass("style1 style2 ")

     toggleClass(class)模拟了addClass()与removeClass()实现样式切换的过程

   • html()可以对HTML代码进行操作，类似于JS中的innerHTML

     没有参数为获取第一个匹配元素的HTML内容或文本内容

     有参数为用于设置所有匹配元素的HTML内容或文本内容

      $("div.left").html("<div class='content'>…</div>");
     

   • text()可以获取或设置元素的文本内容

     没有参数为获取所有匹配元素的文本内容

     有参数用于设置所有匹配元素的文本内容

      $("div.left").text("<div class='content'>…</div>");
     

   • val()可以获取或设置元素的value属性值

7. 事件

   1. 事件注册

      $(对象).事件名(事件处理函数)

   2. 绑定事件:bind()方法和on方法()

      $("input[name=event_1]").on({
          mouseover: function () {
      	    $("ul").css("display", "none");
          },
          mouseout: function () {
      	    $("ul").css("display", "block");
          }
      });
      

   3. 移除事件:unbind()方法和off()方法

      //off()方法通常用于移除通过 on() 方法添加的事件处理程序
      <p>点击这个段落修改它的背景颜色</p>
      <p>点击一下按钮再点击这个段落( click 事件被移除 )</p>
      <button>移除 click 事件句柄</button>
      <script type="text/javascript">
          $(document).ready(function(){
              $("p").on("click",function(){
                  $(this).css("background-color","pink");
              });
              $("button").click(function(){
                  $("p").off("click");
              });
          });
      </script>
      
      //unbind():移除所有 p 元素的事件处理器
      <p>这是一个段落</p>
      <p>这是另一个段落</p>
      <p>点击任何段落可以令其消失。包括本段落。</p>
      <button>删除p元素的事件处理器</button>
      
      <script type="text/javascript">
          $(function () {
              $("p").click(function () {
                 $(this).slideToggle();
              });
      
              $("button").click(function () {
                  $("p").unbind();
              })
          })
      </script>
      

   4. 委托事件:delegate()

      $(对象).delegate(子元素名,事件名,处理函数）

      有些元素是代码动态生成,没办法添加事件,所以委托给父元素,事件冒泡

      利用事件冒泡机制实现委托,只指定一个事件处理程序来管理某一类型的所有事件,提高事件处理的性能

      <ul id = "lists">
          <li>列表1</li>
          <li>列表2</li>
          <li>列表3</li>
          <li>列表4</li>
          <li>列表5</li>
          <li>列表6</li>
      </ul>
      //1.on方法
      $(function () {
          $("#lists").on("click","li",function (event) {
              $(event.target).css("background-color","red");
          })
      });
      //2.delegate方法
      $(function () {
          $("#lists").delegate("li","click",function (event) {
              $(event.target).css("background-color","red");
          })
      });
      //3.bind方法:只能给已经存在DOM元素添加事件，不能给未来存在DOM元素添加事件。如果要频繁地添加DOM元素，并且给新添加的DOM元素绑定事件的话,用on()
      $(function () {
          $("#lists").bind("click","li",function (event) {
              let target=$(event.target);
              //prop() 方法设置或返回被选元素(DOM属性)的属性和值,如需检索HTML属性,使用attr()方法代替。
              if(target.prop("nodeName")=="LI"){
                  target.css("background-color","red");
              }
           })
      })
      

   5. 主动触发事件

      $(对象).trigger( type )

      <input type="text" name="FirstName" value="Hello World" />
      <br/>
      <button>激活input域的select事件</button>
      <script type="text/javascript">
          $(function () {
              $("input").select(function () {
                  this.after("文本被选中!");
              });
              $("button").click(function () {
                  $("input").trigger("select");
              });
          });
      

   6. 事件参数

   • 事件参数可以提供事件处理函数需要的数据
     • 键盘事件提供当前按键编码参数
     • 鼠标事件提供鼠标当前坐标参数
     • 普通事件提供数据对象作为参数，事件处理函数通过data属性获取