jQuery选择器之基本选择器用法实例分析


Posted in jQuery onFebruary 19, 2019

本文实例讲述了jQuery选择器之基本选择器用法。分享给大家供大家参考,具体如下:

初学jQuery,为了能系统地学习好jQuery,今天特意把自己的学习心得归纳一下,贴上来与初学者共享,今天我主要总结的是jquery的基本选择器。

基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它主要是通过元素的id、class、标签等来查找HTML中的DOM元素。在网页中每个id只能使用一次,class允许重复使用。在jQuery应用中,可以使用这些基本选择器来完成绝大多数工作,下面我们主要来看其具体的使用过程。为了更好的学习,我们先列出一段HTML代码:

<div>
  <div id="one" class="mini">id=one,class=aaa的div</div>
  <div id="two" class="mini">id=two,class=aaa的div</div>
  <p>这是p元素</p>
  <span>这是span元素</span>
</div>

一、所有元素*

选择器:*
描述:匹配所有元素
返回:元素集合

示例:

<script type="text/javascript">
  $(document).ready(function(){
    $("*").css("background","#ffbbaa");
  });
</script>

二、id选择器

选择器:#id
描述:根据给定的ID匹配一个元素。
返回:单个元素

示例:

<script type="text/javascript">
  $(document).ready(function(){
    $("#one").css("background","#ffbbaa");
  });
</script>

三、class选择器

选择器:.class
描述:根据给定的class匹配所有元素。
返回:元素集合

示例:

<script type="text/javascript">
  $(document).ready(function(){
    $(".mini").css("background","#ffbbaa");
  });
</script>

四、element选择器

选择器:element
描述:根据给定的元素名称匹配所有元素。
返回:元素集合

示例:

<script type="text/javascript">
  $(document).ready(function(){
    $("span").css("color","#ffbbaa");
  });
</script>

五、selector1,selector2,…,selectorN

选择器:selector1,selector2,…selectorN
描述:将每一个选择器匹配到的元素合并后一起返回。
返回:元素集合

示例:

<script type="text/javascript">
  $(document).ready(function(){
    $("span,p,#one").css("background","#ffbbaa");
  });
</script>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 #jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 #jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 #jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 #jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 #jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 #jQuery
jQuery实现的五星点评功能【案例】
Feb 18 #jQuery
You might like
PHP中ADODB类详解
2008/03/25 PHP
使用PHP实现二分查找算法代码分享
2011/06/24 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
PDO::inTransaction讲解
2019/01/28 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
二级域名转向类
2006/11/09 Javascript
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
javascript eval函数深入认识
2009/02/21 Javascript
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
Python中的ConfigParser模块使用详解
2015/05/04 Python
Python实现批量下载文件
2015/05/17 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
结婚典礼证婚词
2014/01/11 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
2014年团工作总结
2014/11/27 职场文书
投标售后服务承诺书
2015/04/29 职场文书