jQuery

jQuery

• jQuery，是JavaScript世界中使用最广泛的一个库。jQuery是一个 jquery-xxx.js 文件。

  官网：https://jquery.com/

  使用jQuery只需要在页面的 head 引入jQuery文件即可

  或者引入CDN jQuery : https://www.bootcdn.cn/jquery/

  		<!--CDN引入-->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <!--公式：$(selector).action();-->
      //按id来查找：查找<div id="abc">
      $('#abc').click(function (){
     		 alert('hello');
  	});
  

• 事件

  jQuery能够绑定的事件主要包括：

  ​ 鼠标事件

  ​ click: 鼠标单击时触发；

  ​ dblclick：鼠标双击时触发；

  ​ mouseenter：鼠标进入时触发；

  ​ mouseleave：鼠标移出时触发；

  ​ mousemove：鼠标在DOM内部移动时触发；

  ​ hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave

  ​ 键盘事件

​ 键盘事件仅作用在当前焦点的DOM上

• keydown：键盘按下时触发；
• keyup：键盘松开时触发；
• keypress：按一次键后触发。

​ 其他事件

focus：当DOM获得焦点时触发；

blur：当DOM失去焦点时触发；

change：当 、 或 的内容改变时 触发；

submit：当 提交时触发；

ready：当页面被载入并且DOM树完成初始化后触发

• 初始化事件

  我们自己的初始化代码必须放到 document 对象的 ready 事件中，保证DOM已完成初始化

  <script>
      //简化
      $(function () {
          $('#d1').mousemove(function (e) {
              $('#d1').text(e.pageX+" "+e.pageY);
          })
      });
  </script>
  

• 修改CSS

  $('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red');
  var div=$('#test-div');
  div.css('color');//'#000033',获取CSS属性
  div.css('color','#336699');//设置CSS属性
  div.css('color','');//清除CSS属性
  //css()方法将作用于DOM节点的 style 属性，具有最高优先级。如果要修改 class 属性，可以用jQuery提供的下列方法
  var div=$('#test-div');
  div.hasClass('highlight');//false，class是否包含highlight
  div.addClass('highlight');//添加highlight这个class
  div.removeClass('highlight');//删除highlight这个class
  

• 显示和隐藏DOM

  要隐藏一个DOM，我们可以设置CSS的 display 属性为 none，利用 css() 方法就可以实现。

  不过，要显示这个DOM就需要恢复原有的 display 属性，这就得先记下来原有的 display 属性到底是 block 还是 inline 还是别的值。

  jQuery直接提供 show() 和 hide() 方法，我们不用关心它是如何修改 display 属性的

  var a=$('a[target=_blank]');
  a.hide();//隐藏
  a.show();//显示