jQyery选择器之基本选择器和层次选择器

来源：互联网发布：fdd是什么网络编辑：程序博客网时间：2024/05/16 08:29

jQyery选择器之基本选择器和层次选择器

1. 基本选择器

选择器描述返回值 #ID 根据元素的ID属性进行匹配单个jQuery对象 .class 根据元素的class属性进行匹配 jQuery对象数组 element 根据元素的标签名进行匹配 jQuery对象数组 selector1，selector2... 将每个选择器匹配的结果合并后一起返回 jQuery对象数组 * 匹配页面的所有元素，包括html，body，head等 jQuery对象数组

<html>  <head>    <meta charset="utf-8">    <title>jQuery基本选择器</title>    <script type="text/javascript" src="js/jquery-1.x.js"> </script>  </head>  <body>    <div id="idDiv">DOM对象与jQuery对象的相互转化</div>    <div class="classDiv">jQuery对象不能直接使用DOM对象的方法，</div>    <div class="classDiv">但可以通过将jQuery对象转换成DOM对象后再调用其方法。</div>    <span class="classSpan">基本选择器是jQuery中最常用的选择器</span>    <script type="text/javascript">        $(function(e){            $("#idDiv").css("color","blue");            $(".classDiv").css("background-color","#dddddd");            $("span").css("background-color","gray").css("color","white");            $("*").css("font-size","20px");            $("#idDiv,.classSpan").css("font-style","italic");        });    </script>  </body></html>

2. 层次选择器

选择器描述返回值 $("ancetor descendant") 选取ancestor元素中的所有子元素 jQuery对象数组 $("parent>child") 选取parent元素中的直接子元素 jQuery对象数组 $("prev+next") 选取紧邻prev元素之后的next元素 jQuery对象数组 $("prev~siblings") 选取prev元素之后的siblings兄弟元素 jQuery对象数组

<html>  <head>    <meta charset="utf-8">    <title>jQuery层次选择器</title>    <script type="text/javascript" src="js/jquery-1.x.js"> </script>  </head>  <body>    <div>        搜索条件<input name="search" />        <form>          <label>用户名:</label>          <input name="useName" />          <fieldset>              <label>密　码:</label>              <input name="password" />         </fieldset>        </form>        <hr/>        身份证号：<input name="none" /><br/>        联系电话：<input name="none" />    </div>    <script type="text/javascript">        $(function(e){            $("form input").css("width","200px");            $("form > input").css("background","pink");            $("label + input").css("border-color","blue");            //$("label").next("input").css("border-color","blue");            $("form ~ input").css("border-bottom-width","8px");            //$("form").nextAll("input").css("border-bottom-width","4px");            $("*").css("padding-top","3px");        });    </script>  </body></html>

效果图

更多技术文章请访问我的个人博客http://www.rainweb.site

0 0