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 相关文章推荐
最新优化收藏到网摘代码(digg,diigo)
Feb 07 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
vue2过滤器模糊查询方法
Sep 16 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
Apr 19 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 Javascript
Js跳出两级循环方法代码实例
Sep 22 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
Sep 22 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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
php缓冲 output_buffering的使用详解
2013/06/13 PHP
深入解析PHP内存管理之谁动了我的内存
2013/06/20 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
设定php简写功能的方法
2019/11/28 PHP
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
Python中optparser库用法实例详解
2018/01/26 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
python实现名片管理系统项目
2019/04/26 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
2014/09/15 HTML / CSS
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
2014年道德讲堂实施方案
2014/03/05 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
房展策划方案
2014/06/07 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
2014年体育部工作总结
2014/11/13 职场文书
离职证明范本
2015/06/12 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
Python 制作自动化翻译工具
2021/04/25 Python
基于Redis延迟队列的实现代码
2021/05/13 Redis