jQuery笔记本

官网：https://jquery.com
资料查询：https://www.jquery123.com/?s=
添加jQuery插件<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

jQuery 选择器

$('*')//选取所有元素
$('element')//标签选择器
$('#id')//id选择器  $('#id1,#id2')可选取多个id
$('.class')//class选择器
$(this)//选取当前HTML元素
$('p.className')//选取class为className的<p>元素
$('p:first||last')//选取第一个或者最后一个<P>元素
$('ul li:first-child')//选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")//选取带有 href 属性的元素
$("a[target='_blank']")//选取<a>元素target属性值='_blank'的元素
$(":button")//选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even|odd")//选取偶数||奇数位置的 <tr> 元素

DOM操作

获取设置节点属性

$(' ').attr('属性名') 设置或返回被选元素的属性值

$(' ').attr('属性名') //返回
$(' ').attr('属性名'，'属性值') //设置

$(' ').removeAttr( )删除属性

$(' ').removeAttr('属性名')

$(' ').prop()获取匹配的元素集中第一个元素的属性值或设置每一个匹配元素的一个或多个属性。

$(' ').prop('属性名') //获取checkbox select readOnly属性时 返回turn||false

$(' ').removeProp('属性名')删除prop设置的属性

$(' ').removeProp('属性名')`

HTML
$(' ').html()取得第一个匹配元素html内容 ==innerHTML
$(' ').Text()取得所有匹配的元素内容 ==innerText
$(' ').val() 取得当前元素的值 ==value

$(' ').html() //获取 
$(' ').html('内容')//设置
//同理

css
$(' ').addClass('class1 class2')||$(' '),removeClasss('')添加||删除Class
$(' ').toggleClass('')添加或删除元素class 存在就删除不存在就添加

$(' ').toggleClass('class1 class2')
$(' ').toggleClass('class1', switch) // switch 一个布尔值，用于判断样式是否应该被添加或移除。

$(' ').css()获取匹配元素集合中的第一个元素的样式属性的值 或 设置每个匹配元素的一个或多个CSS属性。

$(' ').css(["width", "height", "color", "background-color"])//获取多个css属性值
$(' ').css({'background-color' : 'yellow', 'font-weight' : 'bolder'}); //设置多个值

$(' ').width()||.heigth()获取匹配元素集合中的第一个元素的当前计算宽高度值 或 设置每一个匹配元素的宽高度值。
$(' ').innerWidth()||.innerHeigth()为匹配的元素集合中获取第一个元素的当前计算宽高度值,包括padding，但是不包括border。
$(' ').outerWidth()||.outerHeigth()获取元素集合中第一个元素的当前计算宽高度值,包括padding，border和选择性的margin。返回一个整数（不包含“px”）表示的值 ，或如果在一个空集合上调用该方法，则会返回 null。
$(' ').scrollLeft()||.scrollTop()获取或设置当前滚动条的位置
$(' ').offset()获取或设置当前元素在窗口的相对偏移

$('').offset()	//获取
$('.setcss').offset({top:200,left:200})	//设置

$(' ').position()匹配元素相对父元素的偏移 无参数

节点操作
$Did = $(''<div class="red">123</div>'')新建节点
父节点.append(子节点)||父节点.append(子节点)子节点末尾插入

$('body').append($Div) //父节点.append(子节点)
$Div.appendTo('body') //父节点.append(子节点)

父节点.prepend(子节点)||父节点.prependTo(子节点)子节点头部插入

$('body').prepend($Div)	//父节点.prepend(子节点)
$Div.prepenTo('body') //父节点.prependTo(子节点)

旧节点.after(新节点)||旧节点.after(新节点)匹配每个元素之后插入

 var $li = $('<li>22222</li>')
$('ui li').after($li) //旧节点.after(新节点)
// 在每个li后面插入$li
$li.insertAfter($('ul li'))//旧节点.after(新节点)

旧节点.before(新节点)||旧节点.before(新节点)匹配每个元素之前插入

 var $li = $('<li>22222</li>')
$('ui li').before($li) //旧节点.before(新节点)
// 在每个li前面插入$li
$li.insertBefore($('ul li'))//旧节点.before(新节点)

移除节点
$(' ').remove() 移除所有匹配到的节点

$('div').remove() //移除DOM中所有div
$('div').remove(#idclass) //移除所有div id='idclass'的元素
$('div').datach() //移除DOM中所有div

$(' ').empty 移除匹配到的元素的所有子节点

$('div').empty //移除div里面所有子节点

替换节点
旧节点.replaceWith(新节点)||新节点.replaceAll(旧节点)替换节点

$(div).replaceWith($div)//将所有div替换为$div
$div.replaceALll($('div'))//将所有div替换为$div

插入并包裹现有内容
$(' ').wrap('标签')在每个匹配的元素外层包上一个html元素

$('p').wrap('<i></i>')//把所有p标签外包i标签

$(' ').wrapAll('标签')在所有匹配元素外面包一层HTML结构

$('p').wrapAll('<i></i>')//把所有p标签集中在一起在外边一个i标签

$(' ').unwrap() //这个方法不接受任何参数将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置
$(' ').wrapInner('标签')在匹配元素里的内容外包一层结构

<div class="inner">Hello</div>
$('.inner').wrapInner('<div class="new"></div>')  //结果如下
 <div class="inner">
    <div class="new">Hello</div>
  </div>

遍历DOM树

向上遍历 DOM 树 ------- parent
$(' ').parent() 返回匹配元素的直接父元素
$(' ').parents() 返回匹配元素的所有父元素
$(' ').parentsUntil(' ') 返回匹配元素之间给定的两个元素的所有祖先元素

<div>
	<ul>
		<li><a>11111</a><li>
	</ul>
</div>

$('a').parent() //返回li
$('a').parents() //返回li ul div
$('a').parents('ul') //返回 ul
$('a').parentsUntll('ul') //返回 li ul

向下遍历 DOM 树------children()
$(' ').children( )返回匹配元素的所有直接子元素
$(' ').find( )返回匹配元素的所有最后一个后代元素

<div>
<ul>
	<li>
		<p></p>
		<p class='1'></p>
	</li>
</ul>
</div>

$('ul').children() //返回 li
$('li').children('p.1')	//返回class='1'的 p
$('div').find()	//返回所有 p
$('div').find('li') //返回 li

水平遍历 DOM 树-------siblings()
$(' ').siblings( )返回匹配元素的所有同胞元素
$(' ').next( )返回匹配元素的下一个同胞元素
$(' ').nextAll( )返回匹配元素的所有同胞元素
$(' ').nextUntil( )返回匹配元素之间给定的两个元素的所有同胞元素
$(' ').prev(),$(' ').prevAll() & $(' ').prevUntil() 方法与next类似只不过向上

jQuery 遍历- filter
$(' ').first()||.last() 返回匹配元素的首个元素 或 最后一个元素
$(' ').not() 返回不匹配标准的所有元素
$(' ').ep() 返回匹配元素中带有指定索引号的元素

事件绑定移除

事件的绑定
$(" ").事件名(函数)绑定事件
$(' ').on('事件名',function(){}) 添加一个事件
$(' ').on('事件1 事件2',function(){})给多个事件添加同一个函数
$(' ').on({'事件1':函数1,'事件2':函数2})一次添加多个事件
$(' ').one()绑定的事件 每种事件类型最多执行一次
$(' ').bind()绑定事件

事件移除
$(' ').off移除所有事件
$(' ').off('事件名')移除某一个事件
$(' ').off('事件名',函数名)移除某一个响应函数
$(' ').unbind()移除绑定事件

常用事件名
鼠标事件
click()点击事件
dbclick()双击事件
mouseenter()鼠标移动事件
mouseleave()鼠标移开事件
hover()鼠标悬停事件
键盘事件
keyppress() 键被按下
keydown()键按下的过程
keyup() 键被松开

$('div').keyppress(function(eCode){
	if (eCode == 65){
		alert('您按了A键')//自己写判断函数
     }
})

表单事件
submit()当提交表单时，会发生 submit 事件。
change()当元素的值改变时发生 change 事件（仅适用于表单字段）。
focus()聚焦事件
blur()失焦事件
文档/窗口事件
load()//1.8弃用当所有子元素已经被完全加载完成时，load事件被发送到这个元素。
ready()当DOM准备就绪时，指定一个函数来执行
resize()当浏览器window的尺寸改变时，resize事件将被触发：
scroll()当用户滚动指定的元素时，会发生 scroll 事件。

事件对象
event.type 属性返回哪种事件类型被触发
event.target 属性返回哪个 DOM 元素触发了事件
event.pageX||.pageY 返回相对于文档左边缘||头部的鼠标位置
event.which 属性返回指定事件上哪个键盘键或鼠标按钮被按下
event.preventDefault() 方法阻止元素发生默认的行为

jQuery动画

$(' ').hide(speed,function) 隐藏
$(' ').show(speed,function) 显示
$(' ').toggle() 隐藏和显示之间切换

---

$(' ').fadeIn() 淡入
$(' ').fadeOut() 淡出
$(' ').fadeToggle() 淡入和淡出之间切换
$(' ').fadeTo(speed,opacity,function) 允许渐变为给定的不透明度(值介0~1）

---

$(' ').slideDown(speed,f)下滑
$(' ').slideUp(speed,f) 上滑
$(' ').slideToggle(speed,f)切换

---

animate() 方法
$(' ').animate( {css属性1:'属性值',css属性2:'属性值'},speed,f )动画

$('div').animate({width:+=300px});
$('div').animate({height:'+=300px',opacity:'0.4',width:'300px'},"slow");
//先加宽在变长

jQuery Ajax

$obj.load(url,fn)

get请求 || post请求

$.get(URL,[data],[fn],[dataType])
	URL:请求文件地址
	data:请求参数
	fn:回调函数
	dataType:文件类型
	
//get 请求有对数据大小限制 提交非敏感数据
//post 与上面相反	
$.post(URL,[data],[fn],[dataType])