Rumah >hujung hadapan web >tutorial js >jQuery基本语法总结

jQuery基本语法总结

怪我咯asal: 2017-06-27 11:13:361762semak imbas

jQuery语法：

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。此是重点，初学一定要知道你学的东西的用途是做什么。

基础语法是：$(selector).action()。所有的jQuery就是围绕这个进行的，选取页面的元素再对元素进行某些操作。

示例

$(this).hide() - 隐藏当前元素

文档就绪函数：

是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。由jQuery的约定，所有的JavaScript代码最好都放在这里面。

$(document).ready(function(){
});

jQuery 元素选择器和属性选择器：它们允许您通过标签名、属性名或内容对 HTML 元素进行选择。对应$(selector).action()的前半部分。

jQuery 元素选择器：

$("p") 选取 e388a4556c0f65e1904146cc1a846bee 元素。

$("p.intro") 选取所有 class="intro" 的 e388a4556c0f65e1904146cc1a846bee 元素。

$("p#demo") 选取所有 id="demo" 的 e388a4556c0f65e1904146cc1a846bee 元素。

jQuery 属性选择器：

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器：

$("p").css("background-color","red");

如需完整的jquery选择器的参考手册：http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

jQuery 事件函数：对应$(selector).action()的后半部分。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

完整的jQuery事件：http://www.w3school.com.cn/jquery/jquery_ref_events.asp

约定：

把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库

jQuery 效果：对应$(selector).action()的后半部分。

隐藏、显示、切换，滑动，淡入淡出，以及动画

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

$("p#id").show(function(){1000,alert('hello')});

});
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
d3259590dd7a1c44081cbc652a12289e显示65281c5ac262bf6d81768915a4a77ac0
c67eb663ef3bebc02acf98265a3b6c6c隐藏65281c5ac262bf6d81768915a4a77ac0
61fff9001bdd35ddad63ed11e0534569这是一个段落。94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee这是另一个段落。94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

可以使用 toggle() 方法来切换 hide() 和 show() 方法。

$(selector).toggle(speed,callback);

73a6ac4ed44ffec12cee46588e518a5e

jQuery 淡入淡出方法

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

fadeIn()
fadeOut()
fadeToggle() jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
fadeTo() fadeTo() 方法允许渐变的最终结果为给定的不透明度（值介于 0 与 1 之间，0为透明，1为不透明）。

jQuery 滑动方法

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

slideDown()
slideUp()
slideToggle()

jQuery 动画 - animate() 方法

jQuery animate() 方法用于创建自定义动画。

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

可以用 animate() 方法来操作所有 CSS 属性，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

它把 e388a4556c0f65e1904146cc1a846bee 元素移动到左边，直到 left 属性等于 250 像素为止：

8b05045a5be5764f313ed5b9168a17e6

73a6ac4ed44ffec12cee46588e518a5e

jQuery 提供针对动画的队列功能，这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

$("button").click(function(){
var p=$("p");
p.animate({height:'300px',opacity:'0.4'},"slow");
p.animate({width:'300px',opacity:'0.8'},"slow");
p.animate({height:'100px',opacity:'0.4'},"slow");
p.animate({width:'100px',opacity:'0.8'},"slow");

});

可以用下面这种格式代替

p.animate({height:'300px',opacity:'0.4'},"slow").animate({width:'300px',opacity:'0.8'},"slow");

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
df5a3115abdb1f2bf4df02d4bbbd84872cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
2cacc6d41bbb37262a98f745aa00fbf0

9a6c6593cd224a767d2b5172bc71b53a
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

4573fe79d9b6fc437478d490970719be停止滑动65281c5ac262bf6d81768915a4a77ac0
5e4579614e4d52e0d1954d14419e3ee6点击这里，向下滑动面板94b3e26ee717c64999d7867364b1b4a3
91940a9053152640a22dd90327657691Hello world!94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

Callback 函数在当前动画 100% 完成之后执行。

