DOM操作
1.1 内部插入
append(content|fn) 向每个匹配的元素内部追加内容
appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中
prepend(content|fn) 向每个匹配的元素内部前置内容
prependTo(content) 把所有匹配的元素前置到另一个、指定的元素元素集合中
1.2 外部插入
after(content|fn) 在每个匹配的元素之后插入内容
before(content|fn) 在每个匹配的元素之前插入内容
insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的前面
1.3 包裹
wrap(html|ele|fn) 把所有匹配的元素用其他元素的结构化标记包裹起来
unwrap() 这个方法将移出元素的父元素
wrapAll(html|ele) 移出元素的父元素
wrapInner(html|ele|fn) 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来1.4 替换
replaceWith(content|fn) 将所有匹配的元素替换成指定的HTML或DOM元素
replaceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素1.5 删除
empty() 删除匹配的元素集合中所有的子节点
remove([expr]) 从DOM中删除所有匹配的元素
detach([expr]) 从DOM中删除所有匹配的元素 这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来
1.6 克隆
clone([Even[,deepEven]]) 克隆匹配的DOM元素并且选中这些克隆的副本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM操作</title> <style> #box { width: 800px; min-height: 300px; padding: 10px; border: 2px solid #ccc; } #box img { box-sizing: border-box; /*这样设置的宽高就是整个盒子的宽高，如果再设置边距和边框，那么内容的宽高就会被压缩*/ width:100px; height:100px; } #box img.active { border: 2px solid green; } p { width: 600px; padding: 20px; border: 2px dotted pink; } </style> </head> <body> <h1>jQuery DOM 操作</h1> <hr> <h2>内部插入</h2> <button id="append_btn">添加新的图片 append</button> <button id="appendTo_btn">添加新的图片 appendTo</button> <button id="prepend_btn">添加新的图片 prepend</button> <button id="prependTo_btn">添加新的图片 prependTo</button> <h2>外部插入</h2> <button id="after_btn">after</button> <button id="insertAfter_btn">insertAfter</button> <button id="before_btn">before</button> <button id="insertBefore_btn">insertBefore</button> <h2>包裹</h2> <button id="wrap_btn">wrap</button> <button id="wrapAll_btn">wrapAll</button> <button id="wrapInner_btn">wrapInner</button> <button id="unwrap_btn">unwrap</button> <h2>替换</h2> <button id="replaceWith_btn">替换选中的图片</button> <button id="replaceAll_btn">替换选中的图片repalceAll</button> <h2>删除</h2> <button id="empty_btn">empty</button> <button id="remove_btn">remove 删除选中的图片</button> <br> <br> <br> <br> <div id="box"> <img src="../../dist/images_one/1.jpg" alt=""> <img src="../../dist/images_one/2.jpg" alt=""> <img src="../../dist/images_one/3.jpg" alt=""> <img src="../../dist/images_one/4.jpg" alt=""> </div> <img src="../../dist/images_one/10.jpg" id="newImg" alt="" style="200px"> <!-- 引入的jQuery地址一定要写对，否则会报错 --> <script src="../jquery-3.3.1.js"></script> <script> $(function(){ //内部插入---------两种插入的效果一样， // 在box中的子元素后插入一个元素 $('#append_btn').on('click', function(){ //创建img 元素 万能的$ /*var newImg = $('<img>') newImg.attr('src', '../../dist/images_one/8.jpg');*/ // 将上面两步合成一步 //var newImg = $('<img src="../../dist/images_one/9.jpg">') //给box追加一个子元素------插入的图片地址要写对，否则会报错，图片就不能成功插入 $("#box").append('<img src="../../dist/images_one/9.jpg">'); }); // 将一个元素追加到box中 // 会将该元素插入到box已有的子元素的前面 $('#appendTo_btn').on('click', function(){ $('<img src="../../dist/images_one/9.jpg">').appendTo('#box'); }); // ##################################################################################### // 在box中的子元素前插入一个元素 $('#prepend_btn').on('click', function(){ $('#box').prepend('<img src="../../dist/images_one/10.jpg">') }); $('#prependTo_btn').on('click',function(){ $('<img src="../../../photos/dist/images_one/9.jpg">').prependTo('#box'); }); // ******************************************************************************************** //外部插入----两种方式的结果一样，都是将元素添加到box的后面 $('#after_btn').on('click', function(){ $('#box').after('<p>我爱你</p>') }) $('#insertAfter_btn').on('click', function(){ $('<p>你爱我</p>').insertAfter('#box'); }) $('#before_btn').on('click', function(){ $('#box').before('<p>哈哈哈哈</p>') }); // ************************************************************************************************* //包裹 // 用p元素将box中的每一个img元素包裹起来 $('#wrap_btn').on('click', function(){ $('#box img').wrap('<p>'); }) // 用p元素将box中的所有img元素当做一个整体用img元素包裹起来 $('#wrapAll_btn').on('click', function(){ $('#box img').wrapAll('<p>'); }) // 将匹配的元素box的子内容img用p元素进行包裹起来 $('#wrapInner_btn').on('click', function(){ $('#box').wrapInner('<p>'); }) // 移除元素的父元素 $('#unwrap_btn').on('click', function(){ $('#box img').unwrap(); }); // ************************************************************************************************* //替换------两种替换的方式效果一样 $('#replaceWith_btn').on('click', function(){ //alert('ok') //$('#box img.active').replaceWith('<img src="../../dist/images_one/meinv02.jpg">') $('#box img.active').replaceWith($('#newImg').clone()) }) $('#replaceAll_btn').on('click', function(){ //alert('ok') //$('#box img.active').replaceWith('<img src="../../dist/images_one/meinv02.jpg">') $('<img src="../../dist/images_one/meinv02.jpg">').replaceAll('#box img.active') }); // ************************************************************************************************* //删除 // 会将box中的元素全部清除 $('#empty_btn').on('click', function(){ $('#box').empty(); }); // 移除是选中的元素会被移除 $('#remove_btn').on('click', function(){ $('#box img.active').remove(); }); //克隆 //给所有的图片绑定 事件 $('#box img').on('click', function(){ $(this).toggleClass('active'); }) }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery TODOList</title> <style> .list { list-style: none; padding:0; width:600px; } .list li { padding:20px; border:1px solid #ccc; background:#f5f5f5; margin:5px 0px; } .list li::after{ content:''; display: block; clear:both; } .list li p { margin:0; float:left; } .list li span { float:right; cursor: pointer; } input{ width: 300px; padding:10px; border:1px solid #ccc; font-size:16px; } button { padding:10px 20px; border:1px solid #ccc; background: #f5f5f5; } .list li input { border:none; padding:0; outline: none; background: #f5f5f5; } </style> </head> <body> <h1>TODOList</h1> <hr> <input type="text" id="content"> <button id="btn">添加</button> <ul class="list" id="todoList"> <li> <p>Lorem ipsum dolor sit amet.1</p> <span>×</span> </li> <li> <p>Lorem ipsum dolor sit amet.2</p> <span>×</span> </li> <li> <p>Lorem ipsum dolor sit amet.3</p> <span>×</span> </li> <li> <p>Lorem ipsum dolor sit amet.4</p> <span>×</span> </li> </ul> <script src="../jquery-3.3.1.js"></script> <script> $(function(){ //按钮单击事件-------连贯操作 // 通过按钮，添加列表 $('#btn').on('click', function(){ $('<li>') .append(`<p>${$("#content").val()}</p>`) //在li中添加一个子元素p，p元素中的内容是通过input输入的内容获取的，.val()是获得输入的文本内容，${}是将大括号中的内容转化为HTML元素，否则就会在页面原样输出 .append('<span>×</span>') //在li的子元素中添加一个'X'号 .appendTo('#todoList'); //上面添加的元素添加到id为todoList的ul元素中 }); // 通过叉号删除列表 // //给span绑定单击事件 委派------就是给新添加元素也要绑定事件 $("#todoList").on('click', 'span', function(){ //将span写在on内，否则移除会将整个页面元素移除 $(this).parent().remove(); //parent的意思是移除this的唯一父元素也就是li // console.log(this) }); // //给所有的li中的p元素 单击事件 // 对列表中元素的内容进行修改.将列表替换成一个可以输入文本内容的输入框 $("#todoList").on('click', 'p', function(){ //$(this).replaceWith('<input type="text" value=>') $('<input>').val($(this).text()).replaceAll(this); //将input标签元素替换给this也就是p元素 console.log(this) }); //给li下的 input 绑定 失去焦点的时间 $('#todoList').on('blur', 'input', function(){ $('<p>').text($(this).val()).replaceAll(this); }) }) </script> </body> </html>
2 元素属性操作
1.1 属性
attr(name|pro|key,val|fn) 设置或返回被选元素的属性值
removeAttr(name) 从每一个匹配的元素中删除一个属性
prop(n|p|k,v|f) 获取在匹配的元素集中的第一个元素的属性值
removeProp(name) 用来删除由.prop()方法设置的属性集
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery 属性操作</title> <style> #myImg { display: block; width: 400px; height: 300px; border: 1px solid #ccc; } </style> </head> <body> <h1>属性操作</h1> <hr> <button id="btn">属性操作</button> <button id="remove_btn">移除属性</button> <br> <br> <img alt="" id="myImg" loadImg='a.png'> <!--对属性的操作无非就是修改标签内属性的值--> <script src="../jquery-3.3.1.js"></script> <script> $(function(){ $('#btn').on('click', function(){ $('#myImg').attr('src', '../../dist/images_one/meinv02.jpg'); //如果该属性不存在就会添加，存在就会修改该属性的值 //获取属性的值 console.log($('#myImg').attr('src')) //获取属性的值：../../dist/images_one/meinv02.jpg console.log($('#myImg').attr('id')) //获取属性的值：myImg console.log($('#myImg').prop('title')); //专门设置或者获取 元素的内置属性 console.log($('#myImg').attr('loadImg')); //专门设置或者获取 元素的内置属性：a.png }); $('#remove_btn').on('click', function(){ $('#myImg').removeAttr('src'); //移除src属性 //$('#myImg').attr('src', ''); }) }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义属性 图片懒加载</title> <style> .imglist img { width: 400px; height: 300px; border: 1px solid #ccc; } </style> </head> <body> <h1>图片懒加载</h1> <hr> <div class="imglist"> <img loadpic='../../dist/images_one/1.jpg'> <img loadpic='../../dist/images_one/2.jpg'> <img loadpic='../../dist/images_one/3.jpg'> <img loadpic='../../dist/images_one/4.jpg'> </div> <script src="../jquery-3.3.1.js"></script> <script> //console.log($('.imglist img').attr('loadpic')) //只会返回第一个属性值：../../dist/images_one/1.jpg，为了得到每一个img元素属性的值，所以要遍历 //单次定时 setTimeout(function(){ $('.imglist img').each(function(index, item){ //each可以遍历出每一个img元素，是原生的<img loadpic='../../dist/images_one/1~4.jpg'>， $(item).attr('src', $(item).attr('loadpic')) //$(item)将原生的转换为jQuery这样才可以对其操作 // console.log(item) }) }, 2000) </script> </body> </html>
1.2 class
addClass(class|fn) 为每个匹配的元素添加指定的类名
removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类
toggleClass(class|fn[,sw]) 如果存在（不存在）就删除（添加）一个类
hasClass(class) 检查当前的元素是否含有某个特定的类，如果有，则返回true
1.3 代码、文本、值
html([val|fn]) 取得第一个匹配元素的html内容
text([val|fn]) 取得所有匹配元素的内容
val([val|fn|arr]) 获得匹配元素的当前值
2 元素样式操作
2.1 设置CSS
css(name|pro|[,val|fn]) 访问匹配元素的样式属性
2.2 元素位置
offset() 获取匹配元素在当前视口的相对偏移
position() 获取匹配元素相对父元素的偏移
scrollLeft() 获取匹配元素相对滚动条顶部的偏移
scrollTop() 获取匹配元素相对滚动条左侧的偏移
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>样式操作</title> <style> #box { width: 400px; height: 200px; border:2px solid #ccc; position: relative; } .inner { width:100px; height:100px; /*margin:50px;*/ background: pink; } </style> </head> <body> <h1>同志加油</h1> <hr> <button id="btn">设置位置</button> <div id="box"> <div class="inner"></div> </div> <script src="../jquery-3.3.1.js"></script> <script> console.log($('#box').css('width')); //获取元素的宽度值：400px //元素的位置 console.log($('.inner').offset()) //offset() 方法返回或设置匹配元素相对于文档的偏移（位置）:{top: 119.875, left: 10}-----以视口为参照 //以视口 为参照 console.log($('.inner').offset().left, $('.inner').offset().top) //左、上：10 119.875 console.log($('.inner').position()) //{top: 0, left: 0}相对于相对定位的元素 console.log($('.inner').position().left, $('.inner').position().top) //左、上：0 0 $('#btn').click(function(){ //只有offset 才能设置 $('.inner').offset({left:10, top:10}) //这是元素相对于视口的位置 }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滚动</title> <style> #box { width:800px; height:200px; border:2px solid orange; overflow: hidden; } .wrapper { width:2200px; } #box p { margin:0; width:198px; height:198px; float:left; border:1px solid #ccc; background: #369; color:#fff; font-size: 50px; } </style> </head> <body> <div id="box"> <div class="wrapper"> <p>lorem1</p> <p>lorem2</p> <p>lorem3</p> <p>lorem4</p> <p>lorem5</p> <p>lorem6</p> <p>lorem7</p> <p>lorem8</p> <p>lorem9</p> <p>lorem10</p> <p>lorem11</p> </div> </div> <br> <button id="left_btn"> < </button> <button id="right_btn"> > </button> <script src="../jquery-3.3.1.js"></script> <script> $(function(){ $('#left_btn').on('click', function(){ console.log($('#box').scrollLeft()) // $('#box').scrollLeft(800);//是把 scrollLeft 设置为800 $('#box').scrollLeft($('#box').scrollLeft() + 800); //正表示内容每次向左移动800px }); $('#right_btn').on('click', function(){ $('#box').scrollLeft($('#box').scrollLeft() - 800 ) //负表示内容每次向左移动800px }) }) </script> </body> </html>
2.3 元素尺寸
widht() 取得第一个匹配元素当前计算的宽度值（px）
height() 取得匹配元素当前计算的高度值（px)
innerWidth() 匹配元素内部区域宽度（包括补白、不包括边框）
innerHeight() 匹配元素内部区域高度（包括补白、不包括边框）
outerWidth() 匹配元素外部宽度（默认包括补白和边框）
outerHeight() 匹配元素外部高度（默认包括补白和边框）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取元素尺寸</title> <style> #box { width:200px; height:300px; padding:15px; border: 3px solid #ccc; } </style> </head> <body> <h1>获取元素尺寸</h1> <hr> <div id="box"></div> <script src='../jquery-3.3.1.min.js'></script> <script> $(function(){ console.log($('#box').width(), $('#box').height()) //内容的大小 :200 300 console.log($('#box').innerWidth(), $('#box').innerHeight()) //内容大小+padding :230 330 console.log($('#box').outerWidth(), $('#box').outerHeight()) //内容大小+padding+border 实际大小 :236 336 //设置 $('#box').width(300); //设置 内容的宽是300 $('#box').outerWidth(300) //设置 盒子 总的宽 是 300 }) </script> </body> </html>