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>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> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .a{ width: 100px; height: 100px; border: 1px solid red; margin: 0 auto; background: yellow; } .b{ background: red; } </style> </head> <body> <div class="a">通天塔</div> </body> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //我问div标签里面是否有class名a // alert($('div').hasClass('a'))//true $('div').click(function(){ if($('div').hasClass('a')){ $('div').toggleClass('b') } }) </script> </html>each() 元素的遍历方法 $().each() 用来操做dom $.each(arr,function(下标，内容){}) 比如遍历数组
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--<ul> <li>解决</li> <li>恩恩</li> <li>让人</li> <li>请求</li> <li>问问</li> </ul>--> <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="" /> <input type="checkbox" name="" id="" value="" /> <button>全选</button> <button>不选</button> </body> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script> //找到所有的li进行循环 // $('li').each(function(i,val){ // alert(i) // }) $('button').eq(0).click(function(){ $('[type=checkbox]').each(function(){ $('[type=checkbox]').prop('checked',true) }) }) $('button').eq(1).click(function(){ $('[type=checkbox]').each(function(){ $('[type=checkbox]').prop('checked',false) }) }) </script> </html>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>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>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>通天塔</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>clone(true/false) 克隆节点
如果克隆里面是false 那么他是不会克隆事件行为的，有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(); $('body').append(h) }) </script> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button>点击</button> <p>噼噼啪啪</p> </body> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ // $('button').remove() // $('p').detach() // $('p').empty() // $('p').replaceWith($('<span>发发发</span>'))//创建的span标签替换了p标签 $('<em>啦啦啦啦</em>').replaceAll($('button')) }) </script> </html>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>offset() 元素相对可视窗口的偏移位置 position() 元素相对父元素的偏移位置 scrollTop(val) 获取/设置垂直滚动条的值 scrollLeft(val) 获取/设置横滚动条的值