$(selector).hide(speed,callback)

$("p").hide(1000,function(){
alert("The paragraph is now hidden");

});

完整的动画：http://www.w3school.com.cn/jquery/jquery_ref_effects.asp

jQuery 拥有可操作 HTML 元素和属性的强大方法。

jQuery DOM 操作：

DOM = Document Object Model（文档对象模型）， “W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”

获取dom中的值：

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

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});

$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});

$("button").click(function(){
alert($("#w3s").attr("href"));
});

设置DOM值：

$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("a4b561c25d9afb9ac8dc4d70affff419Hello world!0d36329ec37a2cc24d42c7229b69747a");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");

});

text()、html() 以及 val() 的回调函数， 回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数return 的返回内容作为使用的新值。

$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});

$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello a4b561c25d9afb9ac8dc4d70affff419world!0d36329ec37a2cc24d42c7229b69747a
(index: " + i + ")";
});

});

$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});

});

向DOM中添加新的值：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

$("p").append("Some appended text.");

$("p").prepend("Some prepended text.");

$("img").after("Some text after");

$("img").before("Some text before");

删除DOM中的元素：

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

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

$("#p1").remove();

$("#p1").empty();

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

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

100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
df5a3115abdb1f2bf4df02d4bbbd84872cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".italic");
});
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

e388a4556c0f65e1904146cc1a846beeThis is a paragraph in the p.94b3e26ee717c64999d7867364b1b4a3
284393acbaf424e24d88242332876d8f5a8028ccc7a7e27417bff9f05adf5932This is another paragraph in the p.72ac96585ae54b6ae11f849d2649d9e694b3e26ee717c64999d7867364b1b4a3
284393acbaf424e24d88242332876d8f5a8028ccc7a7e27417bff9f05adf5932This is another paragraph in the p.72ac96585ae54b6ae11f849d2649d9e694b3e26ee717c64999d7867364b1b4a3
bb9345e55eb71822850ff156dfde57c8删除 class="italic" 的所有 p 元素65281c5ac262bf6d81768915a4a77ac0

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
df5a3115abdb1f2bf4df02d4bbbd84872cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("p").addClass("important");
});
});
2cacc6d41bbb37262a98f745aa00fbf0
9a6c6593cd224a767d2b5172bc71b53a
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

4a249f0d628e2318394fd9b75b4636b1标题 1473f0a7621bec819994bb5020d29372a
c1a436a314ed609750bd7c7d319db4da标题 22e9b454fa8428549ca2e64dfac4625cd
e388a4556c0f65e1904146cc1a846bee这是一个段落。94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee这是另一个段落。94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee这是非常重要的文本！94b3e26ee717c64999d7867364b1b4a3
0c6dc11e160d3b678d68754cc175188a
bb9345e55eb71822850ff156dfde57c8向元素添加类65281c5ac262bf6d81768915a4a77ac0

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

您也可以在 addClass() 方法中规定多个类：

$("button").click(function(){
$("#p1").addClass("important blue");
});

jQuery css() 方法

css() 方法设置或返回被选元素的一个或多个样式属性。

如需返回指定的 CSS 属性的值，请使用如下语法

$("p").css("background-color");

如需设置指定的 CSS 属性，请使用如下语法：

$("p").css("background-color","yellow");

如需设置多个 CSS 属性，请使用如下语法：

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

jQuery处理元素尺寸：

通过 jQuery，很容易处理元素和浏览器窗口的尺寸。

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

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

$("button").click(function(){
var txt="";
txt+="Width: " + $("#p1").width() + "0b9f73f8e206867bd1f5dc5957dbcb38";
txt+="Height: " + $("#p1").height();
$("#p1").html(txt);

});

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。

outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

下面的例子设置指定的 e388a4556c0f65e1904146cc1a846bee 元素的宽度和高度：

$("button").click(function(){ $("#p1").width(500).height(500); });

jQuery的移动：

jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

在一个家族树中通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

