JQuery里面的几种选择器 查找满足条件的元素$("#控件ID")


Posted in Javascript onAugust 23, 2011

样式:$(function (){
$("要选择的标签").click(function (){alert ("弹出对话框内容");})
});
第一种:Id选择器
用法:

<head> 
<title></title> 
<script src ="Jq/jquery-1.4.2.js" type ="text/javascript" ></script> 
<script type ="text/javascript"> 
$(function (){ 
$("p").click(function (){alert ("小P");}) 
}); 
</script> 
</head> <body> 
<input type="button" value ="PlayGame" id="btnClick" /> 
<p>第一个</p> 
<p>第二个</p> 
</body>

说明:对所有<P>标签点击都有弹出对话框的提示
第二种:CSS选择器
<head> 
<title></title> 
<script src ="Jq/jquery-1.4.2.js" type ="text/javascript" ></script> 
<script type ="text/javascript"> 
$(function (){ 
$(".warning").click(function (){alert("这是警告信息");}); 
}); 
</script> 
<style type="text/css" > 
.warning{background-color :Yellow ;color :Red ;} 
</style> 
</head> <body> 
<p>没有警告</p> 
<div class ="warning " >请带好小孩</div> 
<p class ="warning ">再次警告你</p> 
<input class ="warning " type ="button" value ="别点啊" /> 
</body>

说明:对所有CSS样式为:.warning点击都有弹出对话框的提示
第三种:多条件选择器
<head> 
<title></title> 
<script src ="Jq/jquery-1.4.2.js"></script> 
<script type ="text/javascript" > 
$(function (){ 
$(".docc,p,#txt1").click(function (){alert ("不要上当啊");}) 
}) 
</script> 
<style type="text/css" > 
.docc{background-color :Fuchsia ;color :Olive ;} 
</style> 
</head> <body> 
<p>电脑热卖</p> 
<input type ="text" id="txt1" /> 
<input class ="docc" type ="button" value ="上当" /> 
<input type ="checkbox" /> 
</body>

说明:可以对多个同时选中做处理。
Javascript 相关文章推荐
javascript 获取页面的高度及滚动条的位置的代码
May 06 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
Aug 19 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
node.js中npm包管理工具用法分析
Feb 14 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 Javascript
JSON stringify方法原理及实例解析
Oct 23 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 #Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 #Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 #Javascript
jQuery页面滚动浮动层智能定位实例代码
Aug 23 #Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 #Javascript
30个精美的jQuery幻灯片效果插件和教程
Aug 23 #Javascript
js 函数的副作用分析
Aug 23 #Javascript
You might like
PHP安全配置
2006/12/06 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
盘点提高 Python 代码效率的方法
2014/07/03 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
python编程使用协程并发的优缺点
2018/09/20 Python
python实现计算器功能
2019/10/31 Python
python中可以声明变量类型吗
2020/06/18 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
animation和transition的区别
2020/10/12 HTML / CSS
Linux机考试题
2015/07/17 面试题
传播学毕业生求职信
2013/10/11 职场文书
大学生标准推荐信范文
2013/11/25 职场文书
高二地理教学反思
2014/01/24 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
学习经验交流会主持词
2014/04/01 职场文书
七一党日活动总结
2014/07/08 职场文书
事业单位个人总结
2015/02/12 职场文书
总经理岗位职责范本
2015/04/01 职场文书
师范生见习总结范文
2015/06/23 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
dubbo服务整合zipkin详解
2021/07/26 Java/Android
php去除数组中为0的元素的实例分析
2021/11/17 PHP
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL