前端基础之jquery

Posted oneone123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端基础之jquery相关的知识,希望对你有一定的参考价值。

前端知识之jQuery

jQuery

2006年1月发布的1.0版本

目前在市场上, 1.x , 2.x, 3.x .

功能的完善在1.x,

2.x的时候是属于删除旧代码,去除对于旧的浏览器兼容代码

3.x的时候增加es的新特性以及调整核心代码的结构

 

核心: write less, do more

官网: https://jquery.com/

下载: https://jquery.com/download/

所有版本的jQuery: https://code.jquery.com/

 

手册

在线手册: https://www.jq22.com/chm/jquery/index.html

离线手册:

 

获取元素

jQuery提供了大量让开发者获取页面元素的方法.都是通过$()函数来完成的.返回值都是一个jQuery对象,也叫jQuery集合.是一个伪数组对象.

基本
#id         # id选择符
 element     # 元素选择符
.class      # class选择符  
 selector1, selector2, selectorN   # 同时获取多个元素的选择符
?
层级
ancestor descendant  # 包含选择符
 parent > child       # 父子选择符
 prev + next          # 下一个兄弟选择符
 prev ~ siblings      # 兄弟选择符
基本
:first               # 从已经获取的元素集合中提取第一个元素
:even                # 从已经获取的元素集合中提取下标为偶数的元素
:odd                 # 从已经获取的元素集合中提取下标为奇数的元素
:eq(index)           # 从已经获取的元素集合中提取指定下标index对应的元素
:gt(index)           # 从已经获取的元素集合中提取下标大于index对应的元素
:last                # 从已经获取的元素集合中提取最后一个元素
:lt(index)           # 从已经获取的元素集合中提取下标小于index对应的元素
内容
:has(selector)       # 从已经获取的元素集合中提取拥有指定选择符的元素
属性
[attribute=value]    # 获取拥有指定数据attribute,并且置为value的元素
子元素
:first-child         # 从已经获取的所有元素中提取他们的第一个子元素
:last-child          # 从已经获取的所有元素中提取他们的最后一个子元素
:nth-child           # 从已经获取的所有元素中提取他们的指定下标的子元素
?
表单对象属性
:checked             # 提取已经设置了默认值的单选框提取出来

 

jQuery对象和dom对象

上面$()函数的返回值都是jQuery对象来的.这是一个伪数组 .所以这个对象具有jQuery内置的功能.可以直接调用jQuery提供的方法.但是不能直接操作原来js提供的dom方法.

例如:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<h1 class="title">一段文本</h1>
<script>
   // 使用js的dom操作
   var list = document.getElementsByClassName("title");
   console.log( list );    // HTMLCollection html元素集合
   console.log( list[0] ); // dom对象   <h1 class="title">一段文本</h1>
?
   // 使用dom操作
   list[0].innerHTML = "修改后的文本";
   list[0].style.backgroundColor = "orange";
?
   // 使用jQuery的元素操作
   console.log( $(".title") );    // jQuery集合, jQuery.fn.init [h1.title, prevObject: jQuery.fn.init(1)]
   console.log( $(".title")[0] ); // jQuery集合,也可以通过下标里面的dom对象
?
   // 但是如果要使用jQuery提供的方法操作元素的外观,样式,内容或者事件,必须使用jQuery对象才行。如果是dom对象,只能使用原来js提供的dom方法
   // jQuery操作内容
   $(".title").html("修改的内容");  // 这里的html方法就是jQuery提供的
   // jQuery操作样式
   $(".title").css("background-color","orange");  // 这里的css方法就是jQuery提供的
?
   // 如果使用jQuery对象调用dom的innerHTML是无法修改内容的
   $(".title").innerHTML = "31行修改的内容"; // 正确的写法是 dom对象.innerHTML = "内容"
?
   $(".title").style.backgroundColor = "orange"; // 正确的写法是 dom对象.style.样式属性 = "样式值"
</script>
</body>
</html>

 

总结:
1. jQuery对象打印的时候都会附带jQuery单词,而dom对象打印的时候往往是标签效果.
2. jQuery对象可以直接调用jQuery提供方法和属性,不能直接调用js原生提供的dom方法和属性.
  $("选择符").html()         # 可以修改内容
  $("选择符").innerHTML = "" # 没有效果!!!
 
  dom对象是无法使用jQuery提供的方法和属性,如果一定要调用,则需要把dom对象转换成jQuery对象才可以使用
 
3. jQuery可以通过下标获取内部的dom对象
  $("li")[0] ===>   <li>一个文本</li>
 
4. dom对象转换成jQuery对象
  var list = document.getElementsByClassName("list");
  $(list) => jQuery对象

 

操作内容

$("选择符").html()     # 读取指定元素的内容,如果$()函数获取了有多个元素,则提取第一个元素
$("选择符").html(内容)  # 修改内容,如果$()函数获取了多个元素, 则批量修改内容
?
$("选择符").text()     # 效果同上,但是获取的内容是纯文本,不包含html代码
$("选择符").text(内容)  # 效果同上,但是修改的内容中如果有html文本,在直接转成实体字符,而不是html代码
?

代码:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="js/jquery-3.4.1.js"></script>
</head>
<body>
   <div class="box">
       <p class="text">第一段文本</p>
       <p class="text">第二段文本</p>
   </div>
<script>
   // 读取html内容
   // console.log( $(‘.box‘).html() );
   // // 读取文本内容[去掉了标签内容]
   // console.log( $(‘.box‘).text() );
   //
   // console.log( $(".text") );       //
   // console.log( $(".text").html() ); // 只会返回第一个元素的内容
?
   // // 修改内容[可以写入html文本]
   // $(‘.text‘).html("<span>修改内容</span>");
   // // 修改内容[只可以写入纯文本]
   // $(‘.text‘).text("<span>修改内容</span>");
?
   // 修改内容的特殊用法
   // jQuery内部进行操作的时候,都是使用循环来完成的,一般称之为"隐式迭代"
   $(".text").html(function(){
      console.log(this);      // this     表示当前js的dom对象
      console.log( $(this) ); // $(this)   把当前dom对象转换成jQuery对象
      // return "hello world"; // 批量修改
      return $(this).html()+"-----2019"
  });
</script>
</body>
</html>

 

操作属性

读取属性值
$("选择符").attr("属性名");   // 获取非表单元素的属性值,只会提取第一个元素的属性值
$("选择符").prop("属性名");   // 表单元素的属性,只会提取第一个元素的属性值
?
操作属性
$("选择符").attr("属性名","属性值"); // 修改非表单元素的属性值,如果元素有多个,则全部修改
$("选择符").prop("属性名","属性值"); // 修改表单元素的属性值,如果元素有多个,则全部修改
 
$("选择符").attr("属性名","属性值").attr("属性名","属性值").attr().....
$("选择符").prop("属性名","属性值").prop("属性名","属性值").prop().....
 
$("选择符").attr({‘属性名1‘:‘属性值1‘,‘属性名2‘:‘属性值2‘,.....})
$("选择符").prop({‘属性名1‘:‘属性值1‘,‘属性名2‘:‘属性值2‘,.....})
?
特殊用法, 类似上面的内容操作,参数也可以使用一个匿名函数
$("选择符").attr("属性名",function(){
  // 其他操作代码
  return "新的属性值";
});

实现同一个对象,不断使用小圆点调用多个方法的关键,就是jQuery内部实现了链式调用.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="js/jquery-1.11.0.js"></script>
</head>
<body>
   <a href="http://www.baidu.com">百度</a>
   <ul>
       <li><input class="first" type="checkbox" name="lve"></li>
       <li><input type="checkbox" name="lve"></li>
       <li><input checked type="checkbox" name="lve"></li>
       <li><input type="checkbox" name="lve"></li>
       <li><input type="checkbox" name="lve"></li>
       <li><input type="checkbox" name="lve"></li>
   </ul>
