jQuery基础知识

作者: 椰果粒 | 来源:发表于2019-02-21 10:01 被阅读23次

一： jQuery选择器

jQuery可以支持CSS3的选择器，在不支持CSS3的情况下，jQuery也可以兼容浏览器
1. 设置css样式

$('p').css('color','red');  
$('#one').css('backgroundColor','green');
$('#one').css({'backgroundColor':'green', 'color':'yellow'})
$('.duanluo').css('color','yellow');
$('p').length;
$('p').size();

如果属性值不带引号，要用驼峰式写法，如果带上引号，驼峰和-都可以
设置多个样式时，需要用{}写法

2. 对选择的元素进行基本的过滤操作

1.比如选择第一个元素
2.最后一个元素
3.下标为奇数或者偶数的元素
4.具体到哪一个元素，使用eq(n)
5.lt(n)表示选择小于n号索引的元素
6.gt(n)表示选择大于n号索引的元素
7.还可以设置为属性值不等于的情况

$('p:first')
$('p:last')
$('p:odd');
$('p:even')
$(li[data-li = single] > img).addClass('img-circle');
$(li[data-li != single] > img).addClass('img-circle');
$(li[data-lt ~= single])表示含有空格，且有singe属性的元素
无论什么符号分割开的，只要含有就行的，用*=
$= 表示以设置的字符结束的属性
^= 表示以设置的字符开始的属性
$('p:eq(1)');   选择页面中的第二个P元素

3.跟表单相关的选择元素：表单相关前面都加一个冒号

选择表单中所有的input元素：    $(':input')，注意这里的button按钮也被看成是input元素
$(':button') 找到的就是页面上所有的重置按钮和注册按钮
$(':submit') 找到所有的提交类型的按钮
$(':reset') 选择所有的重置按钮
一切的表单元素都可以使用:元素名称/类型名称
$(':file')选择文件类型的元素
$('checkbox')选择复选框
$('password')选择密码
$(':radio')
$(':checked')
$(':focus')处于焦点状态的表单元素
$(':disabled')禁用的表单元素
$(':eabled')启用的表单元素

4.孩子，兄弟，父亲元素们

