web前端之jQuery

介绍

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

jQuery对象和函数包含以下内容：

• 选择器
• 事件
• 效果
• 文档操作
• 属性
• CSS
• AJAX
• 遍历
• 数据
• DOM元素
• 核心

详情可以查看 jQuery 中文文档

jQuery基本用法

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

$("#container").html()的意思是：获取id值为 container的元素的html代码。其中 html()是jQuery里的方法。相当于： document.getElementById("container").innerHTML;

虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。
使用jQuery对象变量时需要在变量名前加$。

var $foo = jQuery对象

选择器

// id选择器
$('#container')

// 标签选择器
$('div')

// 类名选择器
$('.customClass')

// 同时包含class=container和classcustomClass的元素
$('.container.customClass')

// 所有包含class=container的div标签
$('div.container')

// 选择所有元素
$('*')

---

$('div div')    // div中的所有后代div
$('div > div')  // div中的所有儿子div
$('div + div')  // div之后紧挨着的div
$('div ~ div')  // div之后所有的兄弟div

---

// :first 第一个元素
$('p:first') // 第一个p标签

// :last 最后一个元素
$('p:last') // 最后一个p标签

// :eq(index) 第（index+1）个标签
$("ul li:eq(3)") // ul中的第四个li（index 从 0 开始）

// :even(index) 所有索引为偶数的元素
$("p:even") // 索引为偶数的p元素

// :odd 所有索引为奇数的元素
$("p:odd") // 索引为奇数的p元素

// :gt(index) 所有大于索引值的元素
$("ul li:gt(3)") // ul中索引大于3的li元素

// :lt(index) 所有小于索引值的元素
$("ul li:lt(3)") // ul中索引小于3的li元素

// :not(元素选择器)
$("input:not(#name)") // 不包括id=name的所有input元素

---

[attribute]          // 具有attribute属性的元素
[attribute=value]    // attribute属性值为value的元素
[attribute!=value]   // attribute属性不为value的元素
[attribute$=value]   // attribute属性值以value结尾的元素

---

表单筛选器

$(':text')             // type=text的input元素
$(':password')         // type=password的input元素
&(':file')             // type=file的input元素
$(':radio')            //type=radio的input元素
$(':checkbox')         //type=checkbox的input元素
$(':submit')           //type=submit的input元素
$(':reset')            //type=reset的input元素
$(':button')           //type=button的input元素

表单对象属性

:enabled
:disabled
:checked
:selected

---

选择器方法

$('#id').next()             // 同级别的下一个元素
$('#id').nextAll()          // 同级别的下面所有元素
$('#id').nextUntil('#stop') // 同级别往下到匹配位置为止的所有元素

$("#id").prev()             // 同级别的上一个元素
$("#id").prevAll()          // 同级别的上面所有元素
$("#id").prevUntil("#stop") // 同级别往上到匹配位置为止的所有元素

$("#id").parent()           // 查找当前元素的父元素
$("#id").parents()          // 查找当前元素的所有的父元素
$("#id").parentsUntil('#stop')     // 查找当前元素的所有的父元素，直到遇到匹配的那个元素为止。

$("div").first()            // 获取匹配的第一个元素
$("div").last()             // 获取匹配的最后一个元素
$("div").not('#container')  // 从匹配元素的集合中删除与指定表达式匹配的元素
$("div").has('p')           // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
$("div").eq(3)              // 索引值等于指定值的元素

文档操作

$(x).append(y)       // 把y追加到x元素内部的最后
$(x).appendTo(y)     // 把x追加到y元素内部的最后

$(x).prepend(y)      // 把y元素添加到x内部的最前
$(x).prependTo(y)    // 把x元素添加到y内部的最前

$(x).after(y)        // 把y元素放到x的后面
$(x).insertAfter(y)  // 把x元素放到y的后面

$(x).before(y)       // 把y元素放到x前面
$(x).insertBefore(y) // 把x元素放到y前面

