10--JQuery基础代码

        $(function () {
            var html1 = $("div p a").html();//-----> 标题标签
            var szhtml1 = $("div p a").html("<div id="mydiv">标题标签szhtml3</div>");//-----><div id="mydiv"><p><a href="#">标题标签szhtml1</a></p></div>
            var html2 = $("div p").html();//----->   <a href="#">标题标签</a>
   //var szhtml2 = $("div p").html("标题标签szhtml5");//-----><div id="mydiv"><p>标题标签szhtml5</p></div>
            var html3 = $("div").html();//----->     <p><a href="#">标题标签</a></p>
   //var szhtml3 = $("div").html("标题标签szhtml3");//-----><div id="mydiv">标题标签szhtml3</div>

   //设置内容同上面一样,
   var text1 = $("div p a").text();//-----> 标题标签
            var text2 = $("div p").text();//----->   标题标签
            var text3 = $("div").text();//----->    标题标签

            var text1 = $("#myinput").val("王成喜");//-----> 标题标签
            //等价于<input id="myinput" type="text" name="username" value="王成喜" /><br />
            alert(html3);

});

    </script>

<script type="text/javascript">
  //固有属性用 prop()
  //自定义属性用：attr()
        $(function () {
            //获取北京节点的name属性值
            var attr1 = $("#bj").attr("name");//--->beijing
            alert(attr1);
            //设置北京节点的name属性的值为dabeijing
            var attr2 = $("#bj").attr("name", "dabeijing");//--->dabeijing
            var attr3 = $("#bj").attr("name");//--->dabeijing
            alert(attr3);//--->dabeijing
            //新增北京节点的discription属性属性值是didu
            $("#bj").attr("discription", "didu");//--->dabeijing
            //<li id="bj" name="dabeijing" xxx="yyy" discription="didu">北京</li>
            //删除北京节点的name属性并检验name属性是否存在
            $("#bj").removeAttr("name");
            //<li id="bj" xxx="yyy" discription="didu">北京</li>
            //获得hobby的的选中状态
   var prop = $("#hobby").prop("checked");
   alert(prop);
            //var checked = $("#hobby").attr("checked"); //获取不到，弹出undefined

});

</script>

            function selectAll(obj){
                //获取下边的复选框
    $(".itemSelect").prop("checked",obj.checked);
            }

  </script>

  <script>
        //需求：点击qq表情，将其追加到发言框中
        $(function () {
            //1.给img图片添加onclick事件
            $("ul img").click(function(){
                //2.追加到p标签中即可。
                $(".word").append($(this).clone());
            });

});

</script>

<script>

   //需求：实现下拉列表选中条目左右选择功能

   $(function () {
    //toRight
    $("#toRight").click(function () {
     //获取右边的下拉列表对象，append(左边下拉列表选中的option)
     $("#rightName").append($("#leftName > option:selected"));
                });

                //toLeft
                $("#toLeft").click(function () {
                    //appendTo   获取右边选中的option，将其移动到左边下拉列表中
     $("#rightName > option:selected").appendTo($("#leftName"));

                });
            });

</script>

});

</script>

<script type="text/javascript">
  $(function () {
   // <input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/>
   $("#b1").click(function () {
    $("div[title]").css("backgroundColor","pink");
            });
   // <input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/>
            $("#b2").click(function () {
                $("div[title='test']").css("backgroundColor","pink");
            });
   // <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/>
            $("#b3").click(function () {
                $("div[title!='test']").css("backgroundColor","pink");
            });
   // <input type="button" value=" 属性title值以te开始的div元素背景色为红色" id="b4"/>
            $("#b4").click(function () {
                $("div[title^='te']").css("backgroundColor","pink");
            });
   // <input type="button" value=" 属性title值以est结束的div元素背景色为红色" id="b5"/>
            $("#b5").click(function () {
                $("div[title$='est']").css("backgroundColor","pink");
            });
   // <input type="button" value="属性title值含有es的div元素背景色为红色" id="b6"/>
            $("#b6").click(function () {
                $("div[title*='es']").css("backgroundColor","pink");
            });
   // <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/>
            $("#b7").click(function () {
                $("div[id][title*='es']").css("backgroundColor","pink");
            });

        });


