前端之jQuery

阅读目录

• 1. jQuery简介
• 2. jQuery 之 标签查找
• 3. jQuery 之 节点操作
• 4. jQuery 之 事件
• 5. jQuery补充知识

回到顶部

1. jQuery简介

jQuery是一个快速，简洁的JavaScript框架，是继prototype之后又一个优秀的JavaScript代码库（或JavaScript框架），jQuery设计的宗旨是"write less, do more"，即倡导写更少的代码，做更多的事。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作，事件处理，动画设计和Ajax交互。
jQuery的 核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对css选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

• jQuery的版本
  目前1.x, 2.x, 3.x 功能的完善在1.x，2.x的时候是属于删除旧代码，去除对于旧的浏览器兼容代码，

• jQuery的引入
  根本上jQuery就是一个写好的js文件，所以想要使用jQuery的衣语法必须先引入到本地。

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

远程导入
# CDN导入，内容分发网络，可以为html添加模板，jQuery最好使用3.4.1版本。
和
本地导入


基本使用：
jQuery很多时候都是一行代码搞定所有
使用jQuery需要有关键字声明
jQuery === $
通常使用简写的$

回到顶部

2. jQuery 之 标签查找

2.1 基本选择器

$(selector).action()

"""
如何通过变量名来区分指代的是何种对象
eg：
    如果是原生的js对象
        var tEle = ...
    如果是jQuery对象
        var $tEle = ...


"""
$(选择器).操作()

"id选择器："
$('#i1')  # document.getElementById('i1')


"标签选择器："
$('p')  # getElementByTagName('p')

"class选择器："
$('.c1')  # getElementByCslassName('.c1')

$('div.c1')  # 查找class含有c1的div标签
$('div#i1')

"所有元素选择器："
$("*")

"组合选择器："
$("#i1, .c1, p")  # 并列查找

$("x y")    # 后代
$("x > y")  # 子代
$("x + y")  # 毗邻
$("x ~ y")  # 兄弟

2.2 基本筛选器

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

$("ul li:first")  # ul后代中的第一个li标签

2.3 属性选择器

$("[name]")  # 查找name属性的标签

$("[name='jack']")  # 查找name属性为jack的标签

$("input[name='jack']")  # 查找input标签中name属性为jack的标签

2.4 表单筛选器

:text    # 查找属性值是text的form表单内的标签
:password
:file
:radio
:checkbox

:submit
:reset
:button

$(":checkbox")  # 找到所有属性值是checkbox的标签

"注意："
$(":checked")  # 此时也会查找到option默认的select标签，这是一个小缺陷，记住！！！

2.5 筛选器方法

"""
使用原生js代码批量查找到标签之后，结果是一个数组，
需要索引取值之后才可以调用标签的一些方法。

但是如果使用jQuery代码批量查找到标签之后，结果是一个jQuery对象（像数组）
则不需要索引取值就可以直接调用封装的方法。

两者之间的转换方式如下：
	js对象转jQuery
	    $(js对象)
	
	jQuery对象转js
	    jQuery对象索引取值即可


"""

# 下一个元素
$("id").next()
$("id").nextAll()
$("id").nextUntil()

# 上一个元素
$("id").prev()
$("id").prevAll()
$("id").prevUntil()

# 父亲元素
$("id").parent()
$("id").parentsAll()
$("id").parentsUntil()

# 儿子和兄弟元素
$("id").children()  # 儿子们
$("id").siblings()  # 兄弟们


# 查找
$('div').find('p')

$("p").first()
$("p").last()
$("p").not()
$("p").has()
$("p").eq()

# 支持链式操作
$("id").next().next()...

回到顶部

3. jQuery 之 节点操作

# 样式类操作
addClass()    # 添加指定的css类名
removeClass() # 移除指定类
hasClass()    # classList.contains()
toggleClass() # classList.toggle()

# 样式操作
$('p').css('color', 'red')

# 位置操作
offset()
position()
scrollTop()
scrollLeft()

