前端类库之jQuery

前端类库之jQuery

jQuery简介

1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库，主要功能是能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程

2. 内部封装了js代码 ，能使编程更加简单并且兼容所有的主流浏览器

3. 拥有三个版本 1.X 2.X 3.X

4. 使用前需要提前导入

   • 导入方式有两种，一是下载到本地导入(不受网络影响)，二是CDN导入(依赖网络，也是用的最多的方式)

5. 基本使用

   使用jQuery时需要关键字声明: jQuery() 或者 $()

补充: 什么是CDN

CDN指内容分发网络，简单点说就是将一些静态资源(html文档，图片等)放在各地服务器上，加载时就近获取资源，能够有效的提升网页用户访问响应速度和命中率

免费jQueryCDN（推荐使用3.4.1版本）

jQuery内容目录

1. 选择器
2. 筛选器
3. 样式操作
4. 文本操作
5. 属性操作
6. 文档处理
7. 事件
8. 动画效果
9. 插件
10. each、data、Ajax

下载链接：jQuery官网

中文文档：jQuery AP中文文档

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法。虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

jQuery对象和js对象互相转换
    jQuery对象 = $(js对象)
    js对象 = jQuery对象[index]

jQuery基本语法

$(selector).action()

查找标签

基本选择器

• 这里将jQuery与原生js的DOM做对比，可以看出jQuery语法简洁了很多,并且功能更加强大

选择器	jQuery	DOM
id 选择器	$("#id")	document.getElementById(“id”)
标签选择器	$(“tagName”)	document.getElementsByTagName(“tagName”)
class选择器	$(".className")	document.getElementsByClassName(“classname”)
配合使用	$(“div.c1”) // 找到有c1 class类的div标签
所有元素选择器	$("*")
组合选择器：	$("#id, .className, tagName")

层级选择器

x和y可以为任意选择器

$("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标签

属性选择器

$('[name]')
$('[name="jason"]')  
$('input[name!="jason"]')

表单筛选器

:text   $(':text')  // 查找属性值是text的form表单内的标签
:password:file
:radio
:checkbox		$(':checked')  // 会连同option默认的selected一起找到,特例	
:submit
:reset
:button

筛选器方法

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

使用jQuery代码批量查找到标签之后 结果是一个jQuery对象(像数组)
不需要索引取值 就可以直接调用封装的方法 */

下一个元素:
	$("#id").next()
    $("#id").nextAll()  
    $("#id").nextUntil("#i2")  // 到id值为i2的停止

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

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

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

节点操作

# 样式类操作
    addClass();		// 添加指定的CSS类名。   classList.add()
    removeClass();	// 移除指定的CSS类名。	 classList.remove()
    hasClass();		// 判断样式存不存在		 classList.contains()
    toggleClass();	// 切换CSS类名，如果有就移除，如果没有就添加。 classList.toggle()

# 样式操作
	css('属性名','属性值')  //DOM操作：tag.style.color="red"

# 文本操作
	text()  # innerText
    html()  # innerHTML
    val()   # value
    jQuery对象先转js对象之后.files 
	// 括号内不写参数就是获取值，写参数就是设置值

# 属性操作
	attr()   # setAttribute + getAttribute
    prop()
	attr('属性名')  获取属性值
    attr('属性名','属性值')  设置属性
// 对于标签上有的能看到的属性和自定义属性都用attr
// 对于返回布尔值的如checkbox、radio和option的是否被选中都用prop
    
# 文档处理
	append()   // 内部的尾部追加元素
    prepend()  // 内部的头部追加元素
    after()    // 同级别下面添加元素
    before()   // 同级别上面添加元素
    remove()   // 移除当前元素
    empty()   // 清空当前元素内部所有的数据
    clone()   // 克隆标签 括号内可以加布尔值来明确是否克隆事件

位置操作

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

事件

• 绑定事件的两种方式

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

# 移除事件 .off 格式同 .on
# 阻止后续事件执行 
$('#d1').click(function (e) {
            alert(123)
            //  方式1   推荐
            // return false
            //  方式2   了解  e 是自带形参
            // e.preventDefault()
        })

常用事件

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

---

事件冒泡

事件冒泡指: 当用户点击span标签时，会依次触发span，p和div所绑定的事件

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

<script >
    $('div').click(function () {
        alert('div')
    })
    $('p').click(function () {
        alert('p')
    })
    $('span').click(function () {
        alert('span')
    })
</script>

• 组织事件冒泡的方法有两种

1. 是在事件结尾加上 return false  // 推荐
2. 是在事件结尾加上 e.stopPropagation()  

等待页面加载

// 原生js文档加载方式
window.onload = function () {}
// jQuery文档加载方式01
$(document).ready(function () {})
// jQuery文档加载方式02
$(function(){})

区别:
	window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
	jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）

事件委托

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

<button>点我</button>

<script >
    $('body').on('click','button', function () {
        // 创建一个button标签
        var btnELe = document.createElement('button')
        // 设置内部文本
        btnELe.innerText = '点我'
        // 将button标签添加到body内部
        $('body').append(btnELe)
    })
</script>

动画效果

// 基本
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])

--------------------------未完待续---------------------------------------------------