1200字范文 > jQuery—常用API（jQuery 属性操作 jQuery 文本属性值 jQuery 元素操作）

jQuery—常用API（jQuery 属性操作 jQuery 文本属性值 jQuery 元素操作）

时间：2019-12-29 12:41:29

1. jQuery 属性操作

1.1 设置或获取元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href，比如<input>元素里面的type。

获取属性语法

prop('属性')

设置属性语法

prop('属性', '属性值')

1.2 设置或获取元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给div添加index ='1'。

获取属性语法

attr('属性') // 类似原生 getAttribute()

设置属性语法

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

该方法也可以获取 H5 自定义属性

1.3 数据缓存 data()

data()方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

附加数据语法

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

获取数据语法

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

同时，还可以读取 HTML5 自定义属性data-index，得到的是数字型。

<body><a href="" title="都挺好">都挺好</a><input type="checkbox" checked><div index='1' data-index="2">我是div</div><span>123</span><script>$(function () {// 1. element.prop('属性名'); 获取元素固有的属性值console.log($('a').prop('href'));$('a').prop('title', '我们都挺好')$('input').change(function () {console.log($(this).prop('checked')); //勾选是true，不勾选是false})console.log($('div').prop('index')); //undefined (index 是自定义属性)// 2. 元素的自定义属性通过 attr() 获取console.log($('div').attr('index')); //1$('div').attr('index', 4);console.log($('div').attr('data-index')); //2// 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面$('span').data('uname', 'andy'); //给data设置unameconsole.log($('span').data('uname')); //andy (打印uname)// 这个方法获取data-index h5自定义属性第一个不要写data-开头而且返回的是数字型console.log($('div').data('index')); //2(数字型)})</script></body>

2. jQuery 文本属性值

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

2.1 普通元素内容 html()

相当于原生innerHTML。

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

html('内容') // 设置元素的内容

2.2 普通元素文本内容 text()

相当与原生innerText。

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

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

2.3 表单的值 val()

相当于原生value。

val() // 获取表单的值

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

<body><div><span>我是内容</span></div><input type="text" value="请输入内容"><script>// 1. 获取设置元素内容 html()console.log($('div').html()); //<span>我是内容</span>$('div').html('123'); //把我是内容改为了 123// 1. 获取设置元素文本内容 text()console.log($('div').text()); //123// 1. 获取设置表单值 val()console.log($('input').val()); //请输入内容$('input').val('123') //把请输入内容改为了 123</script></body>

3. jQuery 元素操作

主要是遍历、创建、添加、删除元素操作。

3.1 遍历元素

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

1.$('div').each()

$("div").each(function (index, domElem) {$(domElem);});

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

2.$('div').each()

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

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

其中，object对象可以是 DOM 对象，数组，一般对象等。

（1）当object为DOM 对象：

$.each($('li'), function (i, domElem) {$(domElem); // 转换为 jQuery 对象})

（2）当object为数组：

$.each(arr, function(inbdex, value) {// arr 为原数组// index 为当前索引// value 为当前数组值})

（3）当object为一般对象：

$.each(obj, function(key, value) {console.log(key, value);// obj: 对象// key: 对象的键// value: 对象的值})

<body><div>1</div><div>2</div><div>3</div><script>$(function () {// $('div').css('color', 'red')// 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）var sum = 0;// 1. each() 方法遍历元素 var arr = ['red', 'green', 'blue'];$('div').each(function (i, domElem) {// 回调函数第一个参数一定是索引号可以自己指定索引号号名称console.log(i);// 回调函数第二个参数一定是 dom元素对象也是自己命名console.log(domElem);// domElem.css('color', 'red'); //报错 $(domElem).css('color', arr[i]);sum += parseInt($(domElem).text()); //转换成字符型console.log(sum); //6// 2. $.each() 方法遍历元素主要用于遍历数据，处理数据$.each($('div'), function (index, ele) {console.log(index); //0 1 2 console.log(ele);})$.each(arr, function (i, ele) {console.log(i);//0 1 2 console.log(ele);})$.each({name: 'andy',age: 18}, function (i, ele) {console.log(i);//输出的是 name age 属性名console.log(ele);//输出的是 andy 18 属性值})})})</script></body>

3.2 创建元素

动态的创建了一个<li>。

$('<li></li>');

3.3 添加元素

1.内部添加

把内容放入匹配元素内部最后面，类似原生appendChild。

element.append('内容')

把内容放入匹配元素内部最前面。

element.prepend('内容')

2.外部添加

把内容放入目标元素后面

element.after('内容')

把内容放入目标元素前面

element.before('内容')

内部添加元素，生成之后，它们是父子关系。外部添加元素，生成之后，他们是兄弟关系。

3.4 删除元素

删除匹配的元素（本身）

element.remove()

删除匹配的元素集合中所有的子节点

element.empty()

清空匹配的元素内容

element.html('div')

remove删除元素本身。empt()和html('')作用等价，都可以删除元素里面的内容，只不过html还可以设置内容。

<body><ul><li>原先的li</li></ul><div class="text">我是原先的div</div><script>$(function () {// 1. 创建元素var li = $('<li>我是新创建的li</li>');// 2. 添加元素// （1）内部添加// $('ul').append(li); //内部的后面$('ul').prepend(li); //内部的前面// （2）外部添加var div = $('<div>我是后来的div</div>')// $('div').before(div); //外部的前面$('div').after(div); //外部的后面// 2. 删除元素// $('ul').remove(); //可以删除匹配的元素自杀// $('ul').empty(); //可以删除匹配的元素里面的子节点杀孩子$('ul').html(''); //可以删除匹配的元素里面的子节点杀孩子})</script></body>

4. jQuery 尺寸、位置操作

4.1 jQuery 尺寸

以上参数为空，则是获取相应值，返回的是数字型。如果参数为数字，则是修改相应值。参数可以不必写单位。

4.2 jQuery 位置

位置主要有三个：offset()、position()、scrollTop()/scrollLeft()

4.2.1offset()设置或获取元素偏移

offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。该方法有2个属性left、top。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离。可以设置元素的偏移：

offset({ top: 10, left: 30 })

4.2.2 position() 获取元素偏移

position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。该方法有2个属性left、top。position().top用于获取距离定位父级顶部的距离，position().left用于获取距离定位父级左侧的距离。该方法只能获取。