一、jQuery注册事件
事件三要素：事件源、事件类型、事件处理程序
语法：jQuery对象.事件名不加on(事件处理程序);
jQuery可以给组注册事件。但是在DOM中不能给组注册事件。
1 <body>
2 <button>按钮</button>
3 <ul>
4 <li>我是列表项1</li>
5 <li>我是列表项2</li>
6 <li>我是列表项3</li>
7 <li>我是列表项4</li>
8 <li>我是列表项5</li>
9 </ul>
10 <script src="lib/jquery-1.12.4.js"></script>
11 <script>
12 $('li').click( function() {
13 //在事件处理程序中，this是DOM对象
14 alert( $(this).text() ); //text内不传参数表示获取内容
15 });
16 </script>
17 </body>这里存在隐式迭代现象：jQuery内部自动循环，为每一个元素注册事件。
二、jQuery操作样式
1. 设置单个样式
语法：jQuery对象.css(name,value);
1 <body>
2 <div></div>
3 <script src="lib/jquery-1.12.4.js"></script>
4 <script>
5 //分次设置样式
6 $('div').css('width', 500); //值可以直接写数字不用加px单位，也可以写成字符串‘500px’
7 $('div').css('height', '500px');
8 $('div').css('background', 'red');
9
10 //一次设置多个样式
11 $('div').css({
12 width: 500,
13 height: 500,
14 background: 'red'
15 })
16 </script>
17 </body>2. 获取
语法：jQuery对象.css(name);
1 <body>
2 <div></div>
3 <script src="lib/jquery-1.12.4.js"></script>
4 <script>
5 var w = $('div').css('width');
6 console.log(w); //字符串 500px。
7 console.log(parseInt(w)); //转成数字 500。
8 </script>
9 </body>三、选择器
1. 基本选择器
2. 层级选择器
3. 过滤器选择器
表格隔行变色效果：
1 <script>
2 //索引为奇数的tr设置为灰色。对于用户是偶数行
3 $('tbody tr:odd').css('background', '#ccc');
4 //索引为偶数的tr设置为蓝色
5 $('tbody tr:even').css('background', 'skyblue');
6 //筛选第三个tr设置字体颜色为红色
7 $('tbody tr:eq(2)').css('color', 'red');
8 </script>4. 选择器
只有jQuery才能 . 出这些方法，DOM不能。
1）children方法
1 <body>
2 <ul>
3 <li>列表项1</li>
4 <li>列表项2</li>
5 <li>列表项3</li>
6 </ul>
7 <script src="lib/jquery-1.12.4.js"></script>
8 <script>
9 console.log( $('ul>li') );
10 console.log( $('ul').children() ); //获取ul父子关系下的子元素li
11 </script>
12 </body>2）find方法
find方法使用时必须传入参数
1 <script>
2 //获得list类名下的所有li，包括子元素和孙元素
3 console.log( $('.list').find('li') );
4 </script>3）下拉菜单案例
1 <script src="lib/jquery-1.12.4.js"></script>
2 <script>
3 var $lis = $('#menu').children();
4 $lis.mouseenter(function() {
5 //给当前的li 内部的ul 更改样式display
6 $(this).find('ul').css('display','block');
7 });
8 $lis.mouseleave(function() {
9 $(this).find('ul').css('display','none'); //find方法也可以换成children
10 });
11 </script>4）其他选择器筛选方法
手风琴菜单效果：
1 <script>
2 $('span').click(function() {
3 //让当前点击的span 的下一个兄弟元素 的div 变为显示
4 $(this).next().css('display', 'block');
5 //当前点击的span的 父元素的 li的兄弟们 中的div 变为隐藏
6 $(this).parent().siblings().find('div').css('display', 'none');
7 });
8 </script>5）选择器eq和方法eq的区别
1 <body>
2 <ul>
3 <li>列表项1</li>
4 <li>列表项2</li>
5 <li>列表项3</li>
6 </ul>
7 <script src="lib/jquery-1.12.4.js"></script>
8 <script>
9 //选择器：eq(index)
10 $('li:eq(1)').css('color', 'red');
11 //方法： jQuery对象.eq(index)
12 $('ul li').eq(1).css('color', 'red');
13 </script>
14 </body>当索引保存在变量中时，推荐用方法，不要用选择器
1 var index = 1;
2 $('li:eq(' + index + ')').css('color', 'red');
3 $('ul li').eq(index).css('color', 'red');6）index方法
jQuery对象.index(); 获取元素在同级元素中的索引
1 <body>
2 <ul>
3 <li>列表项1</li>
4 <li>列表项2</li>
5 <li>列表项3</li>
6 <li>列表项4</li>
7 <li>列表项5</li>
8 </ul>
9 <script src="lib/jquery-1.12.4.js"></script>
10 <script>
11 $('li'),click(function() {
12 alert( $(this).index );
13 });
14 </script>
15 </body>