js进阶 10-4 jquery中基础选择器有哪些

一、总结

一句话总结：

1、群组选择器用的符号是什么？

群组选择器，中间是逗号

2、jquery中基础选择器有哪些？

5种，类，id，tag，群组，*

3、*号选择器，通用选择器是什么？

选择到所有元素

二、js进阶 10-4 jquery中基础选择器有哪些

1、相关知识：JQuery选择器

原生javaScript中,只能使用getELementById()、getElementByName、getElementByTagName()等几种有限的方法来获取元素，JQuery为我们提供了大量的选择器，极大地方便了我们快速选择元素来进行各种操作。

JQuery的选择器完全是继承了css选择器的风格，大家在学习JQuery选择器的时候，一定要先联系CSS选择器进行对比记忆。

虽然选择器很多，但是并不要求大家一下子全记住。可以先记住常用的几种，其他的等到需要的时候查阅下资料。因为这些选择器，我们是必须通过真正的开发实践才能够真正的熟练掌握

基本选择器
  • id选择器：$("#id名")
  • 元素选择器:$("元素名")
  • 类选择器:$(".类名")
  • 群组选择器:$("选择器1,选择器2,.......,选择器n")
  • *选择器:$("*")选择所有元素

2、实例

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script src="jquery-3.1.1.min.js"></script>

     <script src="ktys4.js"></script>

     <style type="text/css">

 /*        h4{color: red}

         #p1{color: green}

         .xzq{color: blue}

         #p1,.xzq{font-size: 12px}*/

     </style>

 </head>

 <body>

     <h4>基本选择器</h4>

     <p id="p1">所谓的基本选择器，指的是在jQuery中使用最频繁的选择器。在jQuery中，基本选择器共有5种：</p>

     <ul>

         <li class="xzq">元素选择器</li>

         <li class="xzq">id选择器</li>

         <li class="xzq">class选择器</li>

         <li class="xzq">群组选择器</li>

         <li class="xzq">*选择器</li>

     </ul>

     <script type="text/javascript">

         // $('h4').css('color','red')

         // $('#p1').css('color','green')

         // $('.xzq').css('color','blue')

         // $('#p1,.xzq').css('font-size','12px')

     </script>

 </body>

 </html>

js进阶 10-4 jquery中基础选择器有哪些的更多相关文章

  1. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  2. js进阶 11-18 jquery中操作选择器的方法有哪些

    js进阶 11-18 jquery中操作选择器的方法有哪些 一.总结 一句话总结:add().addBack().end() 1.add()方法是干嘛的,举一例? 将add()方法后选择器选择的jqu ...

  3. js 进阶 10 js选择器大全

    js 进阶 10 js选择器大全 一.总结 一句话总结:和css选择器很像 二.JQuery选择器 原生javaScript中,只能使用getELementById().getElementByNam ...

  4. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  5. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  6. js进阶 10-7 简单的伪类选择器可以干什么

    js进阶 10-7 简单的伪类选择器可以干什么 一.总结 一句话总结:伪类选择器是冒号. 1.学而不用,有什么用? 多用啊,在项目中多用 2.简单的伪类选择器可以干什么? 除某元素以外,某元素的一切索 ...

  7. jQuery中的选择器《思维导图》

    学习jQuery的课程中,我对jQuery中的选择器有了更深的认识,它的简洁写法,完美的兼容性,可靠的处理机制,都让我们省了很多事, 下面是我在学习过程中对jQuery选择器写的思维导图(全屏查看:& ...

  8. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  9. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

随机推荐

  1. eclipse-ADT安装失败经验

    今天下载了一个eclipse,结果ADT死活安装不成功,网上试了很多的方法,最后还是失败了.最后听从同事的建议,直接使用adt-bundle了.这个环境基本上都是配置好的. 下载地址 http://w ...

  2. TextView-shadow 阴影实现

    直接上代码 1)实现普通效果 <TextView android:layout_width="match_parent" android:layout_height=&quo ...

  3. Flask项目之手机端租房网站的实战开发（八）

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

  4. Python 极简教程（十）集合 set

    什么是集合? 集合(set)是一种可变,无序和不重复的序列. 集合是python的序列之一,集合没有列表(list).元组(tuple)和字典(ditc)常见.但是有时候也有奇效. 我们先来看个集合的 ...

  5. 洛谷——P1096 Hanoi双塔问题

    https://www.luogu.org/problem/show?pid=1096 题目描述 给定A.B.C三根足够长的细柱,在A柱上放有2n个中间有孔的圆盘,共有n个不同的尺寸,每个尺寸都有两个 ...

  6. Git 经常使用命令

    Git经常使用命令备忘: Git配置 git config --global user.name "storm" git config --global user.email &q ...

  7. NYOJ448_寻找最大数【贪心】

    寻找最大数 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描写叙述 请在整数 n 中删除m个数字, 使得余下的数字按原次序组成的新数最大, 比方当n=920813467185 ...

  8. ASM学习笔记--ASM 4 user guide 第一章翻译

    ASM是什么? 借用别人的话 :ASM 是一个 Java 字节码操控框架.它能被用来动态生成类或者增强既有类的功能. ASM 可以直接产生二进制 class 文件,也可以在类被加载入 Java 虚拟机 ...

  9. amazeui学习笔记--css（HTML元素4）--图片image

    amazeui学习笔记--css(HTML元素4)--图片image 一.总结 1.响应式图片:随着页面宽度而变化 .am-img-responsive class. <img src=&quo ...

  10. Altium Designer中距离的测量

    Ctrl+M 清除测量标签:点击右下角的清除按键