jQuery学习--操作入门（遍历dom对象值）

最新推荐文章于 2021-07-14 20:03:29 发布

刘远山

最新推荐文章于 2021-07-14 20:03:29 发布

阅读量181

点赞数

分类专栏：前端专题学习汇总

本文链接：https://blog.csdn.net/weixin_39218464/article/details/105906222

版权

前端专题学习汇总专栏收录该内容

67 篇文章 1 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
用户名:<input type="text" id="userName" value="admin"/></br>
---------------------------------------------------------
<input type="checkbox" id="checkAll"/>全选</br>
  <input type="checkbox" name="box" value="1"/>1</br>
  <input type="checkbox" name="box" value="2"/>2</br>
  <input type="checkbox" name="box" value="3"/>3</br>
  <input type="checkbox" name="box" value="4"/>4</br>
  <input type="checkbox" name="box" value="5"/>5</br>
  <input type="checkbox" name="box" value="6"/>6</br>
  <input type="checkbox" name="box" value="7"/>7</br>
  <input type="checkbox" name="box" value="8"/>8</br>
</body>
<script type="text/javascript" src="jquery-3.5.0.min.js"></script>
<script>
    //1.window.onload = function(){}//表示当js加载完后会自动执行该函数
    //回调函数callback,当js加载完成后自动执行该函数
    $(function () {
    });
    //2.jQuery([selector,[context]])：  selector:选择器     context：上下文（可有可无），如果不指定    默认是当前文档
    $(function () {
        //通过id选择器获取一个 jQuery对象
        var jQueryObj = $("#userName");
//             alert("jQueryObj:"+jQueryObj+"  value:"+jQueryObj.val());
        //获取dom对象
        var domObj = document.getElementById("userName");
//            alert("domObj："+domObj+" value:"+domObj.value);

        //将 dom对象 转成jQuery对象    var jQuery对象 = $(dom对象);
        var jQobj = $(domObj);
//             alert(jQobj.val());

        /*
           将jQuery对象转成dom对象
             1）get() 获取所有的dom元素
             2）get(0) : 获取其中一个dom元素.
             3 )get()[0]:获取一个
             4）toArray()[0]
         */
        var dObj1 = jQueryObj.get(0);
//        alert(dObj1.value);
        var dObj3 = jQueryObj.toArray()[0];//对象转数组取下标
//             alert(dObj3);

        //使用属性选择器获取 所有的 name=box的checkbox
        var boxes = $("input[name='box']");
        //获取元素的个数
//        alert(boxes.length);

        //将jQuery对象转成dom对象
        var boxes1 = boxes.get()[0];
//        alert(boxes1.value);

        //for遍历相当于jQuery中的each()函数
        for(var i =0; i<boxes.length;i++){
            //千万要注意  boxes[i] 不是jQuery对象，通过打印发现boxes[i]是dom对象
//            alert(boxes[i].value+'==='+$(boxes[i]).val());
        }

        boxes.each(function(index,domObj){
            //此处的index表示索引     domObj表示一个dom对象   this也代表dom对象     domObj == this
            alert(index+"==="+domObj.value+"==="+this.value);
        })
    });

</script>
</html>