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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
js select常用操作控制代码
Mar 16 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
JavaScript箭头函数中的this详解
Jun 19 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 Javascript
javascript实现简单搜索功能
Mar 26 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 Javascript
如何基于viewport vm适配移动端页面
Nov 13 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对二维数组按指定键值key排序示例代码
2013/11/26 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
新闻内页-JS分页
2006/06/07 Javascript
如何判断图片地址是否失效
2007/02/02 Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
Python判断字符串与大小写转换
2015/06/08 Python
用Eclipse写python程序
2018/02/10 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
Python退火算法在高次方程的应用
2018/07/26 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
numpy.linspace函数具体使用详解
2019/05/27 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
幼儿运动会邀请函
2014/01/17 职场文书
30年同学聚会感言
2014/01/30 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js
mysql如何查询连续记录
2022/05/11 MySQL