一、jQuery注册事件 事件三要素：事件源、事件类型、事件处理程序 语法： jQuery对象.事件名不加on(事件处理程序); jQuery可以给组注册事件。但是在DOM中不能给组注册事件。 1 body 2 butt
一、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>