jQuery学习----------基础选择器

学习记录:

掌握了jQuery选择器就相当于掌握了jQuery核心

在DOM操作里面可以使用getElementById()与getElementsByTagName()两个函数进行元素的选择,但是这两个函数也仅仅只能够进行元素的选择。例如:如果说现在要想根据样式选择?或者说根据属性选择?不可能直接做到,需要进行大量的JavaScript的编程才可以实现这样的功能,而这些操作在JQuery里面可以轻松的实现

1.基础选择器
之前使用过了一个“$(ID)”这样的操作来找到某一个HTML元素,但是这样的选择器在jQuery里面还有许多,下面首先给出几个基础的选择器使用形式:
(1)#id      表示根据id匹配一个元素    返回单个元素
简化形式:$(msg).val()    标准形式:$("#msg").val()、$("#member\\.msg").val()
范例:根据id选择元素
<html>
    <head>
        <title>JQuery开发详解</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            function show(){
                //alert($(msg).val());
                alert($("#msg").val());
            }
        </script>
    </head>
    <body>
        <input type="text" name="msg" id="msg">
        <input type="button" value="显示内容" onclick="show()">
    </body>
</html>
虽然此时可以实现根据id取出置顶元素,但是会有一个限制出现,在实际的开发之中,很多的表单参数(name与id属性一致,也就是说如果参数名称是a,那么id也是a)名称上都会带有“.”,依靠“.”来实现简单java类对象属性的自动赋值操作
(2)元素名称    在一个页面里面一定会出现具备有许多重名的元素对象,此操作可以根据元素名称取出元素对象    返回元素集合
形式:$("span").attr("class","infocls");
范例:取得元素对象
**定义一个demo.css的文件,保存所需要的样式内容
.infocls{
    background:red;
    color:yellow;
    font-weight:bold;
    border:3px white solid;
}
<html>
    <head>
        <title>JQuery开发详解</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/demo.css">
        <script type="text/javascript">
            $(function(){
                $("span").attr("class","infocls");//设置属性
            });
        </script>
    </head>
    <body>
        <div>how old are you -a</div>
        <div>
            <span>how old are you -b</span>
        </div>
        <span>how old are you -c</span>
    </body>
</html>
这种操作的形式就好像直接利用了getElementsByTagName()的函数形式,不关心所有的结构层次,只关心元素的名称信息
(3).class   根据指定样式的名称找到所有元素(此时样式可能并没有定义)   返回多个元素
形式:$(".cls").attr("class","infocls")、$(".acls,.bcls").attr("class","infocls")
范例:根据样式选择元素
<html>
    <head>
        <title>JQuery开发详解</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/demo.css">
        <script type="text/javascript">
            $(function(){
                $(".cls").attr("class","infocls");//设置属性
            });
        </script>
    </head>
    <body>
        <div class="cls">how old are you -a</div>
        <div>
            <span>how old are you -b</span>
        </div>
        <span class="cls">how old are you -c</span>
        <input type="text" class="cls" value="how old are you ">
    </body>
</html>
(4) *   取得整个页面之中的所有元素对象  返回元素集合
形式:$("*").attr("class","infocls");
范例:选择所有元素
<html>
    <head>
        <title>JQuery开发详解</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/demo.css">
        <script type="text/javascript">
            $(function(){
                $("*").attr("class","infocls");//设置属性
            });
        </script>
    </head>
    <body>
        <div class="cls">how old are you -a</div>
        <div>
            <span>how old are you -b</span>
        </div>
        <span class="cls">how old are you -c</span>
        <input type="text" class="cls" value="how old are you ">
    </body>
</html>
(5)元素名称A,元素名称B,...       根据元素名称取得所有指定名称的元素对象   返回元素集合
形式:$("input,div").attr("class","infocls");
范例:取得多个元素名称的对象
<html>
    <head>
        <title>JQuery开发详解</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/demo.css">
        <script type="text/javascript">
            $(function(){
                $("input,div").attr("class","infocls");//设置属性
            });
        </script>
    </head>
    <body>
        <div>how old are you -a</div>
        <div>
            <span>how old are you -b</span>
        </div>
        <span>how old are you -c</span>
        <input type="text" value="how old are you -d">
    </body>
</html>
如果说前面的几个选择器还可以通过正常的DOM支持来实现的话,那么根据样式的选择或者是根据元素名称的选择就不能直接得到支持了,需要经过编程来实现
在使用基础选择器的过程之中,利用“,”可以区分多个选择器,但是需要强烈注意的是:不要增加无谓的空格

猜你喜欢

转载自blog.csdn.net/amuist_ting/article/details/80949267