JQuery选择器的使用和分类

简介: JQuery选择器的使用和分类

jQuery选择器


id选择器格式

$("#box")      //获取标签里的id是box的标签


类选择器格式

$(".a")      //获取标签里的类名是a的标签


标签选择器格式

$("div")     //获取标签是div的标签


结构选择器格式

$("li:mth-child(odd)")   //获取标签是li的奇数的li


综合实例

//作用:获取元素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <!--导入jQuery-->
<script src="jquery-3.6.0.min.js"></script>
<style>
</style>
</head>
<body>
  <ul>
  <li class="a">12</li>
  <li>34</li>
  <li>4</li>
  <li class="a">5</li>
  <li>55</li>
  <li id="box">999</li> 
  </ul>
<script>
     //id选择器
     var li1=$("#box")
  console.log($("#box"))
     //类选择器
     var li2=$(".a")
  console.log($(".a"))
     //标签选择器
     var li2=$("li")
  console.log($("li"))
    //结构选择器
       //获取所有奇数个li
     var li2=$("li:nth-child(odd)")
  console.log($("li:nth-child(odd)"))
     //获取所有第个偶数li
     var li2=$("li:nth-child(even)")
  console.log($("li:nth-child(even)"))
</script>
</body>
</html>
相关文章
N..
|
7月前
|
JavaScript 前端开发 开发者
jQuery选择器
jQuery选择器
N..
49 1
|
2月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
31 2
|
3月前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
41 5
|
2月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器用于操作 HTML 元素,支持基于 id、类、类型、属性等条件选择元素。它扩展了 CSS 选择器的功能,并使用 $() 符号。例如,$(&quot;p&quot;) 选取所有段落元素,而 $(&quot;button&quot;).click(function(){ $(&quot;p&quot;).hide(); }) 实现点击按钮后隐藏所有段落。
|
6月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
36 0
|
6月前
|
JavaScript 前端开发 索引
jQuery的选择器与自带函数详解
jQuery的选择器与自带函数详解
|
3月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
3月前
|
JavaScript
jQuery 选择器
jQuery 选择器
26 3
|
3月前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
31 1
|
4月前
|
JavaScript 索引
jQuery的选择器有几种?
jQuery的选择器有几种?
36 1