什么是jQuery？

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。它并不能代替JavaScript

  1. jquery 是一个javascript库. 对javascript进行封装可以更加优雅的写js代码
  2. jquery主要是通过操作html中dom 的方式进行代码编写.和设计
  3. jquery的优点是简单.易用. 能简写很多的javascript代码
  4. 使用jquery可以很快速的构建前端页面.一些javascript特效.
  5. jquery是javascript的一个库同时也是对js更加简便操作

jQuery官网地址：https://jquery.com/
jQuery API 中文文档：https://www.jquery123.com/

如何引入jQuery库

  1. 官网下载通过script引入
    注意：我们这里学习中下载未压缩版本即可，实际项目上线中才引入压缩过后的min.js版本
    <script src="./jquery-3.6.0.js"></script>

  1. 通过百度的CDN引入在线链接
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

初体验原生JS和jQuery对比

  1.     <input type="button" value="显示效果" id="btn">
  2.     <div></div>
  4.     <script>
  5.         // 原生JavaScript
  6.         document.querySelector('#btn').addEventListener("click", function() {
  7.             let divObj = document.querySelector('div');
  8.             divObj.style.width = "200px";
  9.             divObj.style.height = "200px";
  10.             divObj.style.backgroundColor = "red";
  11.         })
  13.         // jQuery
  14.         $('#btn').click(() => {
  15.             $('div').css({
  16.                 'width': "200px",
  17.                 'height': "200px",
  18.                 'backgroundColor': "pink"
  19.             })
  20.         })
  21.     </script>

jQuery中顶级对象$

  • DOM中的顶级对象：document——页面中的顶级对象
  • BOM中的顶级对象：window——-浏览器中的顶级对象
  • jQuery中的顶级对象：jQuery——$

$是jQuery的顶级对象，相当于原生JavaScript中的window。把元索利用$包装成Query对象,就可以调用jQuery的方法。
$是jQuery的别称,在代码中可以使用jQuery代替$,但一般为了方便,通常都直接使用$。

使用jQuery获取元素选择器为div的对象并隐藏

  1.  $('div').hide(); //通过元素选择器获取div
  2.  jQuery('div').hide();//通过元素选择器获取div

jQuery工厂函数$()的四种使用方式

  1. $(选择器，上下文) DOM选择，可以指定上下文；
  1. $('li').css('color','blue');
  2. $('li','#first').css('color','blue');
  3. // $('li','#first') === $('#first li')
  4. $('#first li').css('color','red');
  1. $(JS对象) jQuery包装器，将原生的js对象转为jQuery对象
    为什么要转换为jQuery对象，因为想使用jQuery对象上的非常丰富的方法和属性
  1. $(document.body).css('backgroundColor','lightgreen');
  2. console.log($(document.querySelectorAll('li')));

  1. $(html文本) 生成创建DOm元素
    用jQuery来创建DOM也是常见操作，例如在ul下创建一个li：
    $('<li>').appendTo($ul);

    1. document.body.insertAdjacentHTML('afterEnd','<p>晚上好！</p>');
    2. $('<p>hello world!</p>').appendTo( "body" );
    3. // 还可以更好玩
    4. $( "<div/>", {
    5. "class": "test",
    6. text: "Click me!",
    7. click: function() {
    8.  $( this ).toggleClass( "test" );
    9. }
    10. }).appendTo( "body" );

  2. $(callback) DOM加载完成
    通常JavaScript需要在DOM加载完成后执行，否则DOM操作可能会失效。jQuery提供了一个方便的方法来监听DOM加载完成：

    1. $(function(){
    2.  // DOM载入后执行
    3. });
    4. // $(callback)的作用完全相当于$(document).ready(callback)

总结$()的参数的四种类型：

  1. 选择器
  2. 原生JS对象（包装器功能）
  3. html字符串（创建dom元素）
  4. 回调函数（DOM加载完成自动调用）

jQuery对象和DOM对象

细说为什么要将jQuery对象和DOM对象进行互相转换，要想使用jQuery的方法和属性，就需要将其转换为jQuery的对象才能使用，但jQuery只是封装了一些好用的属性和方法，并不能完全代替JavaScript，这时候就可以将jQuery对象转换为原生的DOM对象，从而来完成一些特定的问题。

jquery对象转成DOM对象

DOM对象才能使用DOM方法，jquery对象不能使用DOM中的方法，但jquery对象提供了一套更加完善的工具用于操作DOM。

