find() 匹配当前元素的后代 == $(‘div p’)后代选择器 children() 匹配当前元素的子元素 == $(‘div>p’)子选择器 next() 匹配当前元素的下一个同级元素== $(‘div+p’)下一个同级选择器 nextAll() 匹配当前元素的下的所有同级元素 == $(‘div~p’) prev() 匹配当前元素的前一个同级元素== prevAll() 匹配当前元素的前的同级元素== siblings() 匹配当前元素的所有同级元素 first() 选中第一个元素 == ( ′ l i : f i r s t ′ ) ‘ l a s t ( ) ‘ 选 中 最 后 一 个 元 素 ‘ n o t ( ) ‘ 不 想 选 中 某 个 元 素 = = ('li:first') `last() ` 选中最后一个元素 `not()` 不想选中某个元素== (′li:first′)‘last()‘选中最后一个元素‘not()‘不想选中某个元素==(‘li:not(.a)’) eq(数字) 选择当前的元素 index() 返回当前元素下标 html() 返回当前元素文本内容/修改当前元素文本内容(可以添加标签) text() 返回当前元素文本内容/修改当前元素文本内容(不可以添加标签) filter() 筛选出和属性匹配的元素 attr() 获取属性值/设置属性 val() 获取input框里面的值的方法 var u=$('<ul></ul>') 创建一个标签 append() 插入节点的方法 parent() 查找父节点 parents() 查找祖父节点（父节点以上的所有父节点）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ul> <li> 000000000000000 <p>吞吞吐吐拖拖拖</p> </li> <li>111111111111111</li> <li class="oli" id="list">222222222222222</li> <li>333333333333333</li> <li>444444444444444</li> <li class="oli">555555555555555</li> <li>666666666666666</li> </ul> </body> <script type="text/javascript"> $(function(){ // $('ul').find('li').css('color','red') // $('ul').find('li').eq(2).css('color','red') // $('ul').find('p').css('color','blue') // $('ul').children('li').css('color','yellow') // $('li').eq(3).next().css('font-size','100px') // $('li').eq(3).nextAll().css('font-size','100px') // $('li').eq(3).prev().css('font-size','100px') // $('li').eq(3).prevAll().css('font-size','100px') // $('li').eq(3).siblings().css('font-size','100px') // $('li').first().css('border','1px solid red') // $('li').last().css('border','1px solid red') // alert($('li').last().index()) // console.log($('li').last().html()) // $('li').eq(2).html('吞吞吐吐拖拖拖拖拖拖拖') // $('li').eq(2).html(8888888888888) // $('li').eq(2).html('<h1>一月又一月晕晕晕晕晕晕</h1>') // alert($('li').eq(2).text()) // $('li').eq(2).text('<h1>一月又一月晕晕晕晕晕晕</h1>') // $('li').filter('.oli').css('font-size','100px') // $('li').eq(1).attr('class','red') // $('li').eq(2).attr('class','red') // console.log($('li').eq(2).attr('class')) // console.log($('li').eq(2).attr('id')) }) </script> </html>插入节点
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ul class="oul"> </ul> <input type="text" name="" id="" value="" /> <button>点击</button> </body> <script type="text/javascript"> // var oli=$('<li>00000000000000</li>'); // $('ul').append(oli); // console.log($('li').parent().attr('class'))//[object Object] // $('button').click(function(){ // alert($('input').val()) // }) </script> </html>获取元素的内容
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <ul class="oul"> </ul> <input type="text" name="" id="" value="" /> <button>点击</button> </body> <script type="text/javascript"> // var oli=$('<li>00000000000000</li>'); // $('ul').append(oli); // console.log($('li').parent().attr('class'))//[object Object] // $('button').click(function(){ // alert($('input').val()) // }) </script> </html>value方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" name="" id="" value="" /> <button>点击</button> </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($('input').val()) }) }) </script> </html>插入节点方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div></div> </body> <script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> // var op=$('<p></p>');//创建标签 // op.text('哈哈哈');//给创建的标签添加内容 // $('div').append(op)//创建好的p标签插入到div里面 // ---------------------------------------------------- // var op=$('<h1>标题</h1>>'); // $('div').parent().append(op) alert($('div').parents().length)//2 </script> </html>