选择第一个子元素是first-child，与first有区别，first选择的是第一个元素
last-child选择最后一个子元素
nth-child允许我们选择指定的子元素，nth-child是从1开始的，与eq不同，eq是从0开始的
nth-chid(1)选择第一个子元素
nth-child(odd)奇数位置的子元素
nth-child(even)偶数位置的子元素
nth-child(4n)选择4的倍数的子元素
nth-last-child(4n)倒着数4n的倍数
contains()可以选择包含某些字符串的元素，包含的是文字内容
$('li:contains("viva")');
$('li img').first()
$('li img').last()
$('li img').slice(4,8)选择开始到结束的位置的值
$('li').children('h2');选择子元素里的h2元素
$('li").parent()也可以选择一个元素的父亲元素
$('li').next()选择这个元素的下一个兄弟元素
$('li').prev()选择上一个兄弟元素
$('li').siblings()选择所有的兄弟元素
$('li').nextAll()可以选择后边所有的兄弟元素
$('li').prevAll()
$(document).bind("click",function(e){   // 匹配最近的元素，如果没有就向上找，如果找不到就返回一个空jQuery对象
    $(e.target).closest('li').css("color","red");
})
children()方法只考虑子元素，不考虑其他后代元素

5.parent(), parents(), closest()三者的区别

parent()返回集合中每个匹配元素的父元素，返回一个元素节点
parents()返回集合中每个匹配元素的祖先元素，找到第一个父节点之后继续向上查找，最终返回多个父节点
closest()从自身开始往上找，返回最先匹配的祖先元素，返回匹配的第一个元素节点

二：属性的设置与移除

attr(), removeAttr()
attr()会设置每一个满足条件的属性值，而在获取值的时候，只会获取到第一个值，如果想获取到别的属性值，使用map或者each方法

添加css类

addClass()方法为元素添加css类 
removeClass()移除css类
toggleCss()切换css，也就是如果有你设置的类，就去掉它，如果没有，就加上他
hasClass()可以看是否有css类

设置css的属性
width设置或者查看元素的宽度
height设置或者产看元素的高度
outerWidth
outerHeight表示包含元素的高度+内外边距+边框的高度
innerWidth
innerHeight表示元素的内部高度，包含元素本身和内边距，不包括外边距和边框
offset可以设置元素的坐标，相对于文档的位置
console.log( $("#content").offset({top:100, left:100})); position可以用来设置元素的位置，该位置是相对于与他定位的父元素的位置，父元素已定位 scrollTop(), scrollLeft()获得元素的滚动条距离顶端的距离和距离左侧的距离，可以获取也可以传递参数包装元素 wrap()，选中所选中的元素的外边 wrapInner()选中所选中的元素里边所有的元素 wrapAll()为所有元素包装 unwrap()去掉包装元素，不支持参数在元素上追加内容 prepend() append() prependTo()可以将指定的内容添加到指定位置的最前面 appendTo()可以将指定的内容添加到指定的位置$ ("content").prepend("<div>hello</div>")所选的是父元素，在父元素的里边最开始的位置追加元素
$("#content").append("<div>hello</div>")追加到content这个父元素的最后一个上面$ ('<h6>hello</h6>').appendTo(".content")可以将h6hello追加到content的后边
before，after，insertBefore，inserAfter
before和after与被选择的元素之间是兄弟关系
insertBefore和insertAfter首先指定插入的内容，然后再指定要插入的位置
empty，remove，detach
empty可以移除所选择的元素的所有子元素
remove和detach可以移除所有的元素，detach移除之后可以保留附加在这个元素上的数据，如绑定的方法等，而remove不会保留数据
replaceAll和replaceWith可以替换页面上的内容
要替换的位置+replaceWith（要替换的内容）
要替换的内容+replaceAll(要替换的位置)
$("#consolentent").replaceWith("<h1>hello</h1>");$ ("<h1>hello</h1>").replaceAll('#content')
clone可以进行深克隆，将所选元素和它的子元素进行复制
$("#content").clone().appendTo("#a");将content中的元素复制一份，并追加到a的后面事件： click(), dblclick(), hover()$ (function(){
$("#inner").css('display','none');$ ('#content').click(function(){
$(this).children("#inner").toggle(); //当点击content时，让它的儿子inner能够切换显示和隐藏 }) }) is()用来判断元素是否显示 if($ (this).next().is(":visible")) // 如果内容显示
bind()可以绑定JavaScript中所有的事件，比如mouseover,mouseout,click,dblclick等
$("#content").bind("click",function(){})$ ("#content").click(fucntion(){}) // 简写形式
toggle()
1. 模拟鼠标单击
toggle(fn1,fn2,fn3,fn4...); // 鼠标单击第一次触发fn1，单击第二次触发fn2，然后依次往后轮播触发
2. 切换元素的可见状态
$(function(){$ ("#content").on("click",function(){
$(this).children("#inner").toggle(); }) }) mouseEnter和mouseLeave可以设置鼠标进入和离开时的事件 focus，blur，change，submit，keydown，keyup，keypress(一般字母和数字按键会触发keypress事件，enter，del等按键不会触发keypress事件) prop可以获取表单中某元素的值 on可以让你自定义事件，one可以让事件只发生一次$ (function(){
$("#content").on("click",function(){$ (this).children("#inner").toggle();
})
})
event.stopPropagation()阻止冒泡行为
event.preventDefault()阻止默认行文，如点击链接跳转等
return false 阻止冒泡和默认行为
jQuery不支持事件捕获
事件对象的属性：
1. event.type 所选中的事件的类型，比如click mouseover等
2. event.preventDefault 阻止默认行为
3. event.stopPropagation 阻止冒泡
4. event.target 在哪个元素上触发的事件，就是哪个元素
5. event.relatedTarget 相关元素
6. event.pageX, event.pageY 光标相对于页面的xy坐标
7. event.which 获取鼠标按的是左中右键以及键盘的按键，对于键盘来说，返回的是ascll码
8. event.metaKey 键盘事件中获取<ctrl>按键
unbind()解除绑定的事件，第一个参数是事件类型，第二个参数是要移除的函数(因为同一类型的事件可能有多个函数对应)。没有参数就解除所有事件，有参数就解除该类型的事件
off方法可以关闭由on方法定义的事件
一次绑定多个事件：
$("#content").bind('mouseover mouseout', function(){// 两个事件之间用空格分开$ (this).toggleClass('over');// 表示当鼠标进入和移开时，切换class
})
添加事件命名空间
动画：
自定义动画：animate(params,speed,callback);
fadeIn和fadeOut可以逐渐显示和隐藏选中的元素，fadeToggle是切换显示和隐藏。默认400毫秒，也可以使用字符串fast，slow
动画都是排队进行的，一个完成之后再进行另一个。
在完成动画之后可以执行一个函数
$(function(){$ ("#content").click(function(){
$("#inner").fadeToggle(1000,function(){ alert('ok'); }); }) }) 可以利用递归逐个的显示和隐藏一组元素$ (function(){
$("#content").click(function(){$ ("#inner:last").fadeOut(1000,function(){
$(this).prev().fadeOut(1000,arguments.callee) }); }) }) slideDown是从上往下划入，slideUp是从下往上消失，slideToggle是切换滑动显示和隐藏 show和 hide可以控制元素的显示和隐藏$ (function(){
$("#content").click(function(){$ ("#inner").hide();
})
})
window.onload与 $(document).ready()的区别 1. 前者必须等所有的内容（图片，视频）等全部加载完毕后再执行，后者只要DOM结构绘制完毕就可以执行了，图片，视频等文件不一定加载完 2. 前者不能同时执行多个，后者可以 3. 为了解决后者文件加载不完全的问题，我们可以采用$ (window).load()方法
对于DOM对象，只需要用$()将DOM对象包装起来，就得到jQuery对象了
用jQuery获取网页中不存在的元素，也不会报错。因为选择器最终获取的都是jQuery对象，所以，应该用length来判断某对象是否存在
item[n].checked可以用来判断元素是否被选中
filter()筛选出与指定表达式匹配的元素集合，其中括号内可以是多种选择器的组合。find()会在元素内寻找匹配元素，而filter则是筛选元素、
find(),filter(),preAll(),nextAll()在筛选DOM方法时，都可以使用jQuery表达式来作为他们的参数来筛选元素