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 相关文章推荐
JS backgroundImage控制
May 19 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 Javascript
微信小程序框架的页面布局代码
Aug 17 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 escape URL编码
2008/12/10 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
解析php扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
php多重接口的实现方法
2015/06/20 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
filemanage功能中用到的common.js
2007/04/08 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
python查看FTP是否能连接成功的方法
2015/07/30 Python
python+django快速实现文件上传
2016/10/24 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
美国旅游网站:Tours4Fun
2017/02/17 全球购物
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
党性锻炼的心得体会
2014/09/03 职场文书
2014年政协工作总结
2014/12/09 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
旷课检讨书范文
2015/01/27 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
python数字图像处理:图像的绘制
2022/06/28 Python