jQuery-初识③

jQuery的选择器

jQuery_1.4_API中文版（手册）

一.ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的封装原理</title>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        //id选择器
        function testId() {
            var inp = $("#uname");
            alert(inp);
        }
    </script>
</head>
<body>
    <h3>jQuery选择器</h3>
    <input type="button" name="" id="" value="测试ID" onclick="testId()">
    <hr>
    用户名:<input type="text" name="uname" id="uname" value="">
</body>
</html>

——————————————————————————————————————————————————————————————————————————————————————————————————————————
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的封装原理</title>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        //id选择器
        function testId() {
            var inp = $("#uname");
            alert(inp.val());
        }
    </script>
</head>
<body>
    <h3>jQuery选择器</h3>
    <input type="button" name="" id="" value="测试ID" onclick="testId()">
    <hr>
    用户名:<input type="text" name="uname" id="uname" value="张三">
</body>
</html>

————————————————————————————————————————————————————

二.标签（元素）选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的封装原理</title>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        //标签选择器
        function testEle() {
            var inps = $("input");
            alert(inps);
            alert(inps.length);
        }
    </script>
</head>
<body>
    <h3>jQuery选择器</h3>
    <input type="button" name="" id="" value="测试标签选择器" onclick="testEle()">
    <hr>
    用户名:<input type="text" name="uname" id="uname" value="张三">
</body>
</html>

数组的长度为2

——————————————————————————————————————————————————————

三.类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的封装原理</title>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        //类选择器
        function testClass(){
            var inps = $(".common");
            alert(inps);
            alert(inps.length);//数组可以.length
        }
    </script>
    <style type="text/css">
        .common{}
    </style>
</head>
<body>
    <h3>jQuery选择器</h3>
    <input type="button" name="" id="" value="测试标签选择器" onclick="testEle()" class="common">
    <input type="button" name="" id="" value="测试类选择器" onclick="testClass()">

    <hr>
    用户名:<input type="text" name="uname" id="uname" value="张三" class="common">
</body>
</html>

四.混合选择器

<script type="text/javascript">
    //测试子选择器
    function testChild() {
        var inps = $("div>input");
        alert(inps.length);
    }

</script>
<style type="text/css">
    .common{}
    #showdiv{
        width: 300px;
        height: 300px;
        border: solid 2px orange;
    }
</style>

<input type="button" name="" id="" value="测试子选择器" onclick="testChild()">
<hr>
<div id="showdiv">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
</div>

//测试子选择器
//指定某一div下的input元素
function testChild() {
    var inps = $("#showdiv>input");
    alert(inps.length);
}

__________________________________________________________________________________________

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的封装原理</title>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        //类选择器
        function testClass(){
            var inps = $(".common");
            alert(inps);
            alert(inps.length);//数组可以.length
            //组合选择器
            function testAll() {
                var eles = $("h3,input");
                alert(eles);
            }
        }
        //测试子选择器
        //指定某一div下的input元素
        function testChild() {
            var inps = $("#showdiv>input");
            alert(inps.length);
        }
        //测试层级选择器
        function testCj() {
            var inp = $("input:first");
            alert(inp.val());
        }
    </script>
    <style type="text/css">
        .common{}
        #showdiv{
            width: 300px;
            height: 300px;
            border: solid 2px orange;
        }
    </style>
</head>
<body>
    <h3>jQuery选择器</h3>
    <input type="button" name="" id="" value="测试标签选择器" onclick="testEle()" class="common">
    <input type="button" name="" id="" value="测试类选择器" onclick="testClass()">
    <input type="button" name="" id="" value="测试子选择器" onclick="testChild()">
    <input type="button" name="" id="" value="测试层级选择器" onclick="testCj()">

    <hr>
    <!--用户名:<input type="text" name="uname" id="uname" value="张三" class="common">-->
    <div id="showdiv">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
    </div>
</body>
</html>

_______________________________________________________________________________________________

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的封装原理</title>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
      function testCj2() {
          var tds = $("td");
          alert(tds.length);
      }
    </script>
</head>
<body>
    <h3>jQuery选择器</h3>
    <input type="button" name="" id="" value="测试层级选择器" onclick="testCj2()">
    <table border="1px" height="300px">
        <tr>
            <td width="100px"></td>
            <td width="100px"></td>
            <td width="100px"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

现在要去除width=100的td

<script type="text/javascript">
  function testCj2() {
      var tds = $("td:not(td[width])");
      alert(tds.length);
  }
</script>

————————————————————————————————————————————————————————

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的封装原理</title>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
      function testCj2() {
          var tds = $("td:not(td[width])");
          alert(tds.html());
      }
    </script>
</head>
<body>
    <h3>jQuery选择器</h3>
    <input type="button" name="" id="" value="测试层级选择器-not" onclick="testCj2()">
    <table border="1px" height="300px">
        <tr>
            <td width="100px"></td>
            <td width="100px"></td>
            <td width="100px"></td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>
</body>
</html>

jQuery的选择器

猜你喜欢