1.什么是 jQuery ？

jQuery是一个轻量级的"写的少，做的多"的JavaScript函数库。[独立的javascript文件]。

2.jQuery的使用

  1. 通过script标记导入本地jquery函数库文件到网页中。它是一个javascript文件。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../../Jquery-js/jquery-3.6.0.js"></script>
</head>
<body>
  <div id="app"></div>
<script>
  $(function(){
    // jQuery是一个轻量级的"写的少，做的多"的JavaScript函数库。[独立的javascript文件]
    var domobj = document.getElementById('app') //dom对象
    console.log(domobj);
    console.log($('#app')) //jquery对象
  })
</script>
</body>
</html>

适用于我们将jquery函数库文件下载到本地计算机以后操作。

2.通过script标记利用网络地址导入jquery函数库到网页中。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>通过script标记使用</title>
    <!-- 导入jquery函数库【网络地址】 -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      $(function(){
      alert("通过script标记引入独立的jquery文件");
      });
    </script>
  </head>
  <body>
  </body>
</html>

1.jQuery 语法

通过 jQuery，您可以选取HTML 元素【标记】，并对它们执行"操作"（actions）。

基础语法： $(selector).action()

  1. 美元符号定义 $ -表示jQuery，jQuery表示$。我们可以使用$代替jQuery。
  2. 选择符（selector）---"查询"和"查找"需要被控制的 HTML 元素。可以将被控制的 HTML 元素转换成jQuery对象。[ $(selector)--jQuery的构造器--创建jQuery对象]
  3. action()指对得到的jQuery对象调用的函数/属性

Javascript的页面初始化事件

  1. body中提供οnlοad=“函数”
  2. window.οnlοad=function(){}

实例:(通过jquery的css方法设置样式)

//$("#p1").css("font-size","50px");
  //我们可以在jquery的函数中使用javascript语法。
  //var pdom=document.getElementById("p1");
  //alert(pdom); //[object HTMLParagraphElement]
  //$(selector)jQuery的构造器[创建jQuery对象]
  //var jqobj=$("#p1");
  //alert(jqobj); //[object Object]
  //不能使用javascript对象【dom对象】调用jQuery的函数和属性
  //var pdom=document.getElementById("p1");
  //pdom.css("font-size","50px");
  //pdom.style.fontSize="50px";
  //不能使用jquery对象调用javascript的函数和属性
  let domobj = $("#p1").get()[0];
  console.log(domobj)
  domobj.style.fontSize="50px"

Jquery对象与javascript对象的转换

  1. javascript对象 ----> Jquery对象-------【$(javascript对象)】
  2. Jquery对象 ------> javascript对象-----【Jquery对象.get()】

例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试jquery的语法</title>
<!--导入jquery函数库 -->
<script src="js/jquery-3.6.0.js"></script>
<script>
$(function(){
//$(javascript对象)
//将javascript对象【dom对象】转换出成jQuery对象
//var pdom=document.getElementById("p1");
//var jqobj=$(pdom);
//alert(jqobj); //[object Object]
//jqobj.css("font-size","50px");
//jquery的构造有常用的两种
//$(selecter)---将被选中的html标记构造成Jquery对象
//$(javascript对象)---将javascript对象构造成Jquery对象
//jquery对象.get();
//将jquery对象转换成javascript对象【dom对象】
//var jqobj=$("#p1");
//var javascriptobj=jqobj.get();
//alert(javascriptobj); //[object HTMLParagraphElement]
//var javascriptobj=$("#p1").get();
//alert(javascriptobj);  //[object HTMLParagraphElement]
});
</script>
</head>
<body>
<p id="p1">测试jquery的语法</p>
</body>
</html>

jquery的构造有常用的两种

$(selecter)---将被选中的html标记构造成Jquery对象

$(javascript对象)---将javascript对象构造成Jquery对象

2.jQuery 选择器

JQuery如何选取元素

语法

描述

${" * "}

选取所有的元素

${this}

选取当前元素

${" #i dname "}

id选择器

${" . className "}

class选择器

${"TagName"}

元素选择器

${"[atrName]"}

属性选择器

${"TagName className"}

包含选择器

等等。。。（和css选择器差不多），类似于JavaScript 中【document.querySelectorAll()】

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

3.jQuery HTML

1.jQuery获取/设置文本元素的值

   jQuery获取元素的值  text()、html() 以及 val()

   text()---返回所选元素的文本内容  --- > innerText

   html()--返回所选元素的内容（包括 HTML 标记） --->innerHTML

   val()----返回表单字段的值 -----value

例如:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../../../Jquery-js/jquery-3.6.0.js"></script>
  <title>Document</title>
