前端之jQuery

什么是jQuery

Query 是一个 JavaScript 函数库。

jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

jQuery 库包含以下功能：

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

 

 

jQuery安装

　　　　方式一

从官网下载，之后将代码放在本地的js文件中，如果要使用jQuery导入便可以

有两个版本的 jQuery 可供下载：

  • Production version - 用于实际的网站中，已被精简和压缩。
  • Development version - 用于测试和开发（未压缩，是可读的代码）

以上两个版本都可以从 jquery.com 中下载。

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

　　　　方式二

如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。

Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。

这里以bootcdn为例

 

 

 

 

 

 

 

 

 

<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js">
</script>
</head>

 

　　

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。

相当于： document.getElementById("i1").innerHTML;

虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象
$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

 

　　

jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

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

  • 美元符号定义 jQuery
  • 选择符（selector）"查询"和"查找" HTML 元素
  • jQuery 的 action() 执行对元素的操作

查找标签

基本选择器

$("#d1")    id选择器
$(".c1")      类选择器
$("tagName") 标签选择器
$("*") 所有元素选择器
$('div.c1')  # 查找class含有c1的div标签
$("#d1, .c1, p")  # 并列查找
$("x y")    // x的所有后代y（子子孙孙）
$("x > y")    // x的所有儿子y（儿子）
$("x + y")    // 找到所有紧挨在x后面的y
$("x ~ y")    // x之后所有的兄弟y

 

 

基本筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

 

例子

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

 

 

表单筛选器

:text        //查找type属性为text的标签
:password　　 //查找type属性为password的标签
:file            //查找type属性为file的标签
:radio        //查找type属性为radio的标签
:checkbox    //查找type属性为checkbox的标签

:submit        //查找type属性为submit的标签
:reset        //查找type属性为reset的标签
:button       //查找type属性为button的标签

表单对象属性

:enabled
:disabled
:checked
:selected

例子

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input标签

 

属性选择器

[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

例子

<input type="text" name="123">
<input type="text" name="456">
$('input[name = 456]')  //查找input标签中name属性等于456的标签
$('input[name ！= 456]')  //查找input标签中name属性不等于456的标签

筛选器方法

.next()                  //查找下一个元素
.nextAll()              //查找后面的全部元素
.nextUntil('#id号')     //查找后面的元素直到指定一个id元素
.prev()                //查找上一个元素
.prevAll()            //查找上面的全部元素
.prevUntil('#id号')   //查找上面的全部元素直到指定的id元素
.parent()            // 查找该元素的父亲元素
.parents()          //  查找该元素的所有父辈元素
.parentsUntil()    //  查找该元素的所有父辈元素直到匹配的元素为止
.children()       // 查找所有子元素
.siblings()      //  查找所有的兄弟元素
.find()         // 在某个元素里查找指定的元素

 

节点操作

样式class操作

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

css样式操作

语法：css('属性名','属性值')
$("input").css("background-color", "red")

位置操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

注意：.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。

　　 和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

 

文本操作

文本值

html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
$('div').html() //获取div标签内的文本内容
$('div').html(123) // 设置div标签内的文本内容为123 


text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
$('div').text() //获取div标签内的文本内容
$('div').text(123) // 设置div标签内的文本内容为123

值

val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

 

 

属性操作

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
prop() // 获取属性
removeProp() // 移除属性

attr与prop的区别

　　attr：适用于属性为静态的情况(不经常修改动态变化的)，例如id或自定义标签

　　prop：适用于动态标签，尤其是选择类标签checkbox或者radio

 

文档处理

$(A).append(B)  # A的内部的尾部追加元素B
$(A).appendTo(B)  # B内部的尾部追加元素A
$(A).prepend(B)  # A内部的头部追加元素B
$(A).prependTo(B)  # B内部的头部追加元素A
$(A).after(B)  # 同级别A下面添加元素B
$(A).insertAfter(B) # 同级别B下main添加A
$(A).before(B)  # 同级别A上面添加元素B
$(A).insertBefore(B)  # 同级别B上面添加元素A
$(A).remove()  # 移除当前元素
$(A).empty()  # 清空当前元素内部所有的数据
$(A).clone()  # 克隆标签 括号内可以加布尔值来明确是否克隆事件

 

事件

绑定事件的方式

　　方式①

jQuery对象.事件名(function(){})
$('#d1').click(function(){alert(123)})

　　方式②

jQuery对象.on('事件名',function(){})
$('#d1').on('click',function(){alert(123)})

 

 

常用事件

click(function(){...})          // 鼠标单击
hover(function(){...})        // 鼠标悬浮时   
blur(function(){...})          // 元素失去焦点时
focus(function(){...})        // 元素获得焦点
change(function(){...})     // 元素文本域改变
keyup(function(){...})       // 当键弹起时
keydown(function(){...})   // 当键按下时

 

组织后续事件执行

　　　　方式① 函数返回一个false

　　　　方式② 函数的参数增加一个参数e，并在函数体代码中执行e.stopPropagation()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认事件</title>
</head>
<body>

<form action="">
    <button id="b1">点我</button>
</form>

<script src="jquery-3.3.1.min.js"></script>
<script>
    $("#b1").click(function (e) {
        alert(123);
        //return false;
        e.preventDefault();
    });
</script>
</body>
</html>

 

阻止事件冒泡

　　阻止事件冒泡的方法也与组织后续事件执行的方法是一样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
</head>
<body>
<div>
    <p>
        <span>点我</span>
    </p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $("span").click(function (e) {
        alert("span");
        e.stopPropagation();
    });

    $("p").click(function () {
        alert("p");
    });
    $("div").click(function () {
        alert("div");
    })
</script>
</body>
</html>

 

文档加载

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

// jQuery文档加载方式01
$(document).ready(function () {})
// jQuery文档加载方式02
$(function(){})

 

事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。

// 将body内部所有的点击事件委托给button按钮执行
$('body').on('click','button',function () {
// 创建一个button标签
var btnEle = document.createElement('button')
// 设置内部文本
btnEle.innerText = '点我'
// 将button标签添加到body内部
$('body').append(btnEle)
})

 

动画效果

// 基本
show([s,[e],[fn]])    // 展示
hide([s,[e],[fn]])    // 隐藏
toggle([s],[e],[fn])  // 有则隐藏，没有则展示
// 滑动
slideDown([s],[e],[fn])  // 向下滑动
slideUp([s,[e],[fn]])    // 向上滑动
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])  
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义
animate(p,[s],[e],[fn])

点赞案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>点赞动画示例</title>
  <style>
    div {
      position: relative;
      display: inline-block;
    }
    div>i {
      display: inline-block;
      color: red;
      position: absolute;
      right: -16px;
      top: -5px;
      opacity: 1;
    }
  </style>
</head>
<body>

<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
  $("#d1").on("click", function () {
    var newI = document.createElement("i");
    newI.innerText = "+1";
    $(this).append(newI);
    $(this).children("i").animate({
      opacity: 0
    }, 1000)
  })
</script>
</body>
</html>

 

 

 

　

posted @ 2022-02-15 18:46  椰子皮0oo0  阅读(41)  评论(0)    收藏  举报
1