jQuery操作基本操作二学习笔记

基本访问与工具

用法 描述
empty()
删除匹配的元素集合中所有的子节点。
each() 以每一个匹配的元素作为上下文来执行一个函数;每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素。

jQuery.each() 通用例遍方法,可用于例遍对象和数组

jQuery.trim() 去掉字符串起始和结尾的空格。
$.trim(" hello, how are you? ");去掉字符串起始和结尾的空格。

focus() 定焦或当元素获得焦点时,触发 focus 事件

<script src="../../static/js/jquery-3.3.1.js"></script>
 <script type="text/javascript">
        $(document).ready(function(){
            // console.log("加载");
            $("#btn0").click(function () {
                alert($("#input1").text())
                //alert("dd");
            });
            //清空
            $("#btn1").click(function () {
                $("#select").empty();
                //alert("dd");
            });
            //遍历
            $("#btn2").click(function () {
                //遍历就是
               $("input[type='text']").each(function (index, input) {
                   alert($(input).val());
                   console.log($(input).val());
               })
            });
            //$.each()遍历数组
            $("#btn3").click(function () {
              var array = [1,2,true,"hi"];
              $.each(array,function (i, obj) {
                  alert(obj);
              })
            });
            //focus()定焦到输入框2
            $("#btn4").click(function () {
                $("#input2").focus();
            });
            //$.trim()输入框中是否空字符串
            $("#btn5").click(function () {
                var str = $("#input1").val();
                alert(str.length);
                alert(str.trim().length);

            })
        });
    </script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style>
        .divClass{
            text-align: center;
            width: 100%;
        }
    </style>
  </head>

  <body>
  <div class="divClass">
    <br>

    <input type="text" id="input1" value="输入框1"  title="div 的 title属性值" ><br><br>
    <input type="text" id="input2"   value="输入框2"><br><br>
      <input type="button" value="清空select_文本" id="btn0"><br><br>
    <select id="select">
        <option>Java</option>
        <option>IOS</option>
        <option>UI</option>
    </select>

      <br>
    <input type="button" value="empty()清空select" id="btn1">
    <br><br>
    <input type="button" value="each()遍历所有输入框的值" id="btn2">
    <br><br>
    <input type="button" value="$.each()遍历数组" id="btn3">
    <br><br>
    <input type="button" value="focus()定焦到输入框2" id="btn4">
    <br><br>
    <input type="button" value="$.trim()输入框中是否空字符串" id="btn5">
    </div>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在,都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多程序园信息
开发小院