jQuery提供了两种方法：[index]和get(index)

  1. // 使用索引
  2. let div = $("div");  //jQuery对象
  3. console.log(div[0]); //DOM对象
  4. // 使用get(index)
  5. let div = $("div"); //jQuery对象
  6. console.log(div.get[0]); //DOM对象
  7. // 使用...rest
  8. console.log([...$('li')]); // jQuery对象转DOM对象

DOM对象转换为jquery对象

对于一个DOM对象,只需要用$()把DOM对象给包装起来，就可以获得一个jquery对象了，方式为$(DOM对象)。$(document.querySelector('div'))

  1. let btnObj = document.getElementById('btn');
  3. btnObj.onclick = function(){
  4.     this.style.backgroundColor = 'red';
  5. }
  7. // DOM对象转JQuery对象
  8. $(btnObj).click(function(){
  9.     $(this).css('backgroundColor','red');
  10. })

  1. // 原生JavaScript循环DOM元素
  2. document.querySelectorAll('li').forEach(function(item,key){
  3.     console.log(key,item.textContent);
  4. })
  6. // jQuery自带遍历元素的，但也提供了each方法
  7. $.each($('li'),(key,item)=>{
  8.     console.log(key,item.textContent);
  9. })

jQuery中常用的getter和setter方法

jQuery 的 setter/getter 共用一个函数，通过是否传参来表明它是何种意义。简单说传参它是 setter，不传它是 getter。即可以获取值也可以设置值

1. attr()：获取/设置元素属性

attr()方法是jQuery中用于HTML属性的getter/setter。

  1. <input type="button" name="btn" value="显示效果" id="btn">
  1. // attr():获取和设置元素属性
  2. // attr(name):getter
  3. // attr(name,value):setter
  4. // removeAttr(name): 删除属性
  5. $('#btn').attr('type');  // button
  6. $('#btn').attr('value'); // "显示效果"
  7. $('#btn').attr('type','text'); // 修改成了文本框
  8. $('#btn').attr('value','我是一个文本框');
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>属性操作: attr()</title>
  8.     <style>
  9.       body {
  10.         display: flex;
  11.         flex-direction: column;
  12.         align-items: center;
  13.         background-color: lightcyan;
  14.         font-weight: lighter;
  15.       }
  17.       #login {
  18.         width: 400px;
  19.         padding: 20px 10px;
  20.         border: 1px solid #aaa;
  21.         box-shadow: 0 0 5px #888;
  22.         box-sizing: border-box;
  23.         background-color: lightseagreen;
  24.         color: #fff;
  25.         display: grid;
  26.         grid-template-columns: 80px 200px;
  27.         gap: 10px;
  28.         place-content: center center;
  29.       }
  31.       #login input {
  32.         border: none;
  33.         outline: none;
  34.       }
  36.       button {
  37.         grid-column: 2 / 3;
  38.         height: 32px;
  39.         background-color: lightskyblue;
  40.         border: none;
  41.         outline: none;
  42.       }
  44.       button:hover {
  45.         color: white;
  46.         background-color: coral;
  47.         color: #fff;
  48.         /* border: none; */
  49.         cursor: pointer;
  50.       }
  52.       .title {
  53.         color: #666;
  54.         font-weight: lighter;
  55.       }
  56.     </style>
  57.   </head>
  58.   <body id="main">
  59.     <h2 class="title">用户登录</h2>
  60.     <form action="handle.php" method="POST" id="login">
  61.       <label for="email">Email:</label>
  62.       <input type="email" name="email" id="email" autofocus placeholder="请输入邮箱" />
  63.       <label for="password">Password:</label>
  64.       <input type="password" name="password" id="password" placeholder="请输入密码" />
  65.       <label for="confirm">记住我:</label>
  66.       <div>
  67.         <input type="radio" name="save" id="confirm" value="1" checked /><label for="confirm">保存</label>
  68.         <input type="radio" name="save" id="cancel" value="0" /><label for="cancel">放弃</label>
  69.       </div>
  70.       <button>登录</button>
  71.     </form>
  72.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  73.     <script>
  74.         // attr():获取和设置元素属性
  75.         // attr(name):getter
  76.         // attr(name,value):setter
  77.         // removeAttr(name): 删除属性
  79.         const form = $('form');
  80.         // 获取action属性
  81.         console.log(form.attr('action'));
  82.         // 设置action属性
  83.         form.attr('action','admin/check/php');
  84.         console.log(form.attr('action'));
  86.         // 第二个参数允许使用回调函数
  87.         // 根据表单请求类型，动态设置不同处理脚本
  88.         // get: action = query.php?id=2
  89.         // post action = register.php
  90.         form.attr('action',()=>{
  91.             return form.attr('method').toLocaleLowerCase() === 'post'? ' register.php':'query.php?id=2';
  92.         });
  93.          console.log(form.attr('action'));
  95.          // 删除标题的class属性
  96.          $('h2').removeAttr('class');
  97.          $('h2').attr('class');
  98.     </script>
  99.   </body>
  100. </html>

