1.有关于属性的操作

项目源码

所谓的属性操作就是操作一系列的元素的属性，value啦class啦 .......特别是有关于input的操作是非常重要的。

为了完成后续有关于框架的高级骚操作，我们现在先来学习一下，jQuery的常用属性操作的三种 prop(),attr(),data()

（1）、元素固有的属性值prop()

• 所谓的固有的属性 ，比如a标签里面的href input里面的type等...
  我们看一下如何获取，还有如何设置

1. 获取:prpo('属性')
2. 设置属性：prpo('属性','属性值')
3. 非常的适合操作 表单的属性 比如 disabled/checked/selected

（2）、自定义属性值attr()

• 用于给元素添加自己定义的属性

1. 获取：attr('属性');
2. 设置：attr('属性','属性值')
   注意： 类似于原生的DOM>>>getAttribute(),该操作 适用于H5自定义属性

（3）、数据相关data/非常重要！/

• 这个非常的重要！特别是到了后期操作数据渲染的时候，还有框架的时候，前端的三大框架里面都有用到类似的实现逻辑

1. 附加（设置）数据的语法:data( 'name' ,'value')
2. 获取数据的语法 data('name').
   注意：这种方式也同样的适用于H5里面获取自定义的属性
   代码举例：

 都挺好我是div1232.有关于文本属性的操作常见的文本操作主要有三种 html() / text()/ val();分别对应元素DOM的innerHTML、innerText 、value的属性这些操作并没有什么难度，详细请参见下面的代码实例我是内容// 1. 获取设置元素内容 html()
        console.log($("div").html());
        // $("div").html("123");
        // 2. 获取设置元素文本内容 text()
        console.log($("div").text());
        $("div").text("123");
        // 3. 获取设置表单值 val()
        console.log($("input").val());
        $("input").val("123");" _ue_custom_node_="true">

3.有关于元素的操作

有关于元素的操作主要是：标签的遍历，创建，添加，删除等操作（简单的理解就是对标签的 增 删 改 查）

（1）、遍历元素

• jQuery隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。

1. 语法有两种
   语法1

注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

语法2

注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

1. 代码实例：

123

（2）、创建 修改 添加

• 有关于它们的操作都是非常的简单 ，具体的详细的操作 请去查看官方的API

jQuery方法操作元素的创建、添加、删除方法很多，则重点使用部分，如下：

语法总和

再啰嗦一下：以上只是元素的创建、添加、删除方法的常用方法，其他方法请参详API。

案例代码

原先的li我是原先的div我是后来创建的li");
      
            // 2. 添加元素
            // 	2.1 内部添加
            // $("ul").append(li);  内部添加并且放到内容的最后面 
            $("ul").prepend(li); // 内部添加并且放到内容的最前面
            //  2.2 外部添加
            var div = $("我是后妈生的");
            // $(".test").after(div);
            $(".test").before(div);
      
            // 3. 删除元素
            // $("ul").remove(); 可以删除匹配的元素 自杀
            // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
            $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
        })" _ue_custom_node_="true">

4.有关于尺寸位置的操作 （1）、有关于元素（尺寸）的操作//嘿嘿嘿 开车了，尺寸

• 语法详解

注意：有了这套 API 我们将可以快速获取和子的宽高，至于其他属性想要获取和设置，还要使用 css() 等方法配合。

• 具体的实例代码：

（2）、有关于位置的操作

最主要的还是我们的三个操作：offset()/ position()/ scrollTop()/ scrollLeft()/....当然了还要更多的骚操作

• 照例，我们先看一下语法

• 代码实例

返回顶部= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
            // 返回顶部
            $(".back").click(function() {
                // $(document).scrollTop(0);
                $("body, html").stop().animate({
                    scrollTop: 0
                });
                // $(document).stop().animate({
                //     scrollTop: 0
                // }); 不能是文档而是 html和body元素做动画
            })
        })" _ue_custom_node_="true">