jQuery学习笔记

jQuery学习笔记

jQuery 是一个 JavaScript 函数库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

一 jQuery入门

1. 环境安装

   <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

2. 基本语法

先看个程序对比：

//JS
var box = document.getElementById("box");
box.innerHTML = "hello,jquery";
//jQuery
var box = $("#box");
box.html("hello,jquery");

基本语法： $(selector).action()

说明:

• jQuery用美元符号 $ 定义；
• selector表示要操作的dom元素；
• action表示要执行的操作。

3. 基本选择器

选择器主要可以用于查找并表示一个DOM节点。后文也会继续提及。

id选择器

对于上面 id="box1"的 div，如何获取它的内容呢？ 用jquery实现如下：

var box1 = $("#box1");box1.html();

id选择器语法： $("# + idName")

这里再提醒一下：

html()： ()里有内容，表示往该元素添加内容，没有内容，表示获取内容。

类选择器

对于上面 class="box2"的 p，如何填充内容 我是类选择器呢？ 用jQuery 实现如下：

var box2 = $(".box2");box2.html("我是类选择器");

类选择器语法：$(". + className")

元素选择器

对于上面 <span></span>，如何填充内容 我是元素选择器呢？ 用jQuery实现如下：

var box3 = $("span");box3.html("我是元素选择器");

元素选择器语法：$("tagName")

4.过滤选择器

基本过滤选择器

选择器	描述	示例
:first	选取第一个元素	$(“div:first”).css(“color”,“red”);
:last	选取最后一个元素	$(“div:last”).css(“color”,“red”);
:not	除去指定的选择器外的元素	$(“div:not”).css(“color”,“red”);
:even	选取索引号是偶数的元素	$(“div:even”).css(“color”,“red”);
:odd	选取索引号是奇数的元素	$(‘div:odd’).css(“color”,“red”);
:eq(index)	选取第index个元素	$(‘div:eq(5)’).css(“color”,“red”);
:gt(index)	选取索引号大于index的元素	$(‘div:gt(8)’).css(“color”,“red”);
:lt(index)	选取索引号小于index的元素	$(‘div:lt(3)’).css(“color”,“red”);

属性过滤选择器

选择器	描述	示例
:[attribute]	选取拥有此属性的元素	$(‘div:[attribute]’).css(‘background-color’,‘red’);
:[attribute=value]	选取属性值为value的元素	$(‘div:[attribute=text]’)
:[attribute!=value]	选取属性值不为value的元素	$(‘div:[attribute!=text]’)
:[attribute^=value]	选取属性值以value开始的元素	$(‘div:[attribute^=text]’)
:[attribute$=value]	选取属性值以value结尾的元素	${(}^{\prime }div:[attribute$=text]’)
:[attribute*=value]	选取属性值包含value的元素	$(‘div:[attribute*=text]’)

内容过滤选择器

选择器	描述	示例
:contains	选取包含文本的text的元素	$(‘div:contains(.mini)’).css(“color”,“red”);
:has(id选择器名称、Class选择器名称)	选取含有选择器所匹配的元素	$(‘div:has(.mini)’).css("…");
:empty	选取不包含子元素的元素	$(‘div:empty’).css(“color”,“red”);
:parent	选取包含子元素的元素	$(‘div:parent’).css(“color”,“red”);

子元素过滤选择器

