jQuery（一）——注册事件和选择器
2019-04-17 本文已影响0人
CNLISIYIII
本质上就是一个js文件，jQuery库。可以简化代码，提高开发效率。
使用前要先引入jQuery文件
<script src="lib/jquery-1.12.4.js"></script>
（一）jQuery对象和DOM对象
1.DOM和jQuery对象区别
通过DOM方式所获取的元素就是DOM对象。
代码举栗：
<body>
<div></div>
<script src="lib/jquery-1.12.4.js"></script>
<script>
//DOM对象获取元素
var div = document.querySelector('div');
div.innerText = 'im div';
//jQuery对象获取
var $div = $('div');
$div.text('im jquery div');
</script>
</body>
2.jQuery对象
$和jQuery标识符指向同一个函数，推荐使用$。
$是一个函数，调用的时候需要传入参数。selector表示选择器。
1）$('选择器') 返回一个jQuery对象
代码举栗：
<body>
<button>按钮</button>
<script src="lib/jquery-1.12.4.js"></script>
<script>
var $btn = $('button'); //获取到了按钮对应的jQuery对象
console.log($btn instanceof jQuery); //true
</script>
</body>
2）DOM对象可以转换成jQuery对象
$(selector,context) //通过选择器获取元素，context可以忽略
$(element) //把DOM对象转换成jQuery对象的调用方式
语法：$(DOM对象);
代码举栗：
<body>
<div></div>
<script src="lib/jquery-1.12.4.js"></script>
<script>
var dom = document.querySelector('div');
// dom.innerText = '内容';
// dom.text('内容'); //报错
var $dom = $(dom);
$dom.text('内容');
</script>
</body>
3）jQuery对象
语法：jQuery对象[0]
jQuery对象的本质是：给一个伪数组，这个伪数组才是jQuery对象。伪数组中取出的个体是DOM对象。
代码举栗：
<body>
<div></div>
<script src="lib/jquery-1.12.4.js"></script>
<script>
var $div = $('div');
console.log( $div instanceof jQuery); //true
console.log( $div[0] instanceof jQuery); //false。通过中括号索引方式取出的个体是DOM对象。
$div[0].innerText = '内容'; //有效
</script>
</body>
（二）jQuery注册事件
事件三要素：事件源、事件类型、事件处理程序
语法：jQuery对象.事件名不加on(事件处理程序);
jQuery可以给组注册事件。但是在DOM中不能给组注册事件。
代码举栗：
<body>
<button>按钮</button>
<ul>
<li>我是列表项1</li>
<li>我是列表项2</li>
<li>我是列表项3</li>
<li>我是列表项4</li>
<li>我是列表项5</li>
</ul>
<script src="lib/jquery-1.12.4.js"></script>
<script>
$('li').click( function() {
//在事件处理程序中，this是DOM对象
alert( $(this).text() ); //text内不传参数表示获取内容
});
</script>
</body>
这里存在隐式迭代现象：jQuery内部自动循环，为每一个元素注册事件。
（三）jQuery操作样式
1.设置单个样式
语法：jQuery对象.css(name,value);
代码举栗：
<body>
<div></div>
<script src="lib/jquery-1.12.4.js"></script>
<script>
//分次设置样式
$('div').css('width', 500); //值可以直接写数字不用加px单位，也可以写成字符串‘500px’
$('div').css('height', '500px');
$('div').css('background', 'red');
//一次设置多个样式
$('div').css({
width: 500,
height: 500,
background: 'red'
})
</script>
</body>
2.获取
语法：jQuery对象.css(name);
代码举栗：
<body>
<div></div>
<script src="lib/jquery-1.12.4.js"></script>
<script>
var w = $('div').css('width');
console.log(w); //字符串 500px。
console.log(parseInt(w)); //转成数字 500。
</script>
</body>
（四）选择器
1.基本选择器
2.层级选择器
3.过滤器选择器
代码举栗：（表格隔行变色）
<script>
//索引为奇数的tr设置为灰色。对于用户是偶数行
$('tbody tr:odd').css('background', '#ccc');
//索引为偶数的tr设置为蓝色
$('tbody tr:even').css('background', 'skyblue');
//筛选第三个tr设置字体颜色为红色
$('tbody tr:eq(2)').css('color', 'red');
</script>
4.选择器
只有jQuery才能点出这些方法，DOM不能。
1）children方法
代码举栗：
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<script src="lib/jquery-1.12.4.js"></script>
<script>
console.log( $('ul>li') );
console.log( $('ul').children() ); //获取ul父子关系下的子元素li
</script>
</body>
2）find方法
find方法使用时必须传入参数
代码举栗：
<script>
//获得list类名下的所有li，包括子元素和孙元素
console.log( $('.list').find('li') );
</script>
3）下拉菜单案例
代码举栗：
<script src="lib/jquery-1.12.4.js"></script>
<script>
var $lis = $('#menu').children();
$lis.mouseenter(function() {
//给当前的li 内部的ul 更改样式display
$(this).find('ul').css('display','block');
});
$lis.mouseleave(function() {
$(this).find('ul').css('display','none'); //find方法也可以换成children
});
</script>
4）其他选择器筛选方法
代码举栗：（手风琴菜单）
<script>
$('span').click(function() {
//让当前点击的span 的下一个兄弟元素 的div 变为显示
$(this).next().css('display', 'block');
//当前点击的span的 父元素的 li的兄弟们 中的div 变为隐藏
$(this).parent().siblings().find('div').css('display', 'none');
});
</script>
5）选择器eq和方法eq的区别
代码举栗：
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<script src="lib/jquery-1.12.4.js"></script>
<script>
//选择器：eq(index)
$('li:eq(1)').css('color', 'red');
//方法： jQuery对象.eq(index)
$('ul li').eq(1).css('color', 'red');
</script>
</body>
当索引保存在变量中时，推荐用方法，不要用选择器
var index = 1;
$('li:eq(' + index + ')').css('color', 'red');
$('ul li').eq(index).css('color', 'red');
6）index方法
jQuery对象.index(); 获取元素在同级元素中的索引
代码举栗：
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
<script src="lib/jquery-1.12.4.js"></script>
<script>
$('li'),click(function() {
alert( $(this).index );
});
</script>
</body>
