Juery1、基本选择器
2013-03-31 22:22
141 查看
1、基本选择器
（1）、根据id匹配元素 id
（2）、根据给定的类名匹配元素 class
（3）、 根据给定的元素名称匹配元素 例如<p></p>
（4）、*匹配所有的元素（通配符）
（5）、集合元素，将每个选择器匹配的元素合并后一起返回。
批量给元素绑定事件
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
//第一步，找到所有的p元素,jquery中的事件名称没有on
$("p").click(function(){alert('hello')});
});
</script>
</head>
<body>
<p>这是第一个p</p>
<p>这是第二个p</p>
<p>这是第三个p</p>
<p>这是第四个p</p>
<p>这是第五个p</p>
<p>这是第六个p</p>
</body>
</html>
jquery实现表格各行换色
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
$("#tab tr:even").css("background","blue");//根据id属性找到table下的tr的偶数行设置css样式背景颜色为：blue。
});
</script>
</head>
<body>
<table id="tab">
<tr><td>第一行</td><td>第一行</td></tr>
<tr><td>第二行</td><td>第二行</td></tr>
<tr><td>第三行</td><td>第三行</td></tr>
<tr><td>第四行 </td><td>第四行 </td></tr>
<tr><td>第五行</td><td>第五行</td></tr>
<tr><td>第六行</td><td>第六行</td></tr>
</table>
</body>
</html>
（1）、根据id匹配元素 id
（2）、根据给定的类名匹配元素 class
（3）、 根据给定的元素名称匹配元素 例如<p></p>
（4）、*匹配所有的元素（通配符）
（5）、集合元素，将每个选择器匹配的元素合并后一起返回。
批量给元素绑定事件
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
//第一步，找到所有的p元素,jquery中的事件名称没有on
$("p").click(function(){alert('hello')});
});
</script>
</head>
<body>
<p>这是第一个p</p>
<p>这是第二个p</p>
<p>这是第三个p</p>
<p>这是第四个p</p>
<p>这是第五个p</p>
<p>这是第六个p</p>
</body>
</html>
jquery实现表格各行换色
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
$("#tab tr:even").css("background","blue");//根据id属性找到table下的tr的偶数行设置css样式背景颜色为：blue。
});
</script>
</head>
<body>
<table id="tab">
<tr><td>第一行</td><td>第一行</td></tr>
<tr><td>第二行</td><td>第二行</td></tr>
<tr><td>第三行</td><td>第三行</td></tr>
<tr><td>第四行 </td><td>第四行 </td></tr>
<tr><td>第五行</td><td>第五行</td></tr>
<tr><td>第六行</td><td>第六行</td></tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery基本筛选选择器（二）
- beautifulSoup基本用法及find选择器
- CSS基本选择器和优先级
- Jquery中基本选择器用法实例详解
- JavaScript之jQuery-10 T-Query(T-Query、基本选择器、T-Query对象、操作方法、创建元素、事件绑定)
- jquery选择器之基本过滤选择器
- FMDB基本用法及图片选择器
- 【代码片段】jQuery测试基本过滤选择器
- jQuery UI 日期时间选择器的基本使用
- jQuery基本选择器
- 2.3.3.1：基本过滤选择器
- jQuery基本过滤选择器
- jQuery\Dom对象转换、JQuery各类选择器（基本/层次选择器、基本过滤/内容过滤选择器）
- JQuery选择器(一) 基本选择器
- CSS基本语法和选择器
- jquery1.9学习笔记 之选择器(基本元素二)
- JQUERY1.9学习笔记 之基本过滤器(三)偶数选择器
- CSS基本选择器
- JQuery基本过滤选择器与表单对象过滤器
- CSS基本选择器