jQuery 提供了多种遍历 DOM 的方法。遍历方法中最大的种类是树遍历（tree-traversal）。

向上遍历 DOM 树

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

parent()
parents()
parentsUntil()

parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。

$(document).ready(function(){
$("span").parent();
});

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (100db36a723c770d327fc0aef2ce13b1)。

您也可以使用可选参数来过滤对祖先元素的搜索。

下面的例子返回所有 45a2772a6b6107b401db3c9b82c049c2 元素的所有祖先，并且它是 ff6d136ddc5fdfeffaf53ff6ee95f185 元素：

$(document).ready(function(){
$("span").parents("ul");
});

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素，不包括开始也不包括结尾。

下面的例子返回介于 45a2772a6b6107b401db3c9b82c049c2 与 e388a4556c0f65e1904146cc1a846bee 元素之间的所有祖先元素：

$(document).ready(function(){
$("span").parentsUntil("p");
});

向下遍历 DOM 树

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

children()
find()

jQuery children() 方法

children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。

您也可以使用可选参数来过滤对子元素的搜索。

$(document).ready(function(){

$("p").children("p.1"); //class为1的p元素

});

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

下面的例子返回属于 e388a4556c0f65e1904146cc1a846bee 后代的所有 45a2772a6b6107b401db3c9b82c049c2 元素：

$(document).ready(function(){
$("p").find("span");
});

下面的例子返回 e388a4556c0f65e1904146cc1a846bee 的所有后代：

$(document).ready(function(){
$("p").find("*");

});

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

siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

siblings() 方法返回被选元素的所有同胞元素。不包括自身。

您也可以使用可选参数来过滤对同胞元素的搜索。

$(document).ready(function(){
$("h2").siblings("p");
});

next() 方法返回被选元素的下一个同胞元素。该方法只返回一个元素。

$(document).ready(function(){
$("h2").next();
});

nextAll() 方法返回被选元素的所有跟随的同胞元素。返回后面的所有元素。

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。不包括两端的元素。

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

first() 方法返回被选元素的首个元素。

e388a4556c0f65e1904146cc1a846bee

e388a4556c0f65e1904146cc1a846bee这是 p 中的一个段落。94b3e26ee717c64999d7867364b1b4a3 bc0304be970fdcb7533fec9b34817d85

94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846bee
e388a4556c0f65e1904146cc1a846bee这是 p 中的另一个段落。94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846bee这也是段落。94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 e388a4556c0f65e1904146cc1a846bee 元素（索引号 1）：

e388a4556c0f65e1904146cc1a846bee我是唐老鸭 (index 0)。94b3e26ee717c64999d7867364b1b4a3

e388a4556c0f65e1904146cc1a846bee唐老鸭 (index 1)。94b3e26ee717c64999d7867364b1b4a3 9224535b815a7c3af53ff6e366c298c8

e388a4556c0f65e1904146cc1a846bee我住在 Duckburg (index 2)。94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee我最好的朋友是米老鼠 (index 3)。94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
df5a3115abdb1f2bf4df02d4bbbd8487
2cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
$("p").filter(".intro").css("background-color","yellow");
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

4a249f0d628e2318394fd9b75b4636b1欢迎来到我的主页473f0a7621bec819994bb5020d29372a
e388a4556c0f65e1904146cc1a846bee我是唐老鸭。94b3e26ee717c64999d7867364b1b4a3
2cfc56b578766b31f0093a8df8000bd5我住在 Duckburg。94b3e26ee717c64999d7867364b1b4a3
2cfc56b578766b31f0093a8df8000bd5我爱 Duckburg。94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee我最好的朋友是 Mickey。94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

not() 方法返回不匹配标准的所有元素。提示：not() 方法与 filter() 相反。

Atas ialah kandungan terperinci jQuery基本语法总结. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JQuery Deferred 对象剖析Artikel seterusnya：bootstrap框架怎么在html页面加载使用教程

Artikel berkaitan

Lihat lagi