前端学习系列之Jquery

Posted 2020-08-09

Jquery简介

Jquery介绍

查找到某个具体的元素,然后给它添加样式,创建子元素等

Jquery基本选择器

• id

id选择器:根据给定的id查找指定的元素

语法

$("div");

• .class

类选择器:根据class名称查找指定的元素

语法

$(".class");

• selector1,selector2,selectorN

将每一个选择器匹配到的元素合并后一起返回,你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内

语法

$("selector1,selector2,selectorN")

html代码

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

Jquery代码

$(".myClass");

结果

<div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span>

Jquery层级选择器

• ancestor descendant

后代选择器:在给定的父元素下匹配所有指定的后代元素（只要包含在父元素下就都能匹配到）

语法

$("ancestor  descendant")

HTML代码

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

Jquery代码

$("form input")

结果

<input name="name" />, <input name="newsletter" /> 

• parent > child

子选择器:在给定的父元素下匹配所有指定的子元素(跟后台元素是有区别的,仔细看代码)

语法

$( "parent > child" )

HTML代码

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

Jquery代码

$("form > input")

结果

 <input name="name" />

• prev + next

prev方法:匹配所有紧跟在prev元素后面的next元素

语法

$("prev + next")

HTML代码

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

Jquery代码

$("label + input")

结果

<input name="name" />, <input name="newsletter" /> 

• prev ~ siblings

prev方法:匹配所有prev同级的元素

语法

$("prev ~ siblings")

HTML代码

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

Jquery代码

$("form ~ input")

结果

<input name="none" />

Jquery基本筛选器