<script>
   $("a").attr({"href":"http://www.jd.com","title":"这是京东 "}).html("京东");
   // 这里可以看到,jQuery可以不断给获取到的元素不断调用别的方法.
   // 这是因为jQuery内部实现了面向对象的链式调用,这个方式在python里面也有.
?
   var obj = {
       name:"xiaoming",
       age:13,
       func1(name){
           this.name = name; // 修改当前对象的name
           return this;      // 这就是返回当前对象,也是我们所说的链式调用的核心 python对应的就是 return self
      },
       func2(age){
           this.age = age;
           return this;
      },
       func3(){
           console.log("hello world");
           return this;
      },
       func4(){
           console.log("hai!");
           return this;
      }
  };
?
   console.log(obj);
   var ret = obj.func1("xiaohuihui").func2(17).func3().func4().result;
   console.log(ret);
</script>
</body>
</html>

 

操作样式

获取样式
$().css("样式属性");   # 获取元素的指定样式属性的值,如果有多个元素,只得到第一个元素的值
?
操作样式
$().css("样式属性","样式值").css("样式属性","样式值");
$().css({"样式属性1":"样式值1","样式属性2":"样式值2",....})
?
$().css("样式属性":function(){
 
// 其他代码操作
return "样式值";
});

 

代码:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="js/jquery-1.11.0.js"></script>
</head>
<body>
   <a href="http://www.baidu.com">百度</a>
   <a href="http://www.baidu.com">百度</a>
?
<script>
   // 获取指定样式的值,jQuery中css方法,不仅可以获取到行内样式,还可以获取外部样式.
   console.log( $("a").css("font-size") );
?
   // 修改样式
   $("a").css("font-size","22px").css("color","#fff");
?
   $("a").css({
       "text-decoration":"none",
       "background-color":"blue",
       "padding":"4px 8px",
       "border-radius":"8px",
  })
</script>
</body>
</html>

在jQuery除了css操作样式以外,我们也可以通过操作元素的class来给元素修改样式

$().addClass("class1  class2 ... ...")    # 给获取到的所有元素添加指定class样式
$().removeClass() # 给获取到的所有元素删除指定class样式
$().toggleClass() # 给获取到的所有元素进行判断,如果拥有指定class样式的则删除,如果没有指定样式则添加

代码:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="js/jquery-1.11.0.js"></script>
   <style>
   a{
       color: #000;
  }
   .close{
       background-color: #000;
  }
   .close a{
       color: #fff;
  }
   </style>
</head>
<body>
   <button id="close">关灯</button>
   <button id="open">开灯</button>
   <button id="toggle">开灯/关灯</button>
   <a href="http://www.baidu.com">百度</a>
<script>
   $("#close").on("click", function(){
       $("body").addClass("close");
  });
?
   $("#open").on("click", function(){
       $("body").removeClass("close");
  });
?
   $("#toggle").on("click", function(){
       $("body").toggleClass(‘close‘);
  })
?
</script>
</body>
</html>

 

事件绑定

三种用法:
1. on 和 off
绑定事件
$().on("事件名",匿名函数)

解绑事件,给指定元素解除事件的绑定
$().off("事件名")
 
2. 直接通过事件名来进行调用
$().事件名(匿名函数)

3. 组合事件,模拟事件
$().ready()   # 入口函数
$().hover(mouseover, mouseout)   # 是onmouseover和 onmouseout的组合
$().trigger(事件名) # 用于让js自动触发指定元素身上已经绑定的事件
?

事件绑定和事件解绑

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="js/jquery-1.11.0.js"></script>
</head>
<body>
   <p>限制每次一个按钮只能投票3次</p>
   <button id="zan">点下赞(<span>10</span>)</button>
   <button id="cai">踩一脚(<span>10</span>)</button>
<script>
   let zan = 0;
   // // 事件绑定
   // $("#zan").on("click", function(){
   //     $("#zan span").text(function(){
   //         zan++;
   //         let ret = parseInt($(this).text())+1;
   //         if(zan >= 3){
   //             $("#zan").off("click"); // 事件解绑
   //         }
   //         return ret;
   //     });
   // });
