【领会要领】web前端-轻量级框架应用（jQuery基础）

左手的ㄟ右手 2021-08-19 17:00 302阅读 0赞

![file][]

作者 | Jeskson

来源 | 达达前端小酒馆

`jquery`的安装和语法，`jquery`的多种选择器，`dom`操作和`jquery`事件。

`jQuery`框架，简介，优势，安装，语法，`jQuery`选择器，`id`选择器，类选择器，标记选择器，属性选择器，位置选择器，后代选择器，子代选择器，选择器对象，选择器对象遍历，页面初始化，`jQuery`的`dom`操作，查找，删除，创建，复制，插入，替换，`jQuery`事件，事件绑定，鼠标事件，键盘事件，表单事件，窗口事件，事件冒泡，事件解除。

`jQuery`是一个很好用的`JavaScript`函数库，写的少，做的多。

# 请问jQuery的好处在哪里？ #

它的好处在于它轻量级，什么是轻量级呢？就是说它非常请求，大小在30kb左右；具有强大的选择器和`dom`操作的封装，可靠的事件处理机制，有完善的`ajax`，`jquery`将所有的`ajax`操作封装到函数$.ajax()\`中；具有丰富的插件，完善的文档，开源的产品。

`jquery`安装，从jquery下载jquery库，二是从cdn中下载。

`jquery`官方网址

`http://jquery.com`

首先进入`download jquery`下载页面，下载最新的`jquery`库文件，有两个版本：生产版，`Production version`，用于实际网站，`Development version`开发版，用于测试和开发。

<head>
     <meta charset="UTF-8">
     <title>jquery</title>
     <script type="text/JavaScript" src="./js/jquery-xx.js">
     </script>
    </head>

`cdn`中配置`Jquery`，如果不下载`jquery`的话，可以用`cdn`引用的。

`jquery`语法：

jquery
    $(selector).action()
    $(this).hide()
    $("p").hide()
    $("p.test").hide()
    $("#test").hide()
    
    // 入口
    $(document).ready(function(){
     // 执行代码
    });
    
    $(function(){
     // 执行代码
    });
    
    JavaScript的入口函数
    // 入口函数如下
    window.onload = function(){
     // 执行代码
    }

`JavaScript`的入口函数与`jquery`入口函数：

`jquery`的入口函数是在`HTML`所有标签都加载后执行；`JavaScript`的`window.onload`事件是等所有内容（包括图片文件等）加载完之后才执行。

`jquery`选择器

`JavaScript`的选择器：

document.getElementById();
    document.getElementsByClassName()
    document.getElementsByTagName()

选择器$(" "),

为一个函数，为工厂函数，$为函数名称。

id选择器`$("#id")`

根据给定的id匹配一个元素

类选择器`$(".class")`

根据给定的类匹配元素

标记选择器`$("element")`

根据给定元素名匹配所有元素

属性选择器`$("element[attribute]")`

匹配包含给定属性的元素`$("div[title=test]")`

位置选择器

`$(element:position)`匹配符合标签中相应位置的元素

`$("div:first")`匹配所有div中第一个div元素

后代选择器

`$("ancestor descendant")`

匹配给定的祖先元素的所有后代元素

`$("#ul li")`

匹配 id 为null的所有li元素

子代选择器`$("parent>child")`

匹配所有指定"parent"元素中指定"child"的直接子元素

$("#标签id值")
    
    // 原生
    var div = document.getElementById('test');
    div.style.border = '3px solid blue';
    
    // jquery
    $("#test1").css("border", "3px solid red");
    
    $(".class属性值")
    $(".cls1").css(...);
    
    $("标记名称");
    // 找到所有P标签
    $("p")
    
    属性选择器
    $("[属性名"])
    匹配所有具有指定属性的元素
    
    $("[属性名='值']")
    匹配与值相等的元素
    
    $("[属性名!='值']")
    匹配与值不相等的元素
    
    $("[属性名^='值']")
    匹配以值开头的元素
    
    $("[属性名$='值']")
    匹配以值结尾的元素
    
    $("[属性名*='值']")
    匹配包含值的元素

