JQuery第三章选择器方法

科技2022-07-14 131

选择器方法

方法

find() 匹配当前元素的后代 == $('div p')后代选择器 children() 匹配当前元素的子元素 == $('div>p')子选择器 next() 匹配当前元素的下一个同级元素== $('div+p')下一个同级选择器 nextAll() 匹配当前元素的下的所有同级元素 == $('div~p') prev() 匹配当前元素的前一个同级元素== prevAll() 匹配当前元素的前的同级元素== siblings() 匹配当前元素的所有同级元素 first() 选中第一个元素 == $('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-3.4.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(0).nextAll().css('background','red') // $('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'))//red // console.log($('li').eq(2).attr('id'))//list }) </script> </html>

插入节点

实例：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../../js/jquery-3.4.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> </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>

Processed: 0.010, SQL: 8