jQuery（二）：属性、元素、尺寸位置操作、事件

jQuery

- 属性操作
- 内容文本值
- 元素操作
- 尺寸、位置操作
- 事件注册
- 事件处理
- 事件对象
- 拷贝对象

属性操作

1.获取固有属性语法

prop(‘‘属性’’)

固有属性就是html自带的，例如a元素里面的 href ，input 元素里面的 type。

2.设置固有属性语法

prop(‘‘属性’’, ‘‘属性值’’)

3.获取自定义属性语法

attr(‘‘属性’’) // 类似原生 getAttribute()

4.设置自定义属性语法

attr(‘‘属性’’, ‘‘属性值’’) // 类似原生 setAttribute()

5.数据缓存 data()

附加数据语法

data(‘‘name’’,‘‘value’’) // 向被选元素附加数据

获取数据语法

date(‘‘name’’) // 向被选元素获取数据

例如：

请添加图片描述
效果：

请添加图片描述

6.parents()选择器返回祖先元素

例如：
请添加图片描述

结果：

请添加图片描述

内容文本值

主要针对元素的内容还有表单的值操作。

1. 普通元素内容 html()（相当于原生inner HTML)

html() // 获取元素的内容

html(‘‘内容’’) // 设置元素的内容

2. 普通元素文本内容 text() (相当与原生 innerText)

text() // 获取元素的文本内容

text(‘‘文本内容’’) // 设置元素的文本内容

3. 表单的值 val()（相当于原生value)

val() // 获取表单的值

val(‘‘内容’’) // 设置表单的值

例如：

请添加图片描述

效果：

请添加图片描述

元素操作

1.遍历元素

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

语法格式一：

$(“div”).each(function (index, domEle) { xxx; }）

each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)

语法格式二：

$.each(object，function (index, element) { xxx; }）

$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
函数有2个参数： index 是每个元素的索引号; element 遍历内容

例如：

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function () {
            //each()方法遍历元素
            //方法一 $('').each(function(索引号,遍历内容){})
            var arr = ['red', 'blue', 'green']
            $('div').each(function (i, domEle) {
                //回调函数第一个值一定是索引号，索引号可以自己命名
                //回调函数第二个值是DOM元素对象，因此要先把jQuery换位DOM对象
                $(domEle).css('background', arr[i]);
                //实现方法是i从0开始，先进行deomEle第一个对象的操作，把它的元素背景颜色换位arr[0].
                //做完第一个在做相同操作的第二步，jQuery的each()方法和DOM里面的for循环相同

            })
            //方法二 $.each(遍历对象,function(索引号，遍历内容){})  第二种方法主要处理数据
            $.each(arr, function (i, ele) {
                console.log(i);
                console.log(arr);
            })
            $.each({
                name: 'hello',
                age: 18
            }, function (i, e) {
                console.log(i);//遍历的是属性名 name,age
                console.log(e);//遍历的是属性值  hello,18
            })
        })
    </script>