jQuery

中文文档：jQuery

jQuery简介

宗旨：write less, do more
内部封装了js代码，使编程变更加简单并且兼容所有的主流浏览器

发行版本：
1.x：兼容IE
2.x：不兼容
3.x：不兼容

第三方类库：
使用的时候需要提前导入

jQuery下载：
下载地址：未压缩版本：下载
下载地址：压缩版本：下载

导入：
可以下载之后保存到本地，哪里需要哪里导入即可
也可指直接通过scripy标签导入<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>即可
注：CND：内容分发网络，min为压缩版本

基本使用：
使用时需要关键字声明jQuery或者$

选择器

通过选择器来找到需要操作的标签

基本选择器

/*
如何通过变量名来区分各种对象
	原生js对象
		var pEle = ...
	jQuery对象
		var $pEle = ...
*/

// 基本语法结构
	$('选择器').操作()

// ID选择器：
	$('#id')  // document.getElementById('id')

// 类选择器：
	$('.cls')  // document.getElementByClassName('cls')

// 标签选择器：
	$('div')  // document.getElementByTagName('div')
	$('div.c1')  // 找到class值为c1的div标签

//组合选择器：
	$('#id, .cls, p')  // 找到id或者cl的类或者p标签

// 层级选择器：
	$('x  y')  // 后代选择：找到x的所有后代y
	$('x > y')  // 儿子选择：找到x的所有儿子
	$('x + y')  // 毗邻选择：找到紧挨着在x后面的y
	$('x ~ y')  // 弟弟选择：找到x后面所有的弟弟y

基本筛选器

:first  // 第一个
	$('li:first');		// 找到所有li标签中的第一个
:last  // 最后一个
	$('li:last')		// 找到所有li标签中的最后一个
:eq(index)  // 索引等于index的那个标签
	$('li:eq(2)')		// 找到索引为2的标签
:even  // 找到所有索引为偶数的标签
	$('li:even')		// 从0开始计数
:odd  // 找到所有索引为计数的标签
	$('li:even')
:gt(index)  // 找到索引大于index的标签
	$('li:gt(2)')  // 不包含index
:lt(index)  // 找到所有小于index的标签
	$('li:lt')  // 不包含index
:not(元素选择器)  // 排除所以满足not内部条件的标签
	HTML 代码:
	<input name="apple" />
	<input name="flower" checked="checked" />
	jQuery 代码:
	$("input:not(:checked)")
	结果:
	[ <input name="apple" /> ]
:has(元素选择器)  // 找到某个标签内的所有标签
	$("li:not(:has(a))")  // 找到所有后代中不含a标签的li标签
	$("li:has(a)")// 找到li标签中所有的a标签
	HTML 代码:
	<div><p>Hello</p></div>
	<div>Hello again!</div>
	jQuery 代码:
	$("div:has(p)").addClass("test");
	结果:
	[ <div class="test"><p>Hello</p></div> ]

属性选择器

[attribute]  // 通过属性名查找
	$('[name]')  // 找到所有包含属性的标签
	$('div[name]')  // 找到所有包含name属性的div标签
[attribute='value']  // 通过属性等于值查找标签  注意单双引号
	$('[name="kk"]')  // 找到所有name等于kk标签，注意单双引号，以免发生冲突
	$('div[name="kk"]')  // 找到所有div属性为name值为kk的标签
[attribute != 'value']  // 找到含有属性值且不等于value的标签
	$('[name != "kk"]')  // 找到所有包含属性name且值不能与kk的标签
[attribute ^= 'value']  // 找到包含属性且属性值以value开头的标签
	HTML 代码:
	<input name="newsletter" />
	<input name="milkman" />
	<input name="newsboy" />
	jQuery 代码:
	$("input[name^='news']")
	结果:
	[ <input name="newsletter" />, <input name="newsboy" /> ]
[attribute $= 'value']  // 找到包含属性且值是以value结尾的标签
	HTML 代码:
	<input name="newsletter" />
	<input name="milkman" />
	<input name="newsboy" />
	jQuery 代码:
	$("input[name^='news']")
	结果:
	[ <input name="newsletter" />, <input name="newsboy" /> ]
