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 相关文章推荐
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
javascript 数组操作详解
Jan 29 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
jQuery实现全选、反选和不选功能
Aug 16 jQuery
vue自定义指令用法经典实例小结
Mar 16 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 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
深入了解php4(1)--回到未来
2006/10/09 PHP
实用函数8
2007/11/08 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
python装饰器原理与用法深入详解
2019/12/19 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
美国内衣品牌:Leonisa
2016/08/14 全球购物
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
Farnell德国:电子元器件供应商
2018/07/10 全球购物
一些PHP的面试题
2015/05/06 面试题
EJB发布WEB服务一般步骤
2012/10/31 面试题
Java的类与C++的类有什么不同
2014/01/18 面试题
期末自我鉴定
2014/02/02 职场文书
《商鞅南门立木》教学反思
2014/02/16 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
2016党员党课心得体会
2016/01/07 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS