Jquery的语法与选择器

Posted 2021-01-05 time-to-despair

jQuery的基础语法 是 $(selector).action()

 其中selector是选择和查找html元素

action是执行元素。

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

• $("p").hide() - 隐藏所有 <p> 元素

• $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

• $("#test").hide() - 隐藏所有 id="test" 的元素     

jQuery 的入口函数

  $(doument).reday(function (){

    开始写jQuery代码 });

简写为$(function(){

     //开始写jQuery代码 });

jQuery的选择器允许查找html中的单个或者元素组进行操作。

所有的选择器都是以$().

 比如选择html中的p元素 $("p").

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

将html中所有P元素隐藏。

$("#id") 通过ID选择唯一的元素。

$(".class")通过class名选择唯一的元素或者元素组。

$("*") * 代表html中所有元素。

$("this")选择当前的html元素。

$(document).ready(function(){
  $("button").click(function(){
    $(this).hide();
  });
});

比如代码中的this代表的是 button这个按钮。

$("p:first") 选择第一个P元素。

$("p.avf")选择class名为avf的P元素。

$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素

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

$("a[target=‘_blank‘]") 选择target值为_blank的a标签。

$(":button") 选择所有type=button的所有input元素和button元素。

$("tr:even") 选择偶数位置的tr元素。

$("tr.odd") 选择奇数位置的tr元素。

关于：和 [ ] 的理解： 其中‘‘ : "可以理解为元素种类。 “[ ]” 可以理解为属性种类。