# 文本操作
var aEle = document.createElement('a')
$aEle = $(aEle)
$aEle.text('嘿嘿嘿')  # 原生innertext
$aEle.HTML('ooo')
$aEle.attr('href', 'www.baidu.com')
$('body').append($aEle)

# 获取值
val()  # 相当于原生value
jQuery对象先转js对象之后，.files  # 获取文件数据
"括号内不写参数就是获取值，写参数就是设置/修改值"

# 属性操作
attr(属性名，属性值)  # setAttribute()
removeAttr()
"attr适用于属性为静态的情况（不经常修改动态变化的）"

"经常修改动态变化的属性用prop"
prop()  # 尤其是选择类标签，勾选框，checked


# 文档处理
# 内部
$(A).append(B)    # 把B追加到A
$(A).appendTo(B)  # 把A追加到B
$(A).prepend(B)   # 内部的头部追加
$(A).prependTo(B)

# 外部
$(A).after(B)    # 同级别下面添加元素
$(A).insertAfter(B)

$(A).before(B)   # 同级别上面添加元素

remove()  # 移除当前元素
empty()   # 清空当前元素内部所有的数据

# 替换
replaceWith()
replaceAll()

# 克隆
clone()  # 括号内可以加参数/布尔值，来明确是否克隆事件

"示例："
<script>
    # clone方法不加参数true，克隆标签但不克隆标签带的事件
    $("#i1").on("click", function(){
        $(this).clone().insertAfter(this);
    });
    
    # clone方法加参数true，克隆标签并且克隆标签带的事件
    $("#i2").on("click", function(){
        $(this).clone(true).insertAfter(this);
    })


</script>

回到顶部

4. jQuery 之 事件

绑定事件的两种方式
    方式1：
        jQuery对象.事件名(function(){})
        $("#i1").click(function(){alert(123)})

    方式2：
        jQuery对象.on('事件名', function(){})
        $("#i1").on('click',function(){alert(345)})
		
"""
有时候绑定事件可能没有效果，这个时候可以考虑切换绑定方式
方式1不行就换方式2，哪个不行就换另一个
方式2准确率更高，方式1可能遇到复杂一点的情况会出现绑定不上的情况。


"""

# 常见事件
click
hover
blur
focus
change
keyup
keydown

回到顶部

5. jQuery补充知识

5.1 阻止后续事件的执行

阻止该标签后续事件的执行
$("#i1").click(function(e){
    alert(123)
    # 阻止标签后续事件的执行，方式一
    return false
	
    # 方式二
    e.preventDefault()
})

5.2 事件冒泡

<div>div
    <p>div>p
        <span>div>p>span</span>
    </p>
</div>

<script>
    $("div").click(function(e){
        alert('div')
    })
    $("p").click(function(e){
        alert('p')
        # 阻止事件冒泡方式一
        # return false  # 可以阻止事件冒泡
        # 阻止事件冒泡方式二
        e.stopPropagetion()
    })
    $("span").click(function(e){
        alert('span')
        # return false  # 可以阻止事件冒泡
    })

</script>

5.3 页面加载

文档加载

# 原生 js 文档加载
window.onload = function(){
    代码写在这里
}

# jQuery文档加载方式01
$(document).ready(function(){
    代码写在这里
})

# jQuery文档加载方式02
$(function(){

})

5.4 事件委托

<button>选我</button>

<script>
    # 将body内部所有的点击事件委托给button按钮执行。
    $("body").on('click','button',function(){
        var btnEle = document.createElement('button')
    
    # 设置内部文本
    btnEle.innerText = '点我'

    # 将button标签添加到body内部
    $("body").append(btnEle)
	})

    # 这个绑定针对后期动态创建的按钮不会生效
    # 但是我们想让他实现，生效！！！
    $("button").click(function(){
        # 创建一个button标签
        var btnEle = document.createElement('button')
        # 设置内部文本
        btnEle.innerText = '点我'
		
        # 将button标签添加到body内部
        $("body").append(btnEle)
	})

</script>

5.5 动画效果

show()
hide()
toggle()

slideDown()
slideUp()

fadeIn()
fadeOut()