JQuery 常见选择器详解练习1

来源：互联网发布：js判断数字是否是整数编辑：程序博客网时间：2024/05/22 06:32

1.常见基本选择器代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="jquery-3.1.1.min.js"></script><script type="text/javascript">$(function(){    //alert($("#ID").val());//查找ID并显示其内容    //alert($("a").html());//查找ID并显示其内容    //alert($('.classname').val());    //alert($("*").length);    alert($("input,a").length);//显示多个事件选择器的长度});</script></head><body>   <input type="text" id="ID" value="根据ID选择"/>   <a>根据元素名称选择</a>   <input type="text" class="classname" value="根据元素css类名选择"/></body></html>

截图：

2.常见的层次选择器

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="jquery-3.1.1.min.js"></script><script type="text/javascript">$(function(){    //alert($("#divTest a").length);    //alert($("#divTest>input").length);    //alert($("#next+input").length);    alert($("#next~input").length);});</script></head><body><div id="divTest">  <input type="text" value="投资"/>  <input id="next" type="text"/>  <input type="text" value="担当"/>  <input type="text" title="学习" value="学习"/>  <a>1<input type="text" value="股票"/></a>  <a>2<a>3</a></a>  </div></body></html>

截图：

3.常见的过滤选择器

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="jquery-3.1.1.min.js"></script><script type="text/javascript">$(function(){    //alert($('li:first').html());    //alert($('li:last').html());    //alert($("ul input:not(:checked)").val());    //alert($('li:even').length);    //alert($('li:even').get(1).innerHTML);//将jquery对象转换成DOM对象    //alert($('li:odd').get(1).innerHTML);    //alert($('li:eq(2)').html());    //alert($('li:gt(1)').length);    //alert($('li:lt(3)').length);    alert($(':header').length);//查找标题标签     });</script></head><body><div id="divTest">  <ul>    <li>投资</li>    <li>理财</li>    <li>成熟</li>    <li>担当</li>    <input type="radio" value="学习" checked="checked" />学习    <input type="radio" value="不学习" />不学习    <h1>Header 1</h1>    <h2>Header 2</h2>  </ul>  </div></body></html>

截图：

0 0