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 构造函数 实例分析
Nov 26 Javascript
Jquery Change与bind事件代码
Sep 29 Javascript
jquery使用hide方法隐藏指定id的元素
Mar 30 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
vue自定义filters过滤器
Apr 26 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 Javascript
如何HttpServletRequest文件对象并储存
Aug 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数组中的重复值的实现代码
2011/07/17 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
js验证表单第二部分
2006/11/25 Javascript
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
javascript数组的使用
2013/03/28 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
Python中存取文件的4种不同操作
2018/07/02 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
捐赠仪式主持词
2014/03/19 职场文书
经济管理自荐书
2014/06/09 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
浅析MySQL如何实现事务隔离
2021/06/26 MySQL