Jquery基础学习笔记(1)

全栈程序员-用户IM • 2021年7月30日下午10:00 • 未分类

此笔记只是作为本人学习JQuery的随手笔记,稍微做了一下整理,希望对新人有参考价值。

　　1、属性：为所有匹配的元素设置一个计算的属性值

//为所有的input添加属性class=”btn”
//$(“input”).attr(“class”,”btn”);

    2、CSS：为每个匹配的元素添加指定的类名
            //对所有的提交按钮添加样式
            $(“input:submit”).addClass(“btn”);

   3、值：获得第一个匹配元素的当前值
            //取的某一按钮的值
            //alert($(“#Button1”).val());

   4、Html代码：取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
            //输出div之间的html代码
            //alert($(“#div1”).html());

            //对Div中的html重新赋值
            //$(“#div1”).html(“<input type=’text’/>”);

5、文本：取得所有匹配元素的内容。

结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

            //输出div之间的文本值
            //alert($(“#div1”).text());

            //对div中的文本重新赋值
            //$(“#div1”).text(“100”);

        6、   //单选按钮选中
            $(“#select1”).val(“选项2″);
//            if( $(“#select1”).val()==’选项2′)
//            {

//                alert(“你选择了选项2″);
//            }

7、将一个或多个DOM元素转化为jQuery对象
            //设置页面背景色
            $(document.body).css(“background”,”#c0c0c0″);

            //隐藏一个表单中所有元素【不可用】
            //$(div.elements).hide();

  8、each用法以每一个匹配的元素作为上下文来执行一个函数
//            $(“button”).click(function () {
//                $(“div”).each(function (index, domEle) {
//                // domEle == this
//                $(domEle).css(“backgroundColor”, “yellow”);
//                if ($(this).is(“#stop”)) {
//                $(“span”).text(“Stopped at div index #” + index);
//                return false;
//                }
//                });
//                });

9、这个函数的返回值与 jQuery 对象的‘length’ 属性一致
            //button的个数
            //alert($(“input:submit”).size()+” and “+$(“input:submit”).length);

   10、   取得所有匹配的 DOM 元素集合
            //alert($(“input”).get().reverse());
            //取得其中一个匹配的元素。 num表示取得第几个匹配的元素
            //alert($(“input”).get(1));