jQuery学习小记

作者: 冯九岁 | 来源:发表于2018-11-28 02:24 被阅读0次

基本选择器

$("#id")：id选择器，返回单个元素
$(".class")：class选择器，返回集合元素
$("element")：选定指定的元素名匹配的元素，返回集合元素
$("*")：通配符选择器，选择所有元素，返回集合元素
$("selector1,selector2")：选择所有选择器匹配的元素，返回集合元素

层次选择器

$("div span")：选择<div>里的的所有<span>后代元素，返回集合元素
$("div>span")：选择<div>下的<span>子元素，只寻找一级，<span>中的<span>不会找到，而上述则全部找到

<div>
  <span id="span1"></span>
  <span id="span2">
    <span id="span3"></span>
  </span>
</div>
<!-- div span 选取的结果是{span1,span2,span3} -->
<!-- div > span 选取的结果是{span1,span2} -->

$("#one+div")：获取紧接在one后面的一个同辈div元素，等同于$(#one).next("div")
$(#one).prev("div")获取紧接在one前面的一个同辈div元素
$("#one~div")：获取one后面的所有同辈div元素，等同于$(#one).nextAll("div")
$(#one).siblings("div")：获取one的元素的所有div同辈元素（不管前后）
所以获取元素范围大小顺序依次为：
$(#one).siblings("div")>$("#one~div")>$("#one +div")
$(#one).siblings("div")>$(#one).nextAll("div")>$(#one).next("div")

基本过滤选择器

:first：选取第一个元素，返回单个元素
:last：选取最后一个元素，返回单个元素
:not(selector)：去除所有给定选择器所匹配的元素，返回集合元素
:even：选取索引为偶数的所有元素，索引号从0开始，返回集合元素
:odd：选取索引为奇数的所有元素，索引号从0开始，返回集合元素
:eq(index)：选取索引等于index的元素，index从0开始返回单个元素
:gt(index)：选取索引号大于index的所有元素,返回集合元素
:lt(index)：选取索引小于index的所有元素，返回集合元素
:header：选取所有的标题元素，返回集合元素
:animated：选取正在执行动画的元素，返回集合元素
:focus：选取当前获取焦点的元素，返回集合元素

内容过滤选择器

:contains(text)：选取含有文本内容为text的元素，返回集合元素
:empty：选取没有子节点或者文本的空元素，返回集合元素
:has(selector)：选取含有选择器所匹配的元素的元素，返回集合元素
:parent：选取含有子节点或者文本的元素，返回集合元素

可见性过滤选择器

:hidden：选取所有不可见的元素，返回集合元素
:visible：选取所有可见的元素，返回集合元素

属性过滤选择器

[attribute]：选取含有此属性的元素，返回集合元素
:[attribute=value]：选取属性的值为value的元素，返回集合元素
:[attribute!=value]：选取属性的值不为value的元素，返回集合元素
:[attribute^=value]：选取属性的值以value开始的元素，返回集合元素
:[attribute$=value]：选取属性的值以value结尾的元素，返回集合元素
:[attribute*=value]：选取属性的值含有value的元素，返回集合元素
:[attribute|=value]：选取属性的值等于value或者是以value为前缀（即value-，value后面跟一个连字符）的元素，返回集合元素
:[attribute~=value]：选取属性的值以空格分隔的值中含有value的元素，返回集合元素
:[attribute1][attribute1]...[attributeN1]：用多个属性选择器合并成一个复合属性选择器，返回集合元素

子元素过滤选择器

:nth-child(index/even/odd)：选取父元素下的第index个子元素，index值从1开始，或者选取奇偶子元素,返回集合元素
:first-child：选取父元素下的第一个元素，返回集合元素
:last-child：选取父元素下的最后一个子元素，返回集合元素
:only-child：如果元素是父元素的唯一的元素，则选择，否则，不选择，返回集合元素
:nth-child()还可以通过数学表达式选取一组特定的元素，如::nth-child(3n)：选取父元素下所有3的倍数的子元素（n从1开始，即选取第3，6，9，...个元素）

表单选择器

:input：选取所有的input、textarea、select、button元素，返回集合元素
:text：选取所有单行文本框，返回集合元素
:password：选取所有的密码框，返回集合元素
:radio：选取所有的单选框，返回集合元素
:checkbox：选取所有的多选框，返回集合元素
:submit：选取所有提交按钮，返回集合元素
:image：选取所有的图像按钮，返回集合元素
:reset：选取所有的重置按钮，返回集合元素
:button：选取所有的按钮，返回集合元素
:file：选取所有的上传域，返回集合元素

表单对象属性过滤选择器

:enabled：选取所有可用元素，返回集合元素
:disabled：选取所有不可用元素，返回集合元素
:checked：选取所有被选中的元素（单选框和多选框），返回集合元素
:selected：选取所有被选中的元素（下拉列表），返回集合元素

查找、设置、删除属性

attr()方法：接受一个或两个参数，一个参数是获取属性值，两个参数是设置属性,需要设置多个属性时，attr方法的参数可以是一个由属性和属性值组成的json数据格式

$("div").attr("background");//获取属性值
$("div").attr("background","blue");//设置属性值
$("div").attr({"background":"blue","height":"200px"});//设置多个属性值

css()方法：接受一个或两个参数，当一个参数是属性名时，获取属性值，当两个参数时，设置属性第一个参数为属性名，第二个参数为属性值，需要设置多个属性时，css方法的参数可以是一个由属性和属性值组成的json数据格式

$("div").css("background");//获取属性值
$("div").css("background","blue");//设置属性值
$("div").css({"background":"blue","height":"200px"});//设置多个属性值

另外width()方法和height()方法可以直接获取宽度和高度

addClass()：为元素添加class值，可批量添加属性与值

$("div").addClass("myclass");

removeAttr()：删除指定的属性

$("div").removeAttr("background");

removeClass()：有参数时，删除指定的class值，没有参数时，删除全部的class值

$("div").removeClass("myclass");
$("div").removeClass();

hasClass()：判断匹配的元素是否有某个class值，有则返回true，没有则返回false

$("div").hasClass("myclass");

创建元素、文本、属性节点

均可以直接将元素、文本、属性添加到$()方法中，如：

var p=$("<p title='mytitle'>假装是标题</p>")

插入节点

append()：向元素内部添加节点，如：

<p>我是内容</p>

$("p").append("<span>我是追加的内容</span>");

结果：

<p>我是内容<span>我是追加的内容</span></p>

appendTo()：将元素添加到指定元素内部，即将append方法中的链式操作的成员互换位置

<p>我是内容</p>

$("<span>我是追加的内容</span>").appendTo("p");

结果：

<p>我是内容<span>我是追加的内容</span></p>

prepend()：向元素内部前置内容

<p>我是内容</p>

$("p").prepend("<span>我是追加的内容</span>");

结果：

<p><span>我是追加的内容</span>我是内容</p>

prependTo()：将节点前置到指定元素中，即将prepend方法中的链式操作中的成员互换位置

<p>我是内容</p>

$("<span>我是追加的内容</span>").prependTo("p");

结果：

<p><span>我是追加的内容</span>我是内容</p>

after()：在每个元素节点后添加节点

<p>我是内容</p>

$("p").after("<span>我是追加的内容</span>");

结果：

<p>我是内容</p><span>我是追加的内容</span>

insertAfter()：讲节点插入到指定节点之后，即将after方法中的链式操作中的成员互换位置

<p>我是内容</p>

$("<span>我是追加的内容</span>").insertAfter("p");

结果：

<p>我是内容</p><span>我是追加的内容</span>

before()：再节点前面插入节点

<p>我是内容</p>

$("p").before("<span>我是追加的内容</span>");

结果：

<span>我是追加的内容</span><p>我是内容</p>

insertBefore()：将节点插入到指定元素前面

<p>我是内容</p>

$("<span>我是追加的内容</span>").insertBefore("p");

结果：

<span>我是追加的内容</span><p>我是内容</p>

删除节点

remove()：从DOM中删除所有匹配的元素，同时该节点所包含的所有后代节点将同时被删除，因为返回值是删除节点的引用，因此可以在以后继续使用这些元素，但是此时这些节点所绑定的事件也会删除，如：

var $li=$("ul li:eq(1)").remove();//删除节点
$li.appendTo("ul");//将节点添加回去

detach()：和remove()几乎一样，不同的是detach方法不会删除节点所绑定的事件和附加的数据
empty()：清空所匹配的节点

$("ul li:eq(1)").empty();//此时第一个li标签内无任何内容及节点了

复制节点

clone()：复制节点，可以有参数true，当有true参数时，将同时复制节点所绑定的事件，如：

$("ul li:eq(1)").clone(true).apppendTo("ul");

替换节点

replaceWith()：将匹配的节点替换成指定的节点

$("p").replaceWith("<ul><li></li></ul>");

replaceAll()：用指定的节点替换相应节点，即将replaceWith方法中的链式操作中的成员互换位置

$("<ul><li></li></ul>").replaceAll("p");

包裹节点

wrap()：将匹配的节点用指定的节点单独包裹起来

<p>我是内容</p>
<p>我是另一个内容</p>

$("p").wrap("<span></span>");

结果：

<span><p>我是内容</p></span>
<span><p>我是另一个内容</p></span>

wrapAll()：将匹配的节点用指定的节点全部包裹起来

<p>我是内容</p>
<p>我是另一个内容</p>

$("<span></span>").wrapAll("p");

结果：

<span>
  <p>我是内容</p>
  <p>我是另一个内容</p>
</span>

wrapInner()：将匹配的节点内部的节点或者文本内容用指定的节点包裹起来

<p>我是内容</p>

$("p").wrapInner("<span></span>");

结果：

<p><span>我是内容</span></p>

设置、获取文本、`HTML`和值

html()：类似于原生JavaScript中的innerHTML属性，不含参数时是获取，包含元素节点和文本节点，当内有字符串参数时，是重新设置节点内容和文本内容

$("p").html();

text()：类似于原生JavaScript中的innerText属性，不含参数时是获取文本节点，当内有字符串参数时，是重新设置文本内容

$("p").text("我是内容");

val()：类似于原生JavaScript中的value属性，可以用来获取和设置元素的值，无论是元素或者文本框，下拉列表或者单选框，如果元素是多选，则返回一个包含所有选择的值的数组

遍历节点

children()：获取所有的子元素集合，返回一个数组，只考虑直接子元素，不考虑其他后代元素

<div>
  <p>我是内容
    <span>我是内嵌的内容</span>
  </p>
  <p>我是另一个内容</p>
</div>

var $div = $("div").children();
$div.length;//返回2，不是3，只包含直接子元素，不包含span

next()：获取匹配元素后面紧邻的一个同辈元素，效果类似于$("prev+next")

<div>
  <p>我是内容</p>
  <h1>我是另一个内容</h1>
</div>

var $h1=$("p").next();//返回h1元素节点

prev()：获取匹配元素前面紧邻的一个同辈元素

<div>
  <h1>我是另一个内容</h1>
  <p>我是内容</p>
</div>

var $h1=$("p").prev();//返回h1元素节点

siblings()：获取匹配元素的前后所有的同辈元素

<div>
  <h1>我是另一个内容</h1>
  <p>我是内容</p>
  <ul>我是列表</ul>
</div>

var $h1=$("p").next();//返回h1和ul元素节点集合

closest()：获取最近的符合匹配的一个父元素

<div>
  <div class="div2">
    <p>我是内容</p>
  </div>
</div>

var $div=$("p").closest();//返回class为div2的div元素

parent()：获取一个父元素

<div>
  <div class="div2">
    <p>我是内容</p>
  </div>
</div>

var $div=$("p").parent();//返回class为div2的div元素

parents()：获取所有匹配的一个祖先元素

<div>
  <div class="div2">
    <p>我是内容</p>
  </div>
</div>

var $div=$("p").parents();//返回两个div元素组成的数组

元素定位

offset()：获取元素在当前视窗的相对偏移，返回一个对象，对象包含top和left两个属性

<div>我是内容</div>

var $offset=$("div").offset();
var left=$offset.left;
var top=$offset.top;

position()：获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，返回一个对象，对象包含top和left两个属性

<div style="position:relative">
  <div><p>我是内容</p></div>
</div>

var $position=$("p").position();
var left=$position.left;
var top=$position.top;

scrollTop()：获取元素的滚动条距离顶端的距离
scrollLeft()：获取元素的滚动条距离左侧的距离

加载`DOM`

$(document).ready()：和原生的JavaScript的window.onload()方法有类似的功能，window.onload()方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行，而$(docuemnt).ready()在DOM完全就绪时就可以被调用，此时并不意味着这些关联文件都已经下载完毕；另外，$(document).ready()可多次使用，而window.onload()只能用一次，多次使用时会出现覆盖的现象，另外其可以简写成$().ready();

事件绑定

bind()：可以有三个参数，第一个参数是事件类型，第二个参数可选，作为event.data属性值传给事件对象的额外数据对象，第三个参数是处理函数

bind(type data fn);

on()函数来绑定事件

常见的事件类型：
blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mouseover、mousemove、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keyup、error
另外，像click、mouseover、mouseout这类常用的事件，可以简写，如下：

$(function(){
  $("h1").mouseover(function(){
    $(this).next().show()
  }).mouseout(function(){
    $(this).next().hide()
  })
})

合成事件

jQuery中有两个合成事件——hover()和toggle()方法

hover()：用于模拟光标悬停事件，当光标移动到元素时，会触发第一个函数，离开时触发第二个函数，语法

hover(enter,leave);

toggle()：用于模拟鼠标连续点击事件，语法

toggle(fn1,fn2,...,fn);

阻止事件之外的额外问题

停止事件冒泡：用stopPropagation()方法来停止事件冒泡，如：

$("span").bind("click",function(event){
  //事件处理程序
  event.stopPropagation()
})

阻止默认行为：用preventDafault()方法来阻止默认行为，当然也可以用原生JavaScript中的return false，如：

$("a").bind("click",function(event){
  //事件处理程序
  event.preventDafault();
  //或者return false;
})

事件捕获：事件捕获与事件冒泡是刚好两个相反的过程，jQuery不支持事件捕获。

事件对象

添加事件对象非常简单，只需要为函数添加一个参数，一般会用event

$("a").bind("click",function(event){
  //事件处理程序
})

event.type：获取事件的类型

$("a").bind("click",function(event){
  alert(event.type);
})

event.target：获取触发事件的对象元素

$("a").bind("click",function(event){
  alert(event.target.href);
})

event.pageX和event.pageY：获取光标相对于页面的x坐标和y坐标

$("a").bind("click",function(event){
  alert(event.pageX);
  alert(event.pageY);
})

event.which：在鼠标单击时获取到鼠标的左、中、右键；在键盘事件中获取到键盘的按键

$("a").mousedown(function(event){
  alert(event.which);
})
$("a").keyup(function(event){
  alert(event.which);
})

event.metaKey：在键盘事件中获取ctrl按键

移除事件

unbind()：没有参数时，删除所有的绑定事件，可以有两个参数，第一个参数是事件类型，第二个参数是将要移除的函数，提供了事件类型，则只删除该事件类型，提供了事件处理函数，则只有这个事件处理函数会被删除，语法结构如下

unbind(type,data)
$("a").click(function(){
  $("#btn").unbind("click",fn1);
}

另外，对于只需要触发一次随后就立即解除绑定的情况，jQuery提供了one()方法，这个方法可以为元素绑定处理函数，当函数触发一次后，立即被删除

事件的其他用法

模拟操作：trigger()：此方法可以模拟操作，例如

$("#btn").triggle("click")；

这段代码可以触发id为btn的按钮的click事件，trigger()方法会触发浏览器的默认事件，如果不想执行浏览器的默认操作，可以使用jQuery中的另一个方法triggerHandler()方法

绑定多个事件类型：bind可以为元素绑定多个事件类型

$(function(){
  $("div").bind("mouseover mouseout",function(){
    $(this).toggleClass("over");
  });
})

这段代码效果和下方代码一样

$(function(){
  $("div").bind("mouseover",function(){
    $(this).toggleClass("over");
  }).bind("mouseout",function(){
    $(this).toggleClass("over")；
  });
})

动画

show()和hide()：这两个是jQuery中的最基本的动画，当这两个方法不含参数时，效果类似于直接将元素的display属性分别改为block和none，这两个方法当有参数时，可以使元素慢慢显示出来，速度关键字有slow、normal、fast，此外，还可以直接指定一个数字作为显示的时间参数，单位为毫秒，其中slow的显示时间为600毫秒，normal的显示时间为400毫秒，fast的显示时间为200毫秒，这两个方法是同时改变元素的高度、宽度和不透明度

$("p").toggle(function(){
  $(this).next().hide(600);
},function(){
  $(this).next().show(600);
})

fadeIn()和fadeOut()：这两个函数只改变元素的不透明度，同样可以有以上的速度参数

$("p").toggle(function(){
  $(this).next().fadeOut();
},function(){
  $(this).next().fadeIn(600);
})

slideUp()和slideDown()：这两个方法只改变元素的高度，slideDown()方法使元素由上到下延伸展示，而slideUp()方法使元素从下到上缩短隐藏，同样有上述的时间参数

$("p").toggle(function(){
  $(this).next().slideUp();
},function(){
  $(this).next().slideDown(600);
})

toggle()：切换元素的可见状态，如果元素可见，则切换为隐藏，如果元素隐藏，则切换为可见

toggle(speed,callback);
$(this).next().toggle();

效果和hide()和show()方法类似

slideToggle()：通过高度来切换元素的可见性

slideToggle(speed,easing,callback);

fadeTo()：把元素的不透明度以渐进的方式调整到指定的值，这个动画只调整元素的不透明度

fadeTo(speed,opacity,callback)
$(this).fadeTo(100,0.3);

fadeToggle()：通过不透明度来切换元素的可见性

fadeToggle(speed,easing,callback);

animate()：自定义动画

animate(params,speed,callback);
params：一个包含样式属性及值的映射，如：{left:"400px",height:"500px"}
speed：速度参数，可选
callback：在动画完成后执行的函数，可选

animate可以添加累加与累减动画，如：

$(function(){
  $("p").click(function(){
    $(this).animate({left:"+=500px"},300)
  });
});

利用animate中的第一个参数很容易实现同时执行多个动画的效果，而需要按顺序执行动画，只需要顺序写animate动画即可，另外也可以使用链式操作

$(this).animate({left:"500px"},300);
$(this).animate({height:"500px"},300);

等效于

$(this).animate({left:"500px"},300).animate({height:"500px"},300);

判断元素是否处于动画状态

if(!$("p").is(":animated")){
  //没有处于动画状态时执行的程序
}

延迟动画

延迟动画利用delay()方法

$(this).animate({left:"500px"},200).delay(1000);

jQuery学习小记

基本选择器

层次选择器

基本过滤选择器

内容过滤选择器

可见性过滤选择器

属性过滤选择器

子元素过滤选择器

表单选择器

表单对象属性过滤选择器

查找、设置、删除属性

创建元素、文本、属性节点

插入节点

删除节点

复制节点

替换节点

包裹节点

设置、获取文本、`HTML`和值

遍历节点

元素定位

加载`DOM`

事件绑定

合成事件

阻止事件之外的额外问题

事件对象

移除事件

事件的其他用法

动画

判断元素是否处于动画状态

延迟动画

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

jQuery学习小记

基本选择器

层次选择器

基本过滤选择器

内容过滤选择器

可见性过滤选择器

属性过滤选择器

子元素过滤选择器

表单选择器

表单对象属性过滤选择器

查找、设置、删除属性

创建元素、文本、属性节点

插入节点

删除节点

复制节点

替换节点

包裹节点

设置、获取文本、HTML和值

遍历节点

元素定位

加载DOM

事件绑定

合成事件

阻止事件之外的额外问题

事件对象

移除事件

事件的其他用法

动画

判断元素是否处于动画状态

延迟动画

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

设置、获取文本、`HTML`和值

加载`DOM`