JQuery第四章DOM

科技2022-07-14 126

DOM

1：获取值的方法

html() text() val() 既可以获取input里面的值/也可以设置值如果是下拉菜单、单选、多选的情况下 val([''])方法还可以将他们设置成默认选中 prop('checked',true) 专属input默认选中方法

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="checkbox" name="" id="" value="" /> <input type="checkbox" name="" id="" value="" /> <input type="checkbox" name="" id="" value="" /> <input type="checkbox" name="" id="" value="" /> <input type="checkbox" name="" id="" value="" /> <button>全选</button> <button>不选</button> <button>反选</button> </body> <script src="../../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $('button').eq(0).click(function(){ for(var i=0; i<$('input').length; i++){ $('input').eq(i).prop('checked',true) } }) $('button').eq(1).click(function(){ for(var i=0; i<$('input').length; i++){ $('input').eq(i).prop('checked',false) } }) </script> </html>

2：操作属性的方法

attr() 获取/设置元素属性的方法 attr()还可以设置多个属性设置多个属性采用对象的模式 attr({'k1':'v1','k2':'v2','k3':'v3'}) removeAttr() 移除属性方法 addClass() 只能向元素添加class值 removeClass() 删除属性方法 toggleClass() 添加样式切换方法（方法中不加 .） hasClass()/is() 检查元素是否包含指定的类（方法中不加 .）

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="a" id="b" name='c'>通天塔</div> <p class="as">哈哈哈</p> </body> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // alert($('div').attr('id')) // $('div').attr('id','bb') // $('div').attr({ // 'class':'aaa', // 'id':'bbb', // 'name':'ccc' // }) // $('div').removeAttr('class') //----------------------------------------------------- // $('p').addClass('op')//addclass可以往标签后面追加class名 // $('p').removeClass() </script> </html>

3：遍历方法：

each() 元素的遍历方法 $().each() 用来操做dom $.each(arr,function(下标，内容){}) 比如遍历数组

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script src="../../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script> var arr=[ ['html','css','js','java','c++'], ['html2','css2','js2','java2','c++2'], ['html3','css3','js3','java3','c++3'] ] $.each(arr, function(i) { if(i<arr.length){ $.each(arr[i], function(a) { if(a<arr[i].length){ document.write(arr[i][a]+'<br>') </script> </html>

4:节点内部插入

var box=$('<div id="box">你好</div>') 创建一个标签 append() 插入一个标签 appendTo() 插入到标签里面的后面 prepend('插入一对标签') 插入到标签里面的前面 prependTo()

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <em>PPP</em> </div> <p>通天塔</p> </body> <script src="../../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ var op=$('<p>斤斤计较</p>'); $('div').append(op) // $('div').appendTo(op) 这个不对 // $('div').appendTo($('p'))//p标签包裹了div标签 // $('p').appendTo($('div')) //--------------------------------------------------- // $('div').prepend($('<h1>卡卡卡</h1>')) $('p').prependTo($('div')) }) </script> </html>

5：节点外部插入

after() 向指定元素后插入一个同级标签 before() 向指定元素前插入一个同级标签 insertAfter()将指定元素移入指定元素后面 insertBefore()将指定元素移入指定元素后面

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>吞吞吐吐</h1> <div> <em>PPP</em> </div> <p>通天塔</p> </body> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ // $('div').after($('<span>哦哦哦</span>'))//在div后面紧跟一个同级标签span // $('div').before($('<span>哦哦哦</span>')) //-------------------------------------------------- // $('p').insertBefore($('div') $('h1').insertAfter($('div')) }) </script> </html>

6：包裹节点方法

wrap() 向指定元素包裹一层代码 wrap(element) 向指定标签包裹指定标签 unwrap() 移除指定元素上一层标签 wrapAll() 包裹所有的指定元素上 wrap()和wrapAll()的区别是： wrap()方法是把指定标签看成独立体分别包裹 wrapAll()方法是把指定标签包裹成一个独立体

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>吞吞吐吐</h1> <div>吞吞吐吐也一样 <em>PPP</em> </div> <p>通天塔1</p> <p>通天塔2</p> </body> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ // $('h1').wrap($('<div></div>'))//向h1标签外面包裹了一层div标签 // $('em').unwrap()//移除em上面的标签 // $('p').wrapAll($('<div></div>')) $('p').wrap($('<div></div>')) }) </script> </html>

7：操作节点方法

clone(true/false) 克隆节点如果克隆里面没有true 那么他是不会克隆事件行为的，有true的话就会克隆事件行为 remove() 删除节点 detach() 删除节点 empty() 删除内容保留标签 replaceWith() 替换节点 replaceAll() 替换节点(先创建再删除)

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button>点击</button> <h1>卡卡卡</h1> </body> <script src="../../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $('button').click(function(){ alert(1234) }) var but=$('button').clone(true); $('body').append(but); var h=$('h1').clone(false); $('body').append(h) }) </script> </html>

8：其他css方法

width() 获取/设置元素的宽度 height() 获取/设置元素的高度 innerWidth() 获取元素的宽,包含内边距（padding） innerHeight() 获取元素的高,包含内边距（padding） outerWidth() 获取元素的宽,包含内边距（padding）+边框（border） **outerWidth(true) 获取元素的宽,包含内边距（padding）+边框（border）+外边距（margin） outerHeight() 获取元素的高,包含内边距（padding）+边框（border）

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; border: 1px solid red; background: blue; padding: 20px; margin: 40px; position: absolute; top:300px; left:340px; } </style> </head> <body style="height: 3000px;"> <div></div> <button style="position: fixed;bottom:0;">点击回到顶部</button> </body> <script src="../../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ // alert($('div').width()) // $('div').width('300px') // $('div').height('300px') // alert($('div').innerWidth())240 宽是200 内边距是20 // alert($('div').innerHeight()) // alert($('div').outerWidth()) // alert($('div').outerHeight())///padding+宽+border // alert($('div').outerHeight(true))//padding+宽+margin+border //------------------------------------------------------------ // alert($('div').offset().left) // alert($('div').offset().top) // alert($('div').position().top) // alert($('div').position().left) // $('div').css({ // left:'500px', // top:'100px' // }) //--------------------------------------------------------------- // $(window).scroll(function(){ // console.log($(window).scrollTop())//获取到侧边滚动条的值 // }) // $('button').click(function(){ // $(window).scrollTop(0) // }) }) </script> </html>

9：元素偏移方法

offset() 元素相对可视窗口的偏移位置 position() 元素相对父元素的偏移位置 scrollTop(val) 获取/设置垂直滚动条的值 scrollLeft(val) 获取/设置横滚动条的值

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ width:200px; height: 200px; background: red; position:relative; margin: 50px 100px; } span{ display: block; position: absolute; top:50px; left:50px; width: 130px; height: 130px; border: 1px solid yellow; } </style> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div> <span>哈哈</span> </div> </body> <script type="text/javascript"> // alert($('div').offset())//[object Object] // alert($('div').offset().top) // alert($('div').offset().left) // alert($('div').offset().bottom)//只有X和Y轴值，没有bottom和right值 // alert($('div').position().left) // alert($('span').position().left) // alert($('span').position().top) </script> </html>

Processed: 0.013, SQL: 8