jQuery操作元素和元素节点的方法

操作元素样式

设置单个样式值

设置多个样式值

toggleClass(类名值); 原来没有就是增加，有就是移除

hasClass(类名值); 判断是否有类名

操作内容

选项卡案例

操作元素的属性

prop(attr,[val]); 操作表单元素的布尔值

removeProp(attr);

美女画廊案例（点击a标签小图片在下方显示对应的大图片）

操作元素样式

设置单个样式值

// css(attr,val);
        $("div").css("backgroundColor","red");
        // $("div").css("backgroundColor","yellow");

设置多个样式值

 // 
        // css({attr:val,...});
        $("div").css({
            fonSize:"36px",
            height:400,
            border:"1px solid blue"
        });

获取单个

  // 
         css(attr);
         console.log($("div").css("width"));
         console.log($("div").css("height"));

获取多个

  // 
        // css([attr,attr1,...]);
        // 返回值：对象{属性:值,...}
        console.log($("div").css(["width","height","border"]));
        console.log($("div").css(["width","height","border"]).width);

操作元素类名

增加：addClass(类名值);
删除：removeClass(类名值);
toggleClass(类名值); 原来没有就是增加，有就是移除
hasClass(类名值); 判断是否有类名

 // addClass(类名值);
        $("button").eq(0).click(function () {
            $("div").addClass("box box1 box2");
        });
        // removeClass(类名值);
        $("button").eq(1).click(function () {
            $("div").removeClass("box2");
        });

        // toggleClass(类名值);  原来没有就是增加，有就是移除
        $("button").eq(2).click(function () {
            $("div").toggleClass("box2");
        });


        // hasClass(类名值);  
        $("button").eq(3).click(function () {
            var res = $("div").hasClass("box2");
            console.log(res);
        });

操作内容

普通闭合标签

给值就是设置，不给就是获取

html([val]); 可以识别标签

text([val]);

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <input type="text" />
    <input type="text" />
    <input type="checkbox" />
    <input type="checkbox" />
    <select name="" id="">
        <option value="a">1</option>
        <option value="b">2</option>
        <option value="c">3</option>
    </select>
    <script src="./js/jquery.1.12.4.js"></script>
    <script>
        // 普通闭合标签
        // 给值就是设置，不给治就是获取
        // html([val]);    可以识别标签
        // text([val]);

        // 设置
        // 内置迭代
        $("ul li").html("<a href='https://www.baidu.com'>hello</a>");
        // $("ul li").text("<a href='https://www.baidu.com'>hello</a>");


        // 获取
        // 如果多个元素匹配只能获取这个集合中的第一个 
        console.log($("ul li").html());

        // 获取到的是文本  将文本拼接成一个字符串
        console.log($("ul li").text());//hellohellohellohellohello




        // 表单元素
        // 设置
        $("input[type=text]").val("hello world");
        // $("select option").val("test");//优先设置value值


        // 获取  
        // 如果多个元素匹配只能获取这个集合中的第一个 
        // 优先获取value值没有value值获取内容值
        console.log($("input[type=text]").val());
        console.log($("select option").val());

        // console.log( $("select option").html());
        // console.log( $("select option").text());

选项卡案例

<script src="./js/jquery.1.12.4.js"></script>
    <script>
        //功能：点击那个li就显示对应div内容
        $(function () {
            // 获取元素
            var $oLis = $("#tab li");
            var $oDivs = $("#tab div");


            // 绑定事件
            $oLis.click(function () {
                $(this).addClass("active").siblings().removeClass("active");
                var index = $(this).index();
                $oDivs.eq(index).addClass("active").siblings("div").removeClass("active");
            });

        });
    </script>
</head>

<body>
    <div id="tab" class="tab">
        <ul>
            <li class="active">HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
        <div class="active">HTML内容</div>
        <div>CSS内容</div>
        <div>JavaScript内容</div>
    </div>

操作元素的属性

给值就是设置,不给值就会获取除了操作表单元素的布尔值都用attr

