JQ的简单介绍

前言

平常再用JS时，因为比较繁琐，所以导致文件比较大，而用JQ的话它是一个JavaScript库，封装了很多的JS方法，可以使前端人员去调用，从而减少开发时间，提高开发效率。它具有以下优点：轻量级，核心文件很小，不会影响页面加载速度；跨浏览器兼容，基本兼容了现在主流的浏览器；支持链式编程和隐式迭代；对事件、样式和动画有良好的支持，简化了DOM操作；支持插件扩展开发，有丰富的第三方插件可用；免费且开源。

JQuery使用

1.导入JQuery依赖的js文件

<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>

2.JQuery语法

$(selector).action()

一般在选择的元素前面会有一个$符号，而且选择元素时也比较简便

3.入门函数

第一种: 简单易用。

   $(function () {   

    ...  // 此处是页面 DOM 加载完成的入口

   }) ;

第二种: 繁琐，但是也可以实现

   $(document).ready(function(){

   ...  //  此处是页面DOM加载完成的入口

   });

4.js的DOM对象 转换成  Jquery对象

   let obj =  document.getElementById("box")

   let $ob =  $(obj);

   =>

   let $obj = $("#box")

   5.JQuery 转换成 DOM 对象

   let obj = $("#box")[0]

   let obj = $("#box").get(0)

   6.基本方法

   dom对象.value = > $(JQuery).val()

   dom对象.innerHTML = > $(JQuery).html()

   dom对象.innerText =>  $(JQuery).text()

   dom对象.style.属性 = 值;

   =>

   $(JQuery).css(属性名,属性值)

   $(JQuery).css("color","red")

   $(JQuery).css({属性名:属性值,属性名:属性值})

   $(JQuery).css({"color":"red","font-size":"18px"});

JQuery选择器

     JQuery语法：$(selector).action()

     1.基础选择器

     $("*"):通配选择器

     $("#id")：ID选择器

     $(".class"):class选择器

     $(".element"):element选择器

     $("a,b,c.."):群组选择器

     $(".a.b"):并集选择器

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

     $("[href='#']") 所有 href 属性的值等于 "#" 的元素

     $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素

     $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素

     $("[href^='.jpg']") 所有 href 属性的值包含以 ".jpg" 开头的元素

     $("[href*='.jpg']") 所有 href 属性的值包含以 ".jpg" 包含的元素

     $("E F"): 所有E的后代F的元素

     $("E>F"): 所有E的子元素F的元素

     $("E+F"): 所有E的相邻兄弟F的元素

     $("E~F"): 所有E的兄弟F的元素

     $("E:first-child"): 所有第一个子元素E

     $("E:first-of-type"): 所有第一个类型元素E

     $("E:eq(index)"): 所有第一个类型元素E

事件函数

  click()：点击事件

  dblclick()：双击事件

  change()：域内容被改变

  focus()：聚焦事件

  blur()：失去焦点事件

  mouseover()：鼠标移至元素上事件

  mouseout()：鼠标从元移开素事件

  keydown()：键盘按下