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 相关文章推荐
javascript在一段文字中的光标处插入其他文字
Aug 26 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 Javascript
jquery实现手风琴效果
Nov 20 Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
js实现加载更多功能实例
Oct 27 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 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
PHP调用三种数据库的方法(2)
2006/10/09 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
javascript 弹出层组件(升级版)
2011/05/12 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
Vue实现购物车功能
2017/04/27 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
Python argv用法详解
2016/01/08 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
医学院护理专业应届生求职信
2013/11/12 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
小学生大队委竞选稿
2015/11/20 职场文书
《金色的草地》教学反思
2016/02/17 职场文书