jquery选择器 2019-8-9

原创2019-08-09 18:04:4010
摘要:1.基本选择器id选择器:$('id名')class选择器:$('class名') 标签选择器:$('element') *选择器:$('*')<!DOCTYPE html><html><head><meta charset="UTF-8"><

1.基本选择器

id选择器:$('id名')

class选择器:$('class名')

 标签选择器:$('element')

 *选择器:$('*')


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>基本选择器</title>

<script

  src="https://code.jquery.com/jquery-3.4.1.js"

  ></script>

</head>

<body>

<p id="box">php中文网</p>

<p>php中文网</p>

<div>php中文网</div>


<script>

$(document).ready(function(){

$('#box').css('background','red');

$('.container').css('background','green');

$('div').css('background','blue');

$('*').css('width','100px');

$('*').css('height','100px');

$('*').css('color','#fff');

})

</script>

</body>

</html>


2.层级选择器

子元素:$('父级元素>子元素')

后代元素:$('祖先元素  后代元素')

相邻兄弟元素:$('prev + next')

兄弟元素:$('prev ~ siblings')


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>层级选择器</title>

<script

  src="https://code.jquery.com/jquery-3.4.1.js"

  ></script>

</head>

<body>

<div>

<li>PHP中文网</li>

<li>PHP中文网</li>

<ul>

<li>PHP中文网</li>

<li>PHP中文网</li>

<li>PHP中文网</li>

<li>PHP中文网</li>

<li>PHP中文网</li>

</ul>

<li>PHP中文网</li>

<li>PHP中文网</li>

</div>


<script>

$(document).ready(function(){

$('div>li').css('font-size','30px');

$('div li').css('color','red');

$('li + ul').css('background','blue');

$('ul~li').css('border','1px solid #ccc');

})

</script>

</body>

</html>


3.顺序选择器

第一个:$(':first')

最后一个:$(':last')

大于值x的元素 $(':gt(x)')

等于值x的元素 $(':lt(x)')

小于值x的元素 $(':eq(x)')

奇偶数

奇数顺序 $(':odd')

偶数顺序 $(':even')

匹配非该元素的所有元素 $(':not(selsctor)')


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>顺序选择器</title>

<script

  src="https://code.jquery.com/jquery-3.4.1.js"

  ></script>

</head>

<body>


<li id="title">标题</li>

<li>PHP中文网00</li>

<li>PHP中文网01</li>

<li>PHP中文网02</li>

<li>PHP中文网03</li>

<li>PHP中文网04</li>

<li>PHP中文网05</li>

<li>PHP中文网06</li>

<li>PHP中文网07</li>


<script>

$(document).ready(function(){

$('li:first').css('font-size','30px');

$('li:last').css('color','yellow');

$('li:gt(3)').css('color','red');

$('li:lt(3)').css('color','green');

$('li:eq(3)').css('color','blue');

$('li:odd').css('background','#000');

$('li:even').css('background','#888');

$('li:not(#title)').css('font-size','20px');

})

</script>

</body>

</html>


4.内容选择器

匹配文本内容为text的元素:$(':contains(text)')

匹配包含特定选择器的元素:$(':has(selector)')

匹配不包含内容的元素:$(':empty')

匹配包含内容的元素:$(':parent')


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>内容选择器</title>

<script

  src="https://code.jquery.com/jquery-3.4.1.js"

  ></script>

  <style>

   div{

   height: 100px;

   width: 100px;

   margin-bottom: 10px;

   }

  </style>

</head>

<body>

<div><span href="">1</span></div>

<div><span href="">1</span></div>

<div>2</div>

<div>2</div>

<div></div>

<div></div>

<script>

$(document).ready(function(){

$('div:contains(2)').css('background','red');

$('div:has(span)').css('background','green');

$('div:empty').css('background','blue');

$('div:parent').css('color','#fff');

})

</script>

</body>

</html>


5.属性选择器

匹配包含该属性的元素 $('[属性名]')

匹配属性值为特定值的元素 $('[attribute = value]')

匹配属性值非特定值的元素 $('[attribute != value]')

匹配属性值以某些值开始的元素 $('[attribute ^= value]')

匹配属性值以某些值结尾的元素 $('[attribute $= value]')

匹配属性值包含某些值的元素 $('[attribute *= value]')

同时满足多条件的元素 $('attrSel[1] attrSel[1] attrSel[1]')


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>属性选择器</title>

<script

  src="https://code.jquery.com/jquery-3.4.1.js"

  ></script>

</head>

<body>

<p id="box">php中文网</p>

<p>php中文网</p>

<div id="box2">php中文网</div>


<script>

$(document).ready(function(){

$('p[id]').css('background','red');

$('p[id=box]').css('width','100px');

$('p[id != box]').css('background','blue');

$('p[class ^= c]').css('width','100px');

$('div[id $= 2]').css('background','green');

$('div[id *= 2]').css('width','100px');

$('p[id][id=box]').css('height','100px');

})

</script>

</body>

</html>


6.表单选择器

所有激活的input元素 $(':enabled')

所有禁用的input元素 $(':disabled')

所有被选取的元素,针对于select元素 $(':selected')

所有被选中的input元素 $(':checked')


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>表单选择器</title>

<script

  src="https://code.jquery.com/jquery-3.4.1.js"

  ></script>

</head>

<body>

输入框1:<input type="text"><br>

输入框2:<input type="text"><br>

输入框3:<input type="text"><br>

输入框4:<input type="text" disabled><br>

输入框5:<input type="text"><br>

<select>

<option>北京</option>

<option>上海</option>

<option>广州</option>

<option>深圳</option>

</select>

爱好:

<label for="hobby"><input type="checkbox" name="hobby" id="hobby">运动</label>

<label for="hobby1"><input type="checkbox" name="hobby1" id="hobby1">看书</label>

<label for="hobby2"><input type="checkbox" name="hobby2" id="hobby2" checked>打游戏</label>


<script>

$(document).ready(function(){

$(':enabled').css('background','green');

$(':disabled').css('background','#ccc');

$(':selected').css('background','blue');

$(':checked').parent().css('background','red');

})

</script>

</body>

</html>


批改老师:Peter-Zhu批改时间:2019-08-15 10:48:15
老师总结:你这是总结吗? 如果是, 总结的还是全面的

发布手记

热门词条

第九期线上培训班