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中的数学函数集合
May 08 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
Jan 26 Javascript
JavaScript中的DSL元编程介绍
Mar 15 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 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函数,php爱好者站推荐
2007/03/19 PHP
浅析SVN常见问题及解决方法
2013/06/21 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
jquery判断元素的子元素是否存在的示例代码
2014/02/04 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
标准的js无缝滚动效果
2016/08/30 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
Python面向对象类的继承实例详解
2018/06/27 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
九年级政治教学反思
2014/02/06 职场文书
一份创业计划书范文
2014/02/08 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
个人委托书范本
2014/09/13 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
Go语言安装并操作redis的go-redis库
2022/04/14 Golang
Java 多线程并发FutureTask
2022/06/28 Java/Android