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 append与appendTo方法比较
May 24 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jQuery实现简单轮播图效果
Dec 27 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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
PHP如何编写易读的代码
2007/07/10 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
PHP查询分页的实现代码
2017/06/09 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
详解js中let与var声明变量的区别
2020/04/05 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
基于python检查矩阵计算结果
2020/05/21 Python
python能否java成为主流语言吗
2020/06/22 Python
TecoBuy澳大利亚:在线电子和小工具商店
2020/06/25 全球购物
ddl,dml和dcl的含义
2016/05/08 面试题
央视元宵晚会主持串词
2014/03/25 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技