位置选择器：

`$("selector:first")`

匹配第一个元素

`$("selector:last")`

匹配最后一个元素

`$("selector:odd")`

匹配索引值为奇数的元素，从0开始计数

`$("selector:even")`

匹配索引值为偶数的元素，从0开始计数

`$("selector.eq(n)")`

匹配集合中索引值为n的元素

`$("selector.gt(n)")`

匹配集合中索引值大于n的元素

`$("selector:lt(n)")`

匹配集合中索引值小于n的元素

$("选择器1 选择器2...")

$("#test li").css("border", "2px solid red");

子代选择器

$("选择器1>选择器2>...")

选择器对象：

$("选择器").each(function(index){this})
    
    选择器对象的遍历
    
    $("选择器").find()
    
    找前面选择器匹配到的元素的子元素
    
    $("选择器").not()
    
    在前面选择器匹配到的元素中去除某个或者某几个
    
    $("选择器").add()
    
    在前面选择器中再追加节点

选择器对象遍历

<body>
     <ul id="test">
      <li>d</li>
      <li>a</li>
     </ul>
    </body>
    
    <script type="text/JavaScript">
     $("#test li").each(function(index){
      this.title="我是第" (index 1) "个";
     });
    </script>

页面初始化

将`jquery`函数代码放到这个函数就可以等到页面加载结束再运行。

# `Jquery`中的`dom`操作。 #

`dom`是`document object model`的缩写。文档对象模型。`dom`是一种与浏览器，平台，语言无关的接口，`jquery`中的`dom`操作就是对`HTML`中的元素进行操作。

`attr()`获取它的各种属性的值

$(document).ready(function(){
     $("button").click(function(){
      alert($("p").attr("title"));
     });
    });

创建`HTML`元素：

$(document).ready(function(){
     var $li1 = $("<li>d</li>");
     var $li2 = $("<li>a</li>");
     $("button").click(function(){
      $("ul").append($li1);
      $("ul").append($li2);
     });
    });

插入`HTML`元素

`append()`向每个匹配的元素内部追加内容

`appendTo()`将所有匹配的元素追加到另一个指定的元素集合中注意：`$(A).append(B)`的操作，不是将B追加到A中，而是将A追加到B中

`prepend()`向每个匹配的元素内部前置内容

`prependTo()`将所有匹配的元素前置到另一个指定的元素集合中。注意：`$(A).prepend(B)`的操作，不是将B前置到A中，而是将A前置到B中

`after()`在每个匹配的元素之后插入内容

`insertAfter()`将所有匹配的元素插入另一个指定的元素集合的后面注意：`$(A).after(B)`的操作，不是将B插入到A后面，而是将A插入到B的后面

`before()`在每个匹配的元素之前插入内容

`insertBefore()`将所有匹配的元素插入另一个指定的元素集合的前面。注意：`$(A).before(B)`的操作，不是将B插入A前面，而是将A插入B前面

# 删除HTML元素 #

删除HTML元素一般使用`jquery`中的`remove()`和`empty()`

`remove()`的作用就是从`dom`中删除被选元素以及子元素，就是如果某个元素被删除了，那么它的后代元素也都被删除。

`empty()`的作用并不是删除`HTML`元素，而是清空`HTML`元素，可以清空选中`HTML`元素中所有后代`HTML`元素。

# 复制HTML元素 #

`clone()`的作用是复制HTML元素。

$(document).ready(function() {
     $("button").click(function() {
      $("body").append($("p").clone());
      });
     });
    });

替换`HTML`元素

有两种方法：`replaceWith()`和`replaceAll()`两个方法

`repalceWith()`将所有匹配的元素替换成指定的HTML元素或dom元素

`repalceAll(selector)`用匹配的元素替换所有selector匹配到的元素