// attr(attr,[val]);   
        // 获取
        console.log($("div").attr("class"));
        console.log($("div").attr("hello"));
        console.log($("div").attr("hello"));

        console.log($("input:text").attr("name"));
        console.log($("input:text").attr("test"));

        console.log($("input:checkbox").attr("checked")); //undefined /  checked

        // 设置
        $("div").attr("truSrc", "哈喽");
        $("input:text").attr("truSrc", "哈喽");


        // removeAttr(attr);//移除
        $("div").removeAttr("hello");
        $("input:text").removeAttr("truSrc");

prop(attr,[val]); 操作表单元素的布尔值

removeProp(attr);

  // 获取
        console.log($("input:checkbox").prop("checked")); 

        // 设置
        // $("input:checkbox").prop("checked",false);


        // removeProp(attr);
        $("input:checkbox").removeProp("checked");

美女画廊案例（点击a标签小图片在下方显示对应的大图片）

<body>
  <h2>
    美女画廊
  </h2>

  <ul id="picture">
    <li><a href="images/1.jpg" title="美女1">
        <img src="images/1-small.jpg" width="100" />
      </a></li>
    <li><a href="images/2.jpg" title="美女2">
        <img src="images/2-small.jpg" width="100" />
      </a></li>
    <li><a href="images/3.jpg" title="美女3">
        <img src="images/3-small.jpg" width="100" />
      </a></li>
    <li><a href="images/4.jpg" title="美女4">
        <img src="images/4-small.jpg" width="100" />
      </a></li>
  </ul>
  <div style="clear:both"></div>
  <img id="image" src="images/placeholder.png" alt="" width="450px" />
  <p id="des">选择一个图片</p>
  <script src="../js/jquery.1.12.4.js"></script>
  <script>
    // 绑定事件
    $("#picture li a").click(function () {
      // 设置图片路径
      $("#image").attr("src", $(this).attr("href"));
      // 设置内容
      $("#des").text($(this).attr("title"));

      // 阻止a标签默认行为
      return false;
    });
  </script>
</body>

表格全选案例

  <script src="./js/jquery.1.12.4.js"></script>
    <script>
        // 绑定事件
        $("#j_cbAll").click(function(){
            console.log($(this).prop("checked"));
            $("#j_tb input[type=checkbox]").prop("checked",$(this).prop("checked"));
        });


        $("#j_tb input[type=checkbox]").click(function(){
            console.log( $("#j_tb input[type=checkbox]"));
            console.log( $("#j_tb input[type=checkbox]:checked"));
            // 判断  小的checkbox个数等于选中的checkbox个数 就选中
            if( $("#j_tb input[type=checkbox]").length ==$("#j_tb input[type=checkbox]:checked").length ){
                $("#j_cbAll").prop("checked",true);
            }else{
                $("#j_cbAll").prop("checked",false);
            }
        });
    </script>

元素节点的操作

元素的创建

     // document.createElement("tagName");
        // document.createTextNode("text值");


        // 字符串 选择器
        // 标签字符串：创建元素
        var $div = $("<div>我是div</div>");
        console.log($div);

元素的添加

   // 操作已经存在的元素会发生物理偏移
        var $li = $("<li class='test'>测试</li>");

        // 父元素.append(content);  在父元素的末尾进行添加
        $("ul#test").append($li);

        // 子元素.appendToz(父元素); 在父元素的末尾进行添加
        $li.appendTo($("#test"));
        $li.appendTo("#test");


        var $h2 = $("<h2>我是h2</h2>");
        // 父元素.prepend(content); 在父元素的开头进行添加
        $("ul#test").prepend($h2);
        // 子元素.prependTo(父元素); 在父元素的开头进行添加
        $("ul li:eq(2)").prependTo("#test");

元素的插入

   // 操作已经存在的元素会发生物理偏移

        var $li = $("<li class='test'>测试</li>");
        // // 参数元素.after(插入元素);  在参考元素之后进行插入
        // $("ul li:eq(1)").after($li);

        // 插入元素.insertAfter(参考元素);  在参考元素之后进行插入
        $("ul li:eq(0)").insertAfter($("ul li:last"));


        var $li = $("<li class='test'>测试</li>");
        // 参数元素.before(插入元素);  在参考元素之前进行插入
        $("ul li:eq(1)").before($li);

        // 插入元素.insertBefore(参考元素);  在参考元素之前进行插入
        $("ul li:eq(0)").insertBefore($("ul li:last"));

