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 对象模型 执行模型
Dec 06 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
Oct 23 Javascript
jquery 设置style:display的方法
Jan 29 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
js代码实现下拉菜单【推荐】
Dec 15 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
微信小程序form表单组件示例代码
Jul 15 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
vue获取data数据改变前后的值方法
Nov 07 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
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
详解Python中的各种函数的使用
2015/05/24 Python
Python 专题一 函数的基础知识
2017/03/16 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
Python装饰器用法与知识点小结
2020/03/09 Python
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
linux面试相关问题
2013/04/28 面试题
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
关于期中考试的反思
2014/02/02 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
网聊搭讪开场白
2015/05/28 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书