2. css()：获取/设置元素的行内样式

css()方法和attr()方法很类似，只是css()方法作用于元素的css样式，而不是元素的HTML属性。

  1. // 使用style只能获取style属性上的行内样式
  2. // document.querySelector('#btn').style.width
  3. // css样式表的样式是获取不到的，必须使用计算样式才可以
  4. window.getComputedStyle(document.querySelector('#btn'),null).getPropertyValue('width');
  5. // 使用jQuery的css()方法 ，可以直接获得元素最终的计算样式
  6. $('#btn').css('width); 
  8. // 设置一个属性样式
  9. $('#btn').css('backgroundColor','red');
  10. // 设置多个属性样式
  11. $('#btn').css({
  12.     'fontSize':'32px',
  13.     'color':'yellow',
  14.     'border':'0'
  15. })
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>行内样式操作: css()</title>
  8.     <style>
  9.       body {
  10.         display: flex;
  11.         flex-direction: column;
  12.         align-items: center;
  13.         background-color: lightcyan;
  14.         font-weight: lighter;
  15.       }
  17.       #login {
  18.         width: 400px;
  19.         padding: 20px 10px;
  20.         border: 1px solid #aaa;
  21.         box-shadow: 0 0 5px #888;
  22.         box-sizing: border-box;
  23.         background-color: lightseagreen;
  24.         color: #fff;
  25.         display: grid;
  26.         grid-template-columns: 80px 200px;
  27.         gap: 10px;
  28.         place-content: center center;
  29.       }
  31.       #login input {
  32.         border: none;
  33.         outline: none;
  34.       }
  36.       button {
  37.         grid-column: 2 / 3;
  38.         height: 32px;
  39.         background-color: lightskyblue;
  40.         border: none;
  41.         outline: none;
  42.       }
  44.       button:hover {
  45.         color: white;
  46.         background-color: coral;
  47.         color: #fff;
  48.         /* border: none; */
  49.         cursor: pointer;
  50.       }
  52.       .title {
  53.         color: #666;
  54.         font-weight: lighter;
  55.       }
  56.     </style>
  57.   </head>
  58.   <body id="main">
  59.     <h2 class="title">用户登录</h2>
  60.     <form action="handle.php" method="POST" id="login">
  61.       <label for="email">Email:</label>
  62.       <input type="email" name="email" id="email" autofocus placeholder="请输入邮箱" />
  63.       <label for="password">Password:</label>
  64.       <input type="password" name="password" id="password" placeholder="请输入密码" />
  65.       <label for="confirm">记住我:</label>
  66.       <div>
  67.         <input type="radio" name="save" id="confirm" value="1" checked /><label for="confirm">保存</label>
  68.         <input type="radio" name="save" id="cancel" value="0" /><label for="cancel">放弃</label>
  69.       </div>
  70.       <button>登录</button>
  71.     </form>
  72.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  73.     <script>
  74.         // css() : 包括了行内样式的计算样式
  75.         // css(name)：getter
  76.         // css(name,value)：setter 
  77.         // css(name,callback) 
  79.         // 原生操作css
  80.         console.log(document.querySelector('form').style.width); // 只能获取行内样式
  81.         console.log(window.getComputedStyle(document.querySelector('form'),null).getPropertyValue('width')); // 获取计算样式
  83.         // jQuery
  84.         const form = $('#login');
  85.         // css可以直接获取到元素的计算样式
  86.         console.log(form.css('width'));
  88.         // 设置样式
  89.         // form.css('border-top','5px solid yellow');
  90.         // form.css('border-bottom','5px solid yellow');
  91.         form.css({
  92.             'border-top':'5px solid yellow',
  93.             'border-bottom':'5px solid yellow'
  94.         });
  95.         // 表单的背景色随机变换
  96.         form.css('background',()=>{
  97.             const colors = ['lightpink','lightblue','lime','wheat','lightgreen'];
  98.             return colors[Math.floor(Math.random()*colors.length)];
  99.         })
  100.     </script>
  101.   </body>
  102. </html>

3. addClass()和removeClass() 添加和删除类

