前端基础--jQuery

忘是亡心i 2022-04-23 07:00 235阅读 0赞

开发工具与关键技术：DW/浏览器 ；简单使用jquery。  
作者：刘佳明  
撰写时间：2019年1月 24 日

前端基础–jquery

本篇章内容主要是简单介绍以下Jquery;一个由JavaScript封装的函数库；

jQuery 的功能概括：

 html 的元素选取  
 html的元素操作  
 html dom遍历和修改  
 js特效和动画效果  
 css操作  
 html事件操作  
 ajax异步请求方式  
在这里，我事先已经准备好了一个网页的样式：效果如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70]  
网页的组成分为三个部分；两个包裹着p标签的盒子，和最下方四个除内部文本不同；其他完全相同的button按钮；  
Button按钮的样式是根据bootstrap 中的css样式而引入的；

Bootstrap系列是现网上流行的网页编辑插件；百度可下载使用

网页HTML部分代码;

<div clss="contain">
           
            <div class="cos">
              <div class="left" id="left">
               
                  <p id="p">p 标签1</p>
                  <p>p 标签2</p>
                  <p>p 标签3</p>
                  <p>p 标签4</p>
                  <p>p 标签5</p>
                 
              </div>
              <div class="right" id="right">
                  <p class="p">p 标签6</p>
                  <p class="p">p 标签7</p>
              </div>
            </div> 
            <button  class="btn btn-primary btn-lg btn-block" id="one">Block level button  01</button>
    <button  class="btn btn-primary btn-lg btn-block" id="two">Block level button  02</button>
    <button  class="btn btn-primary btn-lg btn-block" id="fruo">Block level button  03</button>
    <button  class="btn btn-primary btn-lg btn-block" id="si">Block level button  04</button>
        </div>

CSS样式所需要的代码：

接下来就是对于按钮事件上的触发；  
jQuery中的函数的是由一个封装好的JavaScript插件提供；所以在运行jquery时需要将这个插件引入到HTML 中

例：

第一个按钮单击的代码；

$("#one").click(function () {
                $("#left").empty();
               //empty  所有的子元素都删除
            });

点击效果如下；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 1]  
第二个按钮单击的代码；

$("#two").click(function () {
                $("#left").css("background", "yellow");
                $("#right").css({ 'width': 800, 'height': 300 });
                $("p").remove();
            });

对id为left的大盒子内部改变CSS样式； 对id为right的大盒子内部改变CSS样式；  
删除全部p标签

点击效果如下；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 2]  
第三个按钮单击的代码；

$("#fruo").click(function () {
                //$("p").remove(":contains(2)");
                //$("p").remove(":odd");
                $("#right").remove(":odd");
                $("#right").addClass("backRed");
                //odd:奇数；  even：偶数
            });

.remove表示删除  
删除id为right盒子中p标签的奇数个；并且给id为right的盒子添加一个类名为backred,这个类的css样式为：背景颜色为棕色；

备注掉的jQuery代码，也可以去app上进行用观看

点击效果如下；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 3]  
第四个按钮单击的代码；

$("#si").click(function () {
               //$("#left:root").css("backgroud-color", "#000")
                $("p:first").css("color", "red");
                $("#left").toggleClass("backRed");
                //$("#left").addClass("backRed");
                //console.log($("#left").attr("class"));
                
            });

$(“p:first”).css(“color”, “red”); 对第一个p 标签css样式进行修改；把字体颜色改为红色；  
$("\#left").toggleClass(“backRed”);  
表示给id为left的盒子添加一个类名为backred,这个类的css样式为：背景颜色为棕色；  
点击效果如下；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 4]  
但鼠标移入或移出id为left的盒子时；

$("#left").hover(//hover 同DW中不同
                 //hover 方法中不可多同时进行函数，当hover 中函数个别>=2时，实现函数效果时，
                 //所有函数都会进行，第二次及其之后便知只进行一个函数；
    
                  function as(){
                      
                      $("p").slideDown("fast");//向下滑动
                      
                  },
    
                 
             function bs() {
               
              
                 $("p").slideUp("fast");//向上滑动
                
             }
             );

鼠标移入id为left的盒子外时；效果如下；  
P标签全部消失，且是以一个向上滑动的动画效果消失；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 5]  
鼠标移出id为left的盒子外时；效果如下；  
P标签全部出现，且是以一个向下滑动的动画效果出现；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 6]  
另外，我在本jqurey部分添加了别的函数；在代码中已注释；下面为具体代码；把注释去除；可具体查看效果；

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70]: /images/20220323/5d97abac4fee4fdb98ea7768df0462fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 1]: /images/20220323/cb49a220ee5949f5907291fdefbca4d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 2]: /images/20220323/4181b860a9ae4800adb68a91715e39d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 3]: /images/20220323/3fd9910effb44fa28805b25abba9a783.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 4]: /images/20220323/4fac5c83b21849c58e39135d4d735747.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 5]: /images/20220323/e610dfca3c2e4c5fb4c52360d904c28c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDEzMA_size_16_color_FFFFFF_t_70 6]: /images/20220323/37280807f8be49e5b982103b7cafffd4.png