?
?
   $("#zan").click(function(){
       $("#zan span").text(function(){
           zan++;
           let ret = parseInt($(this).text())+1;
           if(zan >= 3){
               $("#zan").off("click"); // 事件解绑
          }
           return ret;
      });
  })
?
</script>
</body>
</html>

入口函数的使用,可以让我们的jQuery或者js代码,在任意一个地方都可以使用,不会因为代码写在html的前面而报错!

$(document).ready(function(){
// js代码
});
?
?
// 简写
?
$(function(){
// js代码
})

 

模拟事件触发

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="js/jquery-1.11.0.js"></script>
   <style>
   input[type=file]{
       display: none;
  }
   .upload{
       width: 180px;
       height: 44px;
       border-radius: 5px;
       color: #fff;
       text-align: center;
       line-height: 44px;
       background-color: #000000;
       border: none;
       outline: none;
       cursor: pointer;
  }
   </style>
</head>
<body>
   <input type="file" name="avatar">
   <button class="upload">上传文件</button>
   <script>
   $(".upload").on("click", function(){
      $("input[type=file]").trigger("click"); // 模拟事件的触发
  });
   </script>
</body>
</html>

 

动画特效

基本
show([s,[e],[fn]])   显示元素
hide([s,[e],[fn]])   隐藏元素
?
滑动
slideDown([s],[e],[fn]) 向下滑动
slideUp([s,[e],[fn]])   向上滑动
?
淡入淡出
fadeIn([s],[e],[fn])     淡入
fadeOut([s],[e],[fn])   淡出
fadeTo([[s],opacity,[e],[fn]]) 让元素的透明度调整到指定数值
?
自定义
animate(p,[s],[e],[fn])   自定义动画
stop([c],[j])             暂停上一个动画效果,开始当前触发的动画效果

 

 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="js/jquery-1.11.0.js"></script>
   <style>
   .box{
       width: 250px;
       height: 250px;
       background-color: #000;
       position: fixed;
       top: 50px;
       left: 10px;
  }
   </style>
</head>
<body>
   <button class="show">显示[入场]</button>
   <button class="hide">隐藏[出场]</button>
   <button class="fidein">淡入[入场]</button>
   <button class="fideout">淡出[出场]</button>
   <button class="slidedown">向下滑动[入场]</button>
   <button class="slideup">向上滑动[出场]</button>
   <button class="animate">自定义动画</button>
   <div class="box"></div>
   <script>
   $(".show").on("click", function(){
       $(".box").show(1000);   // 参数1: 时间,单位毫秒 参数2: 执行效果完成以后的回调函数
  });
?
   $(".hide").on("click", function(){
       $(".box").hide(1000, function(){
           alert("找不到我了吧~");
      });
  });
?
   $(".fidein").on("click", function(){
       $(".box").fadeIn(1000);
  });
?
   $(".fideout").on("click", function(){
       $(".box").fadeOut(1000);
  });
?
   $(".slidedown").on("click", function(){
       $(".box").slideDown(1000);
  });
?
   $(".slideup").on("click", function(){
       $(".box").slideUp(1000);
  });
?
   // 自定义动画
   $(".animate").on("click",function(){
      // $(".box").animate(动画最终效果,动画完成的时间,动画完成以后的回调函数)
      $(".box").animate({
          "border-radius":"50%",
          "left": "120px",
          "top": "200px",
      },2000,function(){
         $(".box").animate({
              "border-radius":"0%",
              "left": "10px",
              "top": "50px",
            },2000,function(){
                $(‘.animate‘).trigger("click");
            });
      });
  });
?
   </script>
</body>
</html>

以上是关于前端基础之jquery的主要内容,如果未能解决你的问题,请参考以下文章

前端面试题之手写promise

[vscode]--HTML代码片段(基础版,reactvuejquery)

前端基础之jquery

前端基础之jQuery

进击的Python第十六章:Web前端基础之jQuery

前端基础之jQuery