`replaceWith()`和`replaceAll()`的作用是一样的，只是用法不同。

A元素替换B元素：

`replaceWith()`的写法`A.replaceWith("B")``B.replaceAll("A")`

$(document).ready(function(){
    
     $("button").click(function(){
      $("ul li:eq(0)").replaceWith("<li>da</li>")
     });
     
    });

# 事件 #

鼠标事件:`click，mouseover，hover`

键盘事件：`keypress，keydown，keyup`

表单事件：`submit，change，focus`

窗口事件:`scroll，resize`

# 事件绑定 #

事件绑定语法bind()方法：

bind(type,[data],fn)

click(),blur(),focus(),
    mouseover(),mouseout(),
    mousedown(),mouseup()
    mouseenter(),mouseleave(),
    resize(),scroll(),
    keydown(),keyup(),keypress()

`type`参数是含有一个或多个事件类型的字符串，`data`参数是作为`event.data`属性值传递给事件对象的额外数据对象，`fn`参数为绑定到每个匹配元素事件上面的处理函数。

$(document).ready(function(){
     $("input").bind("focus",function(){
      $("span").show();
     });
    });

简写绑定事件

$(document).ready(function(){
     $("input").focus(function(){
      $("span").show();
     });
    });

鼠标事件`click(),dblclick()`双击在短时间内发生两次`click`就是依次双击事件。

`mouseenter()`当鼠标指针穿过元素时会发生`mouseenter`事件，`mouseleave()`当鼠标指针离开元素时会发生`mouseleave`事件。`hover()`用于模拟光标悬停事件。

$(document).ready(function(){
     $("#p1").hover{
      function(){
       $("#p1").css('background','green');
      },
      function(){
       $('#p1").css("background","pink");
      }
     }
    });

`keydown()`键盘或按钮被按下时，发生`keydown`事件，`keyup`当键盘被松开时发生`keyup`事件。`keypress()`当键盘或按钮被按下时，发生`keypress`事件。

# 表单事件 #

当提交表单时，会发生`submit`事件。`change()`当元素的值发生改变时，会发生`change`事件，`focus()`当元素获得焦点时，触发`focus`事件。`blur()`当元素失去焦点时触发。

窗口事件：

`scroll()`当用户滚动指定的元素时，会触发`scroll`事件。`scroll`事件适用于所有可滚动的元素和`window`对象。`resize()`当调整浏览器窗口的大小时，会触发`resize`事件。

x=0;
    $(document).ready(function(){
    
     $(window).resize(function(){
      $("span").text(x =1);
     });
     
    });

事件冒泡，事件会按照`dom`的层次结构像水泡一样不断向上直至顶端

停止冒泡和默认行为：`stopPrapagation()`和`preventDefault()`

event.preventDefault();
    // 阻止默认行为

event.stopPropagation();
    // 停止事件冒泡

事件解除：

`unbind(type, [data])``type`为事件类型`data`为将要解除的函数

## ❤️ 不要忘记留下你学习的脚印 \[点赞 收藏 评论\] ##

作者Info：

> 【作者】：Jeskson
> 
> 【原创公众号】：达达前端小酒馆。
> 
> 【福利】：公众号回复 “资料” 送自学资料大礼包（进群分享，想要啥就说哈，看我有没有）！
> 
> 【转载说明】：转载请说明出处，谢谢合作！~

大前端开发，定位前端开发技术栈博客，PHP后台知识点，web全栈技术领域，数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持，承蒙厚爱！！！

###  ###

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

###  ###

## 请点赞！因为你们的赞同/鼓励是我写作的最大动力！ ##

### 欢迎关注[达达][Link 1]的CSDN！ ###

**这是一个有质量，有态度的博客**

![前端技术栈][format_png]

[file]: /images/20210724/4db334cb7a124232b184c18623622d32.png
[Link 1]: https://blog.csdn.net/qq_36232611
[format_png]: /images/20210724/21e12fa56549424b97ffef6deb050013.png