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 相关文章推荐
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
javascript中创建对象的几种方法总结
Nov 01 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 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_SELF的安全问题
2009/09/05 PHP
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
PHP 手机归属地查询 api
2010/02/08 PHP
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
js 获取站点应用名的简单实例
2016/08/18 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
python随机生成指定长度密码的方法
2015/04/04 Python
python 判断网络连通的实现方法
2018/04/22 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
python字典排序的方法
2019/10/12 Python
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
教育基金募捐倡议书
2014/05/14 职场文书
高中班主任评语
2014/12/30 职场文书
大学迎新生欢迎词
2015/09/29 职场文书