>>>>> JQ-第二节
2017-04-14 本文已影响0人
風隨風去
节点的选择
first()
获取当前结果集中的第一个对象 相当于eq(0)
last()
获取当前结果集的最后一个对象
slice()
children()
获得匹配元素集合中每个元素的子元素
$('ul.level-2').children()
$('ul.level-2').children('.selected');//可以进行筛选
find()
查找符合选择器的后代元素
$('ul').find('li.current');
$('ul li.current');
$('ul').find('li.current');//尽量用这种方式，性能会更高一些
上面两种方式选择的元素是一样的, 我们应该尽量使用find
节点的选择(父节点)
parent()
获得匹配元素集合中每个元素的父元素
$('li.item-a').parent()
closest()
从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素。
必须要接收一个参数
<div class="box">
<div class="box">cccc
<div>bbbb
<div id="div1">aaaa</div>
</div>
</div>
</div>
<script>
$('#div1').closest('div').css('background', 'red');//从元素本身开始
$('#div1').closest('.box').css('background', 'red');//返回最先匹配的祖先元素
</script>
例子 : 点击查找指定节点
点击span让相应的li背景变红
<ul>
<li>
<div><span>001</span></div>
</li>
<li>
<div><span>002</span></div>
</li>
<li>
<div><span>003</span></div>
</li>
<li>
<div><span>004</span></div>
</li>
<li>
<div><span>005</span></div>
</li>
</ul>
<script>
$('span').click(function(){
$(this).closest('li').css('background','red');
})
</script>
节点的操作
创建节点
//原生的方式
var oDiv = document.createElement('div');
//jq的方式
var $div = $('<div>')
注意: 要加<``>，不然就变成选择
比原生JS更强大的创建方式
//原生的方式
var oDiv = document.createElement('div');
oDiv.innerHTML = 'hello';
oDiv.id = 'div1';
//jq的方式
var $div = $('<div id="div1">hello</div>')
插入子节点
append()
在每个匹配元素里面的末尾处插入参数内容。
它的参数可以是DOM 元素，DOM元素数组，HTML字符串，或者jQuery对象，用来插在每个匹配元素里面的末尾。
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
<div class="box">box</div>
<script>
var oH2 = document.getElementsByTagName('h2')[0];
$('.inner').append(oH2);//DOM元素
$('.inner').append('<p>Test</p>');//HTML字符串
$('.inner').append($('.box'));//jquery对象
</script>
prepend()
将参数内容插入到每个匹配元素的前面（元素内部）。
参数DOM元素，元素数组，HTML字符串，或者jQuery对象，将被插入到匹配元素前的内容。
插入兄弟节点
before()
after()
- 例子 : 节点上移下移
节点的操作
- remove() 删除节点
- clone() 克隆节点
- 默认不克隆事件
- 如何克隆事件 clone(true)
JQ中的索引
index()
第一种用法，兄弟中的排行
<body>
<div>001</div>
<div id="div1">002</div>
<div>003</div>
</body>
<script>
alert( $('#div1').index() ) ;//1
</script>
第二种用法，筛选后的排行
<div><span>001</span></div>
<div><span id="span1">002</span></div>
<div><span>003</span></div>
<script>
//错误写法
$('#span1').index();//0
//#span1在span集合中的索引
$('#span1').index('span');//1
</script>
- 例子 : 选项卡
<div id="div1">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display:block">111</div>
<div>222</div>
<div>333</div>
</div>
<script>
$('#div1').find('div').eq( $(this).index('input') ).css('display','block').siblings('div').css('display','none');
</script>
JQ中的遍历
遍历就是循环
我们知道在JQ中有很多的省略循环的方法比如说css click ...
但有时候我们也需要自定义循环操作
.each()
回调函数的两个参数
- 第一个参数代表下标
- 第二个参数代表每个原生dom对象
$('span').each(funciton(i, elem){
alert(i);
elem.style.background = 'red';
})
each中this指向
this === elem
$('span').each(funciton(i, elem){
$(this).html(i);
})
退出循环
我们知道在for循环中我们是用break来退出整个循环
在.each() 中 我们用return false来退出整个循环
$('span').each(funciton(i, elem){
$(this).html(i);
if(i==0){
return false;
}
})
JQ转原生JS
- get()
- 与eq的区别
- 为什么要转，比如：
- 获取内容的高度
- 元素之间的比较
get()
获取原生都dom对象
$('div').get(0).innerHTML = 'sdfsdf';
与eq的区别
get方法得到的是原生dom对象， eq得到的是jquery对象
$('div').get(0).innerHTML = 'sdfsdf';
$('div').eq(0).html('sdfsdf');
为什么要转
获取内容的高度
想要获取textarea里内容的实际高度
<textarea id="t1" style="height:100px">
as
da
sd
asd
a
sd
asd
a
sd
s
s
s
s
s
s
s
s
</textarea>
<script>
$('textarea').height();//100
//height()是获取元素的高度
// jquery中没有提供获取内容高度的方法
$('textarea').get(0).scrollHeight;//360
</script>
元素之间的比较
var oDiv = document.getElementById('div1');
$('#div1').get(0) === oDiv; //true;
练习
- 1左右切换数据
- 2评分效果
