在jQuery入门

在jQuery入门

Jquery手册中入门定义：

 

上面用红笔圈出来的就是jquery基础；很对都跟js大同小异。

 

 

最好别敲它给出来的案例。

 

Js对象和jQuery对象：

 

jQuery对象只能使用jQuery里的方法

js对象只能使用js里的方法

 

 

 

Jquery中的属性：

            每个元素都有一个或者多个特性，这些特性的用途就是给出相应元素或者其内容的附加信息。

            如：在img元素中，src就是元素的特性，用来标记图片的地址

            JavaScript中操作特性的DOM方法主要有3个，

                1.getAttribute()获取特性

                2.setAttribute()设置特性

                3.removeAttribute() 移出特性

            在jQuery中操作特性的jQuery方法:

                1.attr() 获取/设置属性

                2.removeAttr() 移出属性

            在jQuery中用一个attr()与removeAttr()就可以全部搞定了，

            jQuery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()

        */

        //1.1 attr()与removeAttr()的用法

        /*

            attr()方法的用法:

                1. $(element).attr("属性名");//获取属性名的属性值

                2. $(element).attr("属性","属性值");//设置属性的属性值

                3. $(element).attr("属性名","函数值");//设置属性的函数值

                4. $(element).attr({"属性名":"属性值","属性名":"属性值"});//给指定元素设置多个属性值

            removeAttr()方法的用法:

1. $(element).removeAttr("属性名");//移出对应的属性

理解如：

Js中：

window.onload = function () {

            //获取元素的src属性

            var url = document.getElementById("picture").getAttribute("src");

            console.log(url);

            //修改alt的属性值

            //document.getElementById("picture").setAttribute("alt", "这是通过JS代码动态改写的alt值");

            //移出属性

            //document.getElementById("picture").removeAttribute("alt");

        }

Jquery中：

$(document).ready(function () {

            ///获取元素的src属性

            var url = $("#picture").attr("src");

            console.log(url);

            //修改alt的属性值

            $("#picture").attr("alt", "这是通过jQuery代码动态改写的alt值");

            //移出属性alt属性

            $("#picture").removeAttr("alt");

            //同时修改多个属性

            $("#box").attr({ "class": "mybox", "index": "1" });//像这种花括号里面的是一个象

        });

若小文子忘了对象的定义，请看这里：

语法：{属性名1:属性值1,属性名2:属性值2,...}

    属性名可以加引号，也可以不加，建议不加

    如果要使用一些特殊的属性名，则必须加上引号

   

    属性名与属性值是一组键值对结构，

    键与值之间用":"冒号连接，对个键值对之间使用","逗号隔开

    如果一个属性之后没有其他的属性了，就不要写","逗号

Query属性 动态操作class

            1. $(element).addClass();//为每个匹配元素所要增加的一个或多个样式名

               - 方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上

            2. $(element).removeClass();//每个匹配元素移除的一个或多个用空格隔开的样式名

            3. $(element).toggleClass();

            //在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,

              取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类

 理解：

//添加类

        function addClassFun() {

            $("#box").addClass("bgGreen");//给div动态的添加bgGreen的类

            //如果添加多个类，每个类之间用空格隔开

            $("#box").addClass("bgGreen fontStyle");

 

            //document.getElementById("#box").className;

        }

        //移出类

        function removeClassFun() {

            $("#box").removeClass("bgGreen");

            //如果移出多个类，每个类之间用空格隔开

            $("#box").removeClass("bgGreen fontStyle");

        }

        //如果有bgGreen类则移出，如果没有则添加bgGreen类

        function toggleClassFun() {

            //$("#box").toggleClass("bgGreen");

            $("#box").toggleClass("bgGreen fontStyle");

        }

$(element).text()方法

            得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，

            或设置匹配元素集合中每个元素的文本内容为指定的文本内容。

            1. $(element).text() 获取element元素的文本内容

            2. $(element).text("textString") 用于设置匹配元素内容的文本

jQuery属性的val()方法

            $(ele).val()方法主要是用于处理表单元素的值,比如 input, select 和 textarea。

            //JavaScript中的value属性

            1. $(ele).val() 获取匹配的元素集合中第一个元素的当前值

            2. $(ele).val(value) 设置匹配的元素集合中每个元素的值

 

            通过$(ele).val()处理select元素， 当没有选择项被选中，它返回null

            $(ele).val()方法多用来设置表单的字段的值

            如果select元素有multiple（多选）属性，并且至少一个选择项被选中，

            $(ele).val()方法返回一个数组，这个数组包含每个选中选择项的值

理解：//ready方法的简写形式

        $(function () {

            var str = $("input[type='text']").val();

            console.log(str);

            $("input[type='text']").val("通过jQuery中的val方法动态赋值");

           

            var op = $("select").val();

            console.log(op);

        });

$(element).css()方法使用方法

            1. $(element).css("属性名") //获取匹配元素集合中的第一个元素的样式属性的计算值

            2. $(element).css(["属性名1","属性名2"]) //传递一个数组，返回一个对象结果

            3. $(element).css("属性","属性值") //设置元素的css样式

            4. $(element).css({"属性1":"属性值1","属性2":"属性值2"}) //可以传一个对象，同时设置多个样式

            5. $(element).css({属性名,function}) //可以传入一个回调函数，返回取到对应的值进行处理

理解：

//jquery中给元素添加点击事件

$(".box").click(function () {

                //alert("box的点击事件");

                //1.获取匹配元素集合中的第一个元素的样式属性的计算值

                var width = $(".box").css("width");

                var width1 = $(this).css("width");

                console.log(width1);//this

                // console.log(width);

                //2.传递一个数组，返回一个对象结果

                var styleObj = $(this).css(["width", "height"]);

                console.log(styleObj);

                console.log(styleObj.height);

                //3.设置元素的css样式

                $(".box").css("backgroundColor", "green");

                //4.可以传一个对象，同时设置多个样式

                $(".box").css({ "color": "#fff", "font-size": 20, "textAlign": "center", "width": "300px" });

                //5.可以传入一个回调函数，返回取到对应的值进行处理

                $(this).css({

                    height: function (index, value) {

                        console.log(index);

                        console.log(value);

                        return parseFloat(value) * 1.5;

                    }

                })

 

            });

$(element).width()和$(element).height()

       

            1.$(element).width() 获取或设置元素的宽度

            2.$(element).height() 获取或设置元素的高度

      

        $(function () {

            //width()方法获取的高度是内容区的宽度

            var width = $(".box").width();

            //height()方法获取的高度是内容区的高度

            var height = $(".box").height();

            console.log(width);

            //获取第一个匹配元素内部区域高度（包括内边距、不包括边框）。

            var innerWidth = $(".box").innerWidth();

            var innerHeight = $(".box").innerHeight();

            console.log(innerHeight);

            //获取第一个匹配元素外部高度（默认包括内边距和边框）。

            var outerWidth = $(".box").outerWidth();

            var outerHeight = $(".box").outerHeight();

            console.log(outerHeight);

        })

向元素内部追加内容

            js 方法实现

        //var box = document.getElementById("box");

        document.createElement("标签名称") 创建元素节点

        //var p = document.createElement("p");

        //console.log(p);

        //p.setAttribute("class", "par");

        //p.innerHTML = '<a href="#">content</a><span>234234234</span>';

        //box.appendChild(p);

 

        //jquery方式添加元素

        //$('<p class="par"><a href="#">content</a><span>234234234</span></p>').appendTo($("#wrapper"));

        //$(A).appendTo(B) 将新创建A的节点 追加到B(已经存在的父节点)中

        //向每个匹配的元素内部追加内容

        //$(B).append(A) 将新创建A的节点 追加到B(已经存在的父节点)中

        $("#wrapper").append('<p class="par">使用append()方法追加的节点</p>');

 

        //prepend()

        $("#wrapper").prepend('<p class="par">使用prepend()方法追加的节点123</p>');

        $('<p class="par">使用prependTo()方法追加的节点345</p>').prependTo($("#wrapper"));