addClass()方法用来从选中元素中添加类样式
removeClass()方法用来从选中元素中和删除类样式
hasClass()方法用来从选中的元素中判断某类是否存在
toggleClass()方法当元素还没有某些类时，给元素添加这些类；反之，则删除。

  1. $('#btn').addClass('btn'); // 添加类
  2. $('#btn').hasClass('btn'); // true
  3. $('#btn').removeClass('btn'); // 删除类
  4. $('#btn').hasClass('btn'); // false
  5. $('#btn').toggleClass('btn'); // 切换类 添加/删除
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>class操作</title>
  8.     <style>
  9.       .title {
  10.         color: red;
  11.       }
  12.     </style>
  13.   </head>
  14.   <body>
  15.     <h1 class="title">php.cn</h1>
  16.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  17.     <script>
  18.         // 原生: classList对象
  19.       //   let h1 = document.querySelector("h1");
  20.       // 添加class
  21.       //   h1.classList.add("title");
  22.       // 移除class
  23.       //   h1.classList.remove("title");
  24.       // 切换class
  25.       //   h1.classList.toggle("title");
  27.       // -------------------------------
  29.       // jquery
  30.       // addClass() => classList.add()
  31.       // removeClass() => classList.remove()
  32.       // toggleClass() => classList.toggle()
  34.       const h1 = $("h1");
  35.         h1.addClass("title");
  36.         h1.removeClass("title");
  37.         h1.toggleClass("title");
  38.     </script>
  39.   </body>
  40. </html>

4. val() 获取表单元素的值(value)

val()方法用来设置和获取HTML表单元素的value属性，还可用于获取和设置复选框、单选按钮以及<select>元素的选中状态。

  1. // 原生获取
  2. document.getElementById('btn').value;
  3. $('#btn').val(); // 显示效果
  1.       // val():无参,默认就是获取控件元素(input,select...)的value属性的值
  2.       // val(param): 设置
  3.       // val(callback)
  5.       // 原生
  6.       document.forms.login.email.value = "admin@qq.com";
  7.       console.log(document.forms.login.email.value);
  9.       // jquery
  10.       console.log($("#email").val());
  11.       // $("#password").val("123456");
  12.       $("input:password").val("123456");
  13.       console.log($("input:password").val());
  15.       console.log($("input:radio:checked").val());
  17.       $("#email").val(() => "zhang@qq.com");

5. text()和html():获取/设置元素内容

text()和html()方法用来获取和设置元素的纯文本或HTML内容

  1. <ul>
  2.     列表
  3.     <li class="item1">item1</li>
  4.     <li class="item2">item2</li>
  5.     <li class="item3">item3</li>
  6.     <li class="item4">item4</li>
  7. </ul>
  8. <script>
  9.     $(function(){
  10.         // 获取
  11.         $('ul').text(); // "列表" 获取纯文本
  12.         $('ul').html();
  13.         /* 
  14.         列表
  15.         <li>item1</li>
  16.         <li>item2</li>
  17.         <li>item3</li>
  18.         <li>item4</li>
  19.         */
  20.         $('ul .item2').text(); // item2
  22.         // 设置
  23.         $('ul').text("你好");
  24.         $('ul').html(`
  25.             <li>item1</li>
  26.             <li>item2</li>
  27.             <li>item3</li>
  28.             <li>item4</li>
  29.             <li>item5</li>
  30.             <li>item6</li>
  31.         `);
  32.     })
  33. </script>
  1. // text(): 读/写入文本, textContent
  2. // html(): 读/写html文本, innerHTML
  4. $(".box").text("hello world");
  5. // text()不能解析文本中的html,转为实体字符原样输出
  6. $(".box").text("<strong style='color:red'>hello world</strong>");
  8. // html()
  9. $(".box").html("<strong style='color:red'>hello world</strong>");

更多相关文章

  1. 面向对象、类和对象、封装---------私有private、this关键字
  2. css实现垂直居中的方式
  3. 如果使用的库不支持异步，可以使用多进程并将其转化为异步对象
  4. 一个可能让你的页面渲染速度提升数倍的CSS属性
  5. 一些鲜为人知的的CSS3属性
  6. css 中的 content-visitly 提升渲染性能
  7. 关于获取各种浏览器可见窗口大小的一点点研究
  8. javascript创建对象几种方式
  9. 前端170面试题+答案学习整理

随机推荐

  1. （C++）错误的map删除操作和STL中容器的迭代
  2. 第一章C++：函数返回值、GNU编译器命令
  3. 案例分享c++ map的使用和 查找性能测试
  4. C++引用的意义与引用的本质
  5. 从事C/C++开发多年，给零基础想学习C/C++的
  6. C++ 布尔类型和引用的用法详解
  7. C语言不简单，连程序员都这么说，为什么呢？
  8. C#引用类型： 按值传递，按引用传递的对比
  9. C++中的四种强制类型转换_基本用法及使用
  10. 探索C++虚函数在g++中的实现（动多态）_虚函