选择器	描述	示例
:nth-child(index)	选取每个父节点下第index个元素、偶数元素或奇数元素。	$(‘div.one :nth-child(8)’).css (‘background-color’,’#900’);
:first-child	选取每个父元素下的第一个子元素	$(‘div.one :first-child(8)’).css(‘color’,‘red’);
:last-child	选取每个父元素下的最后一个子元素	$(‘div.one :last-child(8)’).css(‘color’,‘red’);
:only-child	选取只有一个子元素的元素	$(‘div.one :only-child(8)’).css(‘color’,‘red’);
:enabled	选取所有可用的元素	$(’#form1 input:enabled’).val(“这里是我的博客。谢谢光临。”);
:disabled	选取所有不可用的元素	$(’#form1 input:disabled’).val(“哈哈”);
:checked	选取所有被选中的元素(一般为（HTML中）RadioButton、CheckBox标记)	$(‘input:checked’).text("刀锋青春 ");
:selected	选取被选中的选项元素（select下拉列表标记中的option=select）	$(‘select:selected’).each(function(){str += $(this).text()+",";});

可见性过滤选择器

:hidden （见下表最后一个）
:visibal

表单元素过滤选择器

选 择 器	描 述	示 例
:input	选取所有的<input>、<textarea>、 <select>和<button>元素	$(":input")选取所有的<input>、<textarea>、 <select>和<button>元素
:text	选取所有的单行文本框	$(":text")选取所有的单行文本框
:password	选取所有的密码框	$(":password")选取所有的密码框
:radio	选取所有的单选框	$(":radio")选取所有的单选框
:checkbox	选取所有的多选框	$(":checkbox")选取所有的多选框
:submit	选取所有的提交按钮	$(":submit")选取所有的提交按钮
:image	选取所有的图像按钮	$(":image")选取所有的图像按钮
:reset	选取所有的重置按钮	$(":reset")选取所有的重置按钮
:button	选取所有的按钮	$(":button")选取所有的按钮
:file	选取所有的上传按钮	$(":file")选取所有的上传按钮
:hidden	选取所有的不可见元素	$(":hidden")选取所有的不可见元素

举个例子

//HTML
<div class="container">
    <p>
       <span>第一个p标签下的span</span>
       <span>第一个p标签下的第二个span</span>
    </p>
    <p>
       <i>i标签</i>
       <span>第二个p标签下的span</span>
    </p>
</div>
//获取到第一个p标签下所有的span标签：
$(".container p:first span")

4.类的修改

类的添加和删除

<div id="box"></div>.active{ background: orange;}.btn{}

给上面的div添加类active和btn，该如何实现呢？这里用addClass()方法： $("#box").addClass("active btn");

现在要删除一个类btn，这里用removeClass()方法： $("#box").removeClass("btn");

二 jQuery事件

1.鼠标事件

click事件

当单击元素时，发生 click 事件。click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。

一次点击事件click是指鼠标指针悬停在元素上，点击（按下并松开）鼠标左键一次。

基本语法：

//function 为处理函数
$(selector).click(function(){    ......})

说明:selector表示要操作的dom元素 (后续效果大体相同)

示例：点击按钮时，按钮背景颜色变为灰色。

<input type="button" value="click me" class="button">
$(".button").click(function () {    $(this).css("background","grey");});

效果图如下：

dblclick事件

当双击元素时，触发dblclick事件。dblclick()方法触发dblclick事件，或规定当发生dblclick事件时运行的函数。

一次双击事件dblclick是指鼠标指针悬停在元素上，快速连续点击鼠标左键两次。

基本语法：

//function 为处理函数
$(selector).dblclick(function(){    ......});

mouseenter事件

当鼠标**指针穿过（进入）**被选元素时，会发生 mouseenter 事件。mouseenter() 方法触发 mouseenter 事件，或添加当发生 mouseenter 事件时运行的函数。

mouseleave事件

当鼠标指针离开被选元素时，会发生mouseleave事件。mouseleave() 方法触发 mouseleave 事件，或添加当发生 mouseleave 事件时运行的函数。

其他鼠标事件方法

• mouseover()当鼠标指针位于元素上方时触发。与 mouseenter 事件不同，mouseover事件在鼠标指针进入被选元素或任意子元素时都会被触发；
• mouseout()当鼠标指针离开被选元素时触发。与 mouseleave 事件不同，mouseout 事件在鼠标指针离开被选元素或任意子元素时都会被触发；
• mousedown()当鼠标按下时触发，如果一直按着鼠标不放，只触发一次mousedown事件；
• mouseup()当鼠标松开按键时触发；
• hover()方法规定当鼠标指针悬停到移开过程中触发 mouseenter 和 mouseleave 事件。

2.键盘事件

keydown事件与 keyup事件

keydown事件是在键盘上按下某键时触发，一直按着则会不断触发（opera浏览器除外），它返回的是键盘代码。

keyup事件是当用户松开某一个按键时触发

基本语法：

$(selector).keydown(function(){    ......})
$(selector).keyup(function(){    ......})

示例：在键盘上输入按键，当触发keydown事件时数值+1，当触发keyup事件时数值+2。

<input type="text">
    <p>按键的次数: <span>0</span></p>
i=0;
$("input").keydown(function(){
    $("span").text(i+=1);
});
$("input").keyup(function(){ 
    $("span").text(i+=2);
});

效果图如下：

注意：观察效果图我们可以明显的看到中间有一个值的过渡的过程，也就说明按下一个按键它触发了二个方法。

keypress事件

keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键。 我们可以理解为keypress事件将keydown事件和keyup事件进行组合。

基本语法：

$(selector).keypress(function(){    ......})

例子如下：（键盘各键值大全：点击此处）

$(document).keydown(function (event) {
    //实现Ctrl+Enter提交表单
    if (event.ctrlKey && event.keyCode == 13) {
        alert('Ctrl+Enter');
    };
    //判断键值
    switch (event.keyCode) {
    case 37:
        alert('方向键-左');
        break;
    case 39:
        alert('方向键-右');
        break;
    };
    return false;
});

3. 表单事件

focus事件和blur事件

当元素获得焦点时（当通过鼠标点击选中元素或通过 tab 键定位到元素时），触发 focus 事件。

当元素失去焦点时发生 blur 事件。

基本语法：

$(selector).focus(function(){    ......})$(selector).blur(function(){    ......})

说明:selector表示要操作的dom元素

示例：当鼠标获取焦点时，在输入框后显示“获取到焦点”，当鼠标失去焦点时，弹框说明失去焦点，并将文字隐藏。

<input type="text" />
<span style="display:none">获取到焦点</span>
$("input").focus(function() {    
	$("span").css("display","inline");
})
$("input").blur(function() {    
	alert("失去焦点");    
	$("span").css("display","none");
})

效果图如下：

change事件

当输入框的值改变的时候失去焦点触发change事件。

基本语法：

$(selector).change(function(){    ......})

示例：在输入框中改变数据后弹出数据被改变的提示框。

<input type="text"/>
$("input").change(function(){   
    alert("改变了数据");
});

效果图如下：

select事件

当 textarea 或文本类型的 input 元素中的文本被选择（标记）时，会发生 select 事件。

基本语法：

$(selector).select(function(){    ......})

示例：选中输入框中的文本弹出提示框“文本已选中！”。

<input type="text" value="www.educoder.net">
$("input").select(function(){   
    alert("文本已选中!");
});

submit事件

当提交表单时，会发生 submit 事件。submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。 该事件只适用于 <form> 元素。

基本语法：

$(selector).submit(function(){    ......})

示例：提交表单时弹出提示框，并将提交内容显示在url中。

<form action="">  
    <input type="text" name="Name"> 
    <input type="submit" value="提交">
</form>
$("form").submit(function(){    alert("提交");});

4. 窗口/页面事件

resize事件

当调整浏览器窗口大小时，发生 resize 事件。

基本语法：

$(selector).resize(function(){    ......})

scroll事件

当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

基本语法：

$(selector).scroll(function(){    ......})

ready事件

页面加载完毕时发生的事件

unload事件

页面卸载时发生的事件

三 jQuery动画

1.非自定义动画

show()和hide()

<p class="toggle">错误提醒</p><p>展示的内容</p>

对于类toggle，有错误时需要出现，解决了错误需要隐藏。这个功能怎么实现呢？这里用show()和hide()：

• 出现：$(".toggle").show()
• 隐藏：$(".toggle").hide()

show()`的原理相当于`css`中的 `display:block;` `hide()`的原理相当于`css`中的 `display:none;

$(".box").hide(2000);

这里hide()方法的参数表示这个动画执行的速度，参数的取值如下：

• "slow"，表示慢速度；
• "fast"，表示快速度；
• 毫秒，可自定义，上面的是2s。

然后，在隐藏完之后，弹出我消失了。 hide()还可以接受一个参数callback，是一个函数，在隐藏这个动作完成之后执行的动作。代码如下：

$(".box").hide(2000,function(){   alert("我消失了");})

toggle()

toggle()可以切换hide()和show()，把隐藏的元素显示，显示的元素隐藏。

fadeIn()，fadeOut() 和 fadeToggle()

前面已经总结过：jQuery的动画语法都是一样的，只是动画名称不一样。

• fadeIn()相当于show()，它的实现原理是：透明度从0变为1；
• fadeOut()相当于hide()，它的实现原理是：透明度从1变为0；
• fadeToggle()相当于toggle()，它的实现原理是：透明度的切换，透明的变为不透明，不透明的变为透明。

fadeTo()

上面的方法都是控制透明度在0和1之间变换，有没有可能让透明度变为一个确定的值呢？ 比如0.6， 当然是可以的。

slideDown()，slideUp() 和 slideToggle()

前面已经总结过：jQuery的动画语法都是一样的，只是动画名称不一样。

• slideDown()是向下滑动元素，它的实现原理是：元素的高度从0变为已有的高度；
• slideUp()是向上滑动元素，它的实现原理是：元素的高度从现在的高度变为0；
• slideToggle()是切换滑动效果，它的实现原理是：向上滑动的变为向下滑动，向下滑动的变为向上滑动。

2.自定义动画

平移动画

实现往右移动，代码如下：

$(".item").animate({left: '500px'}, 2000);

说明如下：

• 移动改变的是left值和top值 ，所以在样式中一定要有定位position。否则，没有定位，也就没有了left属性和top属性，也就不能移动了；
• 基本结构中的样式left:100px作为初始状态，往右移动的实现代码中，left:'500px'作为这个动画的最终状态，实际上移动了400px；
• 2000表示这个动画完成的时间，是2000毫秒，可选的值是slow，fast，毫秒。

如果一边向右移动，一边变大。现在实现整个右移过程，实现代码如下：

$(".item").animate({left: '500px',width:'200px',fontSize:'50px'},2000)

可以发现：就是在往右移动的代码中添加了宽度和字体，需要注意的是，这里字体font-size的写法变成了fontSize，是用驼峰命名法。规则如下：

• 第一个单词以小写字母开始；
• 从第二个单词开始以后的每个单词的首字母都大写。

其他属性中带有-的，在动画中也都用驼峰命名法，比如：padding-left 变为paddingLeft。

jQuery最大的特点就是可以链式调用，这里也不例外，右移左移的过程，简写如下：

$(".item").animate({left: '500px',width:'200px',fontSize:'50px'},2000)    
    .animate({left: '100px', width: '10px', fontSize: '24px'}, 2000)

举一反三：前面实现的动画效果和自定义动画，都是可以链式调用的，比如： $(".box").show().fadeOut().slideUp().animate({width: '100px'});

相对值

这个动画每次移动相同的距离，当然可以在现有的left值的基础上，加上移动的距离作为一段动画的最终状态，但是这样太麻烦了，每次都得算距离，可不可以只用相对移动的距离呢？当然可以，实现代码如下：

$(".item").animate({ left: '+=200px', borderRadius: '50%'},2000)

这行代码表示向右移动的距离为200px，在移动的过程中，从正方形变为圆 , 左移用-=。

stop()参数

现在有一个问题：当连续点击按钮【动画开始】，在点击完后，动画还在执行（点击多少次，执行多少次），需求是把一个时间段的连续点击作为一次点击。

**解决办法就是，在第一个动画执行完后，把后面等待的动画都清除掉。**后面等待的动画可以看作一个队列，只要把这个队列清除就可以了。

这里用停止动画的方法stop()，它是有两个参数的，都是可选的，参数详情如下：

• 第一个参数：是否清除动画队列，true表示是，false表示否，默认是false；
• 第二个参数：是否立即完成当前动画，true表示是，false表示否，默认是false。

$(".item").stop(true,false).animate({left: '+=200px', borderRadius: '50%'}, 2000)

四 jQuery DOM操作

1. 查

主要方法还是见选择器，除此之外，还有用于查找的find(“selector”) ， has（“selector”）。

下面从找儿子，找父亲，找兄弟开始说起。

parent （）

父节点，可以链式调用的

<div>div (曾祖父元素)
   <ul>ul (祖父元素)
       <li>li (父元素)
          <span>span</span>
       </li>
    </ul>
</div>

parents（）就查所有的。

children（）

children()方法用于取得匹配元素的子元素集合，只匹配子元素不考虑任何后代元素。

例子：

$("$("body").children().length;//该示例获得body元素的子元素个数

next（）

next()方法用于匹配元素的下一个兄弟节点。nextAll()返回全部。

prev（）

prev()方法用于匹配元素的上一个兄弟节点。prevAll()返回全部。

siblings（）

siblings方法()用于匹配目标元素的所有兄弟元素。

closest（）

closest()方法()用来取得最近的匹配元素，首先检查当前元素是否匹配如果匹配则直接返回，否则继续向上查找父元素中符合条件的元素返回，如果没有匹配的元素则返回空JQuery对象。

2. 建

元素节点

创建一个元素节点JQuery代码如下：

$li1=$("<li></li>")

代码返回$li1就是一个由DOM对象包装成的JQuery对象。

文本节点

$li2=$("<li>苹果</li>");

属性节点

$li3=$("<li title='榴莲'>榴莲</li>");　　

3. 增

动态新建元素不添加到文档中没有实际意义，将新建的节点插入到文档中有多个方法，如下：append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()。

下面给出的方法中，基本上都是两两 “主客颠倒”。

append()

append()方法向匹配的元素内部追加内容

$("ul").append("<li title='香蕉'>香蕉</li>");

appendTo()

appendTo()方法将所有匹配的元素追加到指定的元素中，该方法是append()方法的颠倒[操作主题的颠倒并非操作结果]操作。

$("<li title='荔枝'>荔枝<li>").appendTo("ul");

prepend()

prepend()方法将每匹配的元素内部前置要添加的元素。

prependTo()

prependTo()方法将元素添加到每一个匹配的元素内部前置。

after()

after()方法向匹配的元素后面添加元素，新添加的元素作为目标元素后的紧邻的兄弟元素。

$(target).after(element);
//在target元素的后面放置element

insertAfter()

insertAfter()方法将新建的元素插入到查找到的目标元素后，作为目标元素的兄弟节点。

before()

before()方法在每一个匹配的元素之前插入。

insertBefore()

insertBefore()方法将新建元素添加到目标元素前，作为目标元素的前一个兄弟节点。

4. 删

remove()

remove()方法删除所有匹配的元素，传入的参数用于筛选元素，该方法能删除元素中的所有子节点，当匹配的节点及后代被删除后，该方法返回值是指向被删除节点的引用，因此可以使用该引用，再使用这些被删除的元素。方法如下：$(element).remove();例:

　　　　　　$span=$("span").remove();
　　　　　　$span.insertAfter("ul");

该示例中先删除所有的span元素，把删除后的元素使用$span接收，把删除后的元素添加到ul后面做为ul的兄弟节点。该操作相当于将所有的span元素以及后代元素移到ul后面。

empty()

​ empty()方法严格来讲并不是删除元素，该方法只是清空节点，它能清空元素中的所有子节点。方法如下:$(element).empty();例：

　　　$("ul li:eq(0)").empty();

该示例使用empty方法清空ul中第一个li的文本值。只能下li标签默认符号”·“。

5. 改

复制 $(element).clone()

复制节点方法能够复制节点元素，并且能够根据参数决定是否复制节点元素的行为。方法如下:$(element).clone(true)。该方法复制ul的第一个li元素，true参数决定复制元素时也复制元素行为，当不复制行为时没有参数。

替换 $(element).repalcewith()、$(element).repalceAll()

替换节点方法能够替换某个节点，有两种形式形式实现：replaceWith()和replaceAll().使用replaceWith方法使用后面的元素替换前面的元素，replaceAll方法使用前面的元素替换后面的元素

包裹 $(element).wrap()、$(element).wrapAll()、$(element).wrapInner()

$(dstelement).wrap(tag);

例子：

$("p").wrap("<b></b>");//该示例方法使用b标签包裹所有的p元素每个元素都使用b标签包裹。
$("p").wrapAll("<b></b>");访示例方法使用b标签包裹所有的p元素，所有的p元素标签用一个b标签包裹。
$("strong").wrapInner("<b></b>");该示例使用b标签包裹每个一strong元素的子元素。

属性 attr（） removeAttr()

attr()方法能够获取元素属性，也能能够设置元素属性。例子

$("p").attr("title");//该示例用于获得p元素的title属性值。
$("p").attr("title","你最喜欢的水果");//该示例设置p元素的title属性值为"你最喜欢的水果";
 $("p").attr({"title":"你最喜欢的水果","name":"水果"})//该示例一次设置两个属性值。
 $("p").removeAttr("name");该方法就是移除p元素的name属性。

类修改 addClass()、removeClass()、toggleClass()和hasClass()

这个好理解，分别是增加，移除，来回切换，判断是否含有。

文本内容text（） 内容html（） 值val（）

同上，都是带参表示修改，不带参表示获取。

$("p").html();//该示例获得元素p的html内容。
$("p").text("重新设置的文本内容");//该示例设置元素p的text文本为"重新设置的文本内容";
$("#userName").val();//获得input元素的值。

PS：

html（）方法可以用于XHTML文档，不能用于XML文档。

text（）方法对html和XML文档都适用。

CSS操作

css()

css()方法用于获取、设置元素的一个或多个属性。方法如下：$(selector).css();例：

$("p").css("color","red");//该示例用于设置元素的颜色属性为红色;
$("p").css("color")//该示例用于获得元素的color样式值;
$("p").css({"font-size":"30px","backgroundColor","#888888"});//该示例用于设置元素的多个样式。

offset()方法用于获取元素相对当前窗体的偏移量，其返回对象包括两个属性：top和left。方法如下：$(selector).offset()

var offset= $("p").offset(); 
var left=offset.left;
var top=offset.top;//该示例用于获得元素p的偏移量。

PS:offset()只对可见元素有效。

position()

position()方法用于获取元素于最近的个position样式属性设置为relative或者absolute的祖交节点的相对偏移量。方法如下：$(selector).position();例：

var postion = $("p").positon();
var left=positon.left;
var top=positon.top;//该示例用于获得元素p的位置。

scrollTop() scrollLeft()

scrollTop()和scrollLeft()方法用于获取元素的滚动条距顶端的距离和距左侧的距离。方法如下:$(selector).scrollTop();$(selector).scrollLeft();例：

//该示例用于获得元素的滚动条的位置。
var scrollTop=$("p").scrollTop();
var scrollLeft=$("p").scrollLeft();
//添加参数将元素滚动到指定的位置
$("textarea").scrollTop(300);$("textarea").scrollLeft(300);

五. 参考网址

移动云启：

https://www.educoder.net/paths/202

元素选择器：

https://www.cnblogs.com/liaolijun/p/7300290.html

https://blog.csdn.net/liyantianmin/article/details/42901845

https://blog.csdn.net/loganwong/article/details/21522193

键盘事件 及 键值

https://www.cnblogs.com/mracale/p/5671688.html

DOM操作

https://blog.51cto.com/u_15214399/2810706

https://www.cnblogs.com/dbqjava/p/6291760.html