元素的替换

 <ul id="test">
        <li><span>1</span></li>
        <li><span>2</span></li>
        <li><span>3</span></li>
        <li><span>4</span></li>
    </ul>
    <script src="../js/jquery.1.12.4.js"></script>
    <script>
        // 将匹配元素进行替换
        $("ul li span").replaceWith(function(index,val){
            console.log(val,index);
            return "<a>"+(index+1)+"</a>"
        });
    </script>

元素的包裹

  <script>
        // 在不破坏原来的结构基础上 改变结构
        //将匹配的元素进行包裹
        $("ul li").wrap("<div></div>");



        // 将匹配元素整体进行包裹
        $("ul").wrapAll("<div class='wrap'></div>");


        // 将匹配元素的内容进行包裹
        $("ul li").wrapInner("<a href='http://www.mi.com'></a>");
    </script>

  <body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script src="../js/jquery.1.12.4.js"></script>
    <script>
        // 在不破坏原来的结构基础上 改变结构
        //将匹配的元素进行包裹
        $("ul li").wrap("<div></div>");



        // 将匹配元素整体进行包裹
        $("ul").wrapAll("<div class='wrap'></div>");


        // 将匹配元素的内容进行包裹
        $("ul li").wrapInner("<a href='http://www.mi.com'></a>");
    </script>
</body>

元素的删除

 // remove();  
        // 返回值：删除返回删除的那个jQuery对象 
        // 删除完成不保留事件

        $("ul li").click(function () {
            var $res = $(this).remove();
            console.log($res);

            // 添加到ul中
            $("ul").append($res);
        });



        // detach();
        // 返回值：删除返回删除的那个jQuery对象 
        // 删除完成保留事件

        $("ul li").click(function () {
            var $res = $(this).detach();
            console.log($res);

            // 添加到ul中
            $("ul").append($res);
        });

元素的克隆

      // clone([false]);  
        // 默认值是false,不克隆自身带有的事件比如点击等等
        // true,将事件一起克隆

        $("ul li").click(function () {
            var $res = $(this).clone();
            console.log($res);

            // 添加到ul中
            $("ul").append($res);
        });




        $("ul li").click(function () {
            var $res = $(this).clone(true);
            console.log($res);

            // 添加到ul中
            $("ul").append($res);
        });

城市选择


    <select multiple id="sourceCity">
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
    </select>
    <div>
        <button>></button>
        <button>>></button>
        <button>
            <</button> <button>
                <<</button> </div> <select multiple id="tarCity">
                    </select>
                    <script src="./js/jquery.1.12.4.js"></script>
                    <script>
                        $("button").eq(0).click(function () {
                            $("#sourceCity option:selected").prependTo("#tarCity");
                        });


                        $("button").eq(1).click(function () {
                            $("#sourceCity option").prependTo("#tarCity");
                        });


                        $("button").eq(2).click(function () {
                            $("#tarCity option:selected").prependTo("#sourceCity");
                        });


                        $("button").eq(3).click(function () {
                            $("#sourceCity").append($("#tarCity option"));
                        });
                    </script>

jQuery操作元素和元素节点的方法

操作元素样式

设置单个样式值

设置多个样式值

获取单个

获取多个

操作元素类名

增加：addClass(类名值);

删除：removeClass(类名值);

toggleClass(类名值); 原来没有就是增加，有就是移除

hasClass(类名值); 判断是否有类名

操作内容

选项卡案例

操作元素的属性

prop(attr,[val]); 操作表单元素的布尔值

removeProp(attr);

美女画廊案例（点击a标签小图片在下方显示对应的大图片）

表格全选案例

元素节点的操作

元素的创建

元素的添加

元素的插入

元素的替换

元素的包裹

元素的删除

元素的克隆

城市选择

猜你喜欢