[attribute *= 'value']  // 找到包含属性且属性值中包含value的标签
	HTML 代码:
	<input name="man-news" />
	<input name="milkman" />
	<input name="letterman2" />
	<input name="newmilk" />
	jQuery 代码:
	$("input[name*='man']")
	结果:
	[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]

表单筛选器

// 主要是帮助查找form表单内的标签
:input  // 找到所有匹配所有 input, textarea, select 和 button 元素
	HTML 代码:
	<form>
		<input type="button" value="Input Button"/>
		<input type="checkbox" />

		<input type="file" />
		<input type="hidden" />
		<input type="image" />

		<input type="password" />
		<input type="radio" />
		<input type="reset" />

		<input type="submit" />
		<input type="text" />
		<select><option>Option</option></select>

		<textarea></textarea>
		<button>Button</button>

	</form>
	jQuery 代码:
	$(":input")
	结果:
	[ 
		<input type="button" value="Input Button"/>,
		<input type="checkbox" />,

		<input type="file" />,
		<input type="hidden" />,
		<input type="image" />,

		<input type="password" />,
		<input type="radio" />,
		<input type="reset" />,

		<input type="submit" />,
		<input type="text" />,
		<select><option>Option</option></select>,

		<textarea></textarea>,
		<button>Button</button>,
	]
:text  // 文本标签。找到所有type属性值为text的form表单内的标签
	HTML 代码:
	<form>
	  <input type="text" />
	  <input type="checkbox" />
	  <input type="radio" />
	  <select><option/></select>
	  <textarea></textarea>
	  <button></button>
	</form>
	jQuery 代码:
	$(":text")
	结果:
	[ <input type="text" /> ]
:password  // 密码框。找到属性值为password的标签
:file  // 文件框。找到属性值为file的标签
:radio  // 单选框
:checkbox  // 多选框
:submit  // 提交按钮。理论上只匹配 type="submit" 的input或者button，但是现在的很多浏览器，button元素默认的type即为submit，所以很多情况下，不设置type的button也会成为筛选结果。
:image  // 匹配图像域
:reset  // 重置按钮
:button  // 匹配input标签属性值为button按钮和button标签

筛选器方法

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

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

两者对象的转换
	js对象转换jQuery对象
		$(js对象)
	jQuery对象转js对象
		jQuery对象索引取值
*/
// 同级别下面的标签
.next()  // 找到目标标签下一个标签
	$('p').next()  // 如有多个匹配内容则全部返回并显示出来
	// 注:.next() 括号内可以继续添加选择内容$('p').next('div')找到目标标签下面紧挨着且是div标签
.nextAll()  // 找到目标标签下面所有的标签
.nextUntil('选择器')  // 从什么什么开始到‘选择器结束’
	$('#id1').nextUntil('#id4')  // 找到id2，id3的标签

// 同级别上面的标签
.prev()  // 目标标签上一个标签
.prevAll()  // 目标标签上面所有的标签
.prevUntil('选择器')  // 从什么什么到‘选择器’

// 当前标签的父标签
.parent()  // 目标标签的第一个父标签
	$('p').parent().parent().parent()  // 只要条件允许可以一直查找
.parentsAll()  // 目标标签的所有父辈标签
.parentsUntil('选择器')  // 当面元素所在的父标签到指定的标签

// 儿子标签
.children()  // 查当前标签所有的子标签，不包含子子标签

// 兄弟标签
.siblings()  // 查找当前元素所有的同辈标签

注：上面代码括号内，可以添加二次筛选条件

节点操作

// 样式类操作
.addClass()  // classList.add 给目标标签添加指定的class值
	$('p').addClass('c1')  // 将找到的所有p标签添加class属性为c1的值
.removeClass()  // classList.remove()  删除所有匹配到的标签中的类
.removeClass('值')  // 删除所有匹配到的元素中'值'的类
	$('p').removeClass('c1')  // 删除p标签中class值为c1的属性
hasClass()  // classList.contins()  找到目标标签中指定的类，如果存在就返回True
	$('p').hasClass('c1')  // 如果找到的p标签中class值有c1的就返回True
toggleClass()  // classList.toggle()  // 匹配到的内容存在指定class的值就删除，否则就添加
	$('p').toggleClass('c1')  // 匹配到的p标签包含class值c1就删除这个值，没有就添加


