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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
javascript下string.format函数补充
Aug 24 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
javascript使用正则表达式实现去掉空格之后的字符
Feb 15 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
vue-axios使用详解
May 10 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
vue+SSM实现验证码功能
Dec 07 Javascript
手把手带你封装一个vue component第三方库
Feb 14 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编程效率的方法
2013/11/07 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
python处理csv数据的方法
2015/03/11 Python
Python中常见的数据类型小结
2015/08/29 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
Python读取properties配置文件操作示例
2018/03/29 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
详解Python字典的操作
2019/03/04 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
八一建军节活动方案
2014/02/10 职场文书
工作迟到检讨书
2014/02/21 职场文书
公司管理建议书范文
2014/03/12 职场文书
党员民主评议总结
2014/10/20 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书