首页 > 代码库 > 前端学习系列之Jquery

前端学习系列之Jquery

2024-08-13 04:56:50   220人阅读

技术分享

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基本筛选器

 

前端学习系列之Jquery


联系
我们