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 相关文章推荐
不错的asp中显示新闻的功能
Oct 13 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
简单实现js浮动框
Dec 13 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
Javascript中document.referrer隐藏来源的方法
Jan 16 Javascript
jQuery插件之validation插件
Mar 29 jQuery
JavaScript事件处理程序详解
Sep 19 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 Javascript
JavaScript实现滑块验证解锁
Jan 07 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
基于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 引用是个坏习惯
2010/03/12 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
2019/12/30 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
给朋友的道歉信
2014/01/09 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
个人委托书范本汇总
2014/10/01 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
关于开学的感想
2015/08/10 职场文书
大学军训口号大全
2015/12/24 职场文书