JQuery一览

JQuery 一览

jQuery 语法

jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。

基础语法: $(*selector*).*action*()

文档就绪事件

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:

1
2
3
$(document).ready(function(){    
// 开始写 jQuery 代码...
});

就绪指的是页面加载完毕,然后开始加载 JavaScript 的时候。JQuery 代码一般也是引入后直接在 <script> 中写就行了。

选择器

JQuery 整体来说还是一个工具库,通过它所提供的方法对节点进行 JavaScript 编写。

$(“*”) 选取所有元素 document.getElementsByTagName(“body”)[0].child
document.querySelector(“*”)
$(this) 选取当前 HTML 元素 document.getElementsByTagName(“html”)[0]
document.querySelector(“html”)
$(“p.intro”) 选取 class 为 intro 的 <p> 元素 document.getElementsByClassName(“intro”)
document.querySelectorAll(“p.intro”)
$(“p:first”) 选取第一个 <p> 元素 document.getElementsByTagName(“p”).firstchild
document.querySelectorAll(“p:first”)
$(“ul li:first”) 选取第一个 <ul> 元素的第一个 <li> 元素 二级节点使用 getElement 就非常麻烦。需要先获取 ul 节点再去循环
document.querySelector(“ul li:first”)
$(“ul li:first-child”) 选取每个 <ul> 元素的第一个 <li> 元素 document.querySelectorAll(“ul li:first”)
$(“[href]”) 选取带有 href 属性的元素 document.querySelectorAll(“[href]”)
$(“a[target=’_blank’]”) 选取所有 target 属性值等于 “_blank” 的 <a> 元素 document.querySelectorAll(“[target=_blank]”)
$(“a[target!=’_blank’]”) 选取所有 target 属性值不等于 “_blank” 的 <a> 元素 document.querySelectorAll(“[target!=_blank]”)
$(“:button”) 选取所有 type=”button” 的 <input> 元素 和 <button> 元素 document.querySelectorAll(“[type=button]”)
但是这么写可能会有漏的,如果直接使用 button 标签而不填写 type 就检测不到。
$(“tr:even”) 选取偶数位置的 <tr> 元素 document.querySelectorAll(“tr”) 然后通过循环获取。
$(“tr:odd”) 选取奇数位置的 <tr> 元素 document.querySelectorAll(“tr”) 然后通过循环获取。

选择器方面和 CSS 选择器有一些类似,可以使用 querySelector() 方法,同样也是基于 CSS 选择器,相比于原生 Js 的 getElement() 等等会更加的详细。

JQuery 事件

鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
hover
1
2
3
$("p").click(function(){
// 动作触发后执行的代码!!
});

事件上面没什么太多区别,原生也是有这些东西的。

JQuery 效果

show or hide

下面是 JQuery showHide 的源码,JQuery 的元素 hide() 方法是通过 display:none 来实现的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
function showHide( elements, show ) {
var display, elem,
values = [],
index = 0,
length = elements.length;
// Determine new display value for elements that need to change
for ( ; index < length; index++ ) {
elem = elements[ index ];
if ( !elem.style ) {
continue;
}
display = elem.style.display;
if ( show ) {
// Since we force visibility upon cascade-hidden elements, an immediate (and slow)
// check is required in this first loop unless we have a nonempty display value (either
// inline or about-to-be-restored)
if ( display === "none" ) {
values[ index ] = dataPriv.get( elem, "display" ) || null;
if ( !values[ index ] ) {
elem.style.display = "";
}
}
if ( elem.style.display === "" && isHiddenWithinTree( elem ) ) {
values[ index ] = getDefaultDisplay( elem );
}
} else {
if ( display !== "none" ) {
values[ index ] = "none";

// Remember what we're overwriting
dataPriv.set( elem, "display", display );
}
}
}

// Set the display of the elements in a second loop to avoid constant reflow
for ( index = 0; index < length; index++ ) {
if ( values[ index ] != null ) {
elements[ index ].style.display = values[ index ];
}
}

return elements;
}

toggle() 方法没找到源码, 不过想来也差不多。

如果需要用原生方法写的话大概就是

1
2
3
4
var el = document.getElementsByTagName("p")
for(let i=0; i<el.length; i++){
el[i].style.display="none"
}

淡入淡出

源码部分如下

1
2
3
4
5
6
7
8
9
10
11
12
jQuery.each( {
slideDown: genFx( "show" ),
slideUp: genFx( "hide" ),
slideToggle: genFx( "toggle" ),
fadeIn: { opacity: "show" },
fadeOut: { opacity: "hide" },
fadeToggle: { opacity: "toggle" }
}, function( name, props ) {
jQuery.fn[ name ] = function( speed, easing, callback ) {
return this.animate( props, speed, easing, callback );
};
} );

通过调整不透明度,使用动画进行效果展示。

基本也是使用的 CSS3,主要是使用的动画。原生的话一个是可以考虑动画,一个是可以考虑 transition(过渡)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<style>
@keyframes fadeIn{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
@keyframes fadeOut{
from{
opacity: 1;
}
to{
opacity: 0;
}
}
#div2 {
opacity: 1;
transition: opacity 2s;

</style>
<script>
function fadein() {
let div1 = document.getElementById("div1")
div1.style.display = "block"
div1.style.animation = "fadeIn 2s"
}

function fadeOut() {
let div1 = document.getElementById("div1")
div1.style.animation = "fadeOut 2s"
setTimeout(() => {
div1.style.display = "none"
}, 2000)
}

function fadeinTransition() {
let div2 = document.getElementById("div2")
div2.style.opacity = 0
}

function fadeOutTransition() {
let div2 = document.getElementById("div2")
div2.style.opacity = 1
}
</script>
<body>
<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
<button onclick="fadein()">点击淡入 div 元素。</button>
<button onclick="fadeOut()">点击淡入 div 元素。</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width: 80px;height: 80px;background-color:red;" onmouseenter="fadeinTransition()" onmouseleave="fadeOutTransition()"></div><br>
</body>

但是通过 transition 不能将元素通过 display 隐藏。

transitiondisplay 需要改动的场合不起作用。

滑动

源代码在上面的代码中也有,通过 genFx() 方法完成效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function genFx( type, includeWidth ) {
var which,
i = 0,
attrs = { height: type };

// If we include width, step value is 1 to do all cssExpand values,
// otherwise step value is 2 to skip over Left and Right
includeWidth = includeWidth ? 1 : 0;
for ( ; i < 4; i += 2 - includeWidth ) {
which = cssExpand[ i ];
attrs[ "margin" + which ] = attrs[ "padding" + which ] = type;
}

if ( includeWidth ) {
attrs.opacity = attrs.width = type;
}

return attrs;
}

这个 genFx() 也是做一个动画出来。

由于 transition 不能与 display 混用,所以也只好用动画实现了。

具体代码和上面的基本一致,只是将 opacity 改成 height

动画

jQuery有的原生也都有。只是说是用 JavaScript 的方式实现的,避免了 CSS3 的 keyframes,相对来说可能会比较简单易懂一点。

可以用 animate() 方法来操作所有 CSS 属性吗?

是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。

同时,色彩动画并不包含在核心 jQuery 库中。

如果需要生成颜色动画,您需要从 jquery.com 下载 颜色动画 插件。

回调函数

以下实例在隐藏效果完全实现后回调函数:

使用 callback 实例

1
2
3
4
5
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});

可以在 hide 后方加入一个函数参数用作回调函数。在 hide() 运行结束后运行。

这个也是 JQuery 的一个优点。避免了 JavaScript 在操作时的异步问题。

原理方面的话,可以参考源文件 https://github.com/jquery/jquery/blob/d0ce00cdfa680f1f0c38460bc51ea14079ae8b07/src/callbacks.js

确实挺复杂的。我自己写的话没有思路。

直到现在,我们都是一次写一条 jQuery 语句(一条接着另一条)。

不过,有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。

提示: 这样的话,浏览器就不必多次查找相同的元素。

如需链接一个动作,您只需简单地把该动作追加到之前的动作上。

下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。”p1” 元素首先会变为红色,然后向上滑动,再然后向下滑动:

实例

1
2
> $("#p1").css("color","red").slideUp(2000).slideDown(2000);
>

链式在处理命令后返回的是元素对象,这样的话就可以继续运行命令。

和 Promise 返回 Promise对象保证继续 then 方法有相似的思想。

JQuery HTML

设置获取HTML属性

三个简单实用的用于 DOM 操作的 jQuery 方法:

  • text() - 设置或返回所选元素的文本内容

  • html() - 设置或返回所选元素的内容(包括 HTML 标记)

  • val() - 设置或返回表单字段的值

  • attr() - 用于获取属性值。

    prop()函数的结果:

    1.如果有相应的属性,返回指定属性值。

    2.如果没有相应的属性,返回值是空字符串。

    attr()函数的结果:

    1.如果有相应的属性,返回指定属性值。

    2.如果没有相应的属性,返回值是 undefined。

    对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。

    对于HTML元素我们自己自定义的DOM属性,在处理时,使用 attr 方法。

    具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop()

回调函数

上面的三个 jQuery 方法:text()、html() 以及 val(),同样拥有回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
});

$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
});
});
$("button").click(function(){
$("#runoob").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});

也就是说这些方法除了 attr,都是可以接收一个字符串参数用于替换目标内容,或者是一个函数,方便在原有的内容基础上进行修改。

attr 方法可以接收一个对象用于替换对象中键值对所代表的属性和属性值,也可以通过指定属性去修改值或者回调函数在原有内容上进行修改。

添加/删除元素

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容
1
2
3
4
5
6
7
8
function appendText()
{
var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}

如需删除元素和内容,一般可使用以下两个 jQuery 方法:

  • remove() - 删除被选元素(及其子元素)
  • empty() - 从被选元素中删除子元素

jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法

1
$("p").remove(".italic");

CSS 操作

  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • css() - 设置或返回样式属性
1
2
3
4
5
addClass('c1 c2 ...' | function(i, c)) -- 添加一个或多个类。

removerClass('c1 c2 ...' | function(i, c)) -- 删除一个或多个类。

toggleClass('c1 c2 ...' | function(i, c), switch?) -- 切换一个或多个类的添加和删除。

第一个参数表示要添加或删除的类,既可以用类列表,也可以用函数返回值指定(i 是选择器选中的所有元素中当前对象的索引值,c 是当前对象的类名)。

switch: 布尔值,true 表示只添加,false 表示只删除。

  • 返回 CSS 属性值

    1
    $("p").css("background-color");
  • 设置 属性值

    1
    $("p").css("background-color","yellow");
  • 设置多个属性

    1
    $("p").css({"background-color":"yellow","font-size":"200%"});

JQuery 尺寸

jQuery 提供多个处理尺寸的重要方法:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

设置了 box-sizing 后,width() 获取的是 css 设置的 width 减去 padding 和 border 的值。

主要用来返回,修改的话直接使用 css() 方法操作。

JQuery 遍历

遍历

遍历基于 DOM 树

这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:

  • parent() - 返回被选元素的直接父元素。
  • parents() - 返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
  • parentsUntil() - 返回介于两个给定元素之间的所有祖先元素。

一般来说上面的方法中的被选元素指的是通过选择器选择出来的元素,如果选择器返回多个元素是只会取第一个的。所以在选择器的时候就需要确认是否是唯一的选择元素。