// 样式操作
css('属性名','属性值')
	$('p').css('color','red')  // 将匹配到的p标签color更改为red
	$('p').css({ "color": "#ff0011", "background": "blue" })  //操作多个需要添加{}，内部正常书写


// 文本操作
text()  // innrtText
	$('p').text()  // text()不添加元素就是获取文本，添加元素就是更改还可以添加函数
html()  // innerHTML
	$('p').html()  // 不添加就是获取文本加标签，添加就是更改
val()  // value
	$('p').val()  // 不添加内容就是获取值，添加就是修改值，也可以添加功能函数
jQuery对象转JS对象之后.files
	var $pEle = $('p')
	var pELe = $pEle[0]
	pEle.files
// 注：上述括号内不添加内容就是获取，添加就是更改


// 属性操作
.attr()  // setAttribute()  获取属性值
.removeAttr()  // 删除相对应的属性
	$('img').attr('src')  // 获取img标签src属性的值
	$('img').attr('src','jj.jpg')  // 更改所有src属性的值
	$("img").attr({ src: "test.jpg", alt: "Test Image" })  // 更改多个属性
	"""适用于属性为静态的情况下(不经常修改动态变化的)即当页面加载出来之后使用attr获取不到修改之后的属性"""
// 针对用于checkbox和radio
.prop()  // 适用于动态获取用户选择的标签，会根据用户选择返回True或者False
.removeProp()  // 删除相对应的属性
	$($(':checkbox')[1]).prop('checked',true)  // 通过代码True或者False动态改变选择
	// 不适用于自定义的属性


// 文档处理
.append()  // 内部尾部追加追加
	$(A).append(B)// 把B追加到A尾部
	$(A).appendTo(B)// 把A追加到B尾部
.prepend()  // 内部的头部追加
	$(A).prepend(B)// 把B前置到A头部
	$(A).prependTo(B)// 把A前置到B头部
.after()  // 同级别下面追加
	$(A).after(B)  // 把B放到A的后面
	$(A).insertAfter(B)  // 把A放到B的后面
.before()  // 同级别上面追加
	$(A).before(B)  // 把B放到A的前面
	$(A).insertBefore(B)  // 把A放到B的前面
.remove()  // 从DOM中删除所有匹配的元素。
	$('p').remove()  // 删除所有的p标签
	$('p').remove('.c1')  // 删除p标签class值为c1的标签
.empty()  // 删除匹配的元素集合中所有的子节点。
	$('p').empty()  // 删除p标签内部所有的标签
.clome()  // 克隆标签，括号内可以添加布尔值来明确是否克隆目标标签时事件
	$('p').clone(True)  // 克隆p标签加事件V1.5以上的版本默认是False

事件

// 绑定事件的两种方式
// 方式1：
	jQuery对象.事件名(function (){})
		$('#d1').click(function(){alert(123)})
// 方式2:
	jQuery对象.on('事件名',function(){})
		$('#d1').on('click',function(){alert(123)})
"""有时候绑定事件没有效果就使用另外一种绑定事件的方式"""

// 部分事件类型：
click(function(){...})  // 触发页面内所有的点击事件即鼠标点击页面就会执行函数体代码
	$('#d1').click(function...)  // 当鼠标点击id标签时，就会触发事件
hover(function...)  // 鼠标悬停或移走相对应的标签上就会执行的改事件
blur(func...)  // 失焦事件
focus(func...)  // 聚焦事件
change(func...)  // 文本域事件
keyup(func...)  // 指定按钮按下之后发生的事件

阻止后续事件执行

$('#d1').click(function (e) {
            alert(123)
            // 1.阻止该标签后续事件的执行 方式1   推荐
            // return false
            // 2.阻止该标签后续事件的执行 方式2   了解
            // e.preventDefault()
        })

事件冒泡

$('div').click(function (e) {
        alert('div')
    })
$('p').click(function (e) {
        alert('p')
        // 阻止事件冒泡的方式1
        // return false
        // 阻止事件冒泡的方式2
        // e.stopPropagation()
    })
$('span').click(function (e) {
        alert('span')
    })

文档加载

// 原生js文档加载方式
window.onload = function () {}
// 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)
})

动画效果

  $("#d1").on("click", function () {
    var newI = document.createElement("i");
    newI.innerText = "+1";
    $(this).append(newI);
    $(this).children("i").animate({
      opacity: 0
    }, 1000)
  })