$('id').remove()     // 从DOM中删除所有匹配的元素
$('id').empty()      // 删除匹配的元素集合中所有的子节点

$('id').clone()      // 仅仅克隆标签及其样式、属性
$('id').clone(true)  // clone(true)传递参数true克隆标签还会复制标签绑定的事件

属性操作

$('id').attr(attrName)              // 返回匹配元素的属性值
$('id').attr(attrName, attrValue)   // 设置匹配元素的属性值
$('id').attr({k1: v1, k2: v2})      // 设置匹配元素的多个属性值
$('id').removeAttr()                // 删除匹配元素的所有属性

上述的属性获取和设置并不是动态的。举个例子，比如我们在html页面添加一个多选框，并且这个多选框有默认选中值，此时我们通过attr方法时能够获取checked属性值的。但是我们手动修改勾选状态，此时再获取checked属性和页面的实际情况不吻合，不是动态的。如果我们想要获得实时的属性值，需要通过prop。

<input type="checkbox"  name="hobby" value="basketball">篮球
<input type="checkbox"  name="hobby" value="football" checked>足球
<input type="checkbox"  name="hobby" value="volleyball">排球
<script>
	$(":checkbox[value='football']").prop("checked");  // true
</script>

prop返回布尔值，true表示选中，false表示没选中；使用第二个参数传递布尔值修改选项类标签的选中状态。

PS: prop不支持自定义属性。

文本操作

html()       // 取得第一个匹配元素的html内容，等价于 innerHTML
html(val)    // 设置所有匹配元素的html内容，等价于 innerHTML='something'

text()       // 取得所有匹配元素的内容，等价于 innerText
text(val)    // 设置所有匹配元素的内容，等价于 innerText='something'

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

CSS操作

$('p').css("color","red")    // 修改所有p元素的color

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

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

// 获得尺寸方法
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

回到顶部小例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        body{
            margin: 0;
        }
        .usually {
            width: 100%;
            height: 200px;
            background-color: darkgray;
        }

        #toTop {
            position: fixed;
            right: 50px;
            bottom: 50px;
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background-color: white;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div class="usually"></div>
<div class="usually"></div>
<div class="usually"></div>
<div class="usually"></div>
<div class="usually"></div>
<div class="usually"></div>
<div class="usually"></div>
<div class="usually"></div>
<div class="usually"></div>
<div class="usually"></div>
<div class="usually"></div>
<div class="usually"></div>
<div class="usually"></div>
<div class="usually"></div>
<div class="usually"></div>
<div class="usually"></div>
<div class="usually"></div>
<div class="usually"></div>
<div class="usually"></div>
<div class="usually"></div>
<button id="toTop" class="hide">顶部</button>
<script>
    $(window).scroll(function () {
        if ($(window).scrollTop() > 1000) {
            $('#toTop').removeClass('hide');
        }
        if ($(window).scrollTop() <= 1000) {
            $('#toTop').addClass('hide');
        }
    })

    $('#toTop').click(function (){
        $(window).scrollTop(0)
    })
</script>
</body>
</html>

事件

常用事件的方法在jQuery中差别不大。

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

hover事件示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        #d1{
            width: 200px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<script>
    $('#d1').hover(
        function (){
            console.log('on')
        },
        function (){
            console.log('off')
        })
</script>
</body>
</html>

实时监听input输入框变化示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="i1">
<script>
    $('#i1').on('input',function (){
        console.log(this.value)
    })
</script>
</body>
</html>

jQuery事件绑定

1. on( events [, selector ],function(){})
   • events: 事件
   • selector： 选择器（可选）
   • function： 事件处理器函数

   $('input').on('click',function(){alert('click...')})
   

2. eventName(function(){})

   $('input').click(function(){alert('click...')})
   

jQuery事件解绑

off( events [, selector ][,function(){}])

• events: 事件
• selector： 选择器（可选）
• function： 事件处理器函数

off方法用来移除用on方法绑定的事件处理程序。