</script>


   <script type="text/javascript">
  $(function () {
            // <input type="button" value="改变 id 为 one 的元素的背景色为红色" id="b1"/>
   $("#b1").click(function () {
    $("#one").css("backgroundColor","pink");
            });

            // <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为红色" id="b2"/>
            $("#b2").click(function () {
                $("div").css("backgroundColor","pink");
            });

            // <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为红色" id="b3"/>
            $("#b3").click(function () {
                $(".mini").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色" id="b4"/>
            $("#b4").click(function () {
                $("span,#two").css("backgroundColor","pink");
            });
        });

</script>

      <script type="text/javascript">

  $(function () {
   // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
   $("#b1").click(function () {
    $("input[type='text']:enabled").val("aaa");
            });
   // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
            $("#b2").click(function () {
                $("input[type='text']:disabled").val("aaa");
            });
   // <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数" id="b3"/>
            $("#b3").click(function () {
                alert($("input[type='checkbox']:checked").length);
            });
   // <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4"/>
            $("#b4").click(function () {
                alert($("#job > option:selected").length);
            });

});

</script>

<script type="text/javascript">

  $(function () {
            // <input type="button" value=" 改变第一个 div 元素的背景色为红色" id="b1"/>
   $("#b1").click(function () {
    $("div:first").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变最后一个 div 元素的背景色为红色" id="b2"/>
            $("#b2").click(function () {
                $("div:last").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为红色" id="b3"/>
            $("#b3").click(function () {
                $("div:not(.one)").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为红色" id="b4"/>
            $("#b4").click(function () {
                $("div:even").css("backgroundColor","pink");
            });

            // <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为红色" id="b5"/>
            $("#b5").click(function () {
                $("div:odd").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为红色" id="b6"/>
            $("#b6").click(function () {
                $("div:gt(3)").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为红色" id="b7"/>
            $("#b7").click(function () {
                $("div:eq(3)").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为红色" id="b8"/>
            $("#b8").click(function () {
                $("div:lt(3)").css("backgroundColor","pink");
            });
            // <input type="button" value=" 改变所有的标题元素的背景色为红色" id="b9"/>
            $("#b9").click(function () {
                $(":header").css("backgroundColor","pink");
            });

});

</script>

   $(function () {
                // 获取myinput 的value值
    //var value = $("#myinput").val();
    //alert(value);
                //$("#myinput").val("李四");
                // 获取mydiv的标签体内容
    //var html = $("#mydiv").html();
    //alert(html);
                //$("#mydiv").html("<p>aaaa</p>");
                // 获取mydiv文本内容
                //var text = $("#mydiv").text();
                //alert(text);
                $("#mydiv").text("bbb");

});

  </script>


  <script type="text/javascript">
  $(function () {
            //获取北京节点的name属性值
   var name = $("#bj").attr("name");
   //alert(name);
            //设置北京节点的name属性的值为dabeijing
            $("#bj").attr("name","dabeijing");
            //新增北京节点的discription属性属性值是didu
            $("#bj").attr("discription","didu");
            //删除北京节点的name属性并检验name属性是否存在
            $("#bj").removeAttr("name");
            //获得hobby的的选中状态
   var checked = $("#hobby").prop("checked");
   alert(checked);

//var checked = $("#hobby").attr("checked"); //获取不到，弹出undefined

});

</script>

<script type="text/javascript">

  $(function () {
            //<input type="button" value="采用属性增加样式(改变id=one的样式)" id="b1"/>
   $("#b1").click(function () {
    $("#one").prop("class","second");
            });
            //<input type="button" value=" addClass" id="b2"/>
            $("#b2").click(function () {
                $("#one").addClass("second");
            });
            //<input type="button" value="removeClass" id="b3"/>
            $("#b3").click(function () {
                $("#one").removeClass("second");
            });
            //<input type="button" value=" 切换样式" id="b4"/>
            $("#b4").click(function () {
                $("#one").toggleClass("second");
            });
            //<input type="button" value=" 通过css()获得id为one背景颜色" id="b5"/>
            $("#b5").click(function () {
                var backgroundColor = $("#one").css("backgroundColor");
                alert(backgroundColor);

            });
            //<input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="b6"/>
            $("#b6").click(function () {
                 $("#one").css("backgroundColor","green");

});

</script>

<script type="text/javascript">

$(function () {
// <input type="button" value="将反恐放置到city的后面" id="b1"/>

    $("#b1").click(function () {
     //append
     //$("#city").append($("#fk"));
     //appendTo
                 $("#fk").appendTo($("#city"));
             });
             // <input type="button" value="将反恐放置到city的最前面" id="b2"/>
             $("#b2").click(function () {
                 //prepend
                 //$("#city").prepend($("#fk"));
                 //prependTo
                 $("#fk").prependTo($("#city"));
             });
             // <input type="button" value="将反恐插入到天津后面" id="b3"/>
             $("#b3").click(function () {
                 //after
     //$("#tj").after($("#fk"));
                 //insertAfter
                 $("#fk").insertAfter($("#tj"));

             });
             // <input type="button" value="将反恐插入到天津前面" id="b4"/>
             $("#b4").click(function () {
                 //before
                 //$("#tj").before($("#fk"));
                 //insertBefore
                 $("#fk").insertBefore($("#tj"));

});
});

</script>

   <script type="text/javascript">
$(function () {
        // <input type="button" value="删除<li id='bj' name='beijing'>北京</li>" id="b1"/>
  $("#b1").click(function () {
   $("#bj").remove();
        });
        // <input type="button" value="删除city所有的li节点   清空元素中的所有后代节点(不包含属性节点)" id="b2"/>
        $("#b2").click(function () {
            $("#city").empty();
        });
    });

</script>

版权说明

文章采用：《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
版权声明：未标注转载均为本站原创，转载时请以链接形式注明文章出处。如有侵权、不妥之处，请联系站长删除。敬请谅解！

10--JQuery基础代码

相关推荐