jquery
jquery中$方法冲突问题：
$();
jQuery();
js对象和jquery对象的区别
jquery就是js中的new Object生成的普通对象
js对象和jquery对象的方法能否共用
不能共用
js对象和jquery对象能否互换
1.js对象->jquery对象 $(dom)
const dom=document.getElenmentById(‘div’);
2.jquery对象->js对象
$(‘h1’)[1] or $(‘h1’).get(可填)；
核心方法：
size()和length获取jquery的dom元素的个数
$(‘h1’).size()=$(‘h1’).length
each()遍历jquery对象
<h1>aaa</h1><h1>aaa</h1><h1>aaa</h1>
$(‘h1’).Each(function(i){
$(this).attr({‘num’,i+1})
})
index()搜索匹配的元素，并返回相应的元素的索引值
$(‘ul li’).mouseenter(function(){
Index=$(this).index(‘ul li’);
$(‘div p’),eq(index).show();
$().not($(‘div p’),eq(index)).hide();
})
data()往jquery对象的身上赋值,dom结构上不显示
$(‘h1’).each(function(i){
$(this).data({‘num’,i+1})
})
选择器：
<h1>aaa</h1><h1>aaa</h1><h1>aaa</h1>
gt(1);匹配大于1 $(‘h1:gt(1)’)
lt(1);匹配小于1 $(‘h1:lt(1)’)
div~h1匹配div元素之后的所有兄弟元素h1
:has()
<div><p>123</p></div><div><h1>456</h1></div>
$(‘div:has(p)’) 匹配一个包含p标签的div元素
:empty 选择所有没有子元素的元素(包括文本节点)
:parent 选择所有含有子元素或者文本的父级元素
属性选择器：
$(‘h1[name]’) 匹配含有name属性的h1标签
$(‘h1name’) 匹配含有name和age属性的h1标签
$(‘h1[name！=user]’)) 匹配name的值不为user的h1标签
$(‘h1[name=user]’)) 匹配name的值为user的h1标签
$(‘h1[name^=user]’) 匹配name的值以user开头的h1标签
$(‘h1[name$=123]’) 匹配name的值以123结尾的h1标签
$(‘h1[name*=u]’) 匹配含有name的值包含u的h1标签
筛选：
first() $('li').first()取ul里的第一个li元素
last() $('li').last()取ul里的最后一个li元素
$(‘h1’).slice(1)) 不取数组下标为0的h1元素
$(‘h1’).slice(1,4) 取数组下标为1,2,3的三个h1元素
$(‘h1,p’)=$(‘h1’).add(‘p’)
$(‘div’).next().addSelf().css({‘color’:’red’}) 找到div下一个元素再加上div本身渲染字体为红色
查找：
prev() 同级上一个元素
next() 同级下一个元素
children() $(‘ul’).children()=$(‘li’)
parent() $(‘li’).parent()= $(‘ul’)
find(‘p’) $(‘div’).find(‘p’)找到div里面的p元素
nextAll() $(‘div’).nextAll()找到div后面的所有的同级元素
prevAll() $(‘div’).prevAll()找到div前面的所有的同级元素
siblings() $(‘div’).siblings()找到div前后所有的同级元素
属性：
attr() $(‘div’).attr(‘color’,’red’)设置div的字体颜色
attr({}) $(‘div’).attr({‘color’:’red’,’margin’:’5px’})设置div的字体颜色和外边距
removeAttr() $(‘div’)removeAttr(‘color’)给div移除一个color属性
addClass() $(‘div’).addClass(‘add’)给div添加一个add类
removeClass() $(‘div’).removeClass(‘move’)给div移除一个add类
toggleClass() $(‘div’).toggleClass(‘height’)切换类如果存在就删，不存在就添加
html() $(‘.d1’).html()获取d1类里的所有标签
html(val) val=$(‘.d1’).html();$(‘.d2’).html(val)把获取的d1类所有标签添加到d2类里
val() $(‘input’).val()获取文本框的输入值
val(val) val=$(‘input’).eq(0).val();$(‘input’).eq(2).val(val)第一个文本框值赋给第二个
文档处理：
内部插入：
前追加：
append() $(‘div’). append(‘h1’) 往div里追加h1
appendTo() $(‘h1’) .appendTo(‘div’) 把h1追加到div里
后追加：
prepend() $(‘div’).prepend(‘h1’) 往div里追加h1
prependTo() $(‘h1’).prependTo(‘div’) 往div里追加h1
外部插入：
before() $(‘div’).beforer(‘h1’) 在div前面追加h1元素
insertBefore() $(‘h1’).insertBefore(‘div’) 在div前面追加h1元素
after() $(‘div’).after(‘h1’) 在div后面追加h1元素
insertAfter() $(‘h1’).insertAfter(‘div’) 在div后面追加h1元素
包围：
wrap() $(‘p’).wrap(‘<i><i>’)往每个p标签外面添加一个i标签
wrapInner() $(‘p’).wrapInner(‘<i><i>’)往每个p标签里面添加一个i标签
wrapAll() $(‘p’).wrapAll(‘<i><i>’)往一组p标签外面添加一个i标签
替换：
replaceWith() $(‘p’).replaceWith(‘<i>hhhh<i>’)把每个p标签替换成i标签
replaceAll() $(‘<i>hhhh<i>’).replaceAll(‘p’)把每个p标签替换成i标签
删除：
empty() $(‘p’).empty()把p标签里的内容清空
remove() $(‘p’).remove()从dom结构中移除p标签，并没有删除，保留了缓存
克隆：
clone() $(‘p’).clone()克隆了一个p元素，只克隆本身，不克隆事件
clone(true) $(‘p’).clone()完全克隆了一个p元素，克隆本身，也克隆了事件
尺寸：
height() $(‘img’).height()获取图片的高度，不加内边距
width() $(‘img’).width()获取图片的宽度，不加内边距
InnerHeight() $(‘img’).height()获取图片的高度，加上内边距
InnerWidth() $(‘img’).width()获取图片的宽度，加上内边距
outHeight() $(‘img’).width()获取图片的高度，加内边距和边框
OutWidth() $(‘img’).width()获取图片的宽度，加内边距和边框
$(window).height() 可视的高
$(document).height() 文档的总高度
$(window).scroll(function(){ //滚动的高度
h=$(window).scrollTop();
document.title=h
})
事件：
blur() $(‘input’).blur(function(){}) 失去焦点时触发事件
focus() $(‘input’).focus(function(){}) 当聚焦时触发事件
focusin() $(‘p’).focusin(function(){}) 当聚焦p里的input时触发事件
focusout() $(‘p’).focusout(function(){}) 当p里input失去焦点触发事件
change() $(‘input’).change(function(){}) 输入的值发生改变时触发事件
error() $(‘img’).error(function(){}) 当加载不到图片时触发事件
click() $(‘button’).click(function(){}) 点击按钮时触发事件
dbclick() $(‘button’).dbclick(function(){}) 双击按钮时触发事件
鼠标事件：
$(‘div’).bind(‘click’,function(){}) 绑定一个点击事件
$(‘div’).unbind(‘click’) 解除点击事件，括号为空，则解除所有事件
$(‘div’).one(‘click’,function(){}) 只能点击一次
$(‘div’).mousedown(function(){}) 在div区域内按下任何鼠标按钮时事件就会触发
$(‘div’).mouseenter(function(){}) 鼠标移动在div区域上时事件就会触发
$(‘div’).mouseover(function(){}) 鼠标移动在div区域上时事件就会触发
mouseover事件和mouseenter事件区别：
mouseover事件：在div区域上鼠标移动一次，就执行一次事件
mouseenter事件：在div区域上不管鼠标移动多少次，只执行一次
mouseleave事件和mouseout事件区别：
$(‘div’).mouseleave(function(){}) 鼠标离开div区域时事件就会触发
$(‘div’).mouseout(function(){}) 鼠标离开div区域时事件就会触发
mouseleave事件和mouseout事件区别：
mouseleaver事件：鼠标离开div区域时，就执行一次事件
mouseout事件：鼠标离开div或者是div的子元素区域时，就执行一次事件
$(‘div’).mousemove(function(){}) 鼠标在div区域移动时事件就会触发
$(‘div’).mouseup(function(){}) 鼠标在div区域按键被释放时事件就会触发
$(‘div’).resize(function(){}) 当div的可视区域的尺寸改变是事件就会触发
$(‘div’).scroll(function(){}) 在div区域内滚动滑轮时事件就会触发
$("input").select(function(){}) 当input标签里的值被选中时事件就会触发
$('form').submit(function() {}) 当表单提交时事件就会触发
$(‘div’).hover(()=>{},()=>{}) 鼠标移进div执行第一个函数，移出执行第二个函数
键盘事件：
$(‘input’).keydown(function(event){
alert('当按下键时触发事件，然后显示值')；
if(event..which == 13){
alter(‘在输入框内按回车事件触发’)
}
})
$('input').keypress(function(event){
alert('当按下键时触发事件，然后显示值');
if(event.which == 13){
alert('在输入框内按回车事件触发');
}
})
$('input').keyup(function(event){
alert('当释放键时触发事件');
if(event.which == 13){
alert('在输入框内按回车事件触发');
}
})
键盘键值：
13 Enter
37~40 左上右下
46 Delete
65~90 A~Z
112~123 F1~F12
事件处理：
效果:
show() $(‘p’).show()=p{display:block;}
hide() $(‘p’).hide()=p{display:none;}
slideDown() 下拉
$("summary").click(function(){
$("p").slideDown();
});
slideUp() 上拉
$("summary").click(function(){
$("p").slideUp();
});
slideToggle() 上下切换拉
$("summary").click(function(){
$("p").slideToggle();
});
fadeIn(time) $(‘div’).fadeIn(time) 淡入(添加div)到dom结构里
fadeOut(time) $(‘div’).fadeOut(time) 淡出(移除div)在dom结构里
fadeToggle() $(‘div’).fadeToggle(time) div在dom结构中淡入淡出
stop() $(‘div’).stop() 停止div动画或效果
delay() $(‘div’).delay(8000).stop() 8秒后停止div动画或效果
解决加载问题
$(function(){}) 等dom结构加载完，才执行js代码，解决js代码在头部的问题
$(window).load(()=>{}) 资源加载完毕后执行
$('#foo').trigger('click') 自执行身上绑定的事件
数据缓存
$("div").data("test", { first: 16, last: "pizza!" }); 设置缓存
$("span:first").text($("div").data("test").first); 获取缓存
$("div").removeData("test1"); 删除缓存
$(“div:contains(‘John’)”)
获取包含文本内容’'John’的div元素
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