下面是两个用于向下遍历 DOM 树的 jQuery 方法:

  • children() - children() 方法返回被选元素的所有直接子元素。
  • find() - 返回被选元素的后代元素,一路向下直到最后一个后代。

需要注意的是,其实很多页面虽然看上去很复杂,但是 DOM 树的深度并不会很高,更多的是广度。

有许多有用的方法让我们在 DOM 树进行水平遍历:

  • siblings() - 返回被选元素的所有同胞元素。
  • next() - 返回被选元素的下一个同胞元素。
  • nextAll() - 返回被选元素的所有跟随的同胞元素。
  • nextUntil() - 返回介于两个给定参数之间的所有跟随的同胞元素。
  • prev()
  • prevAll()
  • prevUntil()

这里的水平遍历是可以跨列的

1
2
3
4
5
6
7
8
<div>
<span>span1</span>
<span>span2</span>
</div>
<div>
<span>span3</span>
<span>span4</span>
</div>

$("span") 会选中所有 span 标签,但是不能通过数组 index 提取出来单独使用方法。

使用 siblings() 会返回虽然不同父但是同层的 span 标签元素。

使用 next() 会返回两个元素,一个是 span2 一个是 span4,相当于如果选择器返回多个元素,使用方法会相当于 map() 效果,对每个选择元素都生效。

过滤

三个最基本的过滤方法是:first(), last()eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法,比如 filter()not() 允许您选取匹配或不匹配某项指定标准的元素。

eq() 方法就可以用于上面的情况,而不是直接使用 index 选取。通过过滤获取需要的唯一元素并使用遍历或其他方法。

filter()not() 两个方法用于过滤元素,效果相反。

1
2
3
$(document).ready(function(){
$("p").filter(".url");
});

filter() 方法中的参数使用的也是 css 选择器中的格式,返回元素数组的一般也就是 TagNameClassName,所以 filter() 方法内一般也就是用ClassName 或者其他可标识的标记。

JQuery Ajax

这是 Ajax 的原理,JQuery 通过对 XMLHttpRequest 对象进行封装整合了一些复杂的操作。

load()

1
2
3
4
5
6
7
8
9
$(selector).load(URL,data,callback);
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});

可以直接通过 load() 函数加载当前网站的资源。但是这样做太过于死板。不过可以用于加载图片等静态资源。

get() 和 post()

两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。

  • GET - 从指定的资源请求数据 - $.get(URL,callback);
  • POST - 向指定的资源提交要处理的数据 - $.post(URL,data,callback);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",
{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});

$ 是 JQuery 的简写,可以直接使用 getpost 方法。

noConflict()

noConflict() 方法会释放对 $ 标识符的控制,这样其他脚本就可以使用它了。

这个方法是为了解决 $ 符号的命名问题,由于 $ 符号本身只是一个简写,在引入 JQuery 后可以直接使用 JQuery()

1
2
3
4
5
6
7
8
9
10
11
12
$.noConflict(); // 断开 $ 符号的关联
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍然在工作!");
});
});
var jq = $.noConflict(); // 使用其他标记
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery 仍然在工作!");
});
});

如果你的 jQuery 代码块使用 $ 简写,并且您不愿意改变这个快捷方式,那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外,依旧不得不使用 “jQuery”:

这样做的好处就是可以避免 $ 符号的冲突也不会影响开发人员的习惯。

1
2
3
4
5
6
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery 仍然在工作!");
});
});

总结

JQuery 的东西说多也不多,说少也不少,源码还是有一定的复杂性和工程性的,但是基本原理还是比较好理解的,基本都能够通过原生的 JS 去实现。虽然已经很久没有更新了(其实还是在更新的,最近更新到了3.5版本),但是还在使用的项目还是挺多的,主要就是因为操作相比于原生来说更加的简单和安全。其他的例如数据验证、cookie 等等插件实用性也很高。

用不用都可以,用,写代码更简单,不用,一样能够实现功能而且更加的可控。