Jquery中基本选择器用法实例详解


Posted in Javascript onMay 18, 2015

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery 基本选择器</title>
<style type="text/css">
.myDiv{width:100px;background-color:Blue;}      
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//JQuery选择器用于查找满足条件的元素。
//基本选择器是JQuery中最常用的选择器,也是最简单的选择器,
//它通过元素id,class和tagName来查找dom元素
//1.$("#id") : id选择器,document.getElementById("id");
//2.$("div") :元素选择器 document.getElementByTagName("div");
//3.$(".myClass") : 类选择器,返回所有class="myClass"的元素
//4.$("*") : 返回所有元素,多用于结合上下文搜索
//5.$("div,span,p.myClass") : 多条件选择器,返回所有查到的元素
$(function () {
  //-----1.id选择器
  //var $divMain = $("#main");
  //alert($divMain.get(0));
  //-----2.元素选择器
  //var $divs = $("div");
  //for (var i = 0; i < $divs.length; i++) {
  //  alert($divs.get(i).innerHTML);
  //}
  //-----3.类选择器
  //var $divs = $(".myDiv");
  //for (var i = 0; i < $divs.length; i++) {
  //  alert($divs.get(i).innerHTML);
  //}
  //-----4.返回所有元素
  //var $Elements = $("*");
  //for (var i = 0; i < $Elements.length; i++) {
  //  alert($Elements.get(i).innerHTML);
  //}
  //-----5.多条件选择器
  var $MyObjs = $("div,input,span");
  for (var i = 0; i < $MyObjs.length; i++) {
    alert($MyObjs.get(i).id);
  }
});
</script>
</head>
<body>
<input id="button1" type="button" value="我是button1" />
<div id="main">
<div id="div1" class="myDiv">我是div1
<span id="span1">我是span1</span>
</div>
<div id="div2" class="myDiv">我是div2
<span id="span2">我是span2</span>
</div>
</div>
<input id="button2" type="button" value="我是button2" />
</body>
</html>

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

Javascript 相关文章推荐
使用jQuery清空file文件域的解决方案
Apr 12 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
javascript中json基础知识详解
Jan 19 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
小程序云开发获取不到数据库记录的解决方法
May 18 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 Javascript
Jquery注册事件实现方法
May 18 #Javascript
jquery中map函数遍历数组用法实例
May 18 #Javascript
jquery使用each方法遍历json格式数据实例
May 18 #Javascript
Jquery使用css方法改变样式实例
May 18 #Javascript
Jquery使用val方法读写value值
May 18 #Javascript
JQuery中Text方法用法实例分析
May 18 #Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 #Javascript
You might like
自动跳转中英文页面
2006/10/09 PHP
PHP几个数学计算的内部函数学习整理
2011/08/06 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
php中利用explode函数分割字符串到数组
2014/02/08 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
PHP删除数组中特定元素的两种方法
2019/02/28 PHP
JS location几个方法小姐
2008/07/09 Javascript
围观tangram js库
2010/12/28 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
Python标准库之循环器(itertools)介绍
2014/11/25 Python
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
pip命令无法使用的解决方法
2018/06/12 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
Python Pandas 箱线图的实现
2019/07/23 Python
快速查找Python安装路径方法
2020/02/06 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
四川成都导游欢迎词
2014/01/18 职场文书
公司贷款承诺书
2014/05/30 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书