- 同级增加节点
`
/* 元素外部插入同辈节点 */
let count = 1;
$('div').click(function(){
/* ♥ after和before都是在自身的后面添加，并不是最后面添加 */
/* $(A).after (B)表示将B插入到A之后 */
// $(this).after( $('<h1>我是h'+count+'</h1>') )
/* $(A). insertAfter (B)表示将A插入到B之后 */
// $('<h1>我是h'+count+'</h1>').insertAfter( $(this) )
/* $(A). before (B)表示将B插入至A之前 */
/* $(this).before( $('<h1>我是h'+count+'</h1>') ) */
/* $(A). insertBefore (B)表示将A插入到B之前 */
$('<h1>我是h'+count+'</h1>').insertBefore( $(this) )
count++
})
</script>
- 节点删除
`
$('li:eq(0)').click(function () {
alert(1)
})
替换节点 replaceWith
$('button').click(function () {
let h1 = $('<h1>我爱学习</h1>')
/ 第一个li被h1所替换
// $('li:eq(0)').replaceWith(h1)
/ 用h1来替换第一个li */
// h1.replaceAll( $('li:eq(0)') )
/true复制事件处理，flase时反之
false或者不传参数都不能实现复制事件
let cloneLi = $('li:eq(0)').clone()
$('ul').append(cloneLi)
})
remove 删除整个节点
// $('button').click(function(){
// // $('li:eq(0)').remove();
// $(this).remove()
// })
/ remove 可以自己删除自己
// $('li:eq(0)').click(function(){
// $(this).remove()
// })
empty 清空节点内容
// $('button').click(function(){
// $('li:eq(0)').empty();
// })
/detach()：删除整个节点，保留元素的绑定事件、附加的数据
/* empty remove 和 detach 执行完之后都有返回值
返回删除的节点
$('li:eq(0)').click(function(){
alert('你好')
})
$('button').click(function(){
let liDel = $('li:eq(0)').detach();
$('ul').append(liDel)
})
</script> `
-
获取与设置元素属性 `
$('input').click(function(){ if( $(this).prop('checked') ){ $('h3').text( $(this).val() ) } }) // $('#lanqiu').click(function(){ // checkFn.call(this,'我热爱篮球',$('h3')) // }) // $('#zuqiu').click(function(){ // checkFn.call(this,'我热爱足球',$('h3')) // }) // $('input').click(function(){ // // console.log(1); // /* console.log( $(this).attr('checked') ) */ /* =>undefined */ // /* prop是获取元素自身的属性 attr是获取元素的自定义属性 */ // console.log( $(this).prop('checked') ); // }) /* 自定义属性 */ /* attr 来获取属性值 */ // console.log( $('li:eq(0)').attr('data-a') ) // /* attr 来设置属性值 */ // $('li:eq(1)').attr('data-b','祝福中国滑冰队') /* 获取图片原有的属性 */ // console.log( $('img').attr('alt') ) /* 设置图片的宽高 */ // $('img').attr('width','100px') // $('img').attr('height','100px') // /* 删除图片的属性 */ // $('img').click(function(){ // $(this).removeAttr('width') // $(this).removeAttr('height') // })`
-
遍历子元素 `
/* 遍历方法 each( ) ：规定为每个匹配元素规定运行的函数 */ /* each 回调函数里面的第一个参数表示元素的索引 回调函数里面的第二个参数表示每一个遍历的原生元素❤ */ // $('li').each(function(i,e){ // console.log(e); // }) /* 点击 标题 祝福东奥 把li所有的内容都变成 我要祝福东奥 使用each方法遍历 */ $('h1').click(function(){ $('li').each(function(i,e){ $(e).text(`我要祝福东奥${i}`) }) }) /* filter 过滤 在集合元素中过滤出指定的元素 */ // let lis = $('li').filter('.tt1'); // console.log(lis); /* parent()：获取元素的父级元素 */ // let f = $('.tt1').parent() // console.log(f); /* parents()：返回元素的所有祖先元素 */ // let fs = $('.tt1').parents(); // console.log(fs); // $('li').click(function(){ // $(this).css('background','#ccc').siblings().css('background','') // }) /* 用于获取位于匹配元素前面和后面的所有同辈元素 siblings() 除了他自己 前面后面的都被选中了 */ // let lis = $('.tt1').siblings() // console.log(lis); /* 用于获取紧邻匹配元素之后的元素 next() */ /* 有多个.tt 会返回一个紧邻匹配元素之后的元素的集合 */ // let d = $('.tt').next() // console.log( d ); /* next prev方法 获取不到元素 会返回jq对象 document */ /* 用于获取紧邻匹配元素之前的元素 prev() */ // let d = $('.yu').prev() // console.log( d );/* children()方法可以用来获取元素的所有子元素 / // let lis = ('.box').children('.tt') / find 可以获取后代的元素 */ // let c = $('.box').find('span') // console.log(c); `
