jQuery基本选择器LOGIN

jQuery基本选择器

初学jQuery,为了更好的系统学习好jQuery,今天特意把自己学习心得归纳一下,贴上来与初学者共进退,今天我主要总结的是jQuery的基本选择器。

jQuery的基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它主要是通过元素的ID,CLASS,元素的标签ELEMENT等来查找HTML中的DOM元素。在网页中,每一个id名称只能使用一次,class允许重复使用。在jQury应用中,可以使用这些基本选择器来完成绝大多数的工作,下面我们主要来看看其具体的实现过程。为了更好的学习,我们先在这里列出一个HTML标签代码:

<div id="mydiv">
    <div class="mini">我是一个名为mini的div标签</div>
    <div class="mini">我是一个名为mini的div标签</div>
    <div class="mini">我是一个名为mini的div标签</div>
    <p>我是一个段落p标签</p>
    <span>我是一个行内span标签</span>
<div>

接着我们分别来看看这几种基本选择器的应用

一、ID选择器

选择器:#id

描述:根据给定的id匹配一个元素

返回:单个元素

示例:

<script type="text/javascript">    $(document).ready(function(){
        //id选择器        $("#mydiv").css("background","#f96");
     });</script>

 

功能:改变id为mydiv的元素的背景色

二、class选择器

选择器:.class

描述:返回给定的类名匹配的元素

返回: 集合元素

示例:

<script type="text/javascript">    $(document).ready(function(){
        //class选择器        $(".mini").css("background","#f96");
     });</script>

功能:改变class为mini的所有元素的背景色

三、标签element

选择器:element

描述:根据给定的元素名匹配元素

返回:集合元素

示例:

<script type="text/javascript">    $(document).ready(function(){
        //element选择器        $("div").css("background","#f96");
     });</script>

功能:改变元素名是<div>的所有元素的背景色

四、所有元素*

选择器:*

描述:改变匹配的所有html标签元素

返回值:集合元素

示例:

<script type="text/javascript">    $(document).ready(function(){
        //*选择器        $("*").css("background","#f96");
     });</script>

功能:改变所有html元素标签的背景色

五、selector1、selector2、....selectorN

选择器:selector,selector2,...selectorN

描述:将每一个选择器匹配到的元素合并后一起返回

返回:集合元素

示例:

<script type="text/javascript">    $(document).ready(function(){
        //selector1,selector2,...selectorN选择器        $(".mini,p").css("background","#f96");
     });</script>

功能:改变class名为mini和段落p元素的背景色

nächsten Abschnitt
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> div { width: 100px; height: 90px; float: left; padding: 5px; margin: 5px; background-color: #EEEEEE; } </style> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <div id="aaron"> <p>id="aaron"</p> <p>选中</p> </div> <div id="imooc"> <p>id="php中文网"</p> <p>jQuery选中</p> </div> <div id="imooc"> <p>id="php中文网"</p> <p>jQuery未选中</p> </div> <script type="text/javascript"> //通过原生方法处理 var div = document.getElementById('aaron'); div.style.border = "3px solid blue"; </script> <script type="text/javascript"> //通过jQuery直接传入id //id的唯一,只选择到了第一个匹配的id为php中文网的div节点 $("#imooc").css("border", "3px solid red"); </script> </body> </html>
einreichenCode zurücksetzen
KapitelKursunterlagen