jQuery基本选择器（二）

1.基本选择器

1.选择器就是定位条件，用来通过jQuery函数定位满足条件的dom对象。  

名称 语法 作用
id选择器 $("#id名") 通过id定位dom对象，id值在本页中是唯一值
class选择器 $(".class样式名") class表示CSS中的样式，用来定位dom对象
标签选择器 $("标签名称") 通过标签名称定位dom对象

 

 

 

 

 

2.示例

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <style type="text/css">
      div{
        background: gray;
        width: 200px;
        height: 100px;
      }
    </style>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
      function fun1(){
        var obj = $("#one"); // id选择器
        obj.css("background","red");
      }

      function fun2(){
        var obj = $(".two"); // 样式选择器
        obj.css("background","green");
      }

      function fun3(){
        var obj = $("span"); // 标签选择器
        obj.css("background","yellow");
      }

      function fun4(){
        var obj = $("#one,span"); // 标签选择器
        obj.css("background","orange");
      }
    </script>
  </head>
  <body>
    <div id="one">我是one的div</div><br/>
    <div class = "two">我是样式是two的div</div><br/>
    <div>我是没有id、class的div</div><br/>
    <span>我是span标签</span><br/>
    <input type="button" value = "获取id是one的dom对象" onclick="fun1()">
    <input type="button" value = "使用class样式获取dom对象" onclick="fun2()">
    <input type="button" value = "使用标签名称获取dom对象" onclick="fun3()">
    <input type="button" value = "混合选择器" onclick="fun4()">

  </body>
</html>

2.表单选择器
1.表单选择器的目的是为了更加容易的操作表单。它是根据元素的类型来定义的。
2.该方法无论是否存在表单（form）均可做出相应选择。
3.使用<input>标签的type属性值，来定位dom对象的方式
4.语法格式：${":type属性值"}
    1.$(":text")：表示选取所有的单行文本框  
    2.$(":password")：表示选取所有的密码框
1.示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        function fun1(){
            alert($(":text").val());
        }

        function fun2(){
            var $obj = $(":radio");
            for(var i = 0;i < $obj.length;i++){
                var obj = $obj[i]; // 这里jQuery对象转成了dom对象
                alert(obj.value);  // 所以使用value方法
            }
        }

        function fun3(){
            var $obj1 = $(":checkbox");
            for(var i = 0;i < $obj1.length;i++){
                var obj1 = $obj1[i];
                alert(obj1.value);
            }
        }
    </script>
</head>
<body>
    <input value="我是文本框"><br/>
    <input type="radio"value="man">男<br/>
    <input type="radio" value="woman">女<br/>
    <input type="checkbox" value="bike">骑行<br/>
    <input type="checkbox" value="swim">游泳<br/>
    <input type="checkbox" value="smoke">抽烟<br/>
    <input type="button" value="读取text的值" onclick="fun1()">
    <input type="button" value="读取radio的值" onclick="fun2()">
    <input type="button" value="读取checkbox的值" onclick="fun3()">
</body>
</html>
posted @ 2021-03-01 16:19  兵长砍猴  阅读(67)  评论(0)    收藏  举报