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 IE中的DOM ready应用技巧
Jul 23 Javascript
jQuery 创建Dom元素
May 07 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
js实现表单检测及表单提示的方法
Aug 14 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
vue项目添加多页面配置的步骤详解
May 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
php 分页函数multi() discuz
2009/06/21 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
2014/12/31 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
python函数不定长参数使用方法解析
2019/12/14 Python
详解Python实现进度条的4种方式
2020/01/15 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
汽修专业学生自我鉴定
2013/11/16 职场文书
房地产开发计划书
2014/01/10 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
新手初学Java List 接口
2021/07/07 Java/Android
python之django路由和视图案例教程
2021/07/26 Python
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
python基础之//、/与%的区别详解
2022/06/10 Python