JQuery里面的几种选择器 查找满足条件的元素$("#控件ID")
更新时间：2011年08月23日 23:44:44 作者：
JQuery里面的几种选择器 查找满足条件的元素$("#控件ID"),使用jquery的朋友可以参考下。
样式：$(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>
说明：可以对多个同时选中做处理。
$("要选择的标签").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>
说明：可以对多个同时选中做处理。
相关文章
这篇文章主要介绍了jQuery实现节点的追加、替换、删除、复制功能,结合具体实例形式分析了jQuery针对DOM节点的操作技巧,涉及append()、prepend()、replaceAll()、replaceWith()empty()、remove()、clone()、clone()等方法的使用技巧,需要的朋友可以参考下2017-07-07
这篇文章主要为大家详细介绍了jquery插表单件form使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
jQuery中的read和JavaScript中的onload函数的区别
这篇文章主要介绍了jQuery中的read和JavaScript中的onload函数的区别,这两个函数在web编程中是最常用的,一定要搞清楚它们的区别,需要的朋友可以参考下2014-08-08
这篇文章主要介绍了使用jQuery简单实现模拟浏览器搜索功能,需要的朋友可以参考下2014-12-12
这篇文章主要为大家详细介绍了使用jQuery实现图片轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
得到当前页面高度和宽度的两个函数2010-02-02
jQuery前端框架easyui使用Dialog时bug处理
本文介绍了在jQuery前端框架easyui开发UI时，使用Dialog时发现遮罩无法覆盖页面内容，而且对话框也显示不出来，经过一番研究，才发现问题所在，这里分享给大家，有相同情况的小伙伴可以参考下2014-12-12
这篇文章主要介绍了jQuery Chosen通用初始化,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
浅析onsubmit校验表单时利用ajax的return false无效问题
前几天，在校验一个表单数据用到ajax时，遇到 return false 无效问题,以下就是对这个问题进行了分析介绍，需要的朋友可以参考下2013-07-07
这篇文章主要介绍了jquery实现二级导航下拉菜单效果,具有一定参考借鉴价值,需要的朋友可以参考下2015-12-12
最新评论