</head>
<body>
  <script>
    $(()=>{
      var strTag = "<h2>今天是个好日子</h2>";
      let btns =  $("button");
      console.log(btns)
      for (let i = 0; i <  btns.length; i++) {
        btns.get()[i].onclick = function(){
          switch(i){
            case 0: 
            $("#content").text(strTag); 
            break;
            case 1 : 
            $("#content").html(strTag); break;
            case 2 : 
            $("#content").html ($("#val").val()); break;
          }
        }
      }
      
    })
  </script>
  <div>
    <button>text</button>
    <button>html</button>
    <br>
    <button>单击按钮将输入框的内容显示在下面</button>
    <input type="text" id="val">
    <div id="content">输出结果</div>
  </div>
</body>
</html>

2.jQuery - 添加元素

append() - 在被选中元素中插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

3.jQuery - 删除元素

remove() - 删除被选元素（及其子元素）【有过滤功能】

empty() - 从被选元素中删除子元素(不删除当前父元素)

4.jquery的CSS 操作

1.为元素添加不存在的样式

css(样式属性名称，属性值) 设置被选元素的具有这个样式。

css({样式属性名称:属性值,样式属性名称:属性值}) 设置被选元素具有一组样式。

2.为元素添加已经存在的样式

addClass() - 向被选元素添加一个或多个样式类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

3.获取元素样式

css(样式属性名称) 返回被选元素的指定样式属性值。

5.jQuery 事件

jQuery 事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：

$("p").click();

下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

$("p").click(function(){ // 动作触发后执行的代码!! });

常用的 jQuery 事件方法

  1. $(document).ready(function) 文档完全加载完后执行函数
  2. click(function) 方法是当按钮点击事件被触发时会调用一个函数
  3. dblclick(function)双击元素时，会发生 dblclick 事件。
  4. mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。
  5. mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。
  6. hover(function)方法用于模拟光标悬停事件。
  7. focus(function)当元素获得焦点时，发生 focus 事件。
  8. blur(function)当元素失去焦点时，发生 blur 事件。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../../../Jquery-js/jquery-3.6.0.js"></script>
  <title>Document</title>
  <style>
    #box{
      width: 200px;
      height: 200px;
      border: 1px solid pink;
    }
  </style>
</head>
<body>
  <button id="btn">jquery单击事件</button>
  <div id="box"></div>
  <script>
    $(function(){
      $("#btn").click(function(){
        alert("btn打印")
      })
      $("#box").hover(function(){
        $("#box").css("background","green")
      })
      $("#box").mouseleave(function(){
        $("#box").css("background","white")
      })
    })
    
    let ps = document.getElementsByTagName("p");
    console.log(ps)
  </script>
</body>
</html>

6. 元素的隐藏和显示动画【就是元素的隐藏和显示】

hide([毫秒数],[success-function]) 隐藏元素

show([毫秒数],[success-function]) 显示元素

fadeIn([毫秒数],[success-function]) 显示元素。

fadeOut([毫秒数],[success-function]) 隐藏元素。

slideDown([毫秒数],[success-function]) 显示元素

slideUp([毫秒数],[success-function]) 隐藏元素

例如:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../../Jquery-js/jquery-3.6.0.js"></script>
  <style>
    .box{
      width: 200px;
      height: 200px;
      border:1px solid pink;
    }
  </style>
</head>
<body>

  <button id="hide">隐藏</button>
  <button id="show">显示</button>
  <div class="box"></div>
  <script>
    $(function(){
      $("#hide").click(()=>{
        $(".box").hide(1000);
      })
      $("#show").click(()=>{
        $(".box").show(1000);
      })
      // $("#hide").click(()=>{
      //   $(".box").fadeOut(1000);
      // })
      // $("#show").click(()=>{
      //   $(".box").fadeIn(1000);
      // })
      // $("#hide").click(()=>{
      //   $(".box").slideUp(1000);
      // })
      // $("#show").click(()=>{
      //   $(".box").slideDown(1000);
      // })
    })
  </script>
</body>
</html>

jQuery 效果- 动画

jQuery animate() 方法用于停止动画或效果，在它们完成之前。

jQuery 停止动画

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

jQuery - 链(Chaining)

支持链式调用

$("btn").click(function(){}).hover(function(){})...fn()等等

7.HTML DOM 遍历和修改

jQuery each() 方法

语法

$(selector).each(function(index,element){   })

each函数中的function

参数1-index--被遍历出的每一个元素在数组中的位置[下标]

参数2-element--被遍历出的每一个元素具体元素【DOM对象】

  each函数中的function中没有element时，可以被this代替

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../../../Jquery-js/jquery-3.6.0.js"></script>
  <title>Document</title>
</head>


<body>
  <p>我是谁</p>
  <p>我在那</p>
  <p>我在干嘛</p>
</body>
<script>
  // $(()=>{
  //   $("p").each(function(index) {
  //     console.log(this)  // this为dom对象
  //     this.style.fontSize = "30px" 
  //   })
  // })
  $(()=>{
    $("p").each(function(index) {
      $(this).css("font-size","30px") 
    })
  })
</script>
</html>

无奈源于不够强大jquery 给文件指定路径 jquery单独写一个文件_jquery 给文件指定路径