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

jQuery基本语法总结

怪我咯
怪我咯asal
2017-06-27 11:13:361711semak 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 参数是隐藏或显示完成后所执行的函数名称。


8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
df5a3115abdb1f2bf4df02d4bbbd84872cacc6d41bbb37262a98f745aa00fbf0
5cd6e472395e766622bc5d31b556eb7a
$(document).ready(function(){
  $("button#yincang").click(function(){
  $("p#id").hide(1000,function(){alert('bye')});
  });
});
$(document).ready(function(){
  $("button#xian").click(function(){

  $("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);


8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
df5a3115abdb1f2bf4df02d4bbbd84872cacc6d41bbb37262a98f745aa00fbf0
5cd6e472395e766622bc5d31b556eb7a
$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle();
  });
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
a73a95372d4794d0f15522f518a543e9切换65281c5ac262bf6d81768915a4a77ac0
e388a4556c0f65e1904146cc1a846bee这是一个段落。94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846bee这是另一个段落。94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956

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

100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
df5a3115abdb1f2bf4df02d4bbbd8487
2cacc6d41bbb37262a98f745aa00fbf0
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(document).ready(function(){
  $("button").click(function(){
    $("p").animate({left:'250px'});
  });
});
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d
bb9345e55eb71822850ff156dfde57c8开始动画65281c5ac262bf6d81768915a4a77ac0
250cae7619ac55babadd60456916ca72
94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

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() 方法返回被选元素的首个元素。


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

4a249f0d628e2318394fd9b75b4636b1欢迎来到我的主页473f0a7621bec819994bb5020d29372a

e388a4556c0f65e1904146cc1a846bee

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

94b3e26ee717c64999d7867364b1b4a3

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

e388a4556c0f65e1904146cc1a846bee这也是段落。94b3e26ee717c64999d7867364b1b4a3

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

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


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

4a249f0d628e2318394fd9b75b4636b1欢迎来到我的主页473f0a7621bec819994bb5020d29372a

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