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 相关文章推荐
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 Javascript
js Event对象的5种坐标
Sep 12 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
在vue中created、mounted等方法使用小结
Jul 21 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
JS sort排序详细使用方法示例解析
Sep 27 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下使用SMTP发邮件的代码
2008/01/10 PHP
PHP URL路由类实例
2013/11/12 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
CentOS安装php v8js教程
2015/02/26 PHP
PHP 实现缩略图
2021/03/09 PHP
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
用Python制作简单的钢琴程序的教程
2015/04/01 Python
基于Python实现用户管理系统
2019/02/26 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
英国助听器购物网站:Hearing Direct
2018/08/21 全球购物
小学老师寄语大全
2014/04/04 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
碧霞祠导游词
2015/02/09 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
Python代码风格与编程习惯重要